<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-2">
                            <select class="form-control" wire:model="params.status">
                                <option value="">.:: Seleccionar estatus ::.</option>
                                @foreach (config('const.vq-quote-status') as $key => $value)
                                    <option value="{{ $key }}">{{ $value }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <select class="form-control" wire:model="params.agent">
                                <option value="">.:: Seleccionar agente ::.</option>
                                @foreach ($agentes as $key_agente => $agente)
                                    <option value="{{ $agente->admin_id }}">{{ $agente->admin->full_name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-2">
                            <input type="text" class="form-control" wire:model="params.search_date" id="search_date"
                                placeholder="Fecha de creación">
                        </div>
                        <div class="col-md-6">
                            <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>
                </div>
                <div class="card-content">
                    <div class="card-body">
                        @if ($items->count())
                        <div class="table-responsive">
                            <table class="table" style="min-height: 260px;">
                                <thead class="thead-light">
                                    <tr>
                                        <th style="width: 250px;">Fecha de creación</th>
                                        <th style="width: 200px;">Cédula / RNC</th>
                                        <th style="width: 250px;">Nombre del cliente</th>
                                        <th style="width: 250px;">Nombre del agente</th>
                                        <th style="width: 250px;">Aseguradora</th>
                                        <th style="width: 300px;">Vehículo</th>
                                        <th style="width: 200px;">Estatus</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->customer->document ?? '' }}</td>
                                        <td>{{ $item->customer->name }}</td>
                                        <td>{{ $item->admin->full_name }}</td>
                                        <td>{{ $item->insurer->name ?? '--' }}</td>
                                        <td>{{ $item->car->vehicle }}</td>
                                        <td>
                                            <span class="badge badge-{{ config('const.vq-quote-status-badges')[$item->status] }}">
                                                {{ config('const.vq-quote-status')[$item->status] }}
                                            </span>
                                        </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('public-link', $item->pdf_file) }}" target="_blank"
                                                        class="dropdown-item text-primary">
                                                        <i class="fas fa-link mr-1"></i>
                                                        Enlace publico
                                                    </a>
                                                    @if ($item->status == 'pending')
                                                        <button
                                                            wire:click="showModalAcept({{ $item->id }})"
                                                            class="dropdown-item text-success">
                                                            <i class="far fa-thumbs-up mr-1"></i> Aceptar
                                                        </button>
                                                        <button
                                                            wire:click="reject({{ $item->id }})"
                                                            class="dropdown-item text-danger">
                                                            <i class="far fa-thumbs-down mr-1"></i> Rechazar
                                                        </button>
                                                        {{-- <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> --}}
                                                    @endif
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <th colspan="7">
                                            {{ $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>

    {{-- Modal  --}}
    <div wire:ignore.self class="modal modal-vq_quotes fade modalVqQuotes" id="modalVqQuotes" data-backdrop="static"
        tabindex="-1" role="dialog" aria-labelledby="staticBackdrop" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document" style="max-width: 500px;">
            <div class="modal-content h-100">

                @include('parts.overlay', ['target' => 'closeModal, send'])

                <div class="modal-header">
                    <h3 class="modal-title" id="calendarModalLabel">Aseguradoras</h3>
                    <button type="button" class="closeModal" aria-label="Close" wire:click="closeModal">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body p-0">
                    <form wire:submit.prevent="send" autocomplete="off">
                        <div class="row match-height">
                            <div class="col-12">
                                <div class="card m-0">
                                    {{-- <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 mt-3">
                                                <div class="col-12">
                                                    <div class="form-group">
                                                        <label for="comments">Seleccionar aseguradora:</label>
                                                        <select class="form-control" wire:model="vq_insurer_id">
                                                            <option value="">.:: Seleccionar ::.</option>
                                                            @foreach ($insurers as $key_insurer => $insurer)
                                                                <option value="{{ $insurer->id }}">{{ $insurer->name }}</option>
                                                            @endforeach
                                                        </select>
                                                        @error('vq_insurer_id') <span class="text-danger">{{ $message }}</span>@enderror
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row mt-5">
                                                <div class="col-12 d-flex justify-content-end">
                                                    <button id="btn-submit" type="button" class="btn btn-primary mr-1 mb-1 bg-[#1b3d93]" wire:loading.attr="disabled" wire:click="accept">
                                                        <i class="far fa-save"></i>
                                                        Guardar
                                                    </button>
                                                    <button href="#" class="btn btn-light-secondary mr-1 mb-1 closeModal" type="button" wire:click="closeModal">
                                                        <i class="fas fa-ban"></i>
                                                        Cancelar
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

</div>

@section('js')
    @include('parts.js-destroy')
    @include('parts.js-preview')
    @include('parts.js-search')

    <script>
        document.addEventListener('livewire:load', function() {

            window.addEventListener('show-modal-acept', event => {
                $('#modalVqQuotes').modal('show');
            });

            window.addEventListener('closeModal', event => {
                $('#modalVqQuotes').modal('hide');
            });

            quote_init();

            function quote_init() {
                $('#search_date').daterangepicker({
                    autoUpdateInput: false,
                    "locale": date_locale
                }, function(start, end, label) {});

                $(document).on('change', '#search_date', function() {
                    @this.set('params.search_date', $(this).val());
                });

                $('#search_date').on('apply.daterangepicker', function(ev, picker) {
                    $(this).val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format('DD/MM/YYYY'));
                    @this.set('params.search_date', $(this).val());
                });

                $('#search_date').on('cancel.daterangepicker', function(ev, picker) {
                    $(this).val('');
                    @this.set('params.search_date', $(this).val());
                });

            }

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

        });
    </script>


@endsection

