@extends('inicio')

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

            <div class="card border">


                <div class="card-body p-4">
                    <h2 class="text-secondary"><b>Agendar cita</b></h2>


                    <hr class="mb-5">

                    <div class="row">
                        <div class="col">

                            <form action="{{ route('Cita.store') }}" method="POST">
                                @csrf
                                <label for="id_cliente">Cliente:</label>
                                <select class="form-control 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 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>

                                    <input type="date" name="fecha" id="fecha"
                                        style="background-color: rgb(227, 227, 227)" placeholder="Fecha"
                                        class="form-control mb-2" required>


                                    <select class="form-control mb-2" name="hora"
                                        style="background-color: rgb(227, 227, 227)">
                                        <option disabled selected>Elija la hora</option>
                                        <option value="08:00:00">8:00 AM</option>
                                        <option value="08:30:00">8:30 AM</option>
                                        <option value="09:00:00">9:00 AM</option>
                                        <option value="09:30:00">9:30 AM</option>
                                        <option value="10:00:00">10:00 AM</option>
                                        <option value="10:30:00">10:30 AM</option>
                                        <option value="11:00:00">11:00 AM</option>
                                        <option value="11:30:00">11:30 AM</option>
                                        <option value="12:00:00">12:00 MD</option>
                                        <option value="12:30:00">12:30 MD</option>
                                        <option value="13:00:00">1:00 PM</option>
                                        <option value="13:30:00">1:30 PM</option>
                                        <option value="14:00:00">2:00 PM</option>
                                        <option value="14:30:00">2:30 PM</option>
                                        <option value="15:00:00">3:00 PM</option>
                                        <option value="15:30:00">3:30 PM</option>
                                        <option value="16:00:00">4:00 PM</option>
                                        <option value="16:30:00">4:30 PM</option>
                                        <option value="17:00:00">5:00 PM</option>
                                        <option value="17:30:00">5:30 PM</option>
                                        <option value="18:00:00">6:00 PM</option>
                                        <option value="18:30:00">6:30 PM</option>
                                        <option value="19:00:00">7:00 PM</option>
                                        <option value="19:30:00">7:30 PM</option>
                                        <option value="20:00:00">8:00 PM</option>

                                    </select>

                                    <hr class="mt-5">

                                    <div class="d-flex justify-content-end mt-4 ms-3">

                                        <a class="btn btn-danger me-3" href="{{ route('Cita.index') }}">Cancelar</a>

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

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

                </div>
            </div>
        </div>
    </div>
    </div>
    </div>
@endsection

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const fechaInput = document.getElementById('fecha');
        const today = new Date().toISOString().split('T')[0];
        fechaInput.setAttribute('min', today);
    });
</script>