@extends('layouts.horizontal', ['title' => 'Hoarios y Bloqueos de Doctor'])

@section('content')

@include('layouts.partials.page-title', [
  'subtitle' => '<a href="'.route('doctores.index').'" class="text-primary text-decoration-none">Doctores</a>',
  'title' => 'Bloqueos de '.$doctor->nombre.' '.$doctor->apPaterno
])

<div class="container-fluid">

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

@if($errors->any())
    <div class="alert alert-danger">
        <ul class="mb-0">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
<ul class="nav nav-tabs mb-3" role="tablist">

      <li class="nav-item">
        <button
            class="nav-link active"
            data-bs-toggle="tab"
            data-bs-target="#tab-bloqueos"
            type="button"
        >
            <i class="ti ti-calendar-x me-1"></i>
            Bloqueos especiales
        </button>
    </li>
    <li class="nav-item">
        <button
            class="nav-link"
            data-bs-toggle="tab"
            data-bs-target="#tab-horarios"
            type="button"
        >
            <i class="ti ti-calendar-time me-1"></i>
            Horarios habituales
        </button>
    </li>



</ul>

<div class="tab-content">
<div class="tab-pane fade show active" id="tab-bloqueos" >
<div class="card">

    <div class="card-header d-flex justify-content-between align-items-center">
      <h4 class="m-0">Bloqueos registrados</h4>
      <!-- BTN NUEVO -->
      <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#modalBloqueo">
        <i class="ti ti-plus"></i> Nuevo Bloqueo
      </button>
    </div>

    <div class="table-responsive">
      <table class="table table-striped align-middle mb-0">
        <thead class="table-light">
          <tr>
            <th>Asunto</th>
            <th>Inicio</th>
            <th>Fin</th>
            <th>Sucursal</th>
            <th class="text-center">Acciones</th>
          </tr>
        </thead>

        <tbody>
          @forelse($blockDates as $b)
          <tr>
            <td>{{ $b->asunto }}</td>
            <td>{{ $b->startFormat }}</td>
            <td>{{ $b->endFormat }}</td>
            <td>{{ $b->sucursalTexto }}</td>

            <td class="text-center">
                <div class="d-flex justify-content-center gap-1">

                    {{-- EDITAR BLOQUEO --}}
                    <button type="button"
                            class="btn btn-light btn-icon btn-sm rounded-circle btn-edit-bloqueo"
                            data-id="{{ $b->id }}"
                            data-asunto="{{ $b->asunto }}"
                            data-start="{{ $b->start }}"
                            data-end="{{ $b->end }}"
                            data-sucursal="{{ $b->sucursal }}"
                            title="Editar bloqueo">
                        <i class="ti ti-edit fs-lg"></i>
                    </button>

                    {{-- ELIMINAR BLOQUEO --}}
                    <form action="{{ route('doctores.bloqueos.destroy', $b->id) }}"
                        method="POST"
                        onsubmit="return confirm('¿Eliminar este bloqueo?')">
                        @csrf
                        @method('DELETE')
                        <button type="submit"
                                class="btn btn-danger btn-icon btn-sm rounded-circle"
                                title="Eliminar bloqueo">
                            <i class="ti ti-trash fs-lg"></i>
                        </button>
                    </form>

                </div>
            </td>

          </tr>
          @empty
          <tr>
            <td colspan="5" class="text-center text-muted py-3">No hay bloqueos registrados</td>
          </tr>
          @endforelse
        </tbody>

      </table>
    </div>

  </div>
