@extends('inicioCalendario')

@section('index')



    <link rel="stylesheet" href="{{ asset('assets/css/calendario.css') }}">
    <script src="{{ asset('assets/js/calendario.js') }}"></script>

    <style>
        /* Hacer la tabla desplazable horizontalmente */
        .calendar-scrollable {
            overflow-x: auto;
            white-space: nowrap;
        }

        .table-responsive {
            max-height: 650px;
            /* Establece la altura máxima para el calendario */
            overflow-y: scroll;
            /* Habilita el desplazamiento vertical */
            position: relative;
        }

        .table-responsive::-webkit-scrollbar {
            width: 15px;
            /* Ancho del scrollbar */
        }

        .table-responsive::-webkit-scrollbar-thumb {
            background-color: #77b3f8;
            /* Color del "dedo" del scrollbar */
            border-radius: 10px;
            /* Bordes redondeados */
            border: 2px solid #f1f1f1;
            /* Borde alrededor del dedo */
        }

        .table-responsive::-webkit-scrollbar-track {
            background-color: #f1f1f1;
            /* Color de fondo del track */
            border-radius: 10px;
            /* Bordes redondeados del track */
        }

        /* Fijar los días de la semana (encabezado) en la parte superior */
        .table-responsive thead th {
            position: sticky;
            top: 0;
            z-index: 2;
            background-color: #f8f9fa;
            /* Color de fondo del encabezado */
        }

        .table-bordered td,
        .table-bordered th {
            border: 1px solid rgb(194, 189, 189) !important;
        }

        .celda-vacia {
            position: relative;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        /* Cambia el color de fondo al pasar el cursor */
        .celda-vacia:hover {
            background-color: #8aece669;
            /* Cambia el color según tu preferencia */
        }

        /* Texto de "Agendar" que aparece al pasar el cursor */
        .celda-vacia::after {
            content: "Agendar +";
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #1fc0478f;
            color: #ffffff;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 0.9rem;
            font-weight: bold;
        }

        /* Muestra el texto "Agendar" solo cuando el cursor está sobre la celda */
        .celda-vacia:hover::after {
            display: block;
        }
    </style>


    <div class="row justify-content-center">
        <div class="col-lg-12">
            <div class="table-responsive ">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th class="icono"><i class="bi bi-clock icono-grande"></i></th>
                            <th class="bg-primary text-white">Lunes {{ $fechaInicioSemana->isoFormat('DD/MM') }}</th>
                            <th class="bg-success text-white">Martes
                                {{ $fechaInicioSemana->copy()->addDay()->isoFormat('DD/MM') }}</th>
                            <th class="bg-warning text-white">Miércoles
                                {{ $fechaInicioSemana->copy()->addDays(2)->isoFormat('DD/MM') }}</th>
                            <th class="bg-danger text-white">Jueves
                                {{ $fechaInicioSemana->copy()->addDays(3)->isoFormat('DD/MM') }}</th>
                            <th class="bg-purple text-white">Viernes
                                {{ $fechaInicioSemana->copy()->addDays(4)->isoFormat('DD/MM') }}</th>
                            <th class="bg-info text-white">Sábado
                                {{ $fechaInicioSemana->copy()->addDays(5)->isoFormat('DD/MM') }}</th>
                            <th class="bg-light text-dark">Domingo
                                {{ $fechaInicioSemana->copy()->addDays(6)->isoFormat('DD/MM') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($horas as $hora)
                            <tr>
                                <td>{{ \Carbon\Carbon::createFromFormat('H:i:s', $hora)->format('g:i A') }}</td>
                                @for ($day = 0; $day < 7; $day++)
                                    @php
                                        $currentDate = $fechaInicioSemana->copy()->addDays($day);
                                        $isPastDate = $currentDate->isBefore($hoy, 'day'); // Verifica si la fecha es anterior a la fecha actual
                                        $citasDelDia = $citasSemana->filter(function ($cita) use ($currentDate, $hora) {
                                            return \Carbon\Carbon::parse($cita->fecha)->isSameDay($currentDate) &&
                                                \Carbon\Carbon::parse($cita->hora)->format('H:i:s') == $hora;
                                        });
                                    @endphp
                                    <td
                                        @if ($isPastDate) class="celda-vacia disabled"  {{-- Añade una clase para deshabilitar la celda --}}
                    style="cursor: not-allowed; background-color: #e0e0e0;" {{-- Cambia el estilo visual --}}
                @elseif ($citasDelDia->isEmpty())
                    class="celda-vacia"
                    onclick="window.location='{{ route('cita.createDos', ['fecha' => $currentDate->format('Y-m-d'), 'hora' => $hora]) }}'" @endif>
                                        @forelse ($citasDelDia as $cita)
                                            <div class="contenedor-cita">
                                                <button type="button" class="btn btn-primary cita-button"
                                                    data-bs-toggle="tooltip" data-bs-html="true" data-bs-placement="bottom"
                                                    data-bs-trigger="hover"
                                                    title="
                                <strong>Hora:</strong> {{ $cita->hora }}<br>
                                <strong>Servicio:</strong> {{ $cita->servicio?->nombre }}<br>
                                <strong>Teléfono:</strong> {{ $cita->cliente->telefono }}<br>
                            "
                                                    data-cita-id="{{ $cita->id_cita }}"
                                                    data-cita-hora="{{ $cita->hora }}"
                                                    data-cita-servicio="{{ $cita->servicio?->nombre }}"
                                                    data-cita-cliente="{{ $cita->cliente->nombre }}"
                                                    data-cita-telefono="{{ $cita->cliente->telefono }}"
                                                    data-cita-email="{{ $cita->cliente->correo }}">
                                                    <p>{{ $cita->cliente->nombre }}</p>
                                                </button>
                                            </div>
                                            <hr class="hr-small">
                                        @empty
                                        @endforelse
                                    </td>
                                @endfor
                            </tr>
                        @endforeach

                    </tbody>

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

    <!-- Modal -->
    <div class="modal fade" id="citaModal" tabindex="-1" aria-labelledby="citaModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content modal-custom">
                <div class="modal-header ">
                    <h5 class="modal-title" id="citaModalLabel">Detalles de la cita</h5>
                    <button type="button" class="btn-close btn-close-custom" data-bs-dismiss="modal"
                        aria-label="Close"></button>
                </div>
                <div class="modal-body modal-body-custom" id="modalBodyContent">
                    <!-- Sección de información principal -->
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-12">
                                <!-- Contenido principal -->
                                <div class="card card-custom">
                                    <div class="card-body">
                                        <h6 class="card-title">Información de la Cita</h6>
                                        <p class="card-text">Aquí se puede mostrar información adicional sobre la cita.</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr>

                    <!-- Sección adicional de comentarios o información interna -->
                    <p><strong>Comentario Interno:</strong> <span id="modalComentarioInterno">Aquí se pueden añadir notas o
                            información interna relevante para la cita.</span></p>
                </div>
                <div class="modal-footer modal-footer-custom">
                    <!-- Formulario para eliminar una cita -->
                    <form id="deleteForm" method="POST">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger">Eliminar</button>
                    </form>

                    <button type="button" class="btn btn-secondary btn-custom" data-bs-dismiss="modal"
                        aria-label="Close">X</button>
                </div>
            </div>
        </div>
    </div>

    @if (session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif
@endsection

@section('FechaHora')
    <nav class="navbar navbar-main navbar-expand-lg px-0 mx-4 shadow-none border-radius-xl" id="navbarBlur"
        data-scroll="true">
        <div class="container-fluid py-1 px-3">
            <nav aria-label="breadcrumb">

                <h6 class="font-weight-bolder mb-0">

                    <div class="container py-4">

                        <h5 class="">
                            <div class="d-flex align-items-center">
                                <!-- Usamos "d-flex" para alinear los elementos horizontalmente -->
                                <div class="page-item">

                                    <a class="page-link"
                                        href="{{ route('calendario.mostrar', ['semana' => $semana - 1]) }}"
                                        aria-label="Previous">
                                        <span aria-hidden="true"><i
                                                class="bi bi-chevron-compact-left icono-grandee"></i></span>
                                    </a>
                                </div>
                                <div class="page-item">
                                    <a class="page-link"
                                        href="{{ route('calendario.mostrar', ['semana' => $semana + 1]) }}"
                                        aria-label="Next">
                                        <span aria-hidden="true"><i
                                                class="bi bi-chevron-compact-right icono-grandee"></i></span>
                                    </a>
                                </div>
                                <div class="card shadow-sm border-0 rounded p-3" style="background-color: #f9f9f9;">
                                    <div class="d-flex align-items-center">
                                        <!-- Ícono estilizado -->
                                        <div class="me-3" style="font-size: 2rem; color: #007bff;">
                                            <i class="bi bi-calendar3"></i>
                                        </div>
                                        <div>
                                            <!-- Fecha de la semana -->
                                            <p class="mb-2" style="font-size: 1rem; color: #333;">
                                                <strong>Semana:</strong>
                                                <span style="color: #0056b3;">
                                                    {{ $fechaInicioSemana->translatedFormat('l, d \d\e F \d\e Y') }}
                                                </span>
                                                -
                                                <span style="color: #28a745;">
                                                    {{ $fechaFinSemana->translatedFormat('l, d \d\e F \d\e Y') }}
                                                </span>
                                            </p>
                                            <!-- Fecha de hoy -->
                                            <p class="mb-0" style="font-size: 0.95rem; color: #666;">
                                                <i class="bi bi-clock me-1"></i>
                                                <strong>Hoy:</strong>
                                                <span style="color: #ffc107; font-weight: 600;">
                                                    {{ $hoy->translatedFormat('l, d \d\e F \d\e Y') }}
                                                </span>
                                            </p>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </h5>

                    </div>
                </h6>
            </nav>

            <div class="mb-2">
                <a href="{{ route('calendario.mostrar', ['semana' => $semanaActual]) }}">
                    <button type="button" class="btn btn-success btn-lg">Ir a semana Actual</button>
                </a>
            </div>

        </div>
    </nav>
    <!-- End Navbar -->

    <script>
      document.addEventListener('DOMContentLoaded', () => {
    const citaButtons = document.querySelectorAll('.cita-button');
    const citaModal = new bootstrap.Modal(document.getElementById('citaModal'));

    citaButtons.forEach(button => {
        button.addEventListener('click', () => {
            const citaId = button.getAttribute('data-cita-id'); // Obtén el ID de la cita
            const citaCliente = button.getAttribute('data-cita-cliente');
            const citaHora = button.getAttribute('data-cita-hora');
            const citaServicio = button.getAttribute('data-cita-servicio');
            const citaTelefono = button.getAttribute('data-cita-telefono');
            const citaEmail = button.getAttribute('data-cita-email');

            document.getElementById('modalBodyContent').innerHTML = `
                <p><strong>Cliente:</strong> ${citaCliente}</p>
                <p><strong>Hora:</strong> ${citaHora}</p>
                <p><strong>Servicio:</strong> ${citaServicio}</p>
                <p><strong>Teléfono:</strong> ${citaTelefono}</p>
                <p><strong>Email:</strong> ${citaEmail}</p>
            `;

            // Actualiza el formulario para eliminar la cita con el ID correspondiente
            document.getElementById('deleteForm').action = `/citas/${citaId}`;
            
            citaModal.show();
        });
    });
});

    </script>

    @endsection