@extends('layout.template')
@section('title', 'ICAT')
@puede('Agenda', 'entrar_agenda')
@section('content')
    <div class="content-body">
        <div class="container-fluid">
            <div class="row">
                <div class="col-xl-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Agenda de Evaluaciones</h4>
                        </div>
                        <div class="card-body">
                            @php
                                $conteoAgendaEstatus = $agendas->countBy(fn ($a) => (int) ($a->estatus ?? 0));
                                $totalAgendas = $agendas->count();
                                $conteoAgenda = fn (int $estatus) => (int) ($conteoAgendaEstatus->get($estatus, 0));
                            @endphp

                            <style>
                                .agenda-top-toolbar .btn-sm {
                                    display: inline-flex;
                                    align-items: center;
                                    justify-content: center;
                                }

                                .agenda-status-filter.active {
                                    outline: 2px solid #2c3e50;
                                    outline-offset: 2px;
                                }

                                .agenda-status-filter-item {
                                    gap: 6px;
                                    min-width: 72px;
                                    white-space: nowrap;
                                    flex-shrink: 0;
                                }

                                .agenda-status-filter-item .agenda-status-count {
                                    font-size: 0.813rem;
                                    font-weight: 600;
                                    line-height: 1;
                                    min-width: 1.25em;
                                    text-align: center;
                                    flex-shrink: 0;
                                }

                                .agenda-status-filter-todos {
                                    gap: 6px;
                                    white-space: nowrap;
                                }
                            </style>

                            <div class="basic-form agenda-top-toolbar d-flex gap-3 flex-wrap justify-content-between align-items-center w-full mb-3">
                                <div class="d-flex gap-2 flex-wrap align-items-center">
                                    {{-- @puede('Agenda', 'alta_agenda')
                                        <button type="button" class="btn btn-light btn-sm" data-bs-toggle="modal"
                                            data-bs-target="#modal_agenda_fechas_inhabiles">
                                            <i class=" ri-calendar-close-line ri-size-lg"></i> D&iacute;as Inh&aacute;biles
                                        </button>
                                    @endpuede --}}
                                    @puede('Agenda', 'alta_agenda')
                                        <a href="{{ route('agendaCreate') }}" class="btn btn-primary btn-sm">
                                            <i class=" ri-add-line"></i> Agendar Evaluaci&oacute;n
                                        </a>
                                    @endpuede
                                    @puede('Agenda', 'vinculacion_agenda')
                                        <button type="button" class="btn btn-success btn-sm" data-bs-toggle="modal"
                                            data-bs-target="#modalEvaluadoresAutorizados">
                                            <i class=" ri-eye-line"></i> Evaluadores autorizados
                                        </button>
                                    @endpuede
                                </div>
                                @if (empty($esAgendaVistaUnidad))
                                <div class="d-flex gap-1 flex-wrap align-items-center justify-content-end">
                                    <button type="button"
                                        class="btn btn-warning shadow btn-sm agenda-status-filter agenda-status-filter-item"
                                        data-estatus="1" title="Estatus Pendiente de aprobaci&oacute;n">
                                        <i class=" ri-pushpin-line"></i>
                                        <span class="agenda-status-count">{{ $conteoAgenda(1) }}</span>
                                    </button>
                                    <button type="button"
                                        class="btn btn-danger shadow btn-sm agenda-status-filter agenda-status-filter-item"
                                        data-estatus="2" title="Estatus Rechazado">
                                        <i class=" ri-delete-bin-line"></i>
                                        <span class="agenda-status-count">{{ $conteoAgenda(2) }}</span>
                                    </button>
                                    <button type="button"
                                        class="btn btn-dark shadow btn-sm agenda-status-filter agenda-status-filter-item"
                                        data-estatus="3" title="Estatus Autorizado">
                                        <i class=" ri-lock-line"></i>
                                        <span class="agenda-status-count">{{ $conteoAgenda(3) }}</span>
                                    </button>
                                    <button type="button"
                                        class="btn btn-success shadow btn-sm agenda-status-filter agenda-status-filter-item"
                                        data-estatus="4" title="Estatus Finalizado">
                                        <i class=" ri-check-line"></i>
                                        <span class="agenda-status-count">{{ $conteoAgenda(4) }}</span>
                                    </button>
                                    <button type="button"
                                        class="btn btn-secondary btn-sm agenda-status-filter agenda-status-filter-todos active"
                                        data-estatus="" title="Ver todos">
                                        <i class=" ri-grid-line"></i>
                                        <span>Ver todos ({{ $totalAgendas }})</span>
                                    </button>
                                </div>
                                @endif
                            </div>

                            @if (session('success'))
                                <div class="alert alert-primary alert-dismissible fade show">
                                    <strong>{{ session('success') }}</strong>
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                </div>
                            @endif

                            @if (session('error'))
                                <div class="alert alert-danger alert-dismissible fade show">
                                    <strong>{{ session('error') }}</strong>
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                                </div>
                            @endif

                            <div class="table-responsive">
                                <table id="agendaTable" class="table table-striped w-100">
                                    <thead>
                                        <tr>
                                            <th>FOLIO</th>
                                            <th>CLAVE</th>
                                            <th>NOMBRE</th>
                                            <th>ESTANDAR</th>
                                            <th>UNIDAD</th>
                                            <th>FECHA INICIAL</th>
                                            <th>FECHA FINAL</th>
                                            <th>HORA INICIAL</th>
                                            <th>HORA FINAL</th>
                                            <th>ACCIONES</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($agendas as $index => $item)
                                            @php
                                                $estatusAgenda = (int) ($item->estatus ?? 0);
                                                $btnEstatusClase = match ($estatusAgenda) {
                                                    2 => 'btn-danger',
                                                    3 => 'btn-dark',
                                                    4 => 'btn-success',
                                                    default => 'btn-warning',
                                                };
                                                $iconoEstatus = match ($estatusAgenda) {
                                                    2 => 'ri-delete-bin-line',
                                                    3 => 'ri-lock-line',
                                                    4 => 'ri-check-line',
                                                    default => 'ri-pushpin-line',
                                                };
                                                $tituloEstatus = match ($estatusAgenda) {
                                                    2 => 'Estatus Rechazado',
                                                    3 => 'Estatus Autorizado',
                                                    4 => 'Estatus Finalizado',
                                                    default => 'Estatus Pendiente de aprobación',
                                                };
                                            @endphp
                                            <tr data-estatus="{{ $estatusAgenda }}">
                                                <td>{{ $item->clave ?? '-' }}</td>
                                                <td>{{ $item->certificacion_id ?? '-' }}</td>
                                                <td>{{ $item->evaluador_nombre }}</td>
                                                <td>{{ $item->certificacion_nombre }}</td>
                                                <td>{{ $item->unidad_nombre ?? '-' }}</td>
                                                <td>{{ \Carbon\Carbon::parse($item->fecha_inicio)->format('d/m/Y') }}</td>
                                                <td>{{ \Carbon\Carbon::parse($item->fecha_termino)->format('d/m/Y') }}</td>
                                                <td>{{ $item->hora_inicial }}</td>
                                                <td>{{ $item->hora_final }}</td>
                                                <td>
                                                    <div class="d-flex flex-wrap gap-1">
                                                        <a href="{{ route('agendaEdit', $item->id) }}"
                                                            class="btn btn-primary shadow btn-xs sharp"
                                                            title="Editar">
                                                            <i class=" ri-edit-2-line"></i>
                                                        </a>
                                                        <a href="#"
                                                            class="btn {{ $btnEstatusClase }} shadow btn-xs sharp"
                                                            title="{{ $tituloEstatus }}">
                                                            <i class=" {{ $iconoEstatus }}"></i>
                                                        </a>
                                                        @puede('Agenda', 'eliminar_agenda')
                                                        @if (!in_array($estatusAgenda, [3, 4], true))
                                                            <button type="button"
                                                                class="btn btn-danger shadow btn-xs sharp"
                                                                title="Eliminar" data-bs-toggle="modal"
                                                                data-bs-target="#modalEliminarAgenda"
                                                                data-id="{{ $item->id }}">
                                                                <i class=" ri-delete-bin-line"></i>
                                                            </button>
                                                        @endpuede
                                                        @endif
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="modalEliminarAgenda" tabindex="-1"
                aria-labelledby="modalEliminarAgendaLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="modalEliminarAgendaLabel">Confirmar eliminaci&oacute;n</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Cerrar"></button>
                        </div>
                        <div class="modal-body">
                            <p class="mb-0">&iquest;Desea eliminar este registro de  agenda? Esta acci&oacute;n no se
                                puede deshacer.</p>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary light btn-sm"
                                data-bs-dismiss="modal">Cancelar</button>
                            <form id="formEliminarAgenda" method="post" class="d-inline">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger btn-sm">Aceptar</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal fade" id="modalEvaluadoresAutorizados" tabindex="-1"
                aria-labelledby="modalEvaluadoresAutorizadosLabel" aria-hidden="true">
                <div class="modal-dialog modal-xl modal-dialog-scrollable">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="modalEvaluadoresAutorizadosLabel">Evaluadores autorizados</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                        </div>
                        <div class="modal-body">
                            <div class="table-responsive">
                                <table id="evaluadoresTable" class="table table-striped w-100">
                                    <thead>
                                        <tr>
                                            <th>EXPEDIENTE</th>
                                            <th>NOMBRE</th>
                                            <th>RFC</th>
                                            <th>ACCI&Oacute;N</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($evaluadoresAutorizados as $evaluador)
                                            <tr>
                                                <td>{{ $evaluador->evaluador_numero_expediente ?: '-' }}</td>
                                                <td>{{ $evaluador->evaluador_nombre ?: '-' }}</td>
                                                <td>{{ $evaluador->evaluador_rfc ?: '-' }}</td>
                                                <td>
                                                    <form action="{{ route('agendaEvaluadorToggle', $evaluador->id) }}"
                                                        method="POST" class="d-inline">
                                                        @csrf
                                                        @if ((int) $evaluador->evaluador_estatus === 1)
                                                            <button type="submit" class="btn btn-warning btn-xs">
                                                                Desactivar
                                                            </button>
                                                        @else
                                                            <button type="submit" class="btn btn-success btn-xs">
                                                                Activar
                                                            </button>
                                                        @endif
                                                    </form>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal modal-lg fade" id="modal_agenda_fechas_inhabiles" tabindex="-1"
                aria-labelledby="modalAgendaFechasInhabilesLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="modalAgendaFechasInhabilesLabel">D&iacute;as Inh&aacute;biles en
                                Aulas</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                        </div>
                        <div class="modal-body">
                            <div class="row">
                                <div class="col-lg-6 mb-3 col-md-6">
                                    <input type="text" id="fechas_deshabilitadas_agenda" class="form-control"
                                        placeholder="Seleccione fecha">
                                </div>
                                <div class="col-lg-6 mb-3 col-md-6 text-center">
                                    <div class="basic-list-group">
                                        <ul class="list-group">
                                            <li class="list-group-item bg-primary disabled">D&iacute;as Inh&aacute;biles
                                            </li>
                                            <li class="list-group-item" id="dias_inhabiles_agenda"
                                                style="max-height: 300px; overflow-y: auto; font-weight: bold;"></li>
                                        </ul>
                                    </div>
                                </div>
                                <div id="error_fecha_agenda" class="text-danger"></div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger light btn-sm"
                                    data-bs-dismiss="modal">Cerrar</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@endpuede
