@extends('layout.template')
@section('title', 'SICCAP ICATEP')
@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">
                            <div class="basic-form d-flex gap-4 flex-wrap justify-content-between align-items-center w-full mb-3">
                                <div class="">
                                    {{-- @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="fa fa-calendar-times fa-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="fa fa-plus"></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="fa fa-eye"></i> Evaluadores autorizados
                                        </button>
                                    @endpuede
                                </div>
                            </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)
                                            <tr>
                                                <td>{{ $item->age_clave ?? '-' }}</td>
                                                <td>{{ $item->age_certificacion_id ?? '-' }}</td>
                                                <td>{{ $item->age_eva_nombre }}</td>
                                                <td>{{ $item->age_certificacion_nombre }}</td>
                                                <td>{{ $item->age_unidad_nombre ?? '-' }}</td>
                                                <td>{{ \Carbon\Carbon::parse($item->age_fecha_inicio)->format('d/m/Y') }}</td>
                                                <td>{{ \Carbon\Carbon::parse($item->age_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->age_id) }}"
                                                            class="btn btn-primary shadow btn-xs sharp"
                                                            title="Editar">
                                                            <i class="fa fa-edit"></i>
                                                        </a>
                                                        <a href="#"
                                                            class="btn {{ $item->age_estatus == 2 ? 'btn-success' : ($item->age_estatus == 3 ? 'btn-danger' : 'btn-warning') }} shadow btn-xs sharp"
                                                            title="{{ $item->age_estatus == 2 ? 'Estatus Aprobado' : ($item->age_estatus == 3 ? 'Estatus Rechazado' : 'Estatus Pendiente de aprobación') }}">
                                                            <i class="fa fa-check-circle"></i>
                                                        </a>
                                                        @puede('Agenda', 'eliminar_agenda')
                                                        @if ($item->age_estatus != 2)
                                                            <button type="button"
                                                                class="btn btn-danger shadow btn-xs sharp"
                                                                title="Eliminar" data-bs-toggle="modal"
                                                                data-bs-target="#modalEliminarAgenda"
                                                                data-id="{{ $item->age_id }}">
                                                                <i class="fa fa-trash"></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 la 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->per_age_eva_exp ?: '-' }}</td>
                                                <td>{{ $evaluador->per_age_eva_nombre ?: '-' }}</td>
                                                <td>{{ $evaluador->per_age_eva_rfc ?: '-' }}</td>
                                                <td>
                                                    <form action="{{ route('agendaEvaluadorToggle', $evaluador->per_age_id) }}"
                                                        method="POST" class="d-inline">
                                                        @csrf
                                                        @if ((int) $evaluador->per_age_eva_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 la 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();
            });

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

            $('#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