<div>
    @include('parts.loading')
    @include('parts.alerts')
    @include('parts.overlay', ['target' => 'closeModal, sendPoll'])

    <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-9">
                            <div class="wrapper-search">
                                <input type="text" id="search" class="form-control" wire:model.debounce.1000ms="params.search" placeholder="Buscar...">
                                @if (!empty($params['search']))
                                <button type="button" class="btn" id="btn-search">
                                    <i class="fa fa-times"></i>
                                </button>
                                @endif
                            </div>
                        </div>
                        <div class="col-md-3">
                            <select class="form-control" wire:model="params.status">
                                <option value="">.:: Seleccionar estatus ::.</option>
                                @foreach (config('const.vq-polls-results-status') as $key => $value)
                                    <option value="{{ $key }}">{{ $value }}</option>
                                @endforeach
                            </select>
                        </div>
                        {{-- <div class="col-md-3">
                            <a href="{{ route('polls.create') }}" class="btn btn-primary btn-block float-right">
                                <i class="fas fa-plus"></i>
                                Nueva encuensta
                            </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="min-width: 250px;width: 250px;">Última actualización</th>
                                        <th>E-mail</th>
                                        <th style="width: 250px;" class="text-center">Puntuación</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->update_datetime }}</td>
                                            <td>{{ $item->email }}</td>
                                            <td class="text-center" valign="middle">
                                                @if ($item->status == 'completed')
                                                    <div class="flex items-center justify-center">
                                                        <span class="mr-2">{{ $item->ranking_percentage ?? '' }} / <span class="font-semibold">5</span></span>
                                                        @if ($item->ranking_percentage < 3)
                                                            <img src="{{ asset('images/sad.png') }}" alt="face" style="width:32px;">
                                                        @elseif ($item->ranking_percentage == 3)
                                                            <img src="{{ asset('images/meh.png') }}" alt="face" style="width:32px;">
                                                        @else
                                                            <img src="{{ asset('images/smiling-face.png') }}" alt="face" style="width:32px;">
                                                        @endif
                                                    </div>
                                                @endif
                                            </td>
                                            <td>
                                                <span class="badge badge-{{ config('const.vq-polls-results-status-badges')[$item->status] }}">
                                                    {{ config('const.vq-polls-results-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">
                                                        <button wire:click="showResults({{ $item->id }})" {{ $item->status == 'send' ? 'disabled' : '' }}
                                                            class="dropdown-item btn-link">
                                                            <i class="fas fa-eye mr-1"></i> Ver
                                                        </button>
                                                        @if ($item->status == 'send')
                                                            <button type="button" wire:click="resendEmail({{ $item->id }})"
                                                                class="dropdown-item btn-link">
                                                                <i class="fas fa-paper-plane mr-1"></i> Reenviar
                                                            </button>
                                                        @endif
                                                        {{-- <button type="button" wire:click="sendPoll({{ $item->id }})"
                                                            class="dropdown-item btn-link">
                                                            <i class="fas fa-paper-plane mr-1"></i> Enviar encuesta
                                                        </button>
                                                        <a  href="{{ route('polls.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="5">
                                            {{ $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-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: 620px;">
            <div class="modal-content h-100">

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

                <div class="modal-header">
                    <div class="flex items-center">
                        <h3 class="modal-title" id="calendarModalLabel">Puntuación del cliente:</h3>
                        @if ($user)
                            <div class="flex items-center justify-center">
                                <span class="mx-2 mt-1">{{ $user->ranking_percentage ?? '' }} / <span class="font-semibold">5</span></span>
                                @if ($user->ranking_percentage < 3)
                                    <img src="{{ asset('images/sad.png') }}" alt="face" style="width:38px;">
                                @elseif ($user->ranking_percentage == 3)
                                    <img src="{{ asset('images/meh.png') }}" alt="face" style="width:38px;">
                                @else
                                    <img src="{{ asset('images/smiling-face.png') }}" alt="face" style="width:38px;">
                                @endif
                            </div>
                        @endif
                    </div>
                    <button type="button" class="closeModal border-0" aria-label="Close" wire:click="closeModal">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body p-0">


                    <div class="container mt-4 pb-5">
                        @if ($user)
                            @forelse ($user->poll->options as $key_option => $option)
                                @php
                                    $vote = '';
                                    $vote = $option->votes->where('poll_user_id', $user->id)->first();
                                @endphp
                                <div class="mb-10">
                                    <h3 class="text-[18px] font-myriadpro-regular text-[#0A3D66] mb-2 font-bold">{{ ($key_option+1) }}. {{ $option->name }}</h3>
                                    <div class="flex items-center">
                                        @for ($i = 1; $i < 6; $i++)
                                            <div class="custom-control custom-radio custom-control-inline">
                                                <input type="radio" id="customRadioInline-{{ $i }}" name="customRadioInline-{{ $option->id }}" class="custom-control-input" {{ $vote->vote==$i ? 'checked' : '' }} onclick="return false;" readonly="readonly">
                                                <label class="custom-control-label" for="customRadioInline-{{ $i }}"><span>{{ $i }}</span></label>
                                            </div>
                                        @endfor
                                    </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>
                                <strong>Comentario: </strong> <p class="break-words">{{ $user->comments }}</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@push('styles')
    <style>
        .table>tbody>tr>td {vertical-align: middle}
        .custom-radio .custom-control-input:checked ~ .custom-control-label::after {
            background-image: none !important;
        }
        .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;
        }

        .custom-control-input:checked {
            appearance: auto;
            clip-path: circle(50% at 50% 50%);
            background-color: #0A3D67 !important;
        }

        .custom-control-inline {
            margin-right: 2rem;
            margin-left: 1rem;
        }

        .custom-control-label span {
            font-size: 18px;
            color: #597179;
            display: block;
            margin-top: 4px;
        }

        /* .custom-control-label {
            left: -9px;
            top: 2px;
        } */
    </style>

@endpush

@section('js')
    {{-- Tailwind CSS --}}
    <script src="https://cdn.tailwindcss.com"></script>
    @include('parts.js-destroy')
    @include('parts.js-preview')
    @include('parts.js-search')

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

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

@endsection

