@extends('horarios.layout')

@section('horarios.m_header')

@endsection

@section('horarios.breadcrumbs')
    <!-- Content Header (horarios breadcrumbs) -->
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>Horario</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="{{ implode('/', ['','horarios']) }}"> Horarios</a></li>
              <li class="breadcrumb-item active">@lang('Create new')</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
    </section>
@endsection

@section('horarios.content')
    <div class="row">
        <div class="col-12">
            <div class="card card-success card-outline">
                <div class="card-header">
                    <h3 class="card-title">@lang('Create new') <small>(Para que la apertura del sistema se realice semanalmente, seleccione un día de la semana y el horario de apertura y cierre, dejando el apartado de fecha en blanco, si desea hacer apertura y cierre un día específico, coloque la fecha y el horario de inicio y fin)</small> </h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                            <i class="fas fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <form action="{{ route('horarios.store', []) }}" method="POST" class="m-0 p-0">
                        <div class="card-body">
                            @csrf
                            <div class="mb-3">
        <label for="titulo" class="form-label">Titulo:</label>
        <input type="text" name="titulo" id="titulo" class="form-control" value="{{@old('titulo')}}" required/>
        @if($errors->has('titulo'))
			<div class='error small text-danger'>{{$errors->first('titulo')}}</div>
		@endif
    </div>
    <div class="mb-3">
        <label for="fecha" class="form-label">Fecha:</label>
        <input type="date" name="fecha" id="fecha" class="form-control" value="{{@old('fecha')}}" />
        @if($errors->has('fecha'))
			<div class='error small text-danger'>{{$errors->first('fecha')}}</div>
		@endif
    </div>
    <div class="mb-3">
        <label for="dia_semana" class="form-label">Dia Semana:</label>
        <select name="dia_semana" id="dia_semana" class="form-control form-select">
    <option value="">Seleccione Dia Semana</option>
    @foreach(["Lunes" => "Lunes", "Martes" => "Martes", "Miercoles" => "Miercoles", "Jueves" => "Jueves", "Viernes" => "Viernes", "Sabado" => "Sabado", "Domingo" => "Domingo"] as $value => $label )
        <option value="{{ $value }}" {{ @old('dia_semana') == $value ? "selected" : "" }}>{{ $label }}</option>
    @endforeach
</select>
        @if($errors->has('dia_semana'))
			<div class='error small text-danger'>{{$errors->first('dia_semana')}}</div>
		@endif
    </div>
    <div class="mb-3">
        <label for="hora_inicio" class="form-label">Hora Inicio: <small>(Por favor ingrese la hora en formato de 24 Horas, ejemplo: 5:00 pm => 17:00)</small> </label>
        <input type="text" name="hora_inicio" id="hora_inicio" class="form-control" value="{{@old('hora_inicio')}}" placeholder="HH:MM" onblur="validatetextInput(this)"  required/>
        @if($errors->has('hora_inicio'))
			<div class='error small text-danger'>{{$errors->first('hora_inicio')}}</div>
		@endif
    </div>
    <div class="mb-3">
        <label for="hora_fin" class="form-label">Hora Fin: <small>(Por favor ingrese la hora en formato de 24 Horas, ejemplo: 5:00 pm => 17:00)</small> </label>
        <input type="text" name="hora_fin" id="hora_fin" class="form-control" value="{{@old('hora_fin')}}" placeholder="HH:MM" onblur="validateTimeInput(this)"  required/>
        @if($errors->has('hora_fin'))
			<div class='error small text-danger'>{{$errors->first('hora_fin')}}</div>
		@endif
    </div>

                        </div>

                        <div class="card-footer">
                            <div class="d-flex flex-row align-items-center justify-content-between">
                                <a href="{{ route('horarios.index', []) }}" class="btn btn-default">@lang('Cancel')</a>
                                <button type="submit" class="btn btn-success">@lang('Create new') @lang('Horario')</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('horarios.scripts')
<script>
  function validateTimeInput(input) {
      var regex = /^([01][0-9]|2[0-3]):[0-5][0-9]$/; // Regular expression for HH:MM format
      if (!regex.test(input.value)) {
        alert("Por favor ingrese la hora en el siguiente formato HH:MM respetando el horario de 24 horas");
        input.value = ""; // Clear the input field if the format is incorrect
      }
    }
</script>
@endsection