@extends('coach.layouts.contentNavbarLayout')

@section('title', 'Appointments')

@section('content')
    <div class="container-fluid">
        <!-- Filter and Search Section -->
        <div class="card mb-4">
            <div class="card-body">
                <form action="{{ route('coach.appointments.index') }}" method="GET" id="filter-form">
                    <div class="row g-3">
                        <!-- Search by Appointment Number -->
                        <div class="col-md-4">
                            <div class="input-group">
                                <span class="input-group-text"><i class="mdi mdi-magnify"></i></span>
                                <input type="text" class="form-control" placeholder="Search appointment number" name="search" value="{{ request('search') }}">
                                @if(request('search'))
                                    <button type="button" class="btn btn-outline-secondary" onclick="clearSearch()">
                                        <i class="mdi mdi-close"></i>
                                    </button>
                                @endif
                            </div>
                        </div>
                        
                        <!-- Status Filter -->
                        <div class="col-md-3">
                            <select class="form-select" name="status" onchange="this.form.submit()">
                                <option value="">All Statuses</option>
                                @foreach($statuses as $status)
                                    <option value="{{ $status }}" {{ request('status') == $status ? 'selected' : '' }}>
                                        {{ ucfirst(str_replace('_', ' ', $status)) }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        
                        <!-- Date Filter -->
                        <div class="col-md-3">
                            <select class="form-select" name="date_filter" id="date-filter" onchange="toggleDatePicker()">
                                <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="custom" {{ request('date_filter') == 'custom' ? 'selected' : '' }}>Custom Range</option>
                            </select>
                        </div>
                        
                        <div class="col-md-2">
                            <button type="submit" class="btn btn-primary w-100">
                                <i class="mdi mdi-filter-outline me-1"></i> Filter
                            </button>
                        </div>
                    </div>
                    
                    <!-- Custom Date Range (initially hidden) -->
                    <div class="row mt-3 {{ request('date_filter') == 'custom' ? '' : 'd-none' }}" id="date-range-container">
                        <div class="col-md-4">
                            <div class="input-group">
                                <span class="input-group-text"><i class="mdi mdi-calendar-start"></i></span>
                                <input type="date" class="form-control" name="start_date" value="{{ request('start_date') }}">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="input-group">
                                <span class="input-group-text"><i class="mdi mdi-calendar-end"></i></span>
                                <input type="date" class="form-control" name="end_date" value="{{ request('end_date') }}">
                            </div>
                        </div>
                    </div>
                </form>
                
                @if(request()->anyFilled(['search', 'status', 'date_filter']))
                    <div class="mt-3">
                        <a href="{{ route('coach.appointments.index') }}" class="btn btn-sm btn-outline-secondary">
                            <i class="mdi mdi-refresh me-1"></i> Clear All Filters
                        </a>
                        
                        <div class="mt-2">
                            <span class="text-muted">Filtering by:</span>
                            @if(request('search'))
                                <span class="badge bg-info me-1">Search: {{ request('search') }}</span>
                            @endif
                            @if(request('status'))
                                <span class="badge bg-info me-1">Status: {{ ucfirst(str_replace('_', ' ', request('status'))) }}</span>
                            @endif
                            @if(request('date_filter'))
                                <span class="badge bg-info me-1">
                                    Date: 
                                    @if(request('date_filter') == 'custom')
                                        {{ request('start_date') }} to {{ request('end_date') }}
                                    @else
                                        {{ ucfirst(str_replace('_', ' ', request('date_filter'))) }}
                                    @endif
                                </span>
                            @endif
                        </div>
                    </div>
                @endif
            </div>
        </div>

    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h5>APPOINTMENTS</h5>
                <span class="badge bg-primary">Total: {{ $appointments->total() }} appointments</span>
        </div>
        <div class="card-body">
                @if($appointments->count() > 0)
                    <div class="row">
                        @foreach($appointments as $appointment)
                            @php
                                //status color class
                                $statusColor = 
                                    $appointment->status === 'completed' ? 'success' : 
                                    ($appointment->status === 'cancelled' ? 'danger' : 
                                    ($appointment->status === 'booked' ? 'primary' : 
                                    ($appointment->status === 'confirmed' ? 'info' : 
                                    ($appointment->status === 'in_progress' ? 'warning' : 
                                    ($appointment->status === 'not_attended' ? 'dark' : 
                                    ($appointment->status === 'rescheduled' ? 'secondary' : 'light'))))));
                                
                                //call type
                                $callType = isset($appointment->appointment_type) ? 
                                    ($appointment->appointment_type == 0 ? 'Audio Call' : 'Video Call') : 'N/A';
                                $callTypeIcon = $appointment->appointment_type == 0 ? 
                                    'mdi-phone' : 'mdi-video';
                            @endphp
                            <div class="col-md-6 col-lg-4 mb-4">
                                <div class="card h-100">
                                    <div class="card-header d-flex justify-content-between align-items-center">
                                        <h5 class="mb-0">{{ $appointment->appointment_number }}</h5>
                                        <span class="badge bg-{{ $statusColor }} rounded-pill">
                                            {{ ucfirst(str_replace('_', ' ', $appointment->status)) }}
                                        </span>
                                    </div>
                                    
                                    <!-- Date and Time Section -->
                                    <div class="p-3 bg-{{ $statusColor }}" style="background-color: rgba(var(--bs-{{ $statusColor }}-rgb), 0.15) !important; border-bottom: 2px solid var(--bs-{{ $statusColor }});">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div class="d-flex align-items-center">
                                                <div class="rounded-circle bg-{{ $statusColor }} d-flex justify-content-center align-items-center me-3" style="width: 45px; height: 45px;">
                                                    <i class="mdi mdi-calendar-clock text-white fs-4"></i>
                                                </div>
                                                <div>
                                                    <h6 class="mb-0 fw-bold text-{{ $statusColor === 'light' ? 'dark' : $statusColor }}">{{ $appointment->appointment_date->format('D, M d, Y') }}</h6>
                                                    <span class="text-{{ $statusColor === 'light' ? 'muted' : $statusColor }}">{{ date('h:i A', strtotime($appointment->time_start)) }} - {{ date('h:i A', strtotime($appointment->time_end)) }}</span>
                                                </div>
                                            </div>
                                            @php
                                                $today = \Carbon\Carbon::today();
                                                $appointmentDate = \Carbon\Carbon::parse($appointment->appointment_date);
                                                $daysRemaining = $today->diffInDays($appointmentDate, false);
                                            @endphp
                                            
                                            @if($daysRemaining > 0)
                                                <span class="badge bg-{{ $statusColor }} rounded-pill">In {{ $daysRemaining }} days</span>
                                            @elseif($daysRemaining == 0)
                                                <span class="badge bg-{{ $statusColor }} rounded-pill">Today</span>
                                            @else
                                                <span class="badge bg-{{ $statusColor }} rounded-pill">{{ abs($daysRemaining) }} days ago</span>
                                            @endif
                                        </div>
                                    </div>
                                    
                                    <div class="card-body">
                                        <!-- Call Type -->
                                        <div class="mb-3">
                                            <div class="d-flex align-items-center mb-2">
                                                <i class="mdi {{ $callTypeIcon }} me-2 text-{{ $statusColor }}"></i>
                                                <span class="fw-semibold">Call Type:</span>
                                            </div>
                                            <p class="ms-4 mb-0">{{ $callType }}</p>
                                        </div>
                                        
                                        <div class="mb-3">
                                            <div class="d-flex align-items-center mb-2">
                                                <i class="mdi mdi-account-outline me-2 text-{{ $statusColor }}"></i>
                                                <span class="fw-semibold">Employee:</span>
                                            </div>
                                            <p class="ms-4 mb-0">
                                                <a href="#" class="text-decoration-none employee-details" 
                                                   data-bs-toggle="modal" 
                                                   data-bs-target="#employeeModal" 
                                                   data-employee-id="{{ $appointment->employee_id }}"
                                                   data-employee-name="{{ $appointment->employee->name }}"
                                                   data-employee-email="{{ $appointment->employee->email ?? 'N/A' }}"
                                                   data-employee-phone="{{ $appointment->employee->phone ?? 'N/A' }}"
                                                   data-employee-gender="{{ $appointment->employee->gender ?? 'N/A' }}"
                                                   data-employee-age="{{ $appointment->employee->age ?? 'N/A' }}"
                                                   data-employee-city="{{ $appointment->employee->city ?? 'N/A' }}"
                                                   data-employee-department="{{ $appointment->employee->department->name ?? 'N/A' }}"
                                                   data-employee-civil-status="{{ $appointment->employee->civil_status ?? 'N/A' }}"
                                                   data-employee-children="{{ $appointment->employee->number_children ?? '0' }}"
                                                   data-employee-company="{{ $appointment->employee->company->name ?? 'N/A' }}"
                                                   data-employee-image="{{ $appointment->employee->image ?? asset('assets/img/avatars/1.png') }}">
                                                    {{ $appointment->employee->name }}
                                                    <i class="mdi mdi-information-outline ms-1 text-{{ $statusColor }}"></i>
                                                </a>
                                            </p>
                                        </div>
                                        
                                        <div class="mb-3">
                                            <div class="d-flex align-items-center mb-2">
                                                <i class="mdi mdi-briefcase-outline me-2 text-{{ $statusColor }}"></i>
                                                <span class="fw-semibold">Speciality:</span>
                                            </div>
                                            <p class="ms-4 mb-0">{{ $appointment->speciality->name_en }}</p>
                                        </div>
                                        
                                        @if($appointment->final_price)
                                        <div class="mb-3">
                                            <div class="d-flex align-items-center mb-2">
                                                <i class="mdi mdi-currency-usd me-2 text-{{ $statusColor }}"></i>
                                                <span class="fw-semibold">Price:</span>
                                            </div>
                                            <p class="ms-4 mb-0">{{ $appointment->final_price }}</p>
                                        </div>
                                        @endif
                                        
                                        @if($appointment->status === 'cancelled')
                                        <div class="mb-3">
                                            <div class="d-flex align-items-center">
                                                <i class="mdi mdi-cancel me-2 text-danger"></i>
                                                <span class="fw-semibold">Cancelled</span>
                                                <button type="button" class="btn btn-link btn-sm ms-2 p-0" 
                                                        data-bs-toggle="modal" 
                                                        data-bs-target="#cancellationDetailsModal"
                                                        data-appointment-number="{{ $appointment->appointment_number }}"
                                                        data-cancelled-by="{{ ucfirst($appointment->cancelled_by ?? 'Unknown') }}"
                                                        data-cancelled-at="{{ $appointment->cancelled_at ? \Carbon\Carbon::parse($appointment->cancelled_at)->format('M d, Y h:i A') : 'N/A' }}"
                                                        data-cancellation-reason="{{ $appointment->cancellation_reason ?? 'No reason provided' }}"
                                                        onclick="event.preventDefault();">
                                                    <i class="mdi mdi-information-outline"></i> View details
                                                </button>
                                            </div>
                                        </div>
                                        @endif
                                    </div>
                                    <div class="card-footer bg-transparent">
                                        <div class="d-flex justify-content-between">
                                            <div>
                                                @if(in_array($appointment->status, ['booked', 'confirmed']))
                                                    <button type="button" class="btn btn-icon btn-danger btn-sm" 
                                                            data-bs-toggle="modal" 
                                                            data-bs-target="#cancelModal"
                                                            data-appointment-id="{{ $appointment->id }}"
                                                            data-appointment-number="{{ $appointment->appointment_number }}"
                                                            data-appointment-date="{{ $appointment->appointment_date->format('D, M d, Y') }}"
                                                            data-appointment-time="{{ date('h:i A', strtotime($appointment->time_start)) }}"
                                                            title="Cancel Appointment">
                                                        <i class="mdi mdi-calendar-remove"></i>
                                                    </button>
                                                @endif
                                            </div>
                                            <div>
                                                {{-- <a href="{{ route('appointments.chat', $appointment->id) }}" class="btn btn-icon btn-warning btn-sm me-1" title="Chat">
                                                    <i class="mdi mdi-message"></i>
                                                </a> --}}
                                                @php
                                                    $now = Carbon\Carbon::now();
                                                    $appointmentStart = Carbon\Carbon::parse($appointment->appointment_date->format('Y-m-d') . ' ' . $appointment->time_start);
                                                    $appointmentEnd = Carbon\Carbon::parse($appointment->appointment_date->format('Y-m-d') . ' ' . $appointment->time_end);
                                                    $callStartTime = (clone $appointmentStart)->subMinutes(2);
                                                    $isWithinTimeRange = $now->between($callStartTime, $appointmentEnd);
                                                @endphp
                                                @if ($isWithinTimeRange && ($appointment->status == 'confirmed' || $appointment->status == 'in_progress'))
                                                    @if($appointment->appointment_type == 0)
                                                    <a type="button" class="btn btn-icon btn-danger btn-sm me-1" href="{{ route('make-audio-call', $appointment->id) }}" data-type="doctor" title="Audio Call">
                                                        <i class="mdi mdi-video-off"></i>
                                                    </a>
                                                    @else
                                                    <a type="button" class="btn btn-icon btn-success btn-sm" href="{{ route('make-call', $appointment->id) }}" data-type="doctor" title="Video Call">
                                                        <i class="mdi mdi-video"></i>
                                                    </a>
                                                    @endif
                                                @endif
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    
                    <div class="d-flex justify-content-center mt-4">
                        {{ $appointments->links() }}
                    </div>
                @else
                    <div class="alert alert-info" role="alert">
                        <div class="d-flex">
                            <i class="mdi mdi-information-outline me-2 fs-4"></i>
                            <div>
                                <h5>No appointments found!</h5>
                                <p class="mb-0">
                                    @if(request()->anyFilled(['search', 'status', 'date_filter']))
                                        No appointments found for this filtering / search.
                                    @else
                                        You don't have any appointments currently.
                                    @endif
                                </p>
                            </div>
                        </div>
                    </div>
                                @endif
            </div>
        </div>
    </div>

    <!-- Cancel Appointment Modal -->
    <div class="modal fade" id="cancelModal" tabindex="-1" aria-labelledby="cancelModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header bg-danger text-white">
                    <h5 class="modal-title" id="cancelModalLabel">Cancel Appointment</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="cancelForm" method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="alert alert-warning">
                            <div class="d-flex">
                                <i class="mdi mdi-alert-circle me-2 fs-4"></i>
                                <div>
                                    <h6 class="alert-heading">Cancellation Policy</h6>
                                    <p class="mb-0">
                                        By cancelling this appointment, you confirm that:
                                    </p>
                                    <ul class="mb-0 ps-3 mt-2">
                                        <li>Cancellation policy item is here</li>
                                        <li>Cancellation policy item is here</li>
                                        <li>Cancellation policy item is here</li>
                                        <li>Cancellation policy item is here</li>
                                        <li>Cancellation policy item is here</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Appointment Details:</label>
                            <div class="ps-3">
                                <p class="mb-1"><strong>Appointment:</strong> <span id="cancelAppointmentNumber"></span></p>
                                <p class="mb-1"><strong>Date:</strong> <span id="cancelAppointmentDate"></span></p>
                                <p class="mb-0"><strong>Time:</strong> <span id="cancelAppointmentTime"></span></p>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="cancelReasonInput" class="form-label">Reason for Cancellation:</label>
                            <textarea class="form-control" id="cancelReasonInput" name="reason" rows="3" required></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">No, Keep Appointment</button>
                        <button type="submit" class="btn btn-danger">Yes, Cancel Appointment</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Employee Details Modal -->
    <div class="modal fade" id="employeeModal" tabindex="-1" aria-labelledby="employeeModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="employeeModalLabel">Employee Details</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="text-center mb-4">
                        <img id="employeeImage" src="" alt="Employee" class="rounded-circle img-fluid" style="width: 100px; height: 100px; object-fit: cover;">
                        <h5 id="employeeName" class="mt-3 mb-1"></h5>
                    </div>
                    
                    <!-- Personal Information -->
                    <h6 class="border-bottom pb-2 mb-3">Personal Information</h6>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <div class="d-flex align-items-center">
                                <i class="mdi mdi-email-outline me-2 text-primary"></i>
                                <div>
                                    <small class="text-muted d-block">Email</small>
                                    <span id="employeeEmail"></span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="d-flex align-items-center">
                                <i class="mdi mdi-phone-outline me-2 text-primary"></i>
                                <div>
                                    <small class="text-muted d-block">Phone</small>
                                    <span id="employeePhone"></span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="d-flex align-items-center">
                                <i class="mdi mdi-gender-male-female me-2 text-primary"></i>
                                <div>
                                    <small class="text-muted d-block">Gender</small>
                                    <span id="employeeGender"></span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="d-flex align-items-center">
                                <i class="mdi mdi-cake-variant-outline me-2 text-primary"></i>
                                <div>
                                    <small class="text-muted d-block">Age</small>
                                    <span id="employeeAge"></span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="d-flex align-items-center">
                                <i class="mdi mdi-ring me-2 text-primary"></i>
                                <div>
                                    <small class="text-muted d-block">Civil Status</small>
                                    <span id="employeeCivilStatus"></span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="d-flex align-items-center">
                                <i class="mdi mdi-human-male-child me-2 text-primary"></i>
                                <div>
                                    <small class="text-muted d-block">Children</small>
                                    <span id="employeeChildren"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Work Information -->
                    <h6 class="border-bottom pb-2 mb-3">Work Information</h6>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <div class="d-flex align-items-center">
                                <i class="mdi mdi-city-variant-outline me-2 text-primary"></i>
                                <div>
                                    <small class="text-muted d-block">City</small>
                                    <span id="employeeCity"></span>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 mb-3">
                            <div class="d-flex align-items-center">
                                <i class="mdi mdi-office-building-outline me-2 text-primary"></i>
                                <div>
                                    <small class="text-muted d-block">Department</small>
                                    <span id="employeeDepartment"></span>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 mb-3">
                            <div class="d-flex align-items-start">
                                <i class="mdi mdi-domain me-2 text-primary"></i>
                                <div>
                                    <small class="text-muted d-block">Company</small>
                                    <span id="employeeCompany"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Cancellation Details Modal -->
    <div class="modal fade" id="cancellationDetailsModal" tabindex="-1" aria-labelledby="cancellationDetailsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-sm">
            <div class="modal-content">
                <div class="modal-header bg-danger text-white">
                    <h5 class="modal-title" id="cancellationDetailsModalLabel">Cancellation Details</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <h6 id="cancellationAppointmentNumber" class="text-center mb-3"></h6>
                    
                    <div class="d-flex align-items-center mb-3">
                        <div class="rounded-circle bg-danger d-flex justify-content-center align-items-center me-3" style="width: 36px; height: 36px;">
                            <i class="mdi mdi-account text-white"></i>
                        </div>
                        <div>
                            <small class="text-muted d-block">Cancelled by</small>
                            <span id="cancellationBy" class="fw-semibold"></span>
                        </div>
                    </div>
                    
                    <div class="d-flex align-items-center mb-3">
                        <div class="rounded-circle bg-danger d-flex justify-content-center align-items-center me-3" style="width: 36px; height: 36px;">
                            <i class="mdi mdi-clock-outline text-white"></i>
                        </div>
                        <div>
                            <small class="text-muted d-block">Cancelled at</small>
                            <span id="cancellationTime" class="fw-semibold"></span>
                        </div>
                    </div>
                    
                    <div class="mb-0">
                        <h6 class="border-bottom pb-2">Cancellation Reason</h6>
                        <p id="cancellationReasonText" class="fst-italic"></p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('page-script')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Employee details modal
            var employeeModal = document.getElementById('employeeModal');
            employeeModal.addEventListener('show.bs.modal', function(event) {
                var button = event.relatedTarget; // Button that triggered the modal
                
                // Extract employee data from data attributes
                var name = button.getAttribute('data-employee-name');
                var email = button.getAttribute('data-employee-email');
                var phone = button.getAttribute('data-employee-phone');
                var gender = button.getAttribute('data-employee-gender');
                var age = button.getAttribute('data-employee-age');
                var city = button.getAttribute('data-employee-city');
                var department = button.getAttribute('data-employee-department');
                var civilStatus = button.getAttribute('data-employee-civil-status');
                var children = button.getAttribute('data-employee-children');
                var company = button.getAttribute('data-employee-company');
                var image = button.getAttribute('data-employee-image');
                
                // Update modal content
                document.getElementById('employeeName').textContent = name;
                document.getElementById('employeeEmail').textContent = email;
                document.getElementById('employeePhone').textContent = phone;
                document.getElementById('employeeGender').textContent = gender;
                document.getElementById('employeeAge').textContent = age + (age && age !== 'N/A' ? ' years' : '');
                document.getElementById('employeeCity').textContent = city;
                document.getElementById('employeeDepartment').textContent = department;
                document.getElementById('employeeCivilStatus').textContent = civilStatus;
                document.getElementById('employeeChildren').textContent = children + (children && children !== 'N/A' && children !== '0' ? ' children' : ' children');
                document.getElementById('employeeCompany').textContent = company;

                var employeeImageElement = document.getElementById('employeeImage');
                if (image && employeeImageElement) {
                    employeeImageElement.src = image;
                    employeeImageElement.style.display = 'block';
                } else if (employeeImageElement) {
                    employeeImageElement.style.display = 'none';
                }
                // document.getElementById('employeeImage').src = image;
            });
            
            // Cancel appointment modal
            var cancelModal = document.getElementById('cancelModal');
            cancelModal.addEventListener('show.bs.modal', function(event) {
                var button = event.relatedTarget; // Button that triggered the modal
                
                // Extract appointment data from data attributes
                var appointmentId = button.getAttribute('data-appointment-id');
                var appointmentNumber = button.getAttribute('data-appointment-number');
                var appointmentDate = button.getAttribute('data-appointment-date');
                var appointmentTime = button.getAttribute('data-appointment-time');
                
                // Update modal content
                document.getElementById('cancelAppointmentNumber').textContent = appointmentNumber;
                document.getElementById('cancelAppointmentDate').textContent = appointmentDate;
                document.getElementById('cancelAppointmentTime').textContent = appointmentTime;
                
                // Set form action
                document.getElementById('cancelForm').action = "{{ route('coach.appointments.cancel', '') }}/" + appointmentId;
            });
            
            // Cancellation details modal
            var cancellationDetailsModal = document.getElementById('cancellationDetailsModal');
            cancellationDetailsModal.addEventListener('show.bs.modal', function(event) {
                var button = event.relatedTarget; // Button that triggered the modal
                
                // Extract cancellation data from data attributes
                var appointmentNumber = button.getAttribute('data-appointment-number');
                var cancelledBy = button.getAttribute('data-cancelled-by');
                var cancelledAt = button.getAttribute('data-cancelled-at');
                var cancellationReason = button.getAttribute('data-cancellation-reason');
                
                // Update modal content
                document.getElementById('cancellationAppointmentNumber').textContent = appointmentNumber;
                document.getElementById('cancellationBy').textContent = cancelledBy;
                document.getElementById('cancellationTime').textContent = cancelledAt;
                document.getElementById('cancellationReasonText').textContent = cancellationReason;
            });
            
            // Filter functionality
            function toggleDatePicker() {
                var dateFilter = document.getElementById('date-filter');
                var dateRangeContainer = document.getElementById('date-range-container');
                
                if (dateFilter.value === 'custom') {
                    dateRangeContainer.classList.remove('d-none');
                } else {
                    dateRangeContainer.classList.add('d-none');
                    // if (dateFilter.value) {
                        document.getElementById('filter-form').submit();
                    // }
                }
            }
            
            // Expose the function to global scope
            window.toggleDatePicker = toggleDatePicker;
            window.clearSearch = function() {
                document.querySelector('input[name="search"]').value = '';
                document.getElementById('filter-form').submit();
            };
        });
        
        function toggleDatePicker() {
            var dateFilter = document.getElementById('date-filter');
            var dateRangeContainer = document.getElementById('date-range-container');
            
            if (dateFilter.value === 'custom') {
                dateRangeContainer.classList.remove('d-none');
            } else {
                dateRangeContainer.classList.add('d-none');
                // if (dateFilter.value) {
                    document.getElementById('filter-form').submit();
                // }
            }
        }
    </script>
@endsection