@extends('layouts.app')

@section('title', 'Edit Appointment')

@section('content')
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="mb-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
        <h1 class="text-3xl font-bold text-gray-800">Edit Appointment</h1>
        <a href="{{ route('admin.appointments') }}" class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded">
            <i class="fas fa-arrow-left mr-2"></i>Back to Appointments
        </a>
    </div>

    @if($errors->any())
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
            <ul>
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <div class="bg-white rounded-lg shadow p-6 mb-6">
        <h2 class="text-xl font-bold mb-4">Patient Information</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div><strong>Name:</strong> {{ $appointment->patient->full_name }}</div>
            <div><strong>Patient ID:</strong> {{ $appointment->patient->patient_id }}</div>
            <div><strong>Phone:</strong> {{ $appointment->patient->phone_number }}</div>
            <div><strong>Payment Mode:</strong> {{ $appointment->patient->payment_mode }}</div>
        </div>
    </div>

    <form method="POST" action="{{ route('admin.appointments.update', $appointment->id) }}" class="bg-white rounded-lg shadow p-6">
        @csrf
        @method('PUT')

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-gray-700 text-sm font-bold mb-2">Pharmacist *</label>
                <select name="pharmacist_id" required class="w-full px-3 py-2 border rounded">
                    @foreach($pharmacists as $pharmacist)
                        <option value="{{ $pharmacist->id }}" {{ old('pharmacist_id', $appointment->pharmacist_id) == $pharmacist->id ? 'selected' : '' }}>{{ $pharmacist->full_name }}</option>
                    @endforeach
                </select>
            </div>

            <div>
                <label class="block text-gray-700 text-sm font-bold mb-2">Branch *</label>
                <select name="branch_id" required class="w-full px-3 py-2 border rounded">
                    @foreach($branches as $branch)
                        <option value="{{ $branch->id }}" {{ old('branch_id', $appointment->branch_id) == $branch->id ? 'selected' : '' }}>{{ $branch->name }}</option>
                    @endforeach
                </select>
            </div>

            <div>
                <label class="block text-gray-700 text-sm font-bold mb-2">Patient *</label>
                <select name="patient_id" required class="w-full px-3 py-2 border rounded">
                    @foreach($patients as $patient)
                        <option value="{{ $patient->id }}" {{ old('patient_id', $appointment->patient_id) == $patient->id ? 'selected' : '' }}>{{ $patient->full_name }}</option>
                    @endforeach
                </select>
            </div>

            <div>
                <label class="block text-gray-700 text-sm font-bold mb-2">Doctor</label>
                <select name="doctor_id" class="w-full px-3 py-2 border rounded">
                    <option value="">Select Doctor</option>
                    @foreach($doctors as $doctor)
                        <option value="{{ $doctor->id }}" {{ old('doctor_id', $appointment->doctor_id) == $doctor->id ? 'selected' : '' }}>{{ $doctor->full_name }}</option>
                    @endforeach
                </select>
            </div>

            <div>
                <label class="block text-gray-700 text-sm font-bold mb-2">Consultation Type *</label>
                <select name="consultation_type" required class="w-full px-3 py-2 border rounded">
                    <option value="Diagnostic Consultation" {{ old('consultation_type', $appointment->consultation_type) == 'Diagnostic Consultation' ? 'selected' : '' }}>Diagnostic Consultation</option>
                    <option value="Remote Consultation" {{ old('consultation_type', $appointment->consultation_type) == 'Remote Consultation' ? 'selected' : '' }}>Remote Consultation</option>
                    <option value="Primary care Consultation" {{ old('consultation_type', $appointment->consultation_type) == 'Primary care Consultation' ? 'selected' : '' }}>Primary care Consultation</option>
                    <option value="Mental health support" {{ old('consultation_type', $appointment->consultation_type) == 'Mental health support' ? 'selected' : '' }}>Mental health support</option>
                    <option value="Psychoanalytic or Psychodynamic Therapy" {{ old('consultation_type', $appointment->consultation_type) == 'Psychoanalytic or Psychodynamic Therapy' ? 'selected' : '' }}>Psychoanalytic or Psychodynamic Therapy</option>
                </select>
            </div>

            <div>
                <label class="block text-gray-700 text-sm font-bold mb-2">Appointment Type *</label>
                <select name="appointment_type" id="appointment_type" required class="w-full px-3 py-2 border rounded">
                    <option value="scheduled" {{ old('appointment_type', $appointment->appointment_type) == 'scheduled' ? 'selected' : '' }}>Scheduled</option>
                    <option value="immediate" {{ old('appointment_type', $appointment->appointment_type) == 'immediate' ? 'selected' : '' }}>Immediate</option>
                </select>
            </div>

            <div id="appointment_date_field">
                <label class="block text-gray-700 text-sm font-bold mb-2">Appointment Date & Time</label>
                <input type="datetime-local" name="appointment_date" value="{{ old('appointment_date', $appointment->appointment_date ? $appointment->appointment_date->format('Y-m-d\TH:i') : '') }}" class="w-full px-3 py-2 border rounded">
            </div>

            <div>
                <label class="block text-gray-700 text-sm font-bold mb-2">Status *</label>
                <select name="status" required class="w-full px-3 py-2 border rounded">
                    <option value="pending" {{ old('status', $appointment->status) == 'pending' ? 'selected' : '' }}>Pending</option>
                    <option value="confirmed" {{ old('status', $appointment->status) == 'confirmed' ? 'selected' : '' }}>Confirmed</option>
                    <option value="in_progress" {{ old('status', $appointment->status) == 'in_progress' ? 'selected' : '' }}>In Progress</option>
                    <option value="completed" {{ old('status', $appointment->status) == 'completed' ? 'selected' : '' }}>Completed</option>
                    <option value="cancelled" {{ old('status', $appointment->status) == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                </select>
            </div>
        </div>

        <div class="mt-6 flex justify-end">
            <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded">
                Update Appointment
            </button>
        </div>
    </form>
</div>

<script>
document.getElementById('appointment_type').addEventListener('change', function() {
    const dateField = document.getElementById('appointment_date_field');
    if (this.value === 'immediate') {
        dateField.style.display = 'none';
    } else {
        dateField.style.display = 'block';
    }
});

// Initialize on page load
if (document.getElementById('appointment_type').value === 'immediate') {
    document.getElementById('appointment_date_field').style.display = 'none';
}
</script>
@endsection

