@extends('crudbooster::admin_template')
@push('head')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<style>
    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: #000;
        border: none;
    }x
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove,
    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
        color: #fff;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__rendered {
        padding: 2px 5px 5px;
        width: 100%;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 20px;
    }
    .panel-heading span {
        font-weight: 800;
        border-bottom: 2px solid #09b0c5;
        padding: 0;
        font-size: 15px;
    }
</style>
@endpush
@section('content')
    <div class='panel panel-default efit-add-product'>
        <div class='panel-heading eap-box text-bold'>Add DcIcon Direction</div>
        <form method='post' class="addUser" action='{{CRUDBooster::mainpath('add-save')}}' enctype="multipart/form-data">
            <div class='panel-body'>
                @csrf

                <div class="col-md-12">
                    <div class="form-group " id="form-group-product_name">
                        <label class="control-label">
                            Select Icon Category
                            <span class="text-danger" title="This field is required">*</span>
                        </label>
                        <select class="form-control selectpicker" id="dc_icon_category_id" name="dc_icon_category_id[]" data-live-search="true" multiple required>
                            @foreach ($icon_categories as $category)
                                <option value="{{ $category->id }}"> {{$category->de_name}} </option>
                            @endforeach
                        </select>

                        <div class="text-danger"> {{$errors->has('dc_icon_category_id')? $errors->first("dc_icon_category_id") :"" }} </div>
                        <p class="help-block"></p>
                    </div>
                </div>
                <div class="form-group col-sm-6">
                    <div class="form-group">
                        <label class="control-label"> Name(DE)
                            <span class="text-danger" title="This field is required">*</span>
                        </label>
                        <input type="text" class="form-control" placeholder="Enter Name(DE)" name="de_name" id="de_name" value="{{ old('de_name') }}" required>
                        @if ($errors->has('de_name'))
                            <span class="invalid feedback"role="alert">
                                <strong class="text-danger">{{ $errors->first('de_name') }}.</strong>
                            </span>
                        @endif
                    </div>
                </div>
                <div class="form-group col-sm-6">
                    <div class="form-group">
                        <label class="control-label"> Name(EN)
                            <span class="text-danger" title="This field is required">*</span>
                        </label>
                        <input type="text" class="form-control" placeholder="Enter Name(EN)" name="en_name" id="en_name" value="{{ old('en_name') }}" required>
                        @if ($errors->has('en_name'))
                            <span class="invalid feedback"role="alert">
                                <strong class="text-danger">{{ $errors->first('en_name') }}.</strong>
                            </span>
                        @endif
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="form-group " id="form-group-product_name">
                        <label class="control-label">
                            Map System Direction
                            <span class="text-danger" title="This field is required">*</span>
                        </label>
                        <select class="form-control selectpicker" id="direction_map_slug" name="direction_map_slug" data-live-search="true" required>
                            @foreach ($icon_directions as $key => $direction)
                                <option value="{{ $key }}"> {{ $direction }} </option>
                            @endforeach
                        </select>

                        <div class="text-danger"> {{ $errors->has('dc_icon_category_id')? $errors->first("dc_icon_category_id") : "" }} </div>
                        <p class="help-block"></p>
                    </div>
                </div>
            </div>
            <div class='panel-footer'>
                <a href="{{ CRUDBooster::mainpath() }}" class="btn btn-default"><i class="fa fa-chevron-circle-left"></i> Back</a>
                <input type='submit' class='btn btn-primary' value='Save' />
            </div>
        </form>
    </div>
 @endsection

 @push('bottom')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
    <script>
         $(function(){
            $('#dc_icon_category_id').select2({
                placeholder: "Select Icon Category",
                width:"100%",
            });
            $('#direction_map_slug').select2({
                placeholder: "Select Direction",
                width:"100%",
            });
        })
    </script>
 @endpush