<div>
    <div class="">
        <div class="container py-0 flex justify-end items-center divide-x text-[#0A3D66] text-[16px]">
            <span class="py-2 pr-2 text-[14px]">Reclamaciones: <strong><a href="#" class="text-[16px]">809.616.0020</a></strong></span>
            <span class="py-2 px-3"><a href="#" target="_blank" rel="noopener noreferrer" class="text-[16px]"><i class="fab fa-facebook-f text-[18px]"></i></a></span>
            <span class="py-2 px-3"><a href="#" target="_blank" rel="noopener noreferrer" class="text-[16px]"><i class="fab fa-twitter text-[18px]"></i></a></span>
            <span class="py-2 px-3"><a href="#" target="_blank" rel="noopener noreferrer" class="text-[16px]"><i class="fab fa-instagram text-[18px]"></i></a></span>
            <span class="py-2 px-3 border-r-1 border-slate-300"><a href="#" target="_blank" rel="noopener noreferrer" class="text-[16px]"><i class="fab fa-youtube text-[18px]"></i></a></span>
        </div>
    </div>
    <div class="p-container mb-16" 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 text-[53px]">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-md-6 py-5 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]">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]">Cliente</p>
                            </div>
                            <div class="col-8 py-2 border-t-2">
                                <p class="text-[18px] text-[#597179] font-semibold">{{ 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]">Ejecutivo</p>
                            </div>
                            <div class="col-8 py-2 border-y-2">
                                <p class="text-[18px] text-[#597179] font-semibold">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]">Fecha</p>
                            </div>
                            <div class="col-8 py-2 border-b-2">
                                <p class="text-[18px] text-[#597179] font-semibold">{{ $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]">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]">Marca</p>
                            </div>
                            <div class="col-8 py-2 border-t-2">
                                <p class="text-[18px] text-[#597179] font-semibold">{{ 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]">Modelo</p>
                            </div>
                            <div class="col-8 py-2 border-y-2">
                                <p class="text-[18px] text-[#597179] font-semibold">{{ ucfirst($vq_quote->car->model) ?? '' }}</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-4 py-2 border-b-2 border-r-2">
                                <p class="text-[18px] text-[#597179]">Año</p>
                            </div>
                            <div class="col-8 py-2 border-b-2">
                                <p class="text-[18px] text-[#597179] font-semibold">{{ $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]">Tipo</p>
                            </div>
                            <div class="col-8 py-2 border-b-2">
                                <p class="text-[18px] text-[#597179] font-semibold">Jeepeta / SUV</p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-4 py-2 border-b-2 border-r-2">
                                <p class="text-[18px] text-[#597179]">Valor</p>
                            </div>
                            <div class="col-8 py-2 border-b-2">
                                <p class="text-[18px] text-[#597179] font-semibold">{{ 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]">Capacidad</p>
                            </div>
                            <div class="col-8 py-2 border-b-2">
                                <p class="text-[18px] text-[#597179] font-semibold">{{ $vq_quote->car->pax ?? '' }}</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 bg-white">
                    <div class="h-[660px] flex items-center justify-center w-100">
                        <div class="m-3">
                            <img src="{{ $vq_quote->car->image_path }}" alt="Imagen del carro">
                            {{-- <img src="{{ asset('images/public-link/car-pic.png') }}" alt=""> --}}
                        </div>
                    </div>
                </div>
            </div>

            @forelse ($insurers_array as $key_insurer_array => $insurer_array)
                {{-- second card --}}
                <div class="mt-5">
                    <table class="w-100 border-collapse border border-slate-400">
                        <thead>
                        <tr>
                            <th class="w-[40%] border border-slate-300"><h3 class="text-[28px] text-[#0A3D66] font-bold p-4">Comparación de Seguros</h3></th>
                            @foreach ($insurer_array as $key_insurer_array => $data_insurer_array)
                                <th class="w-[30%] text-center border border-slate-300">
                                    <div class="h-[37px] w-[152px] mx-auto">
                                        <img src="{{ $data_insurer_array->image_path }}" alt="LOGO ASEGURADORA" class="img-fluid m-auto h-100">
                                    </div>
                                </th>
                            @endforeach
                            @if (count($insurer_array) == 1)
                                <th class="w-[30%] text-center border border-slate-300"></th>
                            @endif
                        </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="border border-slate-300 py-2 pl-3 text-[#0A3D66] font-semibold h-[54px] text-[18px]">Coberturas</td>
                                @foreach ($insurer_array as $key_insurer_array => $data_insurer_array)
                                    <td class="border-r-1 border-slate-300">
                                        <div class="flex items-center h-[54px]">
                                            <div class="border-r-1 border-slate-300 m-0 h-100 w-50 flex items-center">
                                                <h4 class="pl-3 py-2 text-[#0A3D66] font-semibold text-[18px]">Límites</h4>
                                            </div>
                                            <div class="m-0 h-100 w-50 flex items-center">
                                                <h4 class="pl-3 py-2 text-[#0A3D66] font-semibold text-[18px]">Deducibles</h4>
                                            </div>
                                        </div>
                                    </td>
                                @endforeach
                            </tr>
                            @foreach ($items as $item)
                                <tr>
                                    <td class="border border-slate-300 py-2 pl-3 text-[#597179] text-[18px]">{{ ucfirst($item->item_name) }}</td>
                                    @foreach ($insurer_array as $key_insurer_array => $data_insurer_array)
                                        <td class="border border-slate-300">
                                            <div class="flex items-center h-[54px]">
                                                <div class="border-r-1 border-slate-300 m-0 h-100 w-50 flex items-center justify-between px-3">
                                                    <h4 class="text-[#597179] text-[18px] mt-[3px]">{{ HP::insurerItemValue($item, $data_insurer_array->id) }}</h4>
                                                    @php
                                                        $items_check = $vq_quote->BetterItem($item->vq_item_id);
                                                        $items_check_deductible = $vq_quote->BetterItem($item->vq_item_id, 'deductible');
                                                    @endphp
                                                    @foreach ($items_check as $item_check)
                                                        @if ($item_check['insurer_id'] == $data_insurer_array->id)
                                                            @php
                                                                $counter_insurer[$data_insurer_array->id]['total']++;
                                                            @endphp
                                                            @if($item_check['check'])
                                                                @php
                                                                    $counter_insurer[$data_insurer_array->id]['total_better']++;
                                                                @endphp
                                                                <img src="{{ asset('images/public-link/check.svg') }}" alt="check">
                                                            @endif
                                                        @endif
                                                    @endforeach
                                                </div>
                                                <div class="m-0 h-100 w-50 flex items-center justify-between px-3">
                                                    <h4 class="text-[#597179] text-[18px] mt-[3px]">{{ HP::insurerItemDeductibleValue($item, $data_insurer_array->id) }}</h4>
                                                    @foreach ($items_check_deductible as $item_check)
                                                        @if ($item_check['insurer_id'] == $data_insurer_array->id)
                                                            @php
                                                                $counter_insurer[$data_insurer_array->id]['total']++;
                                                            @endphp
                                                            @if($item_check['check'])
                                                                @php
                                                                    $counter_insurer[$data_insurer_array->id]['total_better']++;
                                                                @endphp
                                                                <img src="{{ asset('images/public-link/check.svg') }}" alt="check">
                                                            @endif
                                                        @endif
                                                    @endforeach
                                                </div>
                                            </div>
                                        </td>
                                    @endforeach
                                </tr>
                            @endforeach
                        </tbody>
                        <tfoot class="bg-[#F8F8F8]">
                            <tr>
                                <th class="w-[40%] border border-slate-300 h-[85px]"><h4 class="text-[20px] text-[#0A3D66] font-bold px-4 py-3">Monto a pagar</h4></th>
                                @foreach ($insurer_array as $key_insurer_array => $data_insurer_array)
                                    <th class="w-[30%] border border-slate-300">
                                        <div class="px-4 py-3">
                                            <p class="text-[28px] font-bold text-[#0A3D66] m-0 p-0 leading-[25px]">{{ HP::formatFormCurrencyRd($insurers_amount[$data_insurer_array->id]) }}</p>
                                            <p class="text-[18px] font-bold text-[#0A3D66] m-0 p-0 leading-[25px]">Pago Anual</p>
                                        </div>
                                    </th>
                                @endforeach

                            </tr>
                        </tfoot>
                    </table>
                </div>
            @empty

            @endforelse
            {{-- three card  --}}
            <div class="mt-12">
                <h3 class="font-bold text-[18px] text-[#0A3D66] mb-4">Puntuación General</h3>
            @forelse ($insurers_array as $key_insurer_array => $insurer_array)
                @foreach ($insurer_array as $key_insurer_array => $data_insurer_array)
                    <div class="flex items-center mb-3">
                        <div class="h-[37px] w-[158px] mr-5">
                            <img src="{{ $data_insurer_array->image_path }}" alt="LOGO ASEGURADORA" class="img-fluid h-100">
                        </div>
                        <div class="w-[409px] mr-4">
                            <div class="w-full h-5 bg-gray-200 dark:bg-gray-700">
                                <div class="h-5 bg-{{ $data_insurer_array->color ? '['.$data_insurer_array->color.']' : 'blue-700' }} dark:bg-blue-500" style="width: {{ HP::counterInsurer($counter_insurer, $data_insurer_array->id) }}%"></div>
                            </div>
                        </div>
                        <div>
                            @if (isset($counter_insurer[$data_insurer_array->id]))
                                <span class="text-[#0A3D66]"><strong>{{ $counter_insurer[$data_insurer_array->id]['total_better'] }}</strong> / {{ $counter_insurer[$data_insurer_array->id]['total'] }}</span>
                            @endif
                        </div>
                    </div>
                @endforeach
            @empty

            @endforelse
                <h3 class="font-bold text-[18px] text-[#0A3D66] mt-5 mb-2">Observaciones y Condiciones:</h3>
                <p class="text-[14px] text-[#597179]">* 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]">* La vigencia de esta cotizacion es de 15 dias</p>
                <p class="text-[14px] text-[#597179]">* La poliza no entrara e vigor hasta que la compañía no haya dado su aprobacion</p>
                <p class="text-[14px] text-[#597179]">* 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]">* El pago de la prima es un inicial de 25% y el resto en 3 cuotas consecutivas</p>

            </div>

        </div>
    </div>
    <div class="footer">
        <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]">
                    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>
</div>

