@extends('layouts.contentNavbarLayout')

@section('title', 'Horarios de Atención')

@section('content')
<h4 class="fw-bold py-3 mb-4">
  <span class="text-muted fw-light">Configuración /</span> Horarios de Atención
</h4>

<div class="row">
  <div class="col-md-12">
    @if(session('success'))
      <div class="alert alert-success">
        {{ session('success') }}
      </div>
    @endif

    <div class="card mb-4">
      <h5 class="card-header">Días y Horas de Servicio</h5>
      <div class="card-body">
        <p class="mb-4 text-muted">Configura los horarios en los que el bot derivará a los usuarios con asesores humanos. Fuera de estos horarios, el bot enviará un mensaje automático indicando que no hay atención.</p>

        <form method="POST" action="{{ route('admin.horarios.update') }}">
          @csrf
          <div class="table-responsive text-nowrap">
            <table class="table table-bordered">
              <thead>
                <tr>
                  <th>Día</th>
                  <th>Activo</th>
                  <th>Hora Inicio</th>
                  <th>Hora Fin</th>
                </tr>
              </thead>
              <tbody>
                @foreach($horarios as $horario)
                  <tr>
                    <td><strong>{{ $dias_nombres[$horario->dia_semana] }}</strong></td>
                    <td>
                      <div class="form-check form-switch mb-2">
                        <input class="form-check-input" type="checkbox" name="horarios[{{ $horario->dia_semana }}][activo]" value="1" {{ $horario->activo ? 'checked' : '' }}>
                      </div>
                    </td>
                    <td>
                      <input type="time" class="form-control" name="horarios[{{ $horario->dia_semana }}][hora_inicio]" value="{{ $horario->hora_inicio }}">
                    </td>
                    <td>
                      <input type="time" class="form-control" name="horarios[{{ $horario->dia_semana }}][hora_fin]" value="{{ $horario->hora_fin }}">
                    </td>
                  </tr>
                @endforeach
              </tbody>
            </table>
          </div>

          <div class="mt-4">
            <button type="submit" class="btn btn-primary me-2">Guardar Cambios</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
@endsection