@extends('layout.base')
@section('title')
@section('style')
    @parent
    <link rel="stylesheet" href="{{ asset('assets/libs/datatables.net-bs5/css/dataTables.bootstrap5.min.css') }}" />

@endsection

@section('container')
    <div class="card card-body py-3" style="border-radius: 30px;">
        <div class="row align-items-center">
            <div class="col-12">
                <div class="d-sm-flex align-items-center justify-space-between">
                    <h4 class="mb-4 mb-md-0 card-title">Administrar Horarios</h4>
                    <nav aria-label="breadcrumb" class="ms-auto">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item d-flex align-items-center">
                                <a class="text-muted text-decoration-none d-flex" href="{{ route('dashboard') }}">
                                    <iconify-icon icon="solar:home-2-line-duotone" class="fs-6"></iconify-icon>
                                </a>
                            </li>
                            <li class="breadcrumb-item" aria-current="page">
                                <span class="badge fw-medium fs-2 bg-primary-subtle text-primary">
                                    fechas y horas
                                </span>
                            </li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-2">
            <div class="card" style="border-radius: 30px; box-shadow: 0 4px 8px rgba(139, 180, 199, 0.4);">
                <div class="card-body">
                    <div class="vstack gap-3 mt-4">
                        <div class="mb-2">
                            <a class="btn btn-outline-success sidebar-link w-100 text-center py-3" href="#"
                                data-bs-toggle="modal" data-bs-target="#generarHorariosModal" aria-expanded="false"
                                style="border-radius: 30px;">
                                <iconify-icon icon="mingcute:calendar-add-line" width="24"
                                    height="24"></iconify-icon><br>
                                <span class="hide-menu">Generar Horarios</span>
                            </a>
                        </div>
                        <div class="mb-2">
                            <hr>
                            <a class="btn btn-outline-success sidebar-link w-100 text-center py-3" href="#"
                                data-bs-toggle="modal" data-bs-target="#agregardiasfestivosModal" aria-expanded="false"
                                style="border-radius: 30px;">
                                <iconify-icon icon="bi:calendar-day" width="24" height="24"></iconify-icon><br>
                                <span class="hide-menu">Agregar Día Festivo</span>
                            </a>
                        </div>
                        <div class="mb-2">
                            <hr>
                            <a class="btn btn-outline-success sidebar-link w-100 text-center py-3" href="#"
                                data-bs-toggle="modal" data-bs-target="#bloqueardiasModal" aria-expanded="false"
                                style="border-radius: 30px;">
                                <iconify-icon icon="fa6-solid:calendar-day" width="24"
                                    height="24"></iconify-icon><br>
                                <span class="hide-menu">Bloquear Día</span>
                            </a>
                        </div>                       
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-10">
            <div class="card" style="box-shadow: 0 4px 8px rgba(139, 180, 199, 0.4); border-radius: 30px;">
                <div class="card-body p-3">
                    <h5 class="card-title text-center mb-2"><b>FECHAS FESTIVAS</b></h5>
                    <hr class="my-2">
                    <div class="table-responsive">
                        <table id="alt_pagination"
                            class="table table-sm table-striped table-bordered display text-nowrap small">
                            <thead class="text-center">
                                <tr>
                                    <th>ID</th>
                                    <th>Fecha</th>
                                    <th>Descripción</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($festivas as $festivo)
                                    <tr class="text-center">
                                        <td>{{ $festivo->id }}</td>
                                        <td>{{ $festivo->fecha }}</td>
                                        <td>{{ $festivo->descripcion }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-12 mt-3">
            <div class="card" style="box-shadow: 0 4px 8px rgba(139, 180, 199, 0.4); border-radius: 30px;">
                <div class="card-body p-3">
                    <h5 class="card-title text-center mb-2"><b>FECHAS Y HORAS</b></h5>
                    <hr class="my-2">
                    <div class="table-responsive">
                        <table id="zero_config"
                            class="table table-sm table-striped table-bordered text-nowrap align-middle small">
                            <thead class="text-center">
                                <tr>
                                    <th>ID</th>
                                    <th>Fecha</th>
                                    <th>Hora</th>
                                    <th>Estado</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($horarios as $horario)
                                    <tr class="text-center">
                                        <td>{{ $horario->id }}</td>
                                        <td>{{ $horario->fecha }}</td>
                                        <td>{{ \Carbon\Carbon::parse($horario->hora)->format('h:i A') }}</td>
                                        <td>{{ $horario->estado }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                            <tfoot class="text-center">
                                <tr>
                                    <th>ID</th>
                                    <th>Fecha</th>
                                    <th>Hora</th>
                                    <th>Estado</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>


    </div>

    <!-- Modales -->
    <div class="modal fade" id="generarHorariosModal" tabindex="-1" aria-labelledby="generarHorariosLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-sm">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h5 class="modal-title" id="generarHorariosLabel">Generar Horarios</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <!-- Modal Body -->
                <div class="modal-body">
                    <form id="form-generar-horarios" action="/generar-horarios" method="POST">
                        @csrf
                        <div class="mb-3">
                            <label for="fecha-inicio" class="form-label">Fecha Inicial</label>
                            <input type="date" value="{{ $ultima_fecha }}" class="form-control" id="fecha-inicio"
                                name="fecha_inicio" required>
                        </div>
                        <div class="mb-3">
                            <label for="meses" class="form-label">Número de Meses</label>
                            <input type="number" class="form-control" id="meses" name="meses" min="1"
                                max="12" required>
                        </div>
                        {{-- <div class="mb-3">
                            <label for="tramite" class="form-label">Tipo de Trámite</label>
                            <select class="form-select" id="tramite" name="tramite_id" required>
                                <option value="">Selecciona un trámite</option>
                                <option value="1">Régimen</option>
                                <option value="2">Subdivisión</option>
                                <option value=3">Aprovechamiento</option>
                            </select>
                        </div> --}}
                        <button type="submit" class="btn btn-outline-success w-100">Generar Horarios</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="agregardiasfestivosModal" tabindex="-1" aria-labelledby="agregardiasfestivosLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-sm">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h5 class="modal-title" id="generarHorariosLabel">Agregar día festivo</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <!-- Modal Body -->
                <div class="modal-body">
                    <form id="form-generar-festivos" action="{{ route('agregarfestivo') }}" method="POST">
                        @csrf
                        <div class="mb-3">
                            <label for="fecha-festiva" class="form-label">Fecha festiva</label>
                            <input type="date" class="form-control" id="fecha-festiva" name="fecha_festiva" required>
                        </div>
                        <div class="mb-3">
                            <label for="descripcion" class="form-label">Descripción de evento</label>
                            <input type="text" class="form-control" id="descripcion" name="descripcion" required>
                        </div>
                        <button type="submit" class="btn btn-outline-success w-100">Agregar</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="bloqueardiasModal" tabindex="-1" aria-labelledby="bloqueardiasLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-sm">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h5 class="modal-title" id="bloqueardiasLabel">Bloquear fecha</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <!-- Modal Body -->
                <div class="modal-body">
                    <form id="form-bloquear-fecha" action="" method="POST">
                        @csrf
                        <div class="mb-3">
                            <label for="fecha-bloqueda" class="form-label">Fecha a bloquear</label>
                            <input type="date" class="form-control" id="fecha-bloqueda" name="fecha_bloqueda"
                                required>
                        </div>
                        <div class="mb-3">
                            <label for="estatus" class="form-label">Descripción de evento</label>
                            <input type="text" class="form-control" id="estatus" name="estatus" value="ocupado"
                                required readonly>
                        </div>
                        <button type="submit" class="btn btn-outline-success w-100">Bloquear</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="bloquearrevisorModal" tabindex="-1" aria-labelledby="bloquearrevisorLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-sm">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h5 class="modal-title" id="bloqueardiasLabel">Bloquear fecha por revisor</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <!-- Modal Body -->
                <div class="modal-body">
                    <form id="form-bloquear-fecha-revisor" action="" method="POST">
                        @csrf
                        <div class="mb-3">
                            <label for="fecha-bloqueda" class="form-label">Fecha a bloquear o desbloquear</label>
                            <input type="date" class="form-control" id="fecha-bloqueda" name="fecha_bloqueda"
                                required>
                        </div>
                        <div class="mb-3">
                            <label for="estatus" class="form-label">Descripción de evento</label>
                            <input type="text" class="form-control" id="estatus" name="estatus" value="ocupado"
                                required readonly>
                        </div>
                        <div class="mb-3">
                            <label for="estatus" class="form-label">Revisor</label>
                            <select class="form-control" name="revisor" id="dia_revisor" required>
                                <option value="">Selecciona un revisor</option>
                                @foreach ($revisores as $revisor)
                                    <option value="{{ $revisor->id_usuario }}">{{ $revisor->nombres }}</option>
                                @endforeach
                            </select>
                        </div>
                        <button type="submit" class="btn btn-outline-success w-100 mb-2" name="accion"
                            value="bloquear">Bloquear</button>
                        <button type="submit" class="btn btn-outline-info w-100" name="accion"
                            value="desbloquear">Desbloquear Revisor</button>

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

@endsection


@section('scripts')
    @parent

    <script src="{{ asset('assets/libs/datatables.net/js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/js/datatable/datatable-basic.init.js') }}"></script>

    <script>
        $(document).ready(function() {
            $('#form-generar-horarios').submit(function(e) {
                e.preventDefault(); // Prevenir el envío normal del formulario
                let isValid = true; // Bandera para controlar la validación
                const form = $(this);

                // Validar campos requeridos
                form.find('input, select').each(function() {
                    if ($(this).val().trim() === '') {
                        // Mostrar iziToast de error
                        iziToast.error({
                            title: 'Error',
                            message: `El campo "${$(this).prev('label').text()}" es obligatorio.`,
                            position: 'topRight',
                            timeout: 5000,
                        });

                        // Marcar el campo en rojo
                        $(this).css('border', '2px solid red');
                        isValid = false; // Campo inválido
                    } else {
                        // Quitar el borde rojo si el campo es válido
                        $(this).css('border', '');
                    }
                });

                // Si hay errores, no enviar el formulario
                if (!isValid) {
                    return;
                }
                // Crear el objeto FormData para enviar los datos
                let formData = new FormData(this);

                // Enviar la solicitud AJAX
                $.ajax({
                    url: $(this).attr('action'), // URL del controlador
                    type: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(response) {
                        // Mostrar mensaje de éxito con SweetAlert
                        Swal.fire({
                            title: '¡Éxito!',
                            text: 'Horarios generados correctamente.',
                            icon: 'success',
                            confirmButtonText: 'OK',
                        }).then(() => {
                            // Recargar la página después de confirmar
                            location.reload();
                        });
                    },
                    error: function(xhr) {
                        // Mostrar mensaje de error con SweetAlert
                        Swal.fire({
                            title: 'Error',
                            text: 'Ocurrió un error al generar los horarios.',
                            icon: 'error',
                            confirmButtonText: 'Cerrar',
                        });
                    },
                });
            });
        });

        $(document).ready(function() {
            $('#form-generar-festivos').submit(function(e) {
                e.preventDefault();

                // Crear el objeto FormData
                let formData = new FormData(this);

                // Enviar la solicitud AJAX
                $.ajax({
                    url: '{{ route('agregarfestivo') }}', // Ruta del controlador
                    type: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(response) {
                        if (response.success) {
                            iziToast.success({
                                title: 'Éxito',
                                message: response.message,
                                position: 'topRight',
                                timeout: 5000,
                            });

                            // Cerrar el modal
                            $('#agregardiasfestivosModal').modal('hide');
                            setTimeout(function() {
                                window.location.reload(1);
                            }, 1000);
                        }
                    },
                    error: function(xhr) {
                        iziToast.error({
                            title: 'Error',
                            message: xhr.responseJSON?.message ||
                                'Ocurrió un error al agregar el día festivo.',
                            position: 'topRight',
                            timeout: 5000,
                        });
                    },
                });
            });
        });

        $(document).ready(function() {
            $('#form-bloquear-fecha').submit(function(e) {
                e.preventDefault();
                // Crear el objeto FormData
                let formData = new FormData(this);
                // Enviar la solicitud AJAX
                $.ajax({
                    url: '/bloquear-fecha', // Ruta del controlador
                    type: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(response) {
                        if (response.success) {
                            iziToast.success({
                                title: 'Éxito',
                                message: response.message,
                                position: 'topRight',
                                timeout: 5000,
                            });
                            // Cerrar el modal
                            $('#bloqueardiasModal').modal('hide');
                            setTimeout(function() {
                                window.location.reload(1);
                            }, 1000);
                        }
                    },
                    error: function(xhr) {
                        iziToast.error({
                            title: 'Error',
                            message: xhr.responseJSON?.message ||
                                'Ocurrió un error al bloquear la fecha.',
                            position: 'topRight',
                            timeout: 5000,
                        });
                    },
                });
            });

            $('#form-bloquear-fecha-revisor').submit(function(e) {
                e.preventDefault();

                // Detectar qué botón fue presionado
                const submitButton = $(document.activeElement); // botón activo
                const accion = submitButton.val(); // 'bloquear' o 'desbloquear'

                // Añadir 'accion' manualmente si no está en el FormData
                let formData = new FormData(this);
                formData.append('accion', accion);

                $.ajax({
                    url: '{{ route('bloquear_revisor') }}',
                    type: 'POST',
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function(response) {
                        if (response.success) {
                            iziToast.success({
                                title: 'Éxito',
                                message: response.message,
                                position: 'topRight',
                                timeout: 5000,
                            });
                            $('#bloquearrevisorModal').modal('hide');
                            setTimeout(function() {
                                window.location.reload(1);
                            }, 1000);
                        }
                    },
                    error: function(xhr) {
                        iziToast.error({
                            title: 'Error',
                            message: xhr.responseJSON?.message || 'Ocurrió un error.',
                            position: 'topRight',
                            timeout: 5000,
                        });
                    }
                });
            });

        });
    </script>

@endsection