@extends('layouts.horizontal', ['title' => 'Agenda'])
@section('extra-class', 'fullwidth') 
@vite(['resources/css/appMedytec.css'])

@section('content')
<div class="container-fluid">
  @include('layouts.partials.page-title', ['title' => 'Agenda de Citas'])


</div>
  <div class="row g-3">
    {{-- Columna izquierda: mini calendario --}}
    <div class="col-lg-2 col-md-2">
      <div class="card p-3 shadow-sm">
        <div id="mini-calendar"></div>

        <hr class="my-2">

        <div class="row g-2 mb-3" id="kpiAgenda">
          <div class="col-12"><h6 class="fw-bold mb-2">Definición de estados</h6></div>
          <div class="small d-flex gap-3 flex-wrap align-items-center">
            <span title="Pendiente">⏳ Pendiente</span>
            <span title="Confirmada">☑️ Confirmada</span>
            <span title="Atendida">✔✔ Atendida</span>
            <span title="Cancelada">❌ Cancelada</span>
          </div>
          <hr class="my-2">
          <div class="col-12"><h6 class="fw-bold mb-2">Cantidad total de hoy</h6></div>
          <div class="col-6">
            <div class="card kpi-card">
              <div class="kpi-icon citas">
                <i class="ti ti-stethoscope"></i>
              </div>
              <div>
                <div class="kpi-label">Citas</div>
                <div class="kpi-value" id="kpiTotalCitas">0</div>
              </div>
            </div>
          </div>

          <div class="col-6">
            <div class="card kpi-card">
              <div class="kpi-icon estudios">
                <i class="ti ti-flask"></i>
              </div>
              <div>
                <div class="kpi-label">Estudios</div>
                <div class="kpi-value" id="kpiTotalEstudios">0</div>
              </div>
            </div>
          </div>
        </div>
        <hr class="my-2">
        <h6 class="fw-bold mb-2">Bloqueos para este día</h6>
        <div id="doctor-bloqueos" class="small">
            Seleccione un día en el mini calendario…
        </div>
    </div>
    </div>

    {{-- Columna derecha: calendario principal --}}
    <div class="col-lg-10 col-md-10">
      <div id="calendar"></div>
    </div>
  </div>
</div>
<button id="btnNuevaCitaMobile" class="btn-nueva-cita">
  +
