@extends('layouts.mobile_master')

@section('content')
    <!-- App Header -->


      <div class="header">
        <div class="d-flex justify-content-between align-items-center">
            <h5 class="mb-0">My Appointments</h5>
            <span class="appointment-count">{{ $appointments->count() }}</span>
       
        </div>
    </div>
    
    <!-- Search Bar -->
    <div class="search-container">
        <div class="search-bar">
            <i class="fas fa-search"></i>
            <input type="text" id="search-input" placeholder="Search by patient name or phone...">
        </div>
    </div>
    
    <!-- Filter Chips -->
    <div class="filter-chips">
        <div class="filter-chip active" data-filter="all">All</div>
        <div class="filter-chip" data-filter="today">Today</div>
        <div class="filter-chip" data-filter="upcoming">Upcoming</div>
        <div class="filter-chip" data-filter="completed">Completed</div>
        <div class="filter-chip" data-filter="cancelled">Cancelled</div>
    </div>
    
    <!-- Main Content -->
     <div class="content-container">
    <main class="main-content">
        <div class="section-title">
            <span id="active-tab-title">All Appointments</span>
        </div>
        
        <div id="appointments-list">
            @forelse($appointments as $appointment)
            <div class="appointment-card" 
                 data-patient-name="{{ strtolower($appointment->pat->name ?? '') }}" 
                 data-patient-phone="{{ $appointment->pat->phone ?? '' }}"
                 data-appointment-date="{{ date('Y-m-d', strtotime($appointment->date_time)) }}"
                 data-appointment-status="{{ $appointment->status }}"
                 onclick="window.location='{{ route('patients.medical_report.mobileview', encrypt($appointment->id)) }}'" 
                 style="cursor: pointer;">
                <div class="appointment-header">
                    <div class="patient-info">
                        <div class="patient-avatar">
                            {{ substr($appointment->pat->name ?? 'N/A', 0, 1) }}
                        </div>
                        <div>
                            <div class="patient-name">{{ $appointment->pat->name ?? 'N/A' }}</div>
                            <small class="text-muted">Patient Phone: {{ $appointment->pat->phone ?? 'N/A' }}</small>
                        </div>
                    </div>
                    <div class="appointment-time">
                        <i class="far fa-clock"></i> {{ datetime_fmt($appointment->date_time) }}
                    </div>
                </div>
                
                <div class="appointment-body">
                    <div class="info-row">
                        <div class="info-icon">
                            <i class="fas fa-user-md"></i>
                        </div>
                        <div class="info-content">
                            <div class="info-label">Doctor</div>
                            <div class="info-value">{{ $appointment->usr?->name ?? '-' }}</div>
                        </div>
                    </div>
                    
                    <div class="info-row">
                        <div class="info-icon">
                            <i class="fas fa-calendar-alt"></i>
                        </div>
                        <div class="info-content">
                            <div class="info-label">Date & Time</div>
                            <div class="info-value">{{ datetime_fmt($appointment->date_time) }}</div>
                        </div>
                        {!! appointment_status($appointment->status) !!}
                    </div>
                    
                    @if(!empty($appointment->diagnosis))
                    <div class="diagnosis-section">
                        <div class="section-label">
                            <i class="fas fa-stethoscope"></i> Diagnosis
                        </div>
                        <div class="section-content">{{ $appointment->diagnosis }}</div>
                    </div>
                    @endif
                    
                    @if(!empty($appointment->treatment))
                    <div class="treatment-section">
                        <div class="section-label">
                            <i class="fas fa-heartbeat"></i> Treatment
                        </div>
                        <div class="section-content">{{ $appointment->treatment }}</div>
                    </div>
                    @endif
                    
                    <!-- Medical Report Status -->
                    <div class="info-row">
                        <div class="info-icon">
                            <i class="fas fa-file-medical"></i>
                        </div>
                        <div class="info-content">
                            <div class="info-label">Medical Report</div>
                            <div class="info-value">
                                @if($appointment->medicalReport)
                                    <span class="text-success">Completed</span>
                                @else
                                    <span class="text-primary">Click to create</span>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @empty
            <div class="empty-state">
                <div class="empty-icon">
                    <i class="far fa-calendar-alt"></i>
                </div>
                <div class="empty-text">No appointments scheduled</div>
            </div>
            @endforelse
        </div>
    </main>

