@extends('layouts.app')

@section('title', 'All Appointments')

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

    @if(session('success'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
            {{ session('success') }}
        </div>
    @endif

    @if(session('error'))
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
            {{ session('error') }}
        </div>
    @endif

    <!-- Filters and Search -->
    <div class="bg-white rounded-lg shadow p-4 mb-4">
        <form method="GET" action="{{ route('admin.appointments') }}" class="space-y-3">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-3">
                <div>
                    <input type="text" name="search" value="{{ request('search') }}" placeholder="Search patients, doctors, branches..." class="w-full px-3 py-2 border rounded text-sm">
                </div>
                <div>
                    <select name="doctor_id" class="w-full px-3 py-2 border rounded text-sm">
                        <option value="">All Doctors</option>
                        @foreach($doctors ?? [] as $doctor)
                            <option value="{{ $doctor->id }}" {{ request('doctor_id') == $doctor->id ? 'selected' : '' }}>{{ $doctor->full_name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <select name="patient_id" class="w-full px-3 py-2 border rounded text-sm">
                        <option value="">All Patients</option>
                        @foreach($patients ?? [] as $patient)
                            <option value="{{ $patient->id }}" {{ request('patient_id') == $patient->id ? 'selected' : '' }}>{{ $patient->full_name }}</option>
                        @endforeach
                    </select>
                </div>
                <div>
                    <select name="branch_id" class="w-full px-3 py-2 border rounded text-sm">
                        <option value="">All Branches</option>
                        @foreach($branches ?? [] as $branch)
                            <option value="{{ $branch->id }}" {{ request('branch_id') == $branch->id ? 'selected' : '' }}>{{ $branch->name }}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-5 gap-3">
                <div>
                    <select name="status" class="w-full px-3 py-2 border rounded text-sm">
                        <option value="">All Status</option>
                        <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                        <option value="confirmed" {{ request('status') == 'confirmed' ? 'selected' : '' }}>Confirmed</option>
                        <option value="in_progress" {{ request('status') == 'in_progress' ? 'selected' : '' }}>In Progress</option>
                        <option value="completed" {{ request('status') == 'completed' ? 'selected' : '' }}>Completed</option>
                        <option value="cancelled" {{ request('status') == 'cancelled' ? 'selected' : '' }}>Cancelled</option>
                    </select>
                </div>
                <div>
                    <select name="appointment_type" class="w-full px-3 py-2 border rounded text-sm">
                        <option value="">All Types</option>
                        <option value="scheduled" {{ request('appointment_type') == 'scheduled' ? 'selected' : '' }}>Scheduled</option>
                        <option value="immediate" {{ request('appointment_type') == 'immediate' ? 'selected' : '' }}>Immediate</option>
                    </select>
                </div>
                <div>
                    <select name="consultation_type" class="w-full px-3 py-2 border rounded text-sm">
                        <option value="">All Consultation Types</option>
                        <option value="Diagnostic Consultation" {{ request('consultation_type') == 'Diagnostic Consultation' ? 'selected' : '' }}>Diagnostic Consultation</option>
                        <option value="Remote Consultation" {{ request('consultation_type') == 'Remote Consultation' ? 'selected' : '' }}>Remote Consultation</option>
                        <option value="Primary care Consultation" {{ request('consultation_type') == 'Primary care Consultation' ? 'selected' : '' }}>Primary care Consultation</option>
                        <option value="Mental health support" {{ request('consultation_type') == 'Mental health support' ? 'selected' : '' }}>Mental health support</option>
                        <option value="Psychoanalytic or Psychodynamic Therapy" {{ request('consultation_type') == 'Psychoanalytic or Psychodynamic Therapy' ? 'selected' : '' }}>Psychoanalytic or Psychodynamic Therapy</option>
                    </select>
                </div>
                <div>
                    <label class="block text-xs text-gray-600 mb-1">Date From</label>
                    <input type="date" name="date_from" value="{{ request('date_from') }}" class="w-full px-3 py-2 border rounded text-sm">
                </div>
                <div>
                    <label class="block text-xs text-gray-600 mb-1">Date To</label>
                    <input type="date" name="date_to" value="{{ request('date_to') }}" class="w-full px-3 py-2 border rounded text-sm">
                </div>
            </div>
            <div class="flex gap-2">
                <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded text-sm">Filter</button>
                <a href="{{ route('admin.appointments') }}" class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded text-sm">Clear</a>
            </div>
        </form>
    </div>

    <div class="bg-white rounded-lg shadow overflow-hidden">
        <div class="overflow-x-auto -mx-4 sm:mx-0" style="scrollbar-width: thin;">
            <div class="inline-block min-w-full align-middle">
                <table class="min-w-full divide-y divide-gray-200" style="min-width: 1000px;">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-3 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Patient</th>
                        <th class="px-3 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase hidden md:table-cell">Doctor</th>
                        <th class="px-3 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase hidden lg:table-cell">Branch</th>
                        <th class="px-3 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">APPOINTMENT DATE</th>
                        <th class="px-3 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Type</th>
                        <th class="px-3 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase hidden lg:table-cell">Payment Mode</th>
                        <th class="px-3 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Status</th>
                        <th class="px-3 sm:px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase">Actions</th>
                    </tr>
                </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                @forelse($appointments as $appointment)
                <tr>
                    <td class="px-3 sm:px-6 py-4 whitespace-nowrap">
                        <div>
                            <div class="font-medium text-sm sm:text-base">{{ $appointment->patient->full_name }}</div>
                            <div class="text-xs sm:text-sm text-gray-500">{{ $appointment->patient->patient_id }}</div>
                        </div>
                    </td>
                    <td class="px-3 sm:px-6 py-4 whitespace-nowrap hidden md:table-cell">
                        <span class="text-sm">{{ $appointment->doctor ? $appointment->doctor->full_name : 'Not Assigned' }}</span>
                    </td>
                    <td class="px-3 sm:px-6 py-4 whitespace-nowrap hidden lg:table-cell">
                        <span class="text-sm">{{ $appointment->branch->name }}</span>
                    </td>
                    <td class="px-3 sm:px-6 py-4 whitespace-nowrap">
                        @if($appointment->appointment_date)
                            <span class="text-xs sm:text-sm">{{ $appointment->appointment_date->format('M d, Y H:i') }}</span>
                        @else
                            <span class="text-gray-400 text-xs sm:text-sm">Immediate</span>
                        @endif
                    </td>
                    <td class="px-3 sm:px-6 py-4 whitespace-nowrap">
                        <span class="bg-purple-100 text-purple-800 px-2 py-1 rounded text-xs">
                            {{ ucfirst($appointment->appointment_type) }}
                        </span>
                    </td>
                    <td class="px-3 sm:px-6 py-4 whitespace-nowrap hidden lg:table-cell">
                        <span class="text-xs sm:text-sm">{{ $appointment->patient->payment_mode }}</span>
                    </td>
                    <td class="px-3 sm:px-6 py-4 whitespace-nowrap">
                        <span class="px-2 py-1 text-xs rounded-full 
                            @if($appointment->status === 'completed') bg-green-100 text-green-800
                            @elseif($appointment->status === 'pending') bg-orange-100 text-orange-800
                            @elseif($appointment->status === 'in_progress') bg-blue-100 text-blue-800
                            @elseif($appointment->status === 'cancelled') bg-red-100 text-red-800
                            @else bg-gray-100 text-gray-800
                            @endif">
                            {{ ucfirst($appointment->status) }}
                        </span>
                    </td>
                    <td class="px-3 sm:px-6 py-4 whitespace-nowrap text-xs sm:text-sm font-medium">
                        <div class="flex flex-col gap-1">
                            <a href="{{ route('admin.appointments.edit', $appointment->id) }}" class="text-blue-600 hover:text-blue-900">Edit</a>
                            <form method="POST" action="{{ route('admin.appointments.delete', $appointment->id) }}" onsubmit="return confirm('Are you sure you want to delete this appointment?');" class="inline">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="text-red-600 hover:text-red-900">Delete</button>
                            </form>
                            @if($appointment->prescription)
                                <a href="{{ route('prescriptions.show', $appointment->prescription->id) }}" class="text-green-600 hover:text-green-900">
                                    <i class="fas fa-prescription"></i> Prescription
                                </a>
                            @endif
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="8" class="px-6 py-4 text-center text-gray-500">
                        No appointments found.
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
            </div>
        </div>
    </div>

    @if($appointments->count() > 0)
    <div class="mt-4 text-sm text-gray-600">
        Showing {{ $appointments->count() }} appointment(s)
    </div>
    @endif
</div>
@endsection

