<div>
    @include('parts.overlay', ['target' => 'checkInsurer, checkDeductible'])

    <form wire:submit.prevent="{{ $form['action'] }}" autocomplete="off">
        <div class="row match-height mt-5">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Datos del vehículo</h4>
                    </div>

                    <div class="card-content">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-4">
                                    <div class="form-group">
                                        <label for="name">Nombre del item</label>
                                        <input type="text" class="form-control" wire:model="data.name" placeholder="Nombre del item">
                                        @error('data.name') <span class="text-danger">{{ $message }}</span>@enderror
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="form-group">
                                        <label for="type">Tipo de valor admitido</label>
                                        <select wire:model="data.type" class="form-control @error('data.type') is-invalid @enderror"
                                            id="type">
                                            <option value="">::. Seleccione .::</option>
                                            @foreach (config('const.vq-items-type') as $key => $value)
                                                <option value="{{ $key }}" {{ $data['name']==$key ? 'selected' : ''}}>{{ $value }}</option>
                                            @endforeach
                                        </select>
                                        @error('data.type') <span class="text-danger">{{ $message }}</span> @enderror
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="form-group">
                                        <label for="order">Orden para mostrar</label>
                                        <input type="number" class="form-control" wire:model="data.order" placeholder="Orden para mostrar" id="order" min="1">
                                        @error('data.order') <span class="text-danger">{{ $message }}</span>@enderror
                                    </div>
                                </div>

                                <div class="col-4">
                                    <div class="form-group">
                                        <label for="better_to_compare">Mejor (para comprador)</label>
                                        <select wire:model="data.better_to_compare" class="form-control @error('data.better_to_compare') is-invalid @enderror"
                                            id="better_to_compare">
                                            <option value="">::. Seleccione .::</option>
                                            @foreach (config('const.vq-items-better-to-compare') as $key => $value)
                                                <option value="{{ $key }}" {{ $data['name']==$key ? 'selected' : ''}}>{{ $value }}</option>
                                            @endforeach
                                        </select>
                                        @error('data.better_to_compare') <span class="text-danger">{{ $message }}</span> @enderror
                                    </div>
                                </div>

                                <div class="col-4">
                                    <div class="form-group">
                                        <label for="status">Estatus</label>
                                        <select wire:model="data.status" class="form-control @error('data.status') is-invalid @enderror"
                                            id="status">
                                            <option value="">::. Seleccione .::</option>
                                            @foreach (config('const.vq-items-status') as $key => $value)
                                                <option value="{{ $key }}" {{ $data['name']==$key ? 'selected' : ''}}>{{ $value }}</option>
                                            @endforeach
                                        </select>
                                        @error('data.status') <span class="text-danger">{{ $message }}</span> @enderror
                                    </div>
                                </div>

                                @if ($data['type'])
                                    <div class="col-4">
                                        @switch($data['type'])
                                            @case('numeric_decimals')
                                                <div class="form-group mb-0">
                                                    <label for="name" class="text-capitalize" title="Valor predeterminado">Monto (Numérico decimal) - Valor predeterminado</label>
                                                    <input
                                                    type="text"
                                                    placeholder="$ 0"
                                                    class="form-control numeric-decimal"
                                                    {{-- @if (!$item['select']) disabled @endif --}}
                                                    {{-- data-item-id="{{ $item['id'] }}" --}}
                                                    {{-- data-insurer-id="{{ $insurer['id'] }}" --}}
                                                    {{-- data-type-value="value_type" --}}
                                                    value="{{ $data['default_value'] ?? '' }}"
                                                    >
                                                    @error('data.default_value')
                                                        <span class="text-danger">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                                @break
                                            @case('numeric')
                                                <div class="form-group mb-0">
                                                    <label for="name" class="text-capitalize">Monto (Numérico) - Valor predeterminado</label>
                                                    <input
                                                    type="text"
                                                    placeholder="$ 0"
                                                    class="form-control numeric-money"
                                                    {{-- @if (!$item['select']) disabled @endif --}}
                                                    {{-- data-item-id="{{ $item['id'] }}" --}}
                                                    {{-- data-insurer-id="{{ $insurer['id'] }}" --}}
                                                    {{-- data-type-value="value_type" --}}
                                                    value="{{ $data['default_value'] ?? '' }}"

                                                    >
                                                    @error('data.default_value')
                                                        <span class="text-danger">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                                @break
                                            @case('percentage')
                                                <div class="form-group mb-0">
                                                    <label for="name" class="text-capitalize">Monto (Porcentaje) - Valor predeterminado</label>
                                                    <input
                                                    placeholder="0 %"
                                                    type="text"
                                                    class="form-control percent"
                                                    {{-- @if (!$item['select']) disabled @endif --}}
                                                    {{-- data-item-id="{{ $item['id'] }}" --}}
                                                    {{-- data-insurer-id="{{ $insurer['id'] }}" --}}
                                                    {{-- data-type-value="value_type" --}}
                                                    value="{{ $data['default_value'] ?? '' }}"

                                                    >
                                                    @error('data.default_value')
                                                        <span class="text-danger">{{ $message }}</span>
                                                    @enderror
                                                </div>
                                                @break
                                            @case('yesno')
                                                <div class="form-group mb-0 text-center">
                                                    <div>
                                                        <label for="name" class="text-capitalize">Monto (Si/No) - Valor predeterminado</label>
                                                    </div>
                                                    <label class="checkbox-inline checkbox-bootstrap checkbox-lg">
                                                        <input
                                                        type="checkbox"
                                                        class="click_checkbox"
                                                        {{-- @if (!$item['select']) disabled @endif --}}
                                                        {{-- data-item-id="{{ $item['id'] }}" --}}
                                                        {{-- data-insurer-id="{{ $insurer['id'] }}" --}}
                                                        {{-- data-type-value="value_type" --}}
                                                        {{ ($data['default_value'] ?? '') == 'yes' ? 'checked' : 'unchecked'  }}
                                                        >
                                                        <span class="checkbox-placeholder"></span>
                                                    </label>
                                                    <div class="text-center">
                                                        @error('data.default_value')
                                                            <span class="text-danger">{{ $message }}</span>
                                                        @enderror
                                                    </div>
                                                </div>
                                                @break
                                            @default
                                        @endswitch
                                    </div>
                                @endif

                                <div class="col-12">
                                    <div class="form-group">
                                        <label for="comments">Comentario</label>
                                        <textarea class="form-control" id="comments" wire:model="data.comments" placeholder="Comentario del item" rows="5"></textarea>
                                        @error('data.comments') <span class="text-danger">{{ $message }}</span>@enderror
                                    </div>
                                </div>

                                <div class="col-12 my-3">
                                    <h5 class="d-block">Activo para las siguientes aseguradoras</h5>
                                </div>

                                @forelse ($list_insurers as $insurer_key => $insurer)
                                  <div class="col-12 my-1">
                                        <div class="row min-h-50">
                                            <div class="col-2 d-flex align-items-center">
                                                <div class="custom-control custom-checkbox">
                                                    <input type="checkbox" {{ $insurer['status'] ? 'checked' : '' }} class="custom-control-input customCheck" id="customCheck1-{{ $insurer['id'] }}" wire:click="checkInsurer({{ $insurer['id'] }})">
                                                    <label class="custom-control-label" for="customCheck1-{{ $insurer['id'] }}">{{ ucfirst($insurer['name']) }}</label>
                                                </div>
                                            </div>

                                            <div class="col-2 pr-0 w-14 d-flex align-items-center">
                                                <div class="custom-control custom-checkbox">
                                                    <input type="checkbox" class="custom-control-input deductible" id="customCheck2-{{ $insurer['id'] }}" @if (!$insurer['status'] && !$insurer['deductible']) disabled unchecked @else @if ($insurer['deductible']) checked @endif  @endif wire:click="checkDeductible({{ $insurer['id'] }})">
                                                    <label class="custom-control-label" for="customCheck2-{{ $insurer['id'] }}">Con deducible?</label>
                                                </div>
                                            </div>

                                            @if ($insurer['status'] && $insurer['deductible'])
                                                <div class="col-4 px-0 block_list_type_{{ $insurer['id'] }}">
                                                    <div class="form-group mb-0">
                                                        <label for="list_type_{{ $insurer['id'] }}">Tipo de valor admitido</label>
                                                        <select wire:model="list_insurers.{{ $insurer_key }}.type" class="form-control d-inline w-auto @error('list_insurers.{{ $insurer_key }}.type') is-invalid @enderror"
                                                            id="list_type_{{ $insurer['id'] }}">
                                                            <option value="">::. Seleccione .::</option>
                                                            @foreach (config('const.vq-items-type') as $key_item_type => $value_item_type)
                                                                <option value="{{ $key_item_type }}" {{ $data['name']==$key_item_type ? 'selected' : ''}}>{{ $value_item_type }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    @isset($list_insurers_errors[$insurer_key]['type'])
                                                            <div>
                                                                <span class="text-danger">{{ $list_insurers_errors[$insurer_key]['type'] }}</span>
                                                            </div>
                                                        @endisset
                                                </div>

                                                <div class="col-4 px-0 block_list_better_compare_{{ $insurer['id'] }}">
                                                    <div class="form-group mb-0 w-75 d-flex align-items-center">
                                                        <label for="list_better_to_compare_{{ $insurer['id'] }}" class="w-75 mb-0">Mejor (para comprador)</label>
                                                        <select wire:model="list_insurers.{{ $insurer_key }}.better_to_compare" class="form-control d-inline @error('list_insurers.{{ $insurer_key }}.better_to_compare') is-invalid @enderror"
                                                            id="list_better_to_compare_{{ $insurer['id'] }}">
                                                            <option value="">::. Seleccione .::</option>
                                                            @foreach (config('const.vq-items-better-to-compare') as $key_better_compare => $value_better_compare)
                                                                <option value="{{ $key_better_compare }}" {{ $data['name']==$key_better_compare ? 'selected' : ''}}>{{ $value_better_compare }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                    @isset($list_insurers_errors[$insurer_key]['better_to_compare'])
                                                        <div>
                                                            <span class="text-danger">{{ $list_insurers_errors[$insurer_key]['better_to_compare'] }}</span>
                                                        </div>
                                                    @endisset
                                                </div>
                                            @endif
                                        </div>
                                  </div>

                                @empty

                                @endforelse


                                <div class="col-12 py-5 my-5"></div>
                                <div class="col-12 d-flex justify-content-end mt-5">
                                    <button id="btn-submit" type="submit" class="btn btn-primary mr-1 mb-1" wire:loading.attr="disabled"
                                        wire:target="{{ $form['action'] }}">
                                        <i class="far fa-save"></i>
                                        {{ $form['label'] }}
                                    </button>
                                    <a href="{{ route('vehicle-quote.items.index') }}" class="btn btn-light-secondary mr-1 mb-1">
                                        <i class="fas fa-ban"></i>
                                        Cancelar
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <!--begin: Modal -->
    @livewire('components.vq-brands-modal')
    @livewire('components.vq-car-type-use-modal')
    <!--end: Modal-->
</div>

{{-- Script para user_main --}}
@push('styles')
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.2.0/css/datepicker.min.css" rel="stylesheet">
    <style>
        .select2-container .select2-selection--single {height: 37px !important;}
        .select2-container--default .select2-selection--single .select2-selection__arrow { height: 37px; }
        .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 37px; }

        .w-14 {
            max-width: 14%;
        }

        .min-h-50 {
            min-height: 40px;
        }

        :root {
        /* larger checkbox */
        }
        :root label.checkbox-bootstrap input[type=checkbox] {
        /* hide original check box */
        opacity: 0;
        position: absolute;
        /* find the nearest span with checkbox-placeholder class and draw custom checkbox */
        /* draw checkmark before the span placeholder when original hidden input is checked */
        /* disabled checkbox style */
        /* disabled and checked checkbox style */
        /* when the checkbox is focused with tab key show dots arround */
        }
        :root label.checkbox-bootstrap input[type=checkbox] + span.checkbox-placeholder {
        width: 14px;
        height: 14px;
        border: 1px solid;
        border-radius: 3px;
        /*checkbox border color*/
        border-color: #737373;
        display: inline-block;
        cursor: pointer;
        vertical-align: middle;
        text-align: center;
        }
        :root label.checkbox-bootstrap input[type=checkbox]:checked + span.checkbox-placeholder {
        background: #153073;
        }
        :root label.checkbox-bootstrap input[type=checkbox]:checked + span.checkbox-placeholder:before {
        display: inline-block;
        position: relative;
        vertical-align: text-top;
        width: 5px;
        height: 9px;
        /*checkmark arrow color*/
        border: solid white;
        border-width: 0 2px 2px 0;
        /*can be done with post css autoprefixer*/
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        content: "";
        }
        :root label.checkbox-bootstrap input[type=checkbox]:disabled + span.checkbox-placeholder {
        background: #ececec;
        border-color: #c3c2c2;
        }
        :root label.checkbox-bootstrap input[type=checkbox]:checked:disabled + span.checkbox-placeholder {
        background: #d6d6d6;
        border-color: #bdbdbd;
        }
        :root label.checkbox-bootstrap input[type=checkbox]:focus:not(:hover) + span.checkbox-placeholder {
        outline: 1px dotted black;
        }
        :root label.checkbox-bootstrap.checkbox-lg input[type=checkbox] + span.checkbox-placeholder {
        width: 26px;
        height: 26px;
        border: 2px solid;
        border-radius: 5px;
        /*checkbox border color*/
        border-color: #737373;
        }
        :root label.checkbox-bootstrap.checkbox-lg input[type=checkbox]:checked + span.checkbox-placeholder:before {
        width: 9px;
        height: 15px;
        /*checkmark arrow color*/
        border: solid white;
        border-width: 0 3px 3px 0;
        }
    </style>
@endpush
@section('js')
    @include('parts.js-preview')
@endsection
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.2.0/js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {

        function init_items_form() {

            Inputmask().mask(document.querySelectorAll("input"));

            // format inputmask no decimales only numbers entero
            $('.numeric-money').inputmask('numeric', {
                onKeyDown: function (e) {
                    if(e.keyCode == 109 || e.keyCode == 107) {
                        e.preventDefault();
                        return false;
                    }
                },
                radixPoint: ".",
                groupSeparator: ",",
                digits: 0,
                autoGroup: true,
                prefix: '$ ', //Space after $, this will not truncate the first character.
                rightAlign: false,
                removeMaskOnSubmit: true,
            });

            //
            $('.numeric-money').off('change');
            $('.numeric-money').on('change', function () {
                let value = $(this).inputmask('unmaskedvalue');
                console.log(value);
                if (value == '') {
                    $(this).val(0);
                }

                @this.set('data.default_value', value);
            });

            // format price input mask (money) numeric
            $('.numeric-decimal').inputmask('decimal', {
                onKeyDown: function (e) {
                    if(e.keyCode == 109 || e.keyCode == 107) {
                        e.preventDefault();
                        return false;
                    }
                },
                radixPoint: ".",
                groupSeparator: ",",
                digits: 2,
                autoGroup: true,
                prefix: '$ ', //Space after $, this will not truncate the first character.
                rightAlign: false,
                removeMaskOnSubmit: true,
            });

            //
            $('.numeric-decimal').off('change');
            $('.numeric-decimal').on('change', function () {
                let value = $(this).inputmask('unmaskedvalue');
                if (value == '') {
                    $(this).val(0);
                }

                @this.set('data.default_value', value);
            });


            // format percent input mask numeric
            $('.percent').inputmask('percentage', {
                onKeyDown: function (e) {
                    if(e.keyCode == 109 || e.keyCode == 107) {
                        e.preventDefault();
                        return false;
                    }
                },
                radixPoint: ".",
                groupSeparator: ",",
                digits: 0,
                max: 100,
                autoGroup: true,
                suffix: ' %', //Space after $, this will not truncate the first character.
                rightAlign: false,
                removeMaskOnSubmit: true,
            });

            //
            $('.percent').off('change');
            $('.percent').on('change', function () {
                let value = $(this).inputmask('unmaskedvalue');
                if (value == '') {
                    $(this).val(0);
                }

                @this.set('data.default_value', value);
            });

            //click_checkbox
            $('.click_checkbox').off('change');
            $('.click_checkbox').on('change', function () {
                let check = $(this).is(':checked');
                if (check) {
                    check = 'yes';
                } else {
                    check = 'no';
                }
                @this.set('data.default_value', check);
            });
        }

        init_items_form();

        Livewire.hook('message.processed', (message, component) => { init_items_form(); });

        const element = $('#mydiv');
        element.animate({
            scrollTop: element.prop("scrollHeight")
        }, 500);

    });
</script>
@endpush