</div>
    
  
@endsection

 @section('page_js')
    <script>
        // Add subtle animation when page loads
        document.addEventListener('DOMContentLoaded', function() {
            const cards = document.querySelectorAll('.appointment-card');
            cards.forEach((card, index) => {
                card.style.opacity = '0';
                card.style.transform = 'translateY(20px)';
                setTimeout(() => {
                    card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
                    card.style.opacity = '1';
                    card.style.transform = 'translateY(0)';
                }, 100 + (index * 100));
            });
            
            // Add click handlers for cards
            cards.forEach(card => {
                card.addEventListener('click', function() {
                    // For demonstration - would show more details in a real app
                    this.style.boxShadow = '0 6px 16px rgba(67, 97, 238, 0.2)';
                    setTimeout(() => {
                        this.style.boxShadow = 'var(--card-shadow)';
                    }, 300);
                });
            });
            
            // Add interaction to FAB button
           
            
            // Filter chip functionality
            const filterChips = document.querySelectorAll('.filter-chip');
            const activeTabTitle = document.getElementById('active-tab-title');
            
            filterChips.forEach(chip => {
                chip.addEventListener('click', function() {
                    filterChips.forEach(c => c.classList.remove('active'));
                    this.classList.add('active');
                    
                    // Update active tab title
                    activeTabTitle.textContent = this.textContent + ' Appointments';
                    
                    // Filter appointments based on selected chip
                    const filter = this.getAttribute('data-filter');
                    filterAppointments(filter);
                });
            });
            
            // Search functionality
            const searchInput = document.getElementById('search-input');
            searchInput.addEventListener('input', function() {
                const searchTerm = this.value.toLowerCase().trim();
                filterAppointmentsBySearch(searchTerm);
            });
            
            // Function to filter appointments by status
            function filterAppointments(filter) {
                const appointments = document.querySelectorAll('.appointment-card');
                const today = new Date().toISOString().split('T')[0];
                
                appointments.forEach(card => {
                    const status = card.getAttribute('data-appointment-status');
                    const date = card.getAttribute('data-appointment-date');
                    
                    let shouldShow = false;
                    
                    switch(filter) {
                        case 'all':
                            shouldShow = true;
                            break;
                        case 'today':
                            shouldShow = date === today;
                            break;
                        case 'upcoming':
                            shouldShow = date > today && status !== 'cancelled';
                            break;
                        case 'completed':
                            shouldShow = status === 'Completed';
                            break;
                        case 'cancelled':
                            shouldShow = status === 'cancelled';
                            break;
                        default:
                            shouldShow = true;
                    }
                    
                    if (shouldShow) {
                        card.classList.remove('hidden');
                    } else {
                        card.classList.add('hidden');
                    }
                });
                
                // Also apply search filter if there's a search term
                const searchTerm = searchInput.value.toLowerCase().trim();
                if (searchTerm) {
                    filterAppointmentsBySearch(searchTerm);
                }
            }
            
            // Function to filter appointments by search term
         // Function to filter appointments by search term
function filterAppointmentsBySearch(searchTerm) {
    const allAppointments = document.querySelectorAll('.appointment-card');

    if (!searchTerm) {
        // When search is cleared, re-apply current filter chip
        const activeFilter = document.querySelector('.filter-chip.active').getAttribute('data-filter');
        filterAppointments(activeFilter);
        return;
    }

    allAppointments.forEach(card => {
        const patientName = card.getAttribute('data-patient-name');
        const patientPhone = card.getAttribute('data-patient-phone');

        if (patientName.includes(searchTerm) || patientPhone.includes(searchTerm)) {
            card.classList.remove('hidden');
        } else {
            card.classList.add('hidden');
        }
    });
}

        });
    </script>
@endsection