@extends('layouts.app')

@section('title', 'Appointment Management')
@section('no-page-header')

@section('content')
<div class="space-y-3">
    <div class="bg-white rounded-lg shadow-sm border border-gray-200">
        <div class="px-3 py-2 border-b border-gray-200">
            <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
                <h5 class="text-base font-semibold text-gray-900">Appointments</h5>
                <div class="flex flex-col sm:flex-row gap-2">
                    <a href="{{ route('appointments.create') }}" class="h-8 inline-flex items-center justify-center gap-1.5 px-3 py-1 rounded-md border border-blue-200 text-xs font-medium text-blue-700 bg-blue-50 hover:bg-blue-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                        <i class="fas fa-plus"></i>Create Appointment
                    </a>
                    <a href="{{ route('appointments.today') }}" class="h-8 inline-flex items-center justify-center gap-1.5 px-3 py-1 rounded-md text-xs font-medium text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">
                        <i class="fas fa-calendar-day"></i>Today
                    </a>
                </div>
            </div>
        </div>

        <div class="px-3 py-2 space-y-3">
            <!-- Compact summary cards -->
            <div class="grid grid-cols-2 lg:grid-cols-4 gap-2">
                <div class="flex items-center justify-between gap-3 rounded-md border border-gray-200 bg-gray-50 px-3 py-2">
                    <span class="text-xs font-medium text-gray-600">Total Appointments</span>
                    <span id="summary_total" class="text-lg font-semibold text-gray-800 tabular-nums">{{ $appointments->total() }}</span>
                </div>
                <div class="flex items-center justify-between gap-3 rounded-md border border-yellow-100 bg-yellow-50 px-3 py-2">
                    <div class="text-xs font-medium text-yellow-800">Pending<span class="block font-normal text-gray-500">On this page</span></div>
                    <span id="summary_pending" class="text-lg font-semibold text-yellow-800 tabular-nums">{{ $appointments->where('status', 'pending')->count() }}</span>
                </div>
                <div class="flex items-center justify-between gap-3 rounded-md border border-blue-100 bg-blue-50 px-3 py-2">
                    <div class="text-xs font-medium text-blue-800">Confirmed<span class="block font-normal text-gray-500">On this page</span></div>
                    <span id="summary_confirmed" class="text-lg font-semibold text-blue-800 tabular-nums">{{ $appointments->where('status', 'confirmed')->count() }}</span>
                </div>
                <div class="flex items-center justify-between gap-3 rounded-md border border-green-100 bg-green-50 px-3 py-2">
                    <div class="text-xs font-medium text-green-800">Completed<span class="block font-normal text-gray-500">On this page</span></div>
                    <span id="summary_completed" class="text-lg font-semibold text-green-800 tabular-nums">{{ $appointments->where('status', 'completed')->count() }}</span>
                </div>
            </div>

            <!-- Filters -->
            <div class="flex flex-wrap items-end gap-2 rounded-md border border-gray-200 bg-gray-50 p-2">
                <div class="flex-1 min-w-[180px]">
                    <label for="ic_number" class="block text-xs font-medium text-gray-600">IC Number</label>
                    <input type="search" id="ic_number" class="mt-1 block h-8 w-full px-2 py-1 border border-gray-300 bg-white text-xs rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500" name="ic_number" value="{{ request('ic_number') }}" placeholder="Search by IC number">
                </div>
                <div class="min-w-[140px]">
                    <label for="start_date" class="block text-xs font-medium text-gray-600">From</label>
                    <input type="date" id="start_date" class="mt-1 block h-8 w-full px-2 py-1 border border-gray-300 bg-white text-xs rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500" name="start_date" value="{{ request('start_date') }}">
                </div>
                <div class="min-w-[140px]">
                    <label for="end_date" class="block text-xs font-medium text-gray-600">To</label>
                    <input type="date" id="end_date" class="mt-1 block h-8 w-full px-2 py-1 border border-gray-300 bg-white text-xs rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500" name="end_date" value="{{ request('end_date') }}">
                </div>
                <div class="flex-1 min-w-[160px]">
                    <label for="client_id" class="block text-xs font-medium text-gray-600">Customer</label>
                    <select id="client_id" class="mt-1 block h-8 w-full px-2 py-1 border border-gray-300 bg-white text-xs rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500" name="client_id">
                        <option value="">All Clients</option>
                        @foreach($clients as $client)
                            <option value="{{ $client->id }}" {{ request('client_id') == $client->id ? 'selected' : '' }}>
                                {{ $client->name }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="min-w-[130px]">
                    <label for="status" class="block text-xs font-medium text-gray-600">Status</label>
                    <select id="status" class="mt-1 block h-8 w-full px-2 py-1 border border-gray-300 bg-white text-xs rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500" name="status">
                        <option value="">All Status</option>
                        @foreach($statuses as $status)
                            <option value="{{ $status }}" {{ request('status') == $status ? 'selected' : '' }}>
                                {{ ucfirst($status) }}
                            </option>
                        @endforeach
                    </select>
                </div>
                <button type="button" id="reset_filters" class="h-8 inline-flex items-center justify-center px-3 py-1 rounded-md text-xs font-medium text-gray-700 bg-white border border-gray-300 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500">Reset</button>
            </div>

            <!-- Loading Indicator -->
            <div id="loading" class="hidden text-center">
                <div class="inline-flex items-center">
                    <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-primary-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    <span class="text-sm text-gray-600">Loading appointments...</span>
                </div>
            </div>

            <!-- Appointments Table -->
            <div id="appointments-container" class="overflow-x-auto rounded-md border border-gray-200">
                <table class="min-w-full divide-y divide-gray-200 text-xs leading-4">
                    <thead>
                        <tr>
                            <th class="px-3 py-1.5 text-left text-xs font-semibold text-gray-600 whitespace-nowrap bg-gray-50">No.</th>
                            <th class="px-3 py-1.5 text-left text-xs font-semibold text-gray-600 whitespace-nowrap bg-gray-50">Date</th>
                            <th class="px-3 py-1.5 text-left text-xs font-semibold text-gray-600 whitespace-nowrap bg-gray-50">Time</th>
                            <th class="px-3 py-1.5 text-left text-xs font-semibold text-gray-600 whitespace-nowrap bg-gray-50">Customer</th>
                            <th class="px-3 py-1.5 text-left text-xs font-semibold text-gray-600 whitespace-nowrap bg-gray-50">Appointment</th>
                            <th class="px-3 py-1.5 text-left text-xs font-semibold text-gray-600 whitespace-nowrap bg-gray-50">Persons</th>
                            <th class="px-3 py-1.5 text-left text-xs font-semibold text-gray-600 whitespace-nowrap bg-gray-50">Status</th>
                            <th class="px-3 py-1.5 text-left text-xs font-semibold text-gray-600 whitespace-nowrap bg-gray-50">Actions</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200">
                        @forelse($appointments as $appointment)
                            <tr class="hover:bg-gray-50 transition-colors">
                                <td class="px-3 py-1.5 text-xs text-gray-600">{{ $appointments->firstItem() + $loop->index }}</td>
                                <td class="px-3 py-1.5 text-xs text-gray-600 whitespace-nowrap">{{ $appointment->appointment_date->format('d-m-Y') }}</td>
                                <td class="px-3 py-1.5 text-xs text-gray-600 whitespace-nowrap">{{ $appointment->formatted_time }}</td>
                                <td class="px-3 py-1.5">
                                    <div class="font-medium text-gray-700 uppercase">{{ $appointment->client->name ?? 'N/A' }}</div>
                                    @if($appointment->contact)
                                        <div class="text-xs text-gray-500 uppercase">{{ $appointment->contact }}</div>
                                    @endif
                                </td>
                                <td class="px-3 py-1.5">
                                    <div class="font-medium text-gray-700 uppercase">{{ $appointment->appointment_title }}</div>
                                    @if($appointment->notes)
                                        <div class="text-[9px] text-gray-500 truncate max-w-xs uppercase">{{ $appointment->notes }}</div>
                                    @endif
                                </td>
                                <td class="px-3 py-1.5 text-xs text-gray-600">{{ $appointment->no_of_persons }}</td>
                                <td class="px-3 py-1.5">
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ getStatusBadgeClass($appointment->status) }}">
                                        {{ ucfirst($appointment->status) }}
                                    </span>
                                </td>
                                <td class="px-3 py-1.5">
                                    <div class="flex flex-wrap items-center gap-1 min-w-[210px]">
                                        <a href="{{ route('appointments.show', $appointment) }}" class="h-6 inline-flex items-center px-1.5 py-0.5 border border-gray-300 text-gray-700 bg-white hover:bg-gray-50 rounded text-[11px] font-medium leading-none">
                                            View
                                        </a>
                                        @if(in_array($appointment->status, ['pending', 'confirmed'], true))
                                            <a href="{{ route('appointments.edit', $appointment) }}" class="h-6 inline-flex items-center px-1.5 py-0.5 border border-blue-200 text-blue-700 bg-blue-50 hover:bg-blue-100 rounded text-[11px] font-medium leading-none">
                                                Edit
                                            </a>
                                        @endif

                                        @if($appointment->status == 'pending')
                                            <form action="{{ route('appointments.confirm', $appointment) }}" method="POST" class="inline">
                                                @csrf
                                                <button type="submit" class="h-6 inline-flex items-center px-1.5 py-0.5 border border-green-200 text-green-700 bg-green-50 hover:bg-green-100 rounded text-[11px] font-medium leading-none">
                                                    Confirm
                                                </button>
                                            </form>
                                        @endif

                                        @if($appointment->status == 'confirmed')
                                            <form action="{{ route('appointments.complete', $appointment) }}" method="POST" class="inline">
                                                @csrf
                                                <button type="submit" class="h-6 inline-flex items-center px-1.5 py-0.5 border border-green-200 text-green-700 bg-green-50 hover:bg-green-100 rounded text-[11px] font-medium leading-none">
                                                    Complete
                                                </button>
                                            </form>
                                        @endif

                                        @if(in_array($appointment->status, ['pending', 'confirmed']))
                                            <form action="{{ route('appointments.cancel', $appointment) }}" method="POST" class="inline" onsubmit="return confirm('Are you sure you want to cancel this appointment?')">
                                                @csrf
                                                <button type="submit" class="h-6 inline-flex items-center px-1.5 py-0.5 border border-yellow-200 text-yellow-800 bg-yellow-50 hover:bg-yellow-100 rounded text-[11px] font-medium leading-none">
                                                    Cancel
                                                </button>
                                            </form>
                                        @endif

                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="px-4 py-8 text-center text-sm text-gray-500">
                                    <div class="flex flex-col items-center">
                                        <i class="fas fa-calendar-times text-4xl text-gray-300 mb-2"></i>
                                        No appointments found.
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            @if($appointments->hasPages())
                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
                    <div class="text-xs text-gray-600">
                        Showing {{ $appointments->firstItem() }} to {{ $appointments->lastItem() }} of {{ $appointments->total() }} appointments
                    </div>
                    {{ $appointments->links() }}
                </div>
            @endif
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Get filter elements
    const icNumberInput = document.getElementById('ic_number');
    const startDateInput = document.getElementById('start_date');
    const endDateInput = document.getElementById('end_date');
    const clientSelect = document.getElementById('client_id');
    const statusSelect = document.getElementById('status');
    const resetFiltersButton = document.getElementById('reset_filters');
    const appointmentsContainer = document.getElementById('appointments-container');
    const loadingIndicator = document.getElementById('loading');

    // Function to get filter values
    function getFilterValues() {
        return {
            ic_number: icNumberInput.value.trim(),
            start_date: startDateInput.value,
            end_date: endDateInput.value,
            client_id: clientSelect.value,
            status: statusSelect.value
        };
    }

    // Function to fetch filtered appointments
    function fetchAppointments() {
        const filters = getFilterValues();

        // Show loading indicator
        loadingIndicator.classList.remove('hidden');
        appointmentsContainer.style.opacity = '0.5';

        // Build query string
        const queryString = new URLSearchParams(filters).toString();

        // Make AJAX request
        fetch(`{{ route('appointments.index') }}?${queryString}`, {
            method: 'GET',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'Accept': 'text/html'
            }
        })
        .then(response => response.text())
        .then(html => {
            // Parse the HTML response
            const parser = new DOMParser();
            const doc = parser.parseFromString(html, 'text/html');

            // Extract the appointments table
            const newAppointmentsContainer = doc.getElementById('appointments-container');
            if (newAppointmentsContainer) {
                appointmentsContainer.innerHTML = newAppointmentsContainer.innerHTML;
            }

            // Update pagination if exists
            const newPagination = doc.querySelector('.flex.items-center.justify-between');
            if (newPagination) {
                const existingPagination = document.querySelector('.flex.items-center.justify-between');
                if (existingPagination) {
                    existingPagination.innerHTML = newPagination.innerHTML;
                }
            }

            // Update summary values.
            ['total', 'pending', 'confirmed', 'completed'].forEach(summary => {
                const currentValue = document.getElementById(`summary_${summary}`);
                const newValue = doc.getElementById(`summary_${summary}`);
                if (currentValue && newValue) currentValue.textContent = newValue.textContent;
            });
        })
        .catch(error => {
            console.error('Error fetching appointments:', error);
            // Show error message
            appointmentsContainer.innerHTML = `
                <div class="text-center py-8">
                    <div class="text-red-600 text-sm">Error loading appointments. Please try again.</div>
                </div>
            `;
        })
        .finally(() => {
            // Hide loading indicator
            loadingIndicator.classList.add('hidden');
            appointmentsContainer.style.opacity = '1';
        });
    }

    // Add event listeners to filters
    let debounceTimer;
    function debounceFetch() {
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(fetchAppointments, 500); // 500ms delay
    }

    startDateInput.addEventListener('change', debounceFetch);
    endDateInput.addEventListener('change', debounceFetch);
    clientSelect.addEventListener('change', debounceFetch);
    statusSelect.addEventListener('change', debounceFetch);
    icNumberInput.addEventListener('input', debounceFetch);

    resetFiltersButton.addEventListener('click', function() {
        icNumberInput.value = '';
        startDateInput.value = '';
        endDateInput.value = '';
        clientSelect.value = '';
        statusSelect.value = '';
        fetchAppointments();
    });

    // Also trigger on input for date fields (for better UX)
    startDateInput.addEventListener('input', debounceFetch);
    endDateInput.addEventListener('input', debounceFetch);
});
</script>

@endsection

@php
function getStatusBadgeClass($status) {
    return match($status) {
        'pending' => 'bg-yellow-100 text-yellow-800',
        'confirmed' => 'bg-blue-100 text-blue-800',
        'completed' => 'bg-green-100 text-green-800',
        'cancelled' => 'bg-red-100 text-red-800',
        default => 'bg-gray-100 text-gray-800'
    };
}
@endphp