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

    <div class="p-container mb-16" x-data="{}">
        {{-- header --}}
        <div class="p-header bg-[#0A3D67] h-[260px] md:h-[218px]">
            <header class="container md:flex items-center justify-between h-[80%]">
                <div class="p-header__logo px-3 py-2">
                    <img src="{{ asset('images/public-link/logo-public.svg') }}" alt="logo" class="w-[70%] md:w-[auto] mx-auto">
                </div>
                <div class="p-header__title">
                    <div class="container py-0 flex justify-center md:justify-end items-center text-[#ffffff] text-[16px] pr-0 mr-0">
                        <span class="py-2 pr-2 text-[14px] font-myriadpro-regular flex items-center">Reclamaciones: <strong class="ml-2"><a href="#" class="text-[16px] font-myriadpro-regular hover:text-[#ccc]">809-364-6205</a></strong></span>
                        <span class="py-2 px-2 md: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-2 md: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-2 md: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-2 md:px-3 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>
            </header>
        </div>

        {{-- main --}}
        <div class="p-main container mt-[-70px] border bg-[#ffffff] min-h-[544px] pt-5 pb-20">

            {{-- first div  --}}
            <div class="text-center">
                <h1 class="h1 font-bold lg:text-[53px] md:text-[35px] text-[25px] font-myriadpro-regular text-[#0A3D66] mb-3">{{ $user->poll->subject ?? '' }}</h1>
                <p class="max-w-[630px] mx-auto text-[18px] font-myriadpro-regular text-[#597179] font-semibold leading-snug">Por favor completar esta encuesta teniendo en cuenta que en la respuesta númerica 1 representa el mínimo y 5 el máximo grado de satisfacción.</p>
            </div>
            <div class="w-[90%] mx-auto border-b my-5"></div>

            @if ($complete != 'complete')
                {{-- second div  --}}
                <div class="w-[85%] mx-auto">
                    <form wire:submit.prevent="send" autocomplete="off">
                        @forelse ($user->poll->options as $key_option => $option)
                            <div class="mb-14">
                                <h3 class="text-[18px] font-myriadpro-regular text-[#0A3D66] mb-3 font-bold">{{ ($key_option+1) }}. {{ $option->name }}</h3>
                                <div class="flex items-center mt-4">
                                    @for ($i = 1; $i < 6; $i++)
                                        <div class="round flex items-center mr-[1rem] md:mr-[2rem] custom-radio">
                                            <input
                                            type="radio"
                                            class="rounded-checkbox z-10 mt-[3px]"
                                            value="{{ $i }}"
                                            name="option_{{ $option->id }}"
                                            wire:model="data.options.{{ $option->id }}"
                                            />
                                            <label for="checkbox" class="text-[18px] text-[#597179] mb-0 ml-2 custom-control-label">{{ $i }}</label>
                                        </div>
                                    @endfor
                                </div>
                                <div class="text-left mt-3">
                                    @error('data.options.'.$option->id)
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        @empty
                        <div class="text-center">
                            <h1 class="h1 font-bold lg:text-[53px] md:text-[35px] text-[25px] font-myriadpro-regular text-[#0A3D66] mb-3">No hay opciones</h1>
                        </div>
                        @endforelse
                        <div class="row mt-5">
                            <div class="col-12">
                                <div class="max-w-[900px]">
                                    <label for="description" class="text-[18px] font-myriadpro-regular text-[#0A3D66] mb-3 font-bold">¿Tiene alguna sugerencia que nos permita seguir mejorando?</label>
                                    <textarea class="form-control" id="description" wire:model.defer="data.description" placeholder="Comentario" rows="5"></textarea>
                                    @error('data.description') <span class="text-danger">{{ $message }}</span>@enderror
                                </div>
                            </div>
                        </div>

                        <button id="btn-submit" type="submit" class="btn btn-primary bg-[#0A3D67] text-[18px] font-medium mt-5 font-myriadpro-regular" wire:loading.attr="disabled" wire:target="#">
                            <i class="fas fa-paper-plane"></i>
                            Enviar encuesta
                        </button>


                    </form>
                </div>
            @else
                <div class="text-center">
                    <i class="fas fa-check-square fa-2x text-[#85B200]"></i>
                    <h3 class="h1 font-bold lg:text-[30px] md:text-[30px] text-[30px] font-myriadpro-regular text-[#0A3D66] mb-1">Encuesta completada</h3>
                    <p class="font-bold text-[20px] font-myriadpro-regular text-[#597179] mb-3">Gracias por su tiempo!</p>
                </div>
            @endif




        </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] 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>
</div>

@push('css')
    <style>
        .rounded-checkbox {
            width:26px;
            height: 26px;
            border-radius: 50%;
            vertical-align: middle;
            border: none;
            appearance: none;
            -webkit-appearance: none;
            outline: none;
            cursor: pointer;
            background: #DDDDDD;
        }

        .custom-radio .custom-control-input:checked ~ .custom-control-label::after {
            background-image: none !important;
        }

        .custom-control-label::after {
            width:26px;
            height: 26px;
        }
        .custom-control-input {
            width:26px;
            height: 26px;
            left: -10px;
            top: 3px;
            cursor: not-allowed;
        }
        .custom-control-label::before {
            background: #DDDDDD;
            width:26px;
            height: 26px;
            left: -34px;
        }

        .custom-control-input
        .custom-control-label::after {
            width:26px;
            height: 26px;
        }

        .rounded-checkbox:checked ~ .custom-control-label::before {
            color: #fff;
            border-color: #1b3d93;
            background-color: #1b3d93;
            top: 1px;
        }
        .rounded-checkbox:checked {
            appearance: auto;
            clip-path: circle(50% at 50% 50%);
            background-color: #0A3D67 !important;
            z-index: 0 !important;
        }

        input[type=checkbox]:checked + label:before {
            background-color: #ED820A;
            border-color: #ED820A;
            color: #fff;
        }


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


    @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