@push('scripts')
    <script>
        const agendaDestroyUrlTpl = @json(route('agendaDestroy', ['id' => '__AGENDA_ID__']));

        let flatpickrAgendaDiasInstance = null;

        function fechasDeshabilitadasAgenda() {
            let fechaSeleccionada = $('#fechas_deshabilitadas_agenda').val();

            $.ajax({
                url: "{{ route('fechasDeshabilitadas') }}",
                method: 'GET',
                dataType: 'json',
                success: function(response) {
                    let data = response.data;
                    let html = '';
                    let fechasAjax = [];
                    data.forEach(function(item) {
                        html += `<li class="list-group-item text-danger">${item.fecha}</li>`;
                        fechasAjax.push(item.fecha_formateada);
                    });

                    $('#dias_inhabiles_agenda').html(html);

                    if (flatpickrAgendaDiasInstance) {
                        flatpickrAgendaDiasInstance.destroy();
                        flatpickrAgendaDiasInstance = null;
                    }

                    let flatpickrConfig = {
                        locale: 'es',
                        dateFormat: 'd/m/Y',
                        inline: true,
                        position: 'center',
                        onDayCreate: function(_, __, ___, dayElem) {
                            if (!dayElem.dateObj) return;
                            const d = dayElem.dateObj;
                            const fecha = d.getFullYear() + '-' +
                                String(d.getMonth() + 1).padStart(2, '0') + '-' +
                                String(d.getDate()).padStart(2, '0');

                            if (fechasAjax.includes(fecha)) {
                                dayElem.style.background = '#ff1616';
                                dayElem.title = 'Día festivo';
                                dayElem.style.color = 'white';
                                dayElem.style.fontWeight = 'bold';
                            }
                        }
                    };

                    if (fechaSeleccionada) {
                        flatpickrConfig.defaultDate = fechaSeleccionada;
                    }

                    flatpickrAgendaDiasInstance = flatpickr('#fechas_deshabilitadas_agenda', flatpickrConfig);
                },
                error: function(xhr) {
                    console.log('Error en  solicitud AJAX:', xhr);
                }
            });
        }

        $(document).ready(function() {
            $('#modalEliminarAgenda').on('show.bs.modal', function(event) {
                const id = $(event.relatedTarget).data('id');
                if (id) {
                    $('#formEliminarAgenda').attr('action', agendaDestroyUrlTpl.replace('__AGENDA_ID__', String(id)));
                }
            });

            $('#modal_agenda_fechas_inhabiles').on('show.bs.modal', function() {
                $('#error_fecha_agenda').text('');
                fechasDeshabilitadasAgenda();
            });

            let estatusFiltroAgenda = null;

            $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
                if (settings.nTable.id !== 'agendaTable') {
                    return true;
                }
                if (estatusFiltroAgenda === null) {
                    return true;
                }
                const row = settings.aoData[dataIndex].nTr;
                return String($(row).data('estatus')) === estatusFiltroAgenda;
            });

            const agendaTable = $('#agendaTable').DataTable({
                language: {
                    url: 'https://cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json'
                },
                order: [
                    [0, 'desc']
                ]
            });

            $(document).on('click', '.agenda-status-filter', function() {
                const estatus = $(this).attr('data-estatus');
                estatusFiltroAgenda = (estatus === '' || typeof estatus === 'undefined') ? null : String(estatus);

                $('.agenda-status-filter').removeClass('active');
                $(this).addClass('active');

                agendaTable.draw();
            });

            $('#evaluadoresTable').DataTable({
                language: {
                    url: 'https://cdn.datatables.net/plug-ins/1.10.25/i18n/Spanish.json'
                },
                order: [
                    [1, 'asc']
                ],
                pageLength: 10
            });

            const shouldOpenEvaluadoresModal = @json(request()->query('modal') === 'evaluadores');
            if (shouldOpenEvaluadoresModal) {
                const modal = new bootstrap.Modal(document.getElementById('modalEvaluadoresAutorizados'));
                modal.show();
            }
        });
    </script>
@endpush