</button>
{{-- Modal --}}
<div class="modal fade" id="modalNuevaCita" tabindex="-1" aria-hidden="true" data-bs-focus="false" >
  <div class="modal-dialog modal-xl modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header bg-primary text-white">
        <h5 class="modal-title">Nueva Cita</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">
        <form id="formCita">
          @csrf
          <input type="hidden" name="start">
          <input type="hidden" name="end">
          <input type="hidden" name="new_pacient" id="new_pacient" value="0">

          <div class="row g-4">

            {{-- Columna Izquierda --}}
            <div class="col-lg-6">

              {{-- Tipo de cita --}}
              <div class="mb-3">
                <label class="form-label fw-bold">Tipo de cita</label><br>
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="radio" name="type_for" id="tipoConsulta" value="1" checked>
                  <label class="form-check-label" for="tipoConsulta">Consulta</label>
                </div>
                <div class="form-check form-check-inline">
                  <input class="form-check-input" type="radio" name="type_for" id="tipoEstudio" value="2">
                  <label class="form-check-label" for="tipoEstudio">Estudio</label>
                </div>
              </div>

              {{-- Estudios (solo si es tipo Estudio) --}}
              <div class="mb-3 d-none" id="contenedorEstudios">
                <label class="form-label fw-bold">Seleccionar estudios</label>
                <select name="id_estudio[]" multiple id="id_estudio" class="form-select">
                  @foreach($estudios as $est)
                    <option value="{{ $est->idAnalisis }}">{{ $est->descripcion }}</option>
                  @endforeach
                </select>
              </div>

              {{-- Paciente existente --}}
              <div class="mb-3">
                <label class="form-label fw-bold">Seleccionar paciente</label>
                <div class="input-group">
                  <select name="id_paciente" id="id_paciente" class="form-select" style="text-transform:uppercase">
                  </select>
                  <button type="button" class="btn btn-outline-success" id="btnNuevoPaciente">
                    <i class="ti ti-plus"></i>
                  </button>
                </div>
              </div>

              {{-- Nuevo paciente (oculto al inicio) --}}
              <div id="contenedorNuevoPaciente" class="border rounded p-3 bg-light d-none">
                <h6 class="fw-bold mb-2">Datos del nuevo paciente</h6>
                <div class="row g-2">
                  <div class="col-md-6">
                    <input type="text" class="form-control" name="nombre" placeholder="Nombre">
                  </div>
                  <div class="col-md-6">
                    <input type="text" class="form-control" name="ap_paterno" placeholder="Apellido paterno">
                  </div>
                  <div class="col-md-6">
                    <input type="text" class="form-control" name="ap_materno" placeholder="Apellido materno">
                  </div>
                  <div class="col-md-6">
                    <input type="email" class="form-control" name="correo" placeholder="Correo electrónico">
                  </div>
                  <div class="col-md-6">
                    <input type="text" class="form-control" name="telefono" placeholder="Teléfono">
                  </div>
                </div>
                <div class="col-md-12 mt-2">
                  <label class="form-label fw-bold">Doctor tratante</label>

                  <select name="doctor_tratante[]" id="doctor_tratante" class="form-select" multiple>
                      @foreach($doctores as $doc)
                        <option value="{{ $doc->idDoctor }}">
                          {{ $doc->nombre }} {{ $doc->apPaterno }} {{ $doc->apMaterno }}
                        </option>
                      @endforeach
                  </select>

                  <small class="text-muted">
                    Médico que llevará el seguimiento del paciente
                  </small>
                </div>
              </div>

              {{-- Doctor / Técnico --}}
              <div class="mb-3 mt-3">
                <label class="form-label fw-bold" id="labelDoctor">Seleccionar doctor</label>
                <select name="id_doctor" id="id_doctor" class="form-select" required>
                  <option value="">Seleccione...</option>
                  @foreach($doctores as $doc)
                    <option value="{{ $doc->idDoctor }}" data-tecnico="{{ $doc->tecnico }}"  style="text-transform:uppercase">
                      {{ $doc->nombre }} {{ $doc->apPaterno }} {{ $doc->apMaterno }} 
                    </option>
                  @endforeach
                </select>
              </div>

              @php
                  $sucursalActual = \App\Helpers\SucursalHelper::detectarSucursal();
              @endphp

              {{-- Intercalar / Sucursal --}}
              <div class="d-flex align-items-center flex-wrap gap-4 mt-3">

                  {{-- Intercalar --}}
                  <div class="form-check mb-0">
                      <input
                          class="form-check-input"
                          type="checkbox"
                          name="intercalado"
                          id="intercalado"
                          value="1"
                      >

                      <label
                          class="form-check-label"
                          for="intercalado"
                      >
                          Intercalar
                      </label>
                  </div>


                  {{-- Sucursal --}}
                  <div class="d-flex align-items-center gap-3">

                      <span class="fw-bold">
                          Sucursal:
                      </span>

                      <div class="form-check form-check-inline mb-0 me-1">

                          <input
                              class="form-check-input"
                              type="radio"
                              name="sucursal"
                              id="sucursalCentro"
                              value="0"
                              {{ (int) $sucursalActual === 0 ? 'checked' : '' }}
                          >

                          <label
                              class="form-check-label"
                              for="sucursalCentro"
                          >
                              Centro
                          </label>

                      </div>


                      <div class="form-check form-check-inline mb-0">

                          <input
                              class="form-check-input"
                              type="radio"
                              name="sucursal"
                              id="sucursalAmericas"
                              value="1"
                              {{ (int) $sucursalActual === 1 ? 'checked' : '' }}
                          >

                          <label
                              class="form-check-label"
                              for="sucursalAmericas"
                          >
                              Las Américas
                          </label>

                      </div>

                  </div>

              </div>

            </div> {{-- fin izquierda --}}


            {{-- Columna Derecha --}}
            <div class="col-lg-6">

              {{-- Fecha y hora --}}
              <div class="row mb-3">
                <div class="col-md-6">
                  <label class="form-label fw-bold">Fecha</label>
                  <input type="date" class="form-control" name="fecha" id="fecha" required>
                </div>
                <div class="col-md-3">
                  <label class="form-label fw-bold">Hora inicio</label>
                  <input type="time" class="form-control" name="hora_inicio" id="hora_inicio" required>
                </div>
                <div class="col-md-3">
                  <label class="form-label fw-bold">Hora fin</label>
                  <input type="time" class="form-control" name="hora_fin" id="hora_fin" required>
                </div>
              </div>

              {{-- Asunto --}}
              <div class="mb-3">
                <label class="form-label fw-bold">Asunto</label>
                <input type="text" class="form-control" name="asunto" id="asunto" placeholder="Primera vez, control, etc.">
              </div>

              {{-- Descripción --}}
              <div class="mb-3">
                <label class="form-label fw-bold">Descripción</label>
                <textarea class="form-control" name="descripcion" id="descripcion" rows="3" placeholder="Notas adicionales..."></textarea>
              </div>
            </div>
          </div>
        </form>
      </div>

      <div class="modal-footer">
        <button class="btn btn-light" data-bs-dismiss="modal">Cancelar</button>
        @permiso('agenda-crud.crear')
        <button id="btnGuardar" class="btn btn-primary">Guardar cita</button>
        @endpermiso
      </div>
    </div>
  </div>
</div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
    window.PERMISOS = {
        agendaEliminar: @json(auth('admin')->user()->tienePermiso('agenda-crud.eliminar')),
        agendaEditar: @json(auth('admin')->user()->tienePermiso('agenda-crud.editar')),
        agendaAsistencia: @json(auth('admin')->user()->tienePermiso('agenda-crud.autorizar')),
        agendaExtra: @json(auth('admin')->user()->tienePermiso('agenda-crud.extra')),
    };
</script>
@vite(['resources/js/calendario.js'])

@endpush