@extends('layouts/contentNavbarLayout')

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

@section('content')
<nav aria-label="breadcrumb" class="mb-3">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
        <li class="breadcrumb-item active">Appointments</li>
    </ol>
</nav>

<div class="container-fluid">
    <!-- Header Section -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="mb-1 fw-bold text-primary">
                        <i class="mdi mdi-calendar-clock me-2"></i>Appointments Management
                    </h1>
                    <p class="text-muted mb-0">Manage and monitor all appointments</p>
                </div>
                <div class="badge bg-info fs-6 px-3 py-2">
                    Total: {{ $appointments->total() }} appointments
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <style>
        .stat-card {
            transition: all 0.3s ease;
            cursor: pointer;
            border: none;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .stat-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 3px 8px rgba(0,0,0,0.15);
        }
        .stat-card .card-body {
            padding: 0.75rem 1rem;
        }
        .stat-number {
            font-size: 1.5rem;
            font-weight: 700;
            line-height: 1.2;
        }
        .stat-label {
            font-size: 0.75rem;
            opacity: 0.95;
            font-weight: 500;
            margin-top: 0.15rem;
        }
        .stat-icon {
            font-size: 1.75rem;
            opacity: 0.3;
        }
        .stats-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 0.75rem;
        }
        @media (min-width: 1200px) {
            .stats-container {
                grid-template-columns: repeat(5, 1fr);
            }
        }
        @media (max-width: 1199px) and (min-width: 768px) {
            .stats-container {
                grid-template-columns: repeat(4, 1fr);
            }
        }
        @media (max-width: 767px) {
            .stats-container {
                grid-template-columns: repeat(2, 1fr);
            }
        }
    </style>
    
    <div class="stats-container mb-3">
        <!-- Total -->
        <a href="{{ route('appointments.index') }}" class="text-decoration-none">
            <div class="card bg-primary text-white stat-card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="stat-number mb-0">{{ number_format($stats['total']) }}</div>
                            <div class="stat-label">Total</div>
                        </div>
                        <i class="mdi mdi-calendar stat-icon"></i>
                    </div>
                </div>
            </div>
        </a>
        <!-- Booked -->
        <a href="{{ route('appointments.index', ['status' => 'booked']) }}" class="text-decoration-none">
            <div class="card bg-primary bg-opacity-75 text-white stat-card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="stat-number mb-0">{{ number_format($stats['booked']) }}</div>
                            <div class="stat-label">Booked</div>
                        </div>
                        <i class="mdi mdi-calendar-check stat-icon"></i>
                    </div>
                </div>
            </div>
        </a>
        <!-- Confirmed -->
        <a href="{{ route('appointments.index', ['status' => 'confirmed']) }}" class="text-decoration-none">
            <div class="card bg-info text-white stat-card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="stat-number mb-0">{{ number_format($stats['confirmed']) }}</div>
                            <div class="stat-label">Confirmed</div>
                        </div>
                        <i class="mdi mdi-check-circle-outline stat-icon"></i>
                    </div>
                </div>
            </div>
        </a>
        <!-- In Progress -->
        <a href="{{ route('appointments.index', ['status' => 'in_progress']) }}" class="text-decoration-none">
            <div class="card bg-warning text-white stat-card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="stat-number mb-0">{{ number_format($stats['in_progress']) }}</div>
                            <div class="stat-label">In Progress</div>
                        </div>
                        <i class="mdi mdi-clock-outline stat-icon"></i>
                    </div>
                </div>
            </div>
        </a>
        <!-- Completed -->
        <a href="{{ route('appointments.index', ['status' => 'completed']) }}" class="text-decoration-none">
            <div class="card bg-success text-white stat-card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="stat-number mb-0">{{ number_format($stats['completed']) }}</div>
                            <div class="stat-label">Completed</div>
                        </div>
                        <i class="mdi mdi-check-circle stat-icon"></i>
                    </div>
                </div>
            </div>
        </a>
        <!-- Not Attended -->
        <a href="{{ route('appointments.index', ['status' => 'not_attended']) }}" class="text-decoration-none">
            <div class="card bg-dark text-white stat-card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="stat-number mb-0">{{ number_format($stats['not_attended']) }}</div>
                            <div class="stat-label">Not Attended</div>
                        </div>
                        <i class="mdi mdi-account-off stat-icon"></i>
                    </div>
                </div>
            </div>
        </a>
        <!-- Rescheduled -->
        <a href="{{ route('appointments.index', ['status' => 'rescheduled']) }}" class="text-decoration-none">
            <div class="card bg-secondary text-white stat-card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="stat-number mb-0">{{ number_format($stats['rescheduled']) }}</div>
                            <div class="stat-label">Rescheduled</div>
                        </div>
                        <i class="mdi mdi-calendar-refresh stat-icon"></i>
                    </div>
                </div>
            </div>
        </a>
        <!-- Cancelled -->
        <a href="{{ route('appointments.index', ['status' => 'cancelled']) }}" class="text-decoration-none">
            <div class="card bg-danger text-white stat-card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="stat-number mb-0">{{ number_format($stats['cancelled']) }}</div>
                            <div class="stat-label">Cancelled</div>
                        </div>
                        <i class="mdi mdi-cancel stat-icon"></i>
                    </div>
                </div>
            </div>
        </a>
        <!-- Pending Payment -->
        <a href="{{ route('appointments.index', ['payment_status' => '0']) }}" class="text-decoration-none">
            <div class="card bg-warning bg-opacity-75 text-white stat-card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="stat-number mb-0">{{ number_format($stats['pending_payment']) }}</div>
                            <div class="stat-label">Pending Payment</div>
                        </div>
                        <i class="mdi mdi-credit-card-off stat-icon"></i>
                    </div>
                </div>
            </div>
        </a>
        <!-- Paid -->
        <a href="{{ route('appointments.index', ['payment_status' => '1']) }}" class="text-decoration-none">
            <div class="card bg-success bg-opacity-75 text-white stat-card h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="stat-number mb-0">{{ number_format($stats['paid']) }}</div>
                            <div class="stat-label">Paid</div>
                        </div>
                        <i class="mdi mdi-credit-card-check stat-icon"></i>
                    </div>
                </div>
            </div>
        </a>
    </div>

    <!-- Filters and Search -->
    <style>
        .filter-section .form-label {
            font-size: 0.75rem;
            font-weight: 500;
            margin-bottom: 0.25rem;
        }
        .filter-section .form-control,
        .filter-section .form-select {
            font-size: 0.875rem;
            padding: 0.375rem 0.75rem;
        }
        .filter-section .btn {
            font-size: 0.875rem;
            padding: 0.375rem 0.75rem;
        }
    </style>
    <div class="card mb-3 filter-section">
        <div class="card-body py-2">
            <form method="GET" action="{{ route('appointments.index') }}" id="filter-form">
                <div class="row g-2">
                    <!-- Search -->
                    <div class="col-md-2">
                        <label class="form-label">Search</label>
                        <input type="text" class="form-control form-control-sm" name="search" value="{{ request('search') }}" 
                               placeholder="Appointment #, Coach...">
                    </div>

                    <!-- Status Filter -->
                    <div class="col-md-2">
                        <label class="form-label">Status</label>
                        <select class="form-select form-select-sm" name="status">
                            <option value="">All Status</option>
                            @foreach($statuses as $status)
                                <option value="{{ $status }}" {{ request('status') == $status ? 'selected' : '' }}>
                                    {{ ucfirst(str_replace('_', ' ', $status)) }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Payment Status -->
                    <div class="col-md-2">
                        <label class="form-label">Payment</label>
                        <select class="form-select form-select-sm" name="payment_status">
                            <option value="">All</option>
                            <option value="0" {{ request('payment_status') == '0' ? 'selected' : '' }}>Pending</option>
                            <option value="1" {{ request('payment_status') == '1' ? 'selected' : '' }}>Paid</option>
                        </select>
                    </div>

                    <!-- Coach Filter -->
                    <div class="col-md-2">
                        <label class="form-label">Coach</label>
                        <select class="form-select form-select-sm select2" name="coach_id">
                            <option value="">All Coaches</option>
                            @foreach($coaches as $coach)
                                <option value="{{ $coach->id }}" {{ request('coach_id') == $coach->id ? 'selected' : '' }}>
                                    {{ $coach->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Employee Filter -->
                    <div class="col-md-2">
                        <label class="form-label">Employee</label>
                        <select class="form-select form-select-sm select2" name="employee_id">
                            <option value="">All Employees</option>
                            @foreach($employees as $employee)
                                <option value="{{ $employee->id }}" {{ request('employee_id') == $employee->id ? 'selected' : '' }}>
                                    {{ $employee->username }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Speciality Filter -->
                    <div class="col-md-2">
                        <label class="form-label">Speciality</label>
                        <select class="form-select form-select-sm" name="speciality_id">
                            <option value="">All Specialities</option>
                            @foreach($specialities as $speciality)
                                <option value="{{ $speciality->id }}" {{ request('speciality_id') == $speciality->id ? 'selected' : '' }}>
                                    {{ $speciality->name_ar ?? $speciality->name_en }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <!-- Date Filter -->
                    <div class="col-md-2">
                        <label class="form-label">Date Filter</label>
                        <select class="form-select form-select-sm" name="date_filter" id="date_filter">
                            <option value="">All Dates</option>
                            <option value="today" {{ request('date_filter') == 'today' ? 'selected' : '' }}>Today</option>
                            <option value="tomorrow" {{ request('date_filter') == 'tomorrow' ? 'selected' : '' }}>Tomorrow</option>
                            <option value="this_week" {{ request('date_filter') == 'this_week' ? 'selected' : '' }}>This Week</option>
                            <option value="this_month" {{ request('date_filter') == 'this_month' ? 'selected' : '' }}>This Month</option>
                            <option value="this_year" {{ request('date_filter') == 'this_year' ? 'selected' : '' }}>This Year</option>
                            <option value="upcoming" {{ request('date_filter') == 'upcoming' ? 'selected' : '' }}>Upcoming</option>
                            <option value="past" {{ request('date_filter') == 'past' ? 'selected' : '' }}>Past</option>
                            <option value="custom" {{ request('date_filter') == 'custom' ? 'selected' : '' }}>Custom Range</option>
                        </select>
                    </div>

                    <!-- Custom Date Range -->
                    <div class="col-md-2" id="custom_date_range" style="display: {{ request('date_filter') == 'custom' ? 'block' : 'none' }};">
                        <label class="form-label">Start Date</label>
                        <input type="date" class="form-control form-control-sm" name="start_date" value="{{ request('start_date') }}">
                    </div>
                    <div class="col-md-2" id="custom_date_range_end" style="display: {{ request('date_filter') == 'custom' ? 'block' : 'none' }};">
                        <label class="form-label">End Date</label>
                        <input type="date" class="form-control form-control-sm" name="end_date" value="{{ request('end_date') }}">
                    </div>

                    <!-- Sort -->
                    <div class="col-md-2">
                        <label class="form-label">Sort By</label>
                        <select class="form-select form-select-sm" name="sort">
                            <option value="appointment_date" {{ request('sort') == 'appointment_date' ? 'selected' : '' }}>Date</option>
                            <option value="appointment_number" {{ request('sort') == 'appointment_number' ? 'selected' : '' }}>Appointment #</option>
                            <option value="coach" {{ request('sort') == 'coach' ? 'selected' : '' }}>Coach</option>
                            <option value="employee" {{ request('sort') == 'employee' ? 'selected' : '' }}>Employee</option>
                            <option value="status" {{ request('sort') == 'status' ? 'selected' : '' }}>Status</option>
                            <option value="final_price" {{ request('sort') == 'final_price' ? 'selected' : '' }}>Price</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="form-label">Order</label>
                        <select class="form-select form-select-sm" name="sort_order">
                            <option value="desc" {{ request('sort_order') == 'desc' ? 'selected' : '' }}>Descending</option>
                            <option value="asc" {{ request('sort_order') == 'asc' ? 'selected' : '' }}>Ascending</option>
                        </select>
                    </div>

                    <!-- Action Buttons -->
                    <div class="col-md-12 mt-2">
                        <button type="submit" class="btn btn-primary btn-sm">
                            <i class="mdi mdi-filter me-1"></i>Apply Filters
                        </button>
                        <a href="{{ route('appointments.index') }}" class="btn btn-outline-secondary btn-sm">
                            <i class="mdi mdi-refresh me-1"></i>Clear
                        </a>
                    </div>
                </div>
            </form>

            @if(request()->anyFilled(['search', 'status', 'payment_status', 'coach_id', 'employee_id', 'speciality_id', 'date_filter']))
                <div class="mt-2 pt-2 border-top">
                    <small class="text-muted">Active filters:</small>
                    @if(request('search'))
                        <span class="badge bg-info me-1" style="font-size: 0.7rem;">Search: {{ request('search') }}</span>
                    @endif
                    @if(request('status'))
                        <span class="badge bg-info me-1" style="font-size: 0.7rem;">Status: {{ ucfirst(str_replace('_', ' ', request('status'))) }}</span>
                    @endif
                    @if(request('payment_status'))
                        <span class="badge bg-info me-1" style="font-size: 0.7rem;">Payment: {{ request('payment_status') == '1' ? 'Paid' : 'Pending' }}</span>
                    @endif
                    @if(request('coach_id'))
                        <span class="badge bg-info me-1" style="font-size: 0.7rem;">Coach: {{ $coaches->find(request('coach_id'))->name ?? 'N/A' }}</span>
                    @endif
                    @if(request('employee_id'))
                        <span class="badge bg-info me-1" style="font-size: 0.7rem;">Employee: {{ $employees->find(request('employee_id'))->name ?? 'N/A' }}</span>
                    @endif
                    @if(request('speciality_id'))
                        <span class="badge bg-info me-1" style="font-size: 0.7rem;">Speciality: {{ $specialities->find(request('speciality_id'))->name_ar ?? 'N/A' }}</span>
                    @endif
                    @if(request('date_filter'))
                        <span class="badge bg-info me-1" style="font-size: 0.7rem;">
                            Date: {{ ucfirst(str_replace('_', ' ', request('date_filter'))) }}
                            @if(request('date_filter') == 'custom' && request('start_date') && request('end_date'))
                                ({{ request('start_date') }} to {{ request('end_date') }})
                            @endif
                        </span>
                    @endif
                </div>
            @endif
        </div>
    </div>

    <!-- Appointments Table -->
    <div class="card">
        <div class="card-body">
            @if($appointments->count() > 0)
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>Appointment #</th>
                                <th>Date & Time</th>
                                <th>Coach</th>
                                <th>Employee</th>
                                <th>Speciality</th>
                                <th>Status</th>
                                <th>Payment</th>
                                <th>Price</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($appointments as $appointment)
                                @php
                                    $statusColors = [
                                        'booked' => 'primary',
                                        'confirmed' => 'info',
                                        'in_progress' => 'warning',
                                        'completed' => 'success',
                                        'not_attended' => 'dark',
                                        'rescheduled' => 'secondary',
                                        'cancelled' => 'danger'
                                    ];
                                    $statusColor = $statusColors[$appointment->status] ?? 'secondary';
                                @endphp
                                <tr>
                                    <td>
                                        <strong>{{ $appointment->appointment_number }}</strong>
                                    </td>
                                    <td>
                                        <div>{{ $appointment->appointment_date ? $appointment->appointment_date->format('M d, Y') : 'N/A' }}</div>
                                        <small class="text-muted">
                                            {{ $appointment->time_start ? date('h:i A', strtotime($appointment->time_start)) : 'N/A' }}
                                            @if($appointment->time_end)
                                                - {{ date('h:i A', strtotime($appointment->time_end)) }}
                                            @endif
                                        </small>
                                    </td>
                                    <td>
                                        @if($appointment->coach)
                                            <div>{{ $appointment->coach->name }}</div>
                                            <small class="text-muted">{{ $appointment->coach->email }}</small>
                                        @else
                                            <span class="text-muted">N/A</span>
                                        @endif
                                    </td>
                                    <td>
                                        @if($appointment->employee)
                                            <div>{{ $appointment->employee->name }}</div>
                                            <small class="text-muted">{{ $appointment->employee->email }}</small>
                                        @else
                                            <span class="text-muted">N/A</span>
                                        @endif
                                    </td>
                                    <td>
                                        {{ $appointment->speciality ? ($appointment->speciality->name_ar ?? $appointment->speciality->name_en) : 'N/A' }}
                                    </td>
                                    <td>
                                        <span class="badge bg-{{ $statusColor }}">
                                            {{ ucfirst(str_replace('_', ' ', $appointment->status)) }}
                                        </span>
                                    </td>
                                    <td>
                                        @if($appointment->payment_status == 1)
                                            <span class="badge bg-success">Paid</span>
                                        @else
                                            <span class="badge bg-warning">Pending</span>
                                        @endif
                                    </td>
                                    <td>
                                        <strong>{{ number_format($appointment->final_price ?? 0, 2) }} SAR</strong>
                                        @if($appointment->discount > 0)
                                            <div><small class="text-muted">Discount: {{ number_format($appointment->discount, 2) }}</small></div>
                                        @endif
                                    </td>
                                    <td>
                                        <div class="btn-group" role="group">
                                            <a href="{{ route('appointments.show', $appointment->id) }}" 
                                               class="btn btn-sm btn-info" title="View">
                                                <i class="mdi mdi-eye"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                @if($appointments->hasPages())
                    <div class="d-flex justify-content-center mt-4">
                        {{ $appointments->appends(request()->query())->links() }}
                    </div>
                @endif
            @else
                <div class="alert alert-info text-center">
                    <i class="mdi mdi-information-outline me-2"></i>
                    No appointments found matching your criteria.
                </div>
            @endif
        </div>
    </div>
</div>

@push('scripts')
<script>
    document.getElementById('date_filter').addEventListener('change', function() {
        const customRange = document.getElementById('custom_date_range');
        const customRangeEnd = document.getElementById('custom_date_range_end');
        if (this.value === 'custom') {
            customRange.style.display = 'block';
            customRangeEnd.style.display = 'block';
        } else {
            customRange.style.display = 'none';
            customRangeEnd.style.display = 'none';
        }
    });
</script>
@endpush
@endsection