@extends('inicio')

@section('index')
  
    <div class="row justify-content-center">
        <div class="col-md-5">

            <div class="card border">


                <div class="card-body p-4">

                    <h2 class="text-dark"><b>Agendar la cita</b></h2>

                    <hr class="mb-5">

                    <form action="{{ route('Cita.store') }}" method="POST">
                        @csrf
                        <label for="id_cliente">Cliente:</label>
                        <select class="form-control custom-select mb-2" name="id_cliente"
                            style="background-color: rgb(227, 227, 227)">
                            <option disabled selected>Elija el cliente</option>
                            @foreach ($clientes as $cliente)
                                <option value="{{ $cliente->id_cliente }}">{{ $cliente->nombre }}</option>
                            @endforeach
                        </select>

                        <div class="form-group ">
                            <label for="id_servicio">Servicio:</label>
                            <select class="form-control custom-select mb-2" name="id_servicio"
                                style="background-color: rgb(227, 227, 227)">
                                <option disabled selected>Elija el Servicio</option>
                                @foreach ($servicios as $servicio)
                                    <option value="{{ $servicio->id_servicio }}">{{ $servicio->nombre }}</option>
                                @endforeach
                            </select>
                            <!-- Campo para la fecha -->


                            <div class="form-group">
                                <label for="fecha">Fecha:</label>
                                <input type="date" name="fecha" style="background-color: rgb(227, 227, 227)"
                                    placeholder="Fecha" class="form-control custom-select mb-2" required
                                    value="{{ $fecha }}" readonly>
                            </div>

                            <!-- Campo para la hora -->
                            <div class="form-group">
                                <label for="hora">Hora:</label>
                                <select class="form-control  custom-select mb-2" name="hora"
                                    style="background-color: rgb(227, 227, 227); pointer-events: none;">
                                    <option disabled selected>Elija la hora</option>
                                    <option value="08:00:00" {{ $hora === '08:00:00' ? 'selected' : '' }}>8:00 AM
                                    </option>
                                    <option value="08:30:00" {{ $hora === '08:30:00' ? 'selected' : '' }}>8:30 AM
                                    </option>
                                    <option value="09:00:00" {{ $hora === '09:00:00' ? 'selected' : '' }}>9:00 AM
                                    </option>
                                    <option value="09:30:00" {{ $hora === '09:30:00' ? 'selected' : '' }}>9:30 AM
                                    </option>
                                    <option value="10:00:00" {{ $hora === '10:00:00' ? 'selected' : '' }}>10:00 AM
                                    </option>
                                    <option value="10:30:00" {{ $hora === '10:30:00' ? 'selected' : '' }}>10:30 AM
                                    </option>
                                    <option value="11:00:00" {{ $hora === '11:00:00' ? 'selected' : '' }}>11:00 AM
                                    </option>
                                    <option value="11:30:00" {{ $hora === '11:30:00' ? 'selected' : '' }}>11:30 AM
                                    </option>
                                    <option value="12:00:00" {{ $hora === '12:00:00' ? 'selected' : '' }}>12:00 MD
                                    </option>
                                    <option value="12:30:00" {{ $hora === '12:30:00' ? 'selected' : '' }}>12:30 MD
                                    </option>
                                    <option value="13:00:00" {{ $hora === '13:00:00' ? 'selected' : '' }}>1:00 PM
                                    </option>
                                    <option value="13:30:00" {{ $hora === '13:30:00' ? 'selected' : '' }}>1:30 PM
                                    </option>
                                    <option value="14:00:00" {{ $hora === '14:00:00' ? 'selected' : '' }}>2:00 PM
                                    </option>
                                    <option value="14:30:00" {{ $hora === '14:30:00' ? 'selected' : '' }}>2:30 PM
                                    </option>
                                    <option value="15:00:00" {{ $hora === '15:00:00' ? 'selected' : '' }}>3:00 PM
                                    </option>
                                    <option value="15:30:00" {{ $hora === '15:30:00' ? 'selected' : '' }}>3:30 PM
                                    </option>
                                    <option value="16:00:00" {{ $hora === '16:00:00' ? 'selected' : '' }}>4:00 PM
                                    </option>
                                    <option value="16:30:00" {{ $hora === '16:30:00' ? 'selected' : '' }}>4:30 PM
                                    </option>
                                    <option value="17:00:00" {{ $hora === '17:00:00' ? 'selected' : '' }}>5:00 PM
                                    </option>
                                    <option value="17:30:00" {{ $hora === '17:30:00' ? 'selected' : '' }}>5:30 PM
                                    </option>
                                    <option value="18:00:00" {{ $hora === '18:00:00' ? 'selected' : '' }}>6:00 PM
                                    </option>
                                    <option value="18:30:00" {{ $hora === '18:30:00' ? 'selected' : '' }}>6:30 PM
                                    </option>
                                    <option value="19:00:00" {{ $hora === '19:00:00' ? 'selected' : '' }}>7:00 PM
                                    </option>
                                    <option value="19:30:00" {{ $hora === '19:30:00' ? 'selected' : '' }}>7:30 PM
                                    </option>
                                    <option value="20:00:00" {{ $hora === '20:00:00' ? 'selected' : '' }}>8:00 PM
                                    </option>
                                </select>
                            </div>

                            <!-- Botón para enviar el formulario -->

                            <div class="d-flex justify-content-end mt-4 ms-3">
                                <a class="btn btn-danger me-5" href="{{ route('calendario.mostrar') }}">Cancelar</a>

                            <button type="submit" class="btn btn-success">Agendar</button>

                        </div>
                    </form>
                  
                </div>
            </div>

        </div>
    </div>
@endsection