@extends('layouts.portal')

@section('title', 'Schedule Appointment')
@section('page_title', 'Schedule Appointment')
@section('page_subtitle', 'Book a new appointment with your client')

@section('sidebar')
    @include('agent.partials.sidebar', ['active' => 'schedule'])
@endsection

@section('content')
<div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-xl shadow-lg p-6">
        <div class="flex justify-between items-center mb-6">
            <h1 class="text-3xl font-bold text-gray-900">Schedule New Appointment</h1>
            <a href="{{ route('agent.appointments') }}" class="text-gray-600 hover:text-gray-800 font-medium">
                <i class="fas fa-arrow-left mr-2"></i>Back to Appointments
            </a>
        </div>

        <form action="{{ route('agent.appointments.store') }}" method="POST" class="space-y-6">
            @csrf

            <!-- Client Selection -->
            <div class="space-y-2">
                <label for="client_id" class="block text-base font-medium text-gray-700">
                    <i class="fas fa-user text-[#772B10] mr-2"></i>Select Client <span class="text-red-500">*</span>
                </label>
                <select name="client_id" id="client_id" required 
                        class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-4 focus:ring-[#772B10]/10 focus:border-[#772B10] text-gray-900 bg-white">
                    <option value="">Choose a client...</option>
                    @forelse($clients as $client)
                        <option value="{{ $client->id }}">{{ $client->full_name }} - {{ $client->email }}</option>
                    @empty
                        <option value="" disabled>No clients available</option>
                    @endforelse
                </select>
                @error('client_id')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- Date and Time -->
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="space-y-2">
                    <label for="appointment_date" class="block text-base font-medium text-gray-700">
                        <i class="fas fa-calendar text-[#772B10] mr-2"></i>Date <span class="text-red-500">*</span>
                    </label>
                    <x-date-picker
                    name="appointment_date"
                    min-date="{{ date("
                    class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-4 focus:ring-[#772B10]/10 focus:border-[#772B10] text-gray-900 bg-white"
                    required
                />
                    @error('appointment_date')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>

                <div class="space-y-2">
                    <label for="appointment_time" class="block text-base font-medium text-gray-700">
                        <i class="fas fa-clock text-[#772B10] mr-2"></i>Time <span class="text-red-500">*</span>
                    </label>
                    <input type="time" name="appointment_time" id="appointment_time" required
                           class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-4 focus:ring-[#772B10]/10 focus:border-[#772B10] text-gray-900 bg-white">
                    @error('appointment_time')
                        <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                    @enderror
                </div>
            </div>

            <!-- Purpose -->
            <div class="space-y-2">
                <label for="purpose" class="block text-base font-medium text-gray-700">
                    <i class="fas fa-clipboard-list text-[#772B10] mr-2"></i>Purpose <span class="text-red-500">*</span>
                </label>
                <select name="purpose" id="purpose" required
                        class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-4 focus:ring-[#772B10]/10 focus:border-[#772B10] text-gray-900 bg-white">
                    <option value="">Select purpose...</option>
                    <option value="Will Discussion">Will Discussion</option>
                    <option value="Document Review">Document Review</option>
                    <option value="Client Onboarding">Client Onboarding</option>
                    <option value="Consultation">Consultation</option>
                    <option value="Signing">Document Signing</option>
                    <option value="Other">Other</option>
                </select>
                @error('purpose')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- Location -->
            <div class="space-y-2">
                <label for="location" class="block text-base font-medium text-gray-700">
                    <i class="fas fa-map-marker-alt text-[#772B10] mr-2"></i>Location
                </label>
                <input type="text" name="location" id="location"
                       placeholder="Enter meeting location (e.g., Office, Online, Client Address)"
                       class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-4 focus:ring-[#772B10]/10 focus:border-[#772B10] text-gray-900 bg-white">
                @error('location')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- Notes -->
            <div class="space-y-2">
                <label for="notes" class="block text-base font-medium text-gray-700">
                    <i class="fas fa-sticky-note text-[#772B10] mr-2"></i>Additional Notes
                </label>
                <textarea name="notes" id="notes" rows="4"
                          placeholder="Enter any additional notes or reminders for the appointment..."
                          class="w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-4 focus:ring-[#772B10]/10 focus:border-[#772B10] text-gray-900 bg-white resize-none"></textarea>
                @error('notes')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <!-- Submit Buttons -->
            <div class="flex justify-between pt-6 border-t border-gray-200">
                <a href="{{ route('agent.appointments') }}" class="px-8 py-4 border border-gray-300 rounded-xl text-gray-700 hover:bg-gray-50 font-medium">
                    <i class="fas fa-times mr-2"></i>Cancel
                </a>
                <button type="submit" class="bg-gradient-to-r from-[#772B10] to-[#8B3D15] hover:from-[#8B3D15] hover:to-[#9F4F1A] text-white px-8 py-4 rounded-xl font-medium inline-flex items-center shadow-lg hover:shadow-xl transition-all">
                    <i class="fas fa-calendar-check mr-2"></i>Schedule Appointment
                </button>
            </div>
        </form>
    </div>
</div>
@endsection