@extends('inicio')

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


        <div class="col-sm-6">

            <div class="card border">


                <div class="card-body p-4">
                    <h2 class="text-dark"><b>Editar la cita</b></h2>
                    <hr class="mb-5">

                    <form action="{{ route('cita.update', $item) }}" method="POST">
                        @method('put')
                        @csrf

                        <select class="form-control mb-2" name="id_cliente" style="background-color: rgb(227, 227, 227)">
                            <option disabled selected>Elija el cliente</option>
                            @foreach ($iten as $cliente)
                                <option value="{{ $cliente->id_cliente }}"
                                    @if ($cliente->id_cliente == $item->id_cliente) selected @endif>{{ $cliente->nombre }}</option>
                            @endforeach
                        </select>

                        <input type="date" name="fecha" id="fecha" style="background-color: rgb(227, 227, 227)"
                            class="form-control mb-2" value="{{ $item->fecha }}" 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" @if ($item->hora == '08:00:00') selected @endif>8:00 AM</option>
                            <option value="08:30:00" @if ($item->hora == '08:30:00') selected @endif>8:30 AM</option>
                            <option value="09:00:00" @if ($item->hora == '09:00:00') selected @endif>9:00 AM</option>
                            <option value="09:30:00" @if ($item->hora == '09:30:00') selected @endif>9:30 AM</option>
                            <option value="10:00:00" @if ($item->hora == '10:00:00') selected @endif>10:00 AM</option>
                            <option value="10:30:00" @if ($item->hora == '10:30:00') selected @endif>10:30 AM</option>
                            <option value="11:00:00" @if ($item->hora == '11:00:00') selected @endif>11:00 AM</option>
                            <option value="11:30:00" @if ($item->hora == '11:30:00') selected @endif>11:30 AM</option>
                            <option value="12:00:00" @if ($item->hora == '12:00:00') selected @endif>12:00 MD</option>
                            <option value="12:30:00" @if ($item->hora == '12:30:00') selected @endif>12:30 MD</option>
                            <option value="13:00:00" @if ($item->hora == '13:00:00') selected @endif>1:00 PM</option>
                            <option value="13:30:00" @if ($item->hora == '13:30:00') selected @endif>1:30 PM</option>
                            <option value="14:00:00" @if ($item->hora == '14:00:00') selected @endif>2:00 PM</option>
                            <option value="14:30:00" @if ($item->hora == '14:30:00') selected @endif>2:30 PM</option>
                            <option value="15:00:00" @if ($item->hora == '15:00:00') selected @endif>3:00 PM</option>
                            <option value="15:30:00" @if ($item->hora == '15:30:00') selected @endif>3:30 PM</option>
                            <option value="16:00:00" @if ($item->hora == '16:00:00') selected @endif>4:00 PM</option>
                            <option value="16:30:00" @if ($item->hora == '16:30:00') selected @endif>4:30 PM</option>
                            <option value="17:00:00" @if ($item->hora == '17:00:00') selected @endif>5:00 PM</option>
                            <option value="17:30:00" @if ($item->hora == '17:30:00') selected @endif>5:30 PM</option>
                            <option value="18:00:00" @if ($item->hora == '18:00:00') selected @endif>6:00 PM</option>
                            <option value="18:30:00" @if ($item->hora == '18:30:00') selected @endif>6:30 PM</option>
                            <option value="19:00:00" @if ($item->hora == '19:00:00') selected @endif>7:00 PM</option>
                            <option value="19:30:00" @if ($item->hora == '19:30:00') selected @endif>7:30 PM</option>
                            <option value="20:00:00" @if ($item->hora == '20:00:00') selected @endif>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">Guardar cambios</button>
                        </div>
                    </form>

                </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>