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

    <div class="modalVqAcceptQuoteModal">
        <div class="container py-0 flex justify-end items-center divide-x text-[#0A3D66] text-[16px]">
            <span class="py-2 pr-2 text-[14px] font-myriadpro-regular">Reclamaciones: <strong><a href="tel:8093646205" class="text-[16px] font-myriadpro-regular">809.364.6205</a></strong></span>
            <span class="py-2 px-3 hover:bg-[#0A3D67] hover:text-[#ffffff]"><a href="https://www.facebook.com/FinoConsultores" target="_blank" rel="noopener noreferrer" class="hover:text-[#ffffff]"><i class="fab fa-facebook-f text-[18px] hover:text-[#ffffff]"></i></a></span>
            <span class="py-2 px-3 hover:bg-[#0A3D67] hover:text-[#ffffff]"><a href="https://twitter.com/FINOCONSULTORES" target="_blank" rel="noopener noreferrer" class="hover:text-[#ffffff]"><i class="fab fa-twitter text-[18px] hover:text-[#ffffff]"></i></a></span>
            <span class="py-2 px-3 hover:bg-[#0A3D67] hover:text-[#ffffff]"><a href="https://www.instagram.com/finoconsultores/" target="_blank" rel="noopener noreferrer" class="hover:text-[#ffffff]"><i class="fab fa-instagram text-[18px] hover:text-[#ffffff]"></i></a></span>
            <span class="py-2 px-3 border-r-1 border-slate-300 hover:bg-[#0A3D67] hover:text-[#ffffff]"><a href="https://www.youtube.com/user/FinoConsultores" target="_blank" rel="noopener noreferrer" class="hover:text-[#ffffff]"><i class="fab fa-youtube text-[18px] hover:text-[#ffffff]"></i></a></span>
        </div>
    </div>
    <div class="p-container mb-5" x-data="{}">
        {{-- header --}}
        <div class="p-header bg-[#0A3D67] h-[218px]">
            <header class="container flex items-center justify-between h-[80%]">
                <div class="p-header__logo">
                    <img src="{{ asset('images/public-link/logo-public.svg') }}" alt="logo">
                </div>
                <div class="p-header__title">
                    <h1 class="h1 text-white font-semibold lg:text-[53px] md:text-[35px] text-[25px] font-myriadpro-regular">Cotización de vehículo de motor</h1>
                </div>
            </header>
        </div>

        {{-- main --}}
        <div class="p-main container mt-[-40px]">

            {{-- first card  --}}
            <div class="row border-2 relative w-100 m-0">
                <div class="col-12 md-6 col-lg-6 py-5 lg:px-20 bg-[#F8F8F8]">
                    <div class="p-main__content">
                        <div class="p-main__content__title mb-3">
                            <h3 class="h3 text-[#0A3D66] font-bold text-[28px] font-myriadpro-regular">Datos del Cliente</h3>
                        </div>
                        <div class="row">
                            <div class="col-4 py-2 border-t-2 border-r-2">
                                <p class="text-[18px] text-[#597179] font-myriadpro-regular">Cliente</p>
                            </div>
                            <div class="col-8 py-2 border-t-2">
                                <p class="text-[18px] text-[#597179] font-semibold font-myriadpro-regular">{{ ucfirst($vq_quote->customer->name) ?? '' }}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-4 py-2 border-y-2 border-r-2">
                                <p class="text-[18px] text-[#597179] font-myriadpro-regular">Ejecutivo</p>
                            </div>
                            <div class="col-8 py-2 border-y-2">
                                <p class="text-[18px] text-[#597179] font-semibold font-myriadpro-regular">F. Fino Consultores</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-4 py-2 border-b-2 border-r-2">
                                <p class="text-[18px] text-[#597179] font-myriadpro-regular">Fecha</p>
                            </div>
                            <div class="col-8 py-2 border-b-2">
                                <p class="text-[18px] text-[#597179] font-semibold font-myriadpro-regular">{{ $vq_quote->date_formatted ?? '' }}</p>
                            </div>
                        </div>

                        {{-- detail vehicle --}}
                        <div class="p-main__content__title mb-3 mt-4">
                            <h3 class="h3 text-[#0A3D66] font-semibold text-[28px] font-myriadpro-regular">Detalles del Vehículo</h3>
                        </div>
                        <div class="row">
                            <div class="col-4 py-2 border-t-2 border-r-2">
                                <p class="text-[18px] text-[#597179] font-myriadpro-regular">Marca</p>
                            </div>
                            <div class="col-8 py-2 border-t-2">
                                <p class="text-[18px] text-[#597179] font-semibold font-myriadpro-regular">{{ ucfirst($vq_quote->car->brand->name) ?? '' }}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-4 py-2 border-y-2 border-r-2">
                                <p class="text-[18px] text-[#597179] font-myriadpro-regular">Modelo</p>
                            </div>
                            <div class="col-8 py-2 border-y-2">
                                <p class="text-[18px] text-[#597179] font-semibold font-myriadpro-regular">{{ ucfirst($vq_quote->car->model->name) ?? '' }}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-4 py-2 border-b-2 border-r-2">
                                <p class="text-[18px] text-[#597179] font-myriadpro-regular">Año</p>
                            </div>
                            <div class="col-8 py-2 border-b-2">
                                <p class="text-[18px] text-[#597179] font-semibold font-myriadpro-regular">{{ $vq_quote->car->year ?? '' }}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-4 py-2 border-b-2 border-r-2">
                                <p class="text-[18px] text-[#597179] font-myriadpro-regular">Tipo</p>
                            </div>
                            <div class="col-8 py-2 border-b-2">
                                <p class="text-[18px] text-[#597179] font-semibold font-myriadpro-regular">{{ $vq_quote->car->type_use->name ?? '' }}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-4 py-2 border-b-2 border-r-2">
                                <p class="text-[18px] text-[#597179] font-myriadpro-regular">Valor</p>
                            </div>
                            <div class="col-8 py-2 border-b-2">
                                <p class="text-[18px] text-[#597179] font-semibold font-myriadpro-regular">{{ HP::formatFormCurrencyRd($vq_quote->amount) ?? '' }}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-4 py-2 border-b-2 border-r-2">
                                <p class="text-[18px] text-[#597179] font-myriadpro-regular">Capacidad</p>
                            </div>
                            <div class="col-8 py-2 border-b-2">
                                <p class="text-[18px] text-[#597179] font-semibold font-myriadpro-regular">{{ $vq_quote->car->pax ?? '' }}</p>
                            </div>
                        </div>

                        @if ($vq_quote->comments)
                            <div class="row">
                                <div class="col-12 mt-3">
                                    <p class="text-[18px] text-[#597179] font-myriadpro-regular">Observaciones:</p>
                                    <p class="text-[18px] text-[#597179] font-semibold font-myriadpro-regular">{{ $vq_quote->comments ?? '' }}</p>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
                <div class="col-12 md-6 col-lg-6 bg-white">
                    <div class="lg:h-[660px] h-[400px] flex items-center justify-center w-100">
                        <div class="m-3">
                            @if($vq_quote->car->image)
                                <img src="{{ $vq_quote->car->image_path }}" alt="Imagen del carro" class="max-w-[600px]">
                            @else
                                <img src="{{ asset('images/public-link/car-default.png') }}" alt="Imagen carro default">
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            <div class="row my-12">
                @forelse ($vq_quote->insurers as $insurer)
                    <div class="col-12 md-6 col-lg-6 col-xl-4 mb-4">
                        <div class="border-collapse border border-slate-400">
                            <div class="w-100 h-[68px] flex items-center justify-center border-b-[1px] border-slate-300 p-[3px]">
                                <img src="{{ $insurer->image_path }}" alt="LOGO ASEGURADORA" class="max-h-[68px] object-cover max-h-full">
                            </div>
                            <table class="table-auto w-100">
                                <thead>
                                    <tr>
                                        <th class="w-[50%] text-[15px] text-[#0A3D66] p-2 border-b-[1px] border-slate-300 font-myriadpro-regular font-bold">Coberturas</th>
                                        <th class="w-[25%] text-[15px] text-[#0A3D66] p-2 border-b-[1px] border-slate-300 font-myriadpro-regular font-bold">Límites</th>
                                        <th class="w-[25%] text-[15px] text-[#0A3D66] p-2 border-b-[1px] border-slate-300 font-myriadpro-regular font-bold">Deducibles</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($items as $item)
                                        @php
                                            $item = (Object)$item;
                                        @endphp
                                        <tr>
                                            <td class="text-[15px] text-[##597179] p-2 border-b-[1px] border-slate-300 font-myriadpro-regular leading-[18px]">{{ ucfirst($item->item_name) }}</td>
                                            <td class="text-[15px] text-[##597179] p-2 border-b-[1px] border-slate-300 font-myriadpro-regular">
                                                <div class="flex items-center mr-[15px]">
                                                    <span class="mr-1">{{ HP::insurerItemValue($item, $insurer->id) }}</span>
                                                    @php
                                                        $items_check = $vq_quote->BetterItem($item->vq_item_id);
                                                    @endphp
                                                    @foreach ($items_check as $item_check)
                                                        @if ($item_check['insurer_id'] == $insurer->id)
                                                            @php
                                                                $counter_insurer[$insurer->id]['total']++;

                                                                #add image
                                                                $counter_insurer[$insurer->id]['image'] = $insurer->image_path;

                                                                #Add color
                                                                $counter_insurer[$insurer->id]['color'] = $insurer->color;

                                                            @endphp
                                                            @if($item_check['check'])
                                                                @php
                                                                    $counter_insurer[$insurer->id]['total_better']++;
                                                                @endphp
                                                                <img src="{{ asset('images/public-link/new-check.svg') }}" alt="check">
                                                            @endif
                                                        @endif
                                                    @endforeach
                                                </div>
                                            </td>

                                            <td class="text-[15px] text-[##597179] p-2 border-b-[1px] border-slate-300 font-myriadpro-regular">
                                                <div class="flex items-center">
                                                    <span class="mr-1">{{ HP::insurerItemDeductibleValue($item, $insurer->id) }}</span>
                                                    @php
                                                        $items_check_deductible = $vq_quote->BetterItem($item->vq_item_id, 'deductible');
                                                    @endphp
                                                    @foreach ($items_check_deductible as $item_check)
                                                        @if ($item_check['insurer_id'] == $insurer->id)
                                                            @php
                                                                $counter_insurer[$insurer->id]['total']++;
                                                            @endphp
                                                            @if($item_check['check'])
                                                                @php
                                                                    $counter_insurer[$insurer->id]['total_better']++;
                                                                @endphp
                                                                <img src="{{ asset('images/public-link/new-check.svg') }}" alt="check">
                                                            @endif
                                                        @endif
                                                    @endforeach
                                                </div>
                                            </td>
                                        </tr>
                                    @empty

                                    @endforelse
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <th colspan="100%">
                                            <div class="px-3 pt-3 modalVqAcceptQuoteModal">
                                                <a href="{{ HP::getVqQuoteInsurerPdf($vq_quote->id, $insurer->id) }}" download><span>Descargar PDF</span></a>
                                            </div>
                                            <div class="flex items-center justify-between p-3">
                                                <div>
                                                    @php
                                                        $insurer_amount = HP::getVqQuoteInsurer($insurer->id, $vq_quote->id)->amount;
                                                    @endphp
                                                    <p class="text-[28px] font-bold text-[#0A3D66] m-0 p-0 leading-[25px] font-myriadpro-regular">{{ HP::formatFormCurrencyRd($insurer_amount) }}</p>
                                                    <p class="text-[18px] font-bold text-[#0A3D66] m-0 p-0 leading-[25px] font-myriadpro-regular">Pago Anual</p>
                                                </div>
                                                @if ($vq_quote->status == 'pending')
                                                    <div class="buttonInteresa">
                                                        <img src="{{ asset('images/public-link/meinteresa.png') }}" alt="button me interesa" class="cursor-pointer" wire:click="acceptInsurer({{ $insurer }})">
                                                    </div>
                                                @endif
                                            </div>
                                        </th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                @empty

                @endforelse
            </div>

            {{-- three card  --}}
            <div class="mt-12 my-div">
                <h3 class="font-bold text-[18px] text-[#0A3D66] mb-4 font-myriadpro-regular">Puntuación General</h3>
                @php
                  $counter_insurer = HP::counterInsurerOrderBy($counter_insurer);
                @endphp
                @forelse ($counter_insurer as $k_insurer => $d_insurer )
                    <div class="md:flex items-center mb-3">
                        <div class="h-[50px] w-[158px] mr-5 flex items-center justify-center">
                            <img src="{{ $d_insurer['image'] }}" alt="LOGO ASEGURADORA" class="img-fluid max-h-full">
                        </div>
                        <div class="w-[100%] md:w-[409px] mr-4">
                            <div class="w-full h-5 bg-gray-200 dark:bg-gray-700">
                                <div class="h-5 bg-{{ $d_insurer['color'] ? '['.$d_insurer['color'].']' : 'blue-700' }} dark:bg-blue-500" style="width: {{ HP::counterInsurer($counter_insurer, $k_insurer) }}%"></div>
                            </div>
                        </div>
                        <div>
                            <span class="text-[#0A3D66] font-myriadpro-regular text-[15px]"><strong>{{ $d_insurer['total_better'] }}</strong> / {{ $d_insurer['total'] }}</span>
                        </div>
                    </div>
                @empty
                    <div>
                        <p>No hay datos</p>
                    </div>
                @endforelse


            </div>

        </div>
    </div>

    <div class="container my-div mb-16">
        <h3 class="font-bold text-[18px] text-[#0A3D66] mt-5 mb-2 font-myriadpro-regular">Observaciones y Condiciones:</h3>
        <p class="text-[14px] text-[#597179] font-myriadpro-regular">* Para Seguro Full, la emisión de la Póliza está sujeta a un a inspeccion del vehiculo de parte de la compañía y pago de la prima</p>
        <p class="text-[14px] text-[#597179] font-myriadpro-regular">* La vigencia de esta cotizacion es de 15 dias</p>
        <p class="text-[14px] text-[#597179] font-myriadpro-regular">* La poliza no entrara e vigor hasta que la compañía no haya dado su aprobacion</p>
        <p class="text-[14px] text-[#597179] font-myriadpro-regular">* Si su vehiculo tiene aditamentos instalados o cualquier otro accesorio que no sean de fabrica, debe informarlo para incluirlo por endoso en su poliza</p>
        <p class="text-[14px] text-[#597179] font-myriadpro-regular">* El pago de la prima es un inicial de 25% y el resto en 3 cuotas consecutivas</p>
   </div>

    <div class="footer my-div">
        <footer class="bg-[#0A3D67] h-[253px] flex items-center justify-center">
            <div class="text-center">
                <div class="mb-2">
                    <img src="{{ asset('images/public-link/logo-footer.svg') }}" alt="logo" class="mx-auto">
                </div>
                <p class="text-[14px] text-[#ffffff] font-myriadpro-regular">
                    F. Fino Consultores - Corredores de Seguros  ® 2023<br>
                    Website by <a href="https://ktech.com.do/" target="_blank">Ktech Solutions</a>
                </p>
            </div>
        </footer>
    </div>

    {{-- Modal  --}}
    <div wire:ignore.self class="modal modal-account-request fade modalVqAcceptQuoteModal" id="modalVqAcceptQuoteModal" 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: 970px;">
            <div class="modal-content h-100">

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

                <div class="modal-header">
                    <h3 class="modal-title" id="calendarModalLabel">Aseguradora: {{ $data['insurer_name'] }}</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">Comentarios:</label>
                                                        <textarea class="form-control" id="comments" wire:model.lazy="data.comments" placeholder="Comentarios" rows="5"></textarea>
                                                        @error('data.comments') <span class="text-danger">{{ $message }}</span>@enderror
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row">
                                                <div class="col-12 d-flex justify-content-end">
                                                    <button id="btn-submit" type="submit" class="btn btn-primary mr-1 mb-1 bg-[#1b3d93]" wire:loading.attr="disabled" wire:target="send">
                                                        <i class="far fa-paper-plane"></i>
                                                        Enviar
                                                    </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>

@push('css')
    <style>
        @media print {
            .modalVqAcceptQuoteModal {
                display: none;
            }

            .buttonInteresa {
                display: none;
            }

            .md-6 {
                flex: 0 0 50%;
                max-width: 50%;
            }

            thead, tfoot {display: table-row-group !important;}

            div.my-div {
                display: table !important;
                display:inline;
                page-break-inside:avoid;
            }

            div.footer {
                width: 100% !important;
            }

            script, style {
                display:none;
            }

        }

        @media (max-width: 768px) {
            .p-header__logo img{
                width: 80%;
            }
        }


    @media (max-width: 500px) {
        .buttonInteresa img{
            width: 80%;
            margin-left: auto;
        }
    }
    </style>

@endpush

@push('styles')
    <script>
        $(document).ready(function() {

            window.addEventListener('openModal', event => {
                $('#modalVqAcceptQuoteModal').modal('show');
            });

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

            // Close modal
            $('#closeModal').on('click', function() {
                $('#modalVqAcceptQuoteModal').modal('hide');
            });

        });
    </script>
@endpush

