<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-6">
                            <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-insurers-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" style="min-height: 250px;">
                                <thead class="thead-light">
                                    <tr>
                                        <th>Título</th>
                                        <th style="width: 300px;">Estatus</th>
                                        <th class="text-center" style="width: 80px;">Acciones</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($items as $item)
                                        <tr>
                                            <td>{{ $item->subject }}</td>
                                            <td>
                                                <span class="badge badge-{{ config('const.vq-polls-status-badges')[$item->status] }}">
                                                    {{ config('const.vq-polls-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('polls.results', $item->id) }}"
                                                            class="dropdown-item btn-link">
                                                            <i class="fas fa-poll mr-1"></i> Resultados de encuesta
                                                        </a>
                                                        @if ($item->status == 'active')
                                                            <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>
                                                        @endif
                                                        <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="3">
                                            {{ $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">
                    <h3 class="modal-title" id="calendarModalLabel">Encuesta</h3>
                    <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">
                        <div class="row mb-5 mt-2">
                            <div class="col-12 mb-3">
                                <div class="row">
                                    @if ($message = Session::get('message'))
                                        <div class="col-12">
                                            <div class="alert alert-success alert-block">
                                                <button type="button" class="close" data-dismiss="alert" style="padding:4px;">×</button>
                                                <strong>{{ $message }}</strong>
                                            </div>
                                        </div>
                                    @endif
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label for="brand-name">E-mail</label>
                                            <form wire:submit.prevent="send">
                                                <div class="d-flex align-items-center justify-content-around">
                                                    <div class="w-75">
                                                        <input type="text" class="form-control w-100 @error('email') is-invalid @enderror" wire:model="email" placeholder="Insertar E-mail" id="email">
                                                    </div>
                                                    <div>
                                                        <button id="btn-submit" type="submit" class="btn btn-primary" wire:loading.attr="disabled">
                                                            <i class="far fa-paper-plane"></i>
                                                           Enviar
                                                        </button>
                                                    </div>
                                                </div>
                                            </form>
                                            @error('email') <span class="text-danger">{{ $message }}</span>@enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 mb-3">
                                <h5 class="modal-title w-100 mb-2">Listado de usuarios</h5>
                                <div class="wrapper-search">
                                    <input type="text" id="search" class="form-control" wire:model.debounce.1000ms="params.search_user" placeholder="Buscar...">
                                </div>
                            </div>
                            <div class="col-12">
                                <div class="table-responsive" style="max-height: 400px;min-wdth: 690px;">
                                    <table class="table" id="table_id">
                                        <thead>
                                            <tr>
                                                <th style="width: 40px;">#</th>
                                                <th>Nombre</th>
                                                <th>E-mail</th>
                                                <th class="text-center" style="width: 100px;">
                                                    Acciones
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @forelse ($users as $key => $user)
                                                <tr>
                                                    <th>{{ $key+1 }}</th>
                                                    <td>{{ $user->name ?? '--' }}</td>
                                                    <td>{{ $user->email ?? '--' }}</td>
                                                    <td>
                                                        <button wire:click="use({{ $key }})" type="button"
                                                            class="dropdown-item btn-link text-primary text-center">
                                                            Usar
                                                        </button>
                                                    </td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <th colspan="5">
                                                        <div class="alert alert-light">
                                                            No tiene marcas registradas
                                                        </div>
                                                    </th>
                                                </tr>
                                            @endforelse
                                        </tbody>
                                    </table>

                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section('js')
    @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

