@extends('layouts.app')
@section('styles')
    <link rel="stylesheet" href="{{ URL::to('/') }}/js/vendor/jquery-palette-color-picker/palette-color-picker.css">
    <style>
        .navbar,
        aside {
            /*display: none;*/
        }

        form label {
            /*display: block;*/

        }
    </style>
@endsection
@section('content')
    @if(session()->has('message'))
        <div class="alert alert-success alert-dismissable">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>

            {{ session()->get('message') }}
        </div>
    @endif
    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    <h3>
        {{ __('s.edit_unit') }}: <strong></strong>

    </h3>
    @if($errors->any())
        <h4>{{$errors->first()}}</h4>
    @endif
    <form action="{{URL::to('/')}}/admin/unit" method="POST">
        <div class="form-group">
            <label for="">{{ __('s.name') }}</label><br>
            <input type="text" name="name" value="{{old('name')}}">
        </div>
        <div class="form-group">
            <label for="">{{ __('s.slug') }} </label><br>

            <input type="text" name="slug" value="{{old('slug')}}">
        </div>
        <div class="form-group">
            <label for="">{{ __('s.color') }}</label><br>
            <input type="text" name="color" id="color" value="{{old('color')}}"
                   data-palette='[{"#EE7373":"#EE7373"},{"#6597AA":"#6597AA"},{"#88BE84":"#88BE84"},{"#84BEB1":"#84BEB1"},{"#EE7373":"#EE7373"},{"#6597AA":"#6597AA"},{"#88BE84":"#88BE84"}]'
                   value="">
        </div>
        <div class="form-group">
            <label for="">{{ __('s.unit_type') }}</label><br>

            <select name="unitType_id" id="">
                @foreach($unitTypes as $ut)
                    <option value="{{ $ut->id }}">{{ $ut->name }}</option>
                @endforeach
            </select>
        </div>
        <input type="hidden" name="_token" value="{{ csrf_token() }}">
        <input type="hidden" name="id" value="">


        <input type="button" onclick="form.submit()" class="btn btn-default" value=" {{ __('s.send') }}">

    </form>
    <br><br>


@endsection
@section('scripts')
    <script src="{{ URL::to('/') }}/js/vendor/jquery-palette-color-picker/palette-color-picker.js"></script>
    <script>
        $(document).ready(function(){

            $('[name="color"]').paletteColorPicker({
//                colors: [
//                    {"primary": "#E91E63"},
//                    {"primary_dark": "#C2185B"},
//                    {"primary_light": "#F8BBD0"},
//                    {"accent": "#CDDC39"},
//                    {"primary_text": "#212121"},
//                    {"secondary_text": "#727272"},
//                    {"divider": "#B6B6B6"}
//                ],
                // Add custom class to the picker
                custom_class: 'double',
                // Force the position of picker's bubble
                position: 'downside', // default -> 'upside'
                // Where is inserted the color picker's button, related to the input
                insert: 'after', // default -> 'before'
                // Don't add clear_btn
                clear_btn: 'last', // null -> without clear button, default -> 'first'
                // Timeout for the picker's fade out in ms
                timeout: 2000, // default -> 2000
                // Forces closin all bubbles that are open before opening the current one
                close_all_but_this: false, // default is false
                // Sets the input's background color to the selected one on click
                // seems that some users find this useful ;)
                set_background: false, // default is false

                // Events
                // Callback on bubbl show
                onbeforeshow_callback: function( what ) {
                    console.log(what);
                },

                // Callback on change value
                onchange_callback: function( clicked_color ) {
                    console.log(clicked_color);
                }

            })

        });

    </script>


@endsection