@extends('layouts.website_layout')

@section('content')

<!-- Main Content -->
<main id="main-content">
    <!-- Page Header -->
    <div class="position-relative page-header text-white overflow-hidden">
        <div class="container position-relative">
            <div>
                @if($parentPageTitle)
                <span class="badge bg-white text-primary mb-2">{{ $parentPageTitle }}</span>
                @endif
                <h3 class="display-6 fw-bold mb-1">
                    {{ $pageTitle }}
                </h3>
            </div>
        </div>
    </div>

    <section class="cg-search-section">
        <div class="cg-container">
            <form class="cg-search-card" id="cgMainSearch">
                <!-- Location Field -->
                <div class="cg-search-field">
                    <label class="cg-search-label">
                        <i class="fas fa-map-marker-alt"></i> Location
                    </label>
                    <div class="cg-input-wrapper">
                        <input type="text" class="cg-form-control" placeholder="City or region">
                    </div>
                </div>

                <!-- Specialization Field -->
                <div class="cg-search-field">
                    <label class="cg-search-label">
                        <i class="fas fa-stethoscope"></i> Specialization
                    </label>
                    <div class="cg-input-wrapper">
                        <select class="cg-form-control">
                            <option value="">Select specialization</option>
                            <option value="elderly-care">Elderly Care</option>
                            <option value="medical-assistance">Medical Assistance</option>
                            <option value="physiotherapy">Physiotherapy</option>
                        </select>
                        <i class="fas fa-chevron-down cg-select-arrow"></i>
                    </div>
                </div>

                <!-- Experience Field -->
                <div class="cg-search-field">
                    <label class="cg-search-label">
                        <i class="fas fa-clock"></i> Experience
                    </label>
                    <div class="cg-input-wrapper">
                        <select class="cg-form-control">
                            <option value="0">0+ years</option>
                            <option value="1">1+ years</option>
                            <option value="3">3+ years</option>
                            <option value="5">5+ years</option>
                        </select>
                        <i class="fas fa-chevron-down cg-select-arrow"></i>
                    </div>
                </div>

                <!-- Search Button -->
                <button type="submit" class="cg-search-btn-large">
                    <i class="fas fa-search"></i> Search
                </button>
            </form>
        </div>
    </section>

    <section class="cg-layout-section">
        <div class="cg-container">
            
            <!-- Mobile Filter Toggle -->
            <div class="cg-mobile-bar">
                <button class="cg-btn-outline" id="cgMobileToggle">
                    <i class="fas fa-sliders-h"></i> Filters
                </button>
                <span class="cg-results-count" style="font-size: 0.9rem;">6 Results</span>
            </div>

            <div class="cg-grid-layout">
                
                <!-- Sidebar Filters -->
                <aside class="cg-sidebar" id="cgSidebar">
                    <div class="cg-sidebar-header">
                        <h3>Filters</h3>
                        <div style="display: flex; gap: 0.5rem; align-items: center;">
                            <button class="cg-reset-btn" id="cgClearFilters">Reset</button>
                            <button class="cg-close-btn d-md-none" id="cgCloseSidebar">&times;</button>
                        </div>
                    </div>

                    <form id="cgSearchForm" class="cg-filter-form">
                        
                        <!-- Location Input -->
                        <div class="cg-filter-group">
                            <label class="cg-label">Location</label>
                            <div class="cg-input-wrapper">
                                <i class="fas fa-map-marker-alt cg-input-icon"></i>
                                <input type="text" id="location" class="cg-form-control" placeholder="City or zip code">
                            </div>
                        </div>

                        <!-- Specialization Select -->
                        <div class="cg-filter-group">
                            <label class="cg-label">Specialization</label>
                            <div class="cg-input-wrapper">
                                <i class="fas fa-user-md cg-input-icon"></i>
                                <select id="specialization" class="cg-form-control">
                                    <option value="">All Specializations</option>
                                    <option value="elderly-care">Elderly Care</option>
                                    <option value="medical-assistance">Medical Assistance</option>
                                    <option value="physiotherapy">Physiotherapy</option>
                                </select>
                                <i class="fas fa-chevron-down cg-select-arrow"></i>
                            </div>
                        </div>

                        <!-- Experience Radios -->
                        <div class="cg-filter-group">
                            <label class="cg-label">Experience</label>
                            <div class="cg-radio-group">
                                <label class="cg-radio-label">
                                    <input type="radio" name="exp-filter" value="0" class="cg-radio-input" checked>
                                    <span class="cg-radio-custom"></span>
                                    <span>Any Experience</span>
                                </label>
                                <label class="cg-radio-label">
                                    <input type="radio" name="exp-filter" value="1" class="cg-radio-input">
                                    <span class="cg-radio-custom"></span>
                                    <span>1+ years</span>
                                </label>
                                <label class="cg-radio-label">
                                    <input type="radio" name="exp-filter" value="3" class="cg-radio-input">
                                    <span class="cg-radio-custom"></span>
                                    <span>3+ years</span>
                                </label>
                            </div>
                        </div>

                        <!-- Rating Radios -->
                        <div class="cg-filter-group">
                            <label class="cg-label">Rating</label>
                            <div class="cg-radio-group">
                                <label class="cg-radio-label">
                                    <input type="radio" name="rating-filter" value="0" class="cg-radio-input" checked>
                                    <span class="cg-radio-custom"></span>
                                    <span>Any Rating</span>
                                </label>
                                <label class="cg-radio-label">
                                    <input type="radio" name="rating-filter" value="4" class="cg-radio-input">
                                    <span class="cg-radio-custom"></span>
                                    <span>4+ Stars</span>
                                </label>
                            </div>
                        </div>

                        <!-- Mobile Submit -->
                        <button type="submit" class="cg-btn-primary d-md-none">
                            Show Results
                        </button>
                    </form>
                </aside>

                <!-- Results Grid -->
                <div class="cg-results-area">
                    
                    <!-- Toolbar -->
                    <div class="cg-toolbar">
                        <h2 class="cg-results-count" id="resultsTitle">6 Caregivers Found</h2>
                        <div class="cg-sort-container">
                            <label for="sortBy" class="cg-sort-label">Sort by:</label>
                            <select id="sortBy" class="cg-sort-select">
                                <option value="rating">Highest Rated</option>
                                <option value="experience">Experience</option>
                                <option value="location">Location</option>
                            </select>
                        </div>
                    </div>

                    <!-- Cards -->
                    <div class="cg-card-grid" id="caregiversGrid">
                        
                        <!-- Card 1 -->
                        <article class="cg-card" data-location="bangalore" data-rating="5.0">
                            <div class="cg-card-header">
                                <div class="cg-avatar-box">
                                    <img src="https://cdn-icons-png.flaticon.com/512/147/147142.png" alt="Ananya" class="cg-avatar-img">
                                    <span class="cg-verified-icon"><i class="fas fa-check"></i></span>
                                </div>
                                <div class="cg-info-box">
                                    <h3 class="cg-name">Ananya Patel</h3>
                                    <p class="cg-meta"><i class="fas fa-map-pin"></i> Bangalore &bull; 2+ Yrs</p>
                                </div>
                                <div class="cg-rating-pill">
                                    <i class="fas fa-star" style="font-size: 0.8rem;"></i> 5.0
                                </div>
                            </div>
                            
                            <div class="cg-card-body">
                                <div class="cg-tags-wrapper">
                                    <span class="cg-tag cg-tag-indigo">Palliative Care</span>
                                    <span class="cg-tag cg-tag-pink">Elderly Care</span>
                                </div>
                            </div>

                            <div class="cg-card-footer">
                                <button class="cg-btn-block cg-btn-soft" onclick="viewCaregiverProfile('ananya-patel')">
                                    View Profile <i class="fas fa-arrow-right" style="font-size: 0.8em"></i>
                                </button>
                            </div>
                        </article>

                        <!-- Card 2 -->
                        <article class="cg-card">
                            <div class="cg-card-header">
                                <div class="cg-avatar-box">
                                    <img src="https://cdn-icons-png.flaticon.com/512/147/147142.png" alt="Rajesh" class="cg-avatar-img">
                                </div>
                                <div class="cg-info-box">
                                    <h3 class="cg-name">Rajesh Kumar</h3>
                                    <p class="cg-meta"><i class="fas fa-map-pin"></i> Mumbai &bull; 1+ Yrs</p>
                                </div>
                                <div class="cg-rating-pill">
                                    <i class="fas fa-star" style="font-size: 0.8rem;"></i> 4.8
                                </div>
                            </div>
                            <div class="cg-card-body">
                                <div class="cg-tags-wrapper">
                                    <span class="cg-tag cg-tag-teal">Disability Support</span>
                                    <span class="cg-tag cg-tag-orange">Physiotherapy</span>
                                </div>
                            </div>
                            <div class="cg-card-footer">
                                <button class="cg-btn-block cg-btn-soft" onclick="viewCaregiverProfile('rajesh-kumar')">
                                    View Profile <i class="fas fa-arrow-right" style="font-size: 0.8em"></i>
                                </button>
                            </div>
                        </article>

                        <!-- Card 3 -->
                        <article class="cg-card">
                            <div class="cg-card-header">
                                <div class="cg-avatar-box">
                                    <img src="https://cdn-icons-png.flaticon.com/512/147/147142.png" alt="Arjun" class="cg-avatar-img">
                                </div>
                                <div class="cg-info-box">
                                    <h3 class="cg-name">Arjun Nair</h3>
                                    <p class="cg-meta"><i class="fas fa-map-pin"></i> Kolkata &bull; 5+ Yrs</p>
                                </div>
                                <div class="cg-rating-pill">
                                    <i class="fas fa-star" style="font-size: 0.8rem;"></i> 4.7
                                </div>
                            </div>
                            <div class="cg-card-body">
                                <div class="cg-tags-wrapper">
                                    <span class="cg-tag cg-tag-slate">Post Surgery</span>
                                    <span class="cg-tag cg-tag-teal">Rehab</span>
                                </div>
                            </div>
                            <div class="cg-card-footer">
                                <button class="cg-btn-block cg-btn-soft" onclick="viewCaregiverProfile('arjun-nair')">
                                    View Profile <i class="fas fa-arrow-right" style="font-size: 0.8em"></i>
                                </button>
                            </div>
                        </article>

                    </div>

                    <!-- No Results State -->
                    <div class="cg-empty" id="noResults" style="display: none;">
                        <i class="fas fa-search"></i>
                        <h3>No caregivers found</h3>
                        <p style="color: var(--cg-text-muted);">Try adjusting your filters or search criteria.</p>
                        <button class="cg-btn-outline" style="margin: 1rem auto;" onclick="clearAllFilters()">Clear Filters</button>
                    </div>

                </div>
            </div>
        </div>
    </section>


</main>
@endsection