</div>
<div class="tab-pane fade" id="tab-horarios" >

    <div class="card">

        <div class="card-header d-flex justify-content-between align-items-center">

            <div>
                <h4 class="m-0">
                    Horarios habituales
                </h4>

                <small class="text-muted">
                    Define los días y sucursales donde normalmente atiende el doctor.
                </small>
            </div>

            <button
                class="btn btn-primary btn-sm"
                type="button"
                data-bs-toggle="modal"
                data-bs-target="#modalHorario"
                id="btnNuevoHorario"
            >
                <i class="ti ti-plus"></i>
                Nuevo Horario
            </button>

        </div>

        <div class="table-responsive">

            <table class="table table-striped align-middle mb-0">

                <thead class="table-light">

                    <tr>
                        <th>Día</th>
                        <th>Sucursal</th>
                        <th>Inicio</th>
                        <th>Fin</th>
                        <th class="text-center">
                            Intercalados
                        </th>
                        <th class="text-center">
                            Acciones
                        </th>
                    </tr>

                </thead>

                <tbody>

                    @forelse($horarios as $h)

                        <tr>

                            <td>
                                <strong>
                                    {{ $h->diaTexto }}
                                </strong>
                            </td>

                            <td>

                                @if($h->sucursal == 0)

                                    <span class="badge bg-primary">
                                        Centro
                                    </span>

                                @else

                                    <span
                                        class="badge"
                                        style="background:#6f42c1;"
                                    >
                                        Las Américas
                                    </span>

                                @endif

                            </td>

                            <td>
                                {{ $h->horaInicioFormat }}
                            </td>

                            <td>
                                {{ $h->horaFinFormat }}
                            </td>

                            <td class="text-center">

                                @if($h->permite_intercalado)

                                    <span class="badge bg-success">
                                        Sí
                                    </span>

                                @else

                                    <span class="badge bg-secondary">
                                        No
                                    </span>

                                @endif

                            </td>

                            <td class="text-center">

                                <div class="d-flex justify-content-center gap-1">

                                    <button
                                        type="button"
                                        class="btn btn-light btn-icon btn-sm rounded-circle btn-edit-horario"

                                        data-id="{{ $h->id }}"
                                        data-dia="{{ $h->dia_semana }}"
                                        data-sucursal="{{ $h->sucursal }}"
                                        data-inicio="{{ $h->horaInicioFormat }}"
                                        data-fin="{{ $h->horaFinFormat }}"
                                        data-intercalado="{{ $h->permite_intercalado ? 1 : 0 }}"

                                        title="Editar horario"
                                    >
                                        <i class="ti ti-edit fs-lg"></i>
                                    </button>

                                    <form
                                        method="POST"
                                        action="{{ route('doctores.horarios.destroy', $h->id) }}"
                                        onsubmit="return confirm('¿Eliminar este horario?')"
                                    >

                                        @csrf
                                        @method('DELETE')

                                        <button
                                            type="submit"
                                            class="btn btn-danger btn-icon btn-sm rounded-circle"
                                            title="Eliminar horario"
                                        >
                                            <i class="ti ti-trash fs-lg"></i>
                                        </button>

                                    </form>

                                </div>

                            </td>

                        </tr>

                    @empty

                        <tr>
                            <td
                                colspan="6"
                                class="text-center text-muted py-4"
                            >
                                Este doctor todavía no tiene horarios habituales configurados.
                            </td>
                        </tr>

                    @endforelse

                </tbody>

            </table>

        </div>

    </div>

</div>

</div>
  

</div>

<div
    class="modal fade"
    id="modalHorario"
    tabindex="-1"
