<div>
    @include('parts.loading')
    @include('parts.alerts')


    <div class="row mt-5">
        <div class="col-12">
            <div class="card">
                <div class="card-header bg-gray-100">
                    <div class="form-row form-row-filter">
                        <div class="col-md-5">
                            <div class="wrapper-search">
                                <input type="text" id="search" class="form-control" wire:model.debounce.1000ms="params.search" placeholder="Buscar...">
                                @if (!empty($search))
                                <button type="button" class="btn" id="btn-search">
                                    <i class="fa fa-times"></i>
                                </button>
                                @endif
                            </div>
                        </div>
                        <div class="col-md-2">
                            <select class="form-control kt-select2" wire:model="params.insurer_id" id="insurer_id">
                                <option value="">.:: Seleccionar aseguradora ::.</option>
                                @foreach ($insurers_items as $key => $value)
                                    <option value="{{ $value['id'] }}">{{ $value['name'] }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <select class="form-control" wire:model="params.status_id">
                                <option value="">.:: Seleccionar estatus ::.</option>
                                @foreach (config('const.vq-items-status') as $key => $value)
                                    <option value="{{ $key }}">{{ $value }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-3">
                            <a href="{{ route('vehicle-quote.items.create') }}" class="btn btn-primary btn-block float-right">
                                <i class="fas fa-plus"></i>
                                Nuevo item
                            </a>
                        </div>
                    </div>
                </div>
                <div class="card-content">
                    <div class="card-body">
                        @if ($items->count())
                        <div class="table-responsive">
                            <table class="table">
                                <thead class="thead-light">
                                    <tr>
                                        <th style="width: 250px;">Fecha de creación</th>
                                        <th style="width:100px;">Orden</th>
                                        <th>Nombre del item</th>
                                        <th style="width:150px;">Estatus</th>
                                        <th style="width:300px;">Aseguradoras</th>
                                        <th class="text-center" style="width: 80px;">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($items as $item)
                                    <tr>
                                        <td>{{ $item->datetime_formatted }}</td>
                                        <td>{{ $item->order }}</td>
                                        <td>{{ $item->name }}</td>
                                        <td>{{ config('const.vq-items-status')[$item->status] }}</td>
                                        <td>
                                            @foreach ($item->insurerItems as $insurerItem)
                                                <span class="d-block">{{ $insurerItem->insurer->name }} <span style="font-weight: 900;">-</span> {{ config('const.vq-items-deductible')[$insurerItem->deductible] }}</span>
                                            @endforeach
                                        </td>
                                        <td class="text-center">
                                            <div class="btn-group btn-group-sm">
                                                <a href="#" class="dropdown-toggle" data-toggle="dropdown"
                                                    aria-haspopup="true" aria-expanded="false">
                                                    <i class="fas fa-ellipsis-h"></i>
                                                </a>
                                                <div class="dropdown-menu dropdown-menu-right">
                                                    <a  href="{{ route('vehicle-quote.items.edit', $item->id) }}"
                                                        class="dropdown-item btn-link">
                                                        <i class="fas fa-pencil-alt mr-1"></i> Editar
                                                    </a>
                                                    <button wire:click="$emit('triggerDestroy',{{ $item->id }})"
                                                        class="dropdown-item btn-link text-danger">
                                                        <i class="far fa-trash-alt mr-1"></i> Eliminar
                                                    </button>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <th colspan="6">
                                            {{ $items->links() }}
                                        </th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                        @else
                        <div class="alert alert-secondary" role="alert">
                            No se encontraron resultados
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

</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; }
    </style>
@endpush
@section('js')
    @include('parts.js-preview')
    @include('parts.js-destroy')
@endsection
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {

        function init() {
            // Not STYLES
            $('.kt-select2').select2();

            $('#insurer_id').off('change');
            $('#insurer_id').on('change', function (e) {
                $("#insurer_id").select2({
                    placeholder: "Seleccione",
                    allowClear: true
                });
                @this.set('params.insurer_id', $(this).val());
            });

        }

        init()

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

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

    });
</script>
@endpush

