@extends("layouts.admin")
@section('content')



<div class=" shadow-sm sm:rounded-lg">


    <form action="{{ route('admin.appointments.store')}}" method="POST">
        @csrf
        @method('POST')

        @include('partials._user-select')
        <div class="relative max-w-sm">
            <!-- Input for appointment date -->
            <label for="inputdate" class="font-bold mb-1 text-gray-700 block">Select appointment date</label>
            <input type="date" class="bg-gray-50 border border-gray-300 text-gray-900 text-normal font-semibold rounded-lg focus:ring-blue-100 focus:border-blue-100 block w-full ps-10 p-2.5 dark:bg-white dark:border-gray-100 dark:placeholder-gray-400"
                name="input_date" id="inputdate"  required />
        </div>


        <div class="mt-5">
            <div class="bg-white rounded-lg p-6 shadow">
                <label for="appointmentTime" class="font-bold mb-1 text-gray-700 block">Select Appointment Time</label>
                <h3 class="mb-5 text-sm font-small text-white">Please select a preferred time for your appointment:</h3>

                <!-- Radio input options -->
                <div class="grid w-full gap-6 md:grid-cols-3">
                    @foreach(['8:00 AM', '10:00 AM', '12:00 PM', '2:00 PM', '4:00 PM'] as $time)
                        <div>
                            <input type="radio" id="time-{{ str_replace(':', '', $time) }}"
                                name="radio_selection" value="{{ $time }}" class="hidden peer"  required />
                            <label for="time-{{ str_replace(':', '', $time) }}"
                                class="inline-flex items-center justify-between w-full p-5 text-gray-500 bg-white border border-gray-200 rounded-lg cursor-pointer hover:text-gray-600 hover:bg-gray-100 checked:text-blue-500 peer-checked:border-blue-600 peer-checked:text-blue-600 peer-checked:bg-blue-100 hover:text-gray-600 hover:bg-gray-100">
                                <div class="block text-lg font-semibold">{{ $time }}</div>
                            </label>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>

        <!-- Display validation errors -->
        @if($errors->any())
            <div class="text-red-500 bg-red-200 rounded p-5 m-5">
                @foreach($errors->all() as $error)
                    <p>{{ $error }}</p>
                @endforeach
            </div>
        @endif

        <div class="flex justify-between">
            <!-- Submit button and back button -->
            <input type="submit" class="p-2 bg-green-700 text-green-100 mt-4 text-normal hover:bg-green-800 rounded w-lg" value="Create Appointment" />
            <button class="mr-5 font-bold text-xl hover:text-gray-500">
                <i class="fa-solid fa-arrow-left"></i>
            </button>
        </div>
    </form>
</div>


@endsection