>
    <div class="modal-dialog">

        <form
            method="POST"
            id="formHorario"
            class="modal-content"
        >

            @csrf

            <input
                type="hidden"
                name="_method"
                id="horarioMethod"
                value="POST"
            >

            <div class="modal-header">

                <h5
                    class="modal-title"
                    id="tituloModalHorario"
                >
                    Nuevo Horario
                </h5>

                <button
                    type="button"
                    class="btn-close"
                    data-bs-dismiss="modal"
                ></button>

            </div>

            <div class="modal-body">

                <div class="mb-3">

                    <label class="form-label">
                        Día de la semana
                    </label>

                    <select
                        name="dia_semana"
                        id="horarioDia"
                        class="form-select"
                        required
                    >

                        <option value="">
                            Seleccionar...
                        </option>

                        <option value="1">Lunes</option>
                        <option value="2">Martes</option>
                        <option value="3">Miércoles</option>
                        <option value="4">Jueves</option>
                        <option value="5">Viernes</option>
                        <option value="6">Sábado</option>
                        <option value="7">Domingo</option>

                    </select>

                </div>


                <div class="mb-3">

                    <label class="form-label">
                        Sucursal
                    </label>

                    <select
                        name="sucursal"
                        id="horarioSucursal"
                        class="form-select"
                        required
                    >

                        <option value="">
                            Seleccionar...
                        </option>

                        <option value="0">
                            Centro
                        </option>

                        <option value="1">
                            Las Américas
                        </option>

                    </select>

                </div>


                <div class="row">

                    <div class="col-md-6 mb-3">

                        <label class="form-label">
                            Hora inicio
                        </label>

                        <input
                            type="time"
                            name="hora_inicio"
                            id="horarioInicio"
                            class="form-control"
                            required
                        >

                    </div>

                    <div class="col-md-6 mb-3">

                        <label class="form-label">
                            Hora fin
                        </label>

                        <input
                            type="time"
                            name="hora_fin"
                            id="horarioFin"
                            class="form-control"
                            required
                        >

                    </div>

                </div>


                <div class="form-check form-switch">

                    <input
                        type="checkbox"
                        class="form-check-input"
                        name="permite_intercalado"
                        value="1"
                        id="horarioIntercalado"
                    >

                    <label
                        class="form-check-label"
                        for="horarioIntercalado"
                    >
                        Permite citas intercaladas
                    </label>

                </div>

                <div class="form-text mt-2">
                    Esta configuración representa el horario habitual.
                    Posteriormente el sistema podrá advertir cuando se intente
                    agendar fuera de este horario.
                </div>

            </div>

            <div class="modal-footer">

                <button
                    type="button"
                    class="btn btn-light"
                    data-bs-dismiss="modal"
                >
                    Cancelar
                </button>

                <button
                    type="submit"
                    class="btn btn-dark"
                >
                    Guardar
                </button>

            </div>

        </form>

    </div>
</div>
<div class="modal fade" id="modalBloqueo" tabindex="-1">
  <div class="modal-dialog">
    <form method="POST" id="form-bloqueo" class="modal-content">
      @csrf
      <input type="hidden" name="_method" id="method-field" value="POST">

      <input type="hidden" name="id_doctor" value="{{ $doctor->idDoctor }}">
      <input type="hidden" name="bloqueo_id" id="bloqueo_id">

      <div class="modal-header">
        <h5 class="modal-title" id="modalTitulo">Crear Bloqueo</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">

        <div class="mb-3">
          <label class="form-label">Asunto</label>
          <input type="text" name="asunto" id="asunto" class="form-control" required>
        </div>

        <div class="mb-3">
          <label class="fw-bold">Sucursal</label><br>

          <div class="form-check">
            <input class="form-check-input sucursal-check" type="checkbox" name="sucursales[]" value="0" id="suc0">
            <label class="form-check-label" for="suc0">Centro</label>
          </div>
          <div class="form-check">
            <input class="form-check-input sucursal-check" type="checkbox" name="sucursales[]" value="1" id="suc1">
            <label class="form-check-label" for="suc1">Américas</label>
          </div>
        </div>

        <label class="fw-bold">Inicio</label>
        <div class="row g-2 mb-3">
          <div class="col-6">
            <input type="date" name="init_day" id="init_day" class="form-control" required>
          </div>
          <div class="col-6">
            <input type="time" name="init_hour" id="init_hour" class="form-control" required>
          </div>
        </div>

        <label class="fw-bold">Fin</label>
        <div class="row g-2 mb-3">
          <div class="col-6">
            <input type="date" name="end_day" id="end_day" class="form-control" required>
          </div>
          <div class="col-6">
            <input type="time" name="end_hour" id="end_hour" class="form-control" required>
          </div>
        </div>

      </div>

      <div class="modal-footer">
        <button class="btn btn-light" data-bs-dismiss="modal">Cancelar</button>
        <button class="btn btn-dark" type="submit" id="btnGuardar">Guardar</button>
      </div>

    </form>
  </div>
</div>
@endsection
@push('scripts')
<script>
const btnNuevoHorario = document.getElementById('btnNuevoHorario');
const formHorario = document.getElementById('formHorario');

const horarioMethod = document.getElementById('horarioMethod');
const tituloModalHorario = document.getElementById('tituloModalHorario');

const horarioDia = document.getElementById('horarioDia');
const horarioSucursal = document.getElementById('horarioSucursal');
const horarioInicio = document.getElementById('horarioInicio');
const horarioFin = document.getElementById('horarioFin');
const horarioIntercalado = document.getElementById('horarioIntercalado');


/*
|--------------------------------------------------------------------------
| NUEVO HORARIO
|--------------------------------------------------------------------------
*/

btnNuevoHorario.addEventListener('click', function () {

    tituloModalHorario.innerText = 'Nuevo Horario';

    formHorario.action =
        "{{ route('doctores.horarios.store', $doctor->idDoctor) }}";

    horarioMethod.value = 'POST';

    horarioDia.value = '';
    horarioSucursal.value = '';
    horarioInicio.value = '';
    horarioFin.value = '';
    horarioIntercalado.checked = false;

});


/*
|--------------------------------------------------------------------------
| EDITAR HORARIO
|--------------------------------------------------------------------------
*/

document.querySelectorAll('.btn-edit-horario').forEach(btn => {

    btn.addEventListener('click', function () {

        const id = this.dataset.id;

        tituloModalHorario.innerText = 'Editar Horario';

        formHorario.action = `/doctores/horarios/${id}`;

        horarioMethod.value = 'PUT';

        horarioDia.value = this.dataset.dia;
        horarioSucursal.value = this.dataset.sucursal;
        horarioInicio.value = this.dataset.inicio;
        horarioFin.value = this.dataset.fin;

        horarioIntercalado.checked =
            this.dataset.intercalado === '1';

        new bootstrap.Modal(
            document.getElementById('modalHorario')
        ).show();

    });

});
document.querySelectorAll('.btn-edit-bloqueo').forEach(btn => {
    btn.addEventListener('click', function () {

        // Cambiar título
        document.getElementById('modalTitulo').innerText = "Editar Bloqueo";

        // Cambiar acción del form
        const id = this.dataset.id;
        document.getElementById('form-bloqueo').action = `/doctores/bloqueos/${id}`;
        document.getElementById('method-field').value = "PUT";

        // Llenar campos
        document.getElementById('asunto').value = this.dataset.asunto;

        const start = new Date(this.dataset.start);
        const end   = new Date(this.dataset.end);

        document.getElementById('init_day').value  = start.toISOString().slice(0,10);
        document.getElementById('init_hour').value = start.toTimeString().slice(0,5);

        document.getElementById('end_day').value   = end.toISOString().slice(0,10);
        document.getElementById('end_hour').value  = end.toTimeString().slice(0,5);

        // Sucursales
        document.querySelectorAll('.sucursal-check').forEach(c => c.checked = false);

        const sucursal = this.dataset.sucursal;

        if (sucursal == 0) document.getElementById('suc0').checked = true;
        if (sucursal == 1) document.getElementById('suc1').checked = true;
        if (sucursal == 2) {
            document.getElementById('suc0').checked = true;
            document.getElementById('suc1').checked = true;
        }

        // Mostrar modal
        new bootstrap.Modal('#modalBloqueo').show();
    });
});

// Modo CREAR
document.querySelector('[data-bs-target="#modalBloqueo"]').addEventListener('click', () => {
    document.getElementById('modalTitulo').innerText = "Crear Bloqueo";
    document.getElementById('form-bloqueo').action = "{{ route('doctores.bloqueos.store') }}";
    document.getElementById('method-field').value = "POST";

    // limpiar
    document.getElementById('asunto').value = "";
    document.getElementById('init_day').value = "";
    document.getElementById('init_hour').value = "";
    document.getElementById('end_day').value = "";
    document.getElementById('end_hour').value = "";
    document.querySelectorAll('.sucursal-check').forEach(c => c.checked = false);

});
</script>
@endpush