@extends('layouts.home')

@push('css')
<link rel="stylesheet" href="{{ asset('home') }}/css/doctors.css">
@endpush


@section('content')
<!-- Hero Section -->
<section class="doctors-hero">
    <div class="container doctors-hero-content">
        <h2>Our Medical Experts</h2>
        <p>Meet our team of highly qualified and experienced healthcare professionals dedicated to your well-being.</p>
    </div>
</section>

<!-- Doctors Content Section -->
<section class="doctors-content">
    <div class="container">
        <div class="section-title">
            <h2>Find Your Doctor</h2>
            <p>Search and filter through our medical specialists to find the right doctor for your needs</p>
        </div>

        <!-- Search and Filter Section -->
        <div class="search-filter">
            <div class="search-box">
                <input type="text" id="doctorSearch" placeholder="Search by doctor name, specialty, or department...">
                <button id="searchButton"><i class="fas fa-search"></i></button>
            </div>

            <div class="filter-options">
                <div class="filter-group">
                    <label for="specialtyFilter">Specialty</label>
                    <select id="specialtyFilter">
                        <option value="">All Specialties</option>
                        @foreach ($specialties as $specialty)
                        <option value="{{ $specialty->name }}">{{ $specialty->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="filter-group">
                    <label for="departmentFilter">Department</label>
                    <select id="departmentFilter">
                        <option value="">All Departments</option>
                        @foreach ($departments as $department)
                        <option value="{{ $department->name }}">{{ $department->name }}</option>
                        @endforeach
                    </select>
                </div>

            </div>
        </div>

        <!-- Loading -->
        <div id="loading" style="display: none; text-align: center; padding: 20px;">
            <strong>Loading doctors...</strong>
        </div>

        <!-- Doctors Grid -->
        <div class="doctors-grid" id="doctorsGrid">
            <!-- Filled by JS -->
        </div>


    </div>
</section>

<!-- Departments Section -->
<section class="departments">
    <div class="container">
        <div class="section-title">
            <h2>Medical Departments</h2>
            <p>Explore our specialized medical departments and their services</p>
        </div>

        <div class="departments-grid">
            <div class="department-card">
                <i class="fas fa-heartbeat"></i>
                <h3>Cardiology</h3>
                <p>Comprehensive heart care with advanced diagnostic tools and treatment options.</p>
            </div>

            <div class="department-card">
                <i class="fas fa-brain"></i>
                <h3>Neurology</h3>
                <p>Expert diagnosis and treatment for disorders of the nervous system.</p>
            </div>

            <div class="department-card">
                <i class="fas fa-bone"></i>
                <h3>Orthopedics</h3>
                <p>Treatment for musculoskeletal injuries and conditions with cutting-edge techniques.</p>
            </div>

            <div class="department-card">
                <i class="fas fa-baby"></i>
                <h3>Pediatrics</h3>
                <p>Specialized care for children from infancy through adolescence.</p>
            </div>

            <div class="department-card">
                <i class="fas fa-x-ray"></i>
                <h3>Radiology</h3>
                <p>Advanced imaging services for accurate diagnosis and treatment planning.</p>
            </div>

            <div class="department-card">
                <i class="fas fa-stethoscope"></i>
                <h3>Internal Medicine</h3>
                <p>Comprehensive care for adults, focusing on prevention and treatment of diseases.</p>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="doctors-cta">
    <div class="container">
        <h2>Can't Find The Right Doctor?</h2>
        <p>Our patient care coordinators can help you find the perfect specialist for your healthcare needs.</p>
        <a href="{{ route('contact') }}"><button class="btn btn-outline"
                style="background-color: white; color: var(--primary);">Contact Us for Assistance</button></a>
    </div>
</section>
@endsection

@push('js')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const searchInput = document.getElementById('doctorSearch');
        const searchButton = document.getElementById('searchButton');
        const specialtyFilter = document.getElementById('specialtyFilter');
        const departmentFilter = document.getElementById('departmentFilter');
        const doctorsGrid = document.getElementById('doctorsGrid');
        const loading = document.getElementById('loading');
        const BASE_URL = "{{ url('/') }}";
        function renderDoctors(doctors) {
    const doctorsGrid = document.getElementById('doctorsGrid');
    doctorsGrid.innerHTML = '';

    if (doctors.length === 0) {
        doctorsGrid.innerHTML = `<div class="no-doctors" style="grid-column: 1/-1; text-align: center; padding: 40px;">
            <h3>No doctors found matching your criteria</h3>
            <p>Try adjusting your search or filters</p>
        </div>`;
        return;
    }

    doctors.forEach(doctor => {
        const card = document.createElement('div');
        card.className = 'doctor-card';

        card.innerHTML = `
            <div class="doctor-image">
                <img src="${BASE_URL}/public/${doctor.image}" alt="${doctor.name}">
            </div>
            <div class="doctor-details">
                <h3>${doctor.name}</h3>
                <p>${doctor.specialty?.name || ''}</p>
                <h6>${doctor.degree || ''}</h6>
                <div class="doctor-meta">
                    <div><i class="fas fa-briefcase"></i> ${doctor.experience || ''}</div>
                    <div>${doctor.new_patients ? '<i class="fas fa-user-plus"></i> New Patients' : ''}</div>
                    <div>${doctor.telehealth ? '<i class="fas fa-video"></i> Telehealth' : ''}</div>
                </div>
                <div class="doctor-actions">
                    <button class="btn btn-primary">View Profile</button>
                    <button class="btn btn-outline">Book Appointment</button>
                </div>
            </div>
        `;

        doctorsGrid.appendChild(card);
    });
}

    
        function filterDoctors() {
            loading.style.display = 'block';
            doctorsGrid.innerHTML = '';
    
            const search = searchInput.value;
            const specialty = specialtyFilter.value;
            const department = departmentFilter.value;

            const filterUrl = "{{ url('/filter-doctors') }}";


            fetch(`${filterUrl}?search=${encodeURIComponent(search)}&specialty=${encodeURIComponent(specialty)}&department=${encodeURIComponent(department)}`)
                .then(res => res.json())
                .then(data => {
                    loading.style.display = 'none';
                   renderDoctors(data.data);
                })
                .catch(err => {
                    loading.style.display = 'none';
                    console.error('Error loading doctors:', err);
                });
        }
    
        // Initial load
        filterDoctors();
    
        // Event listeners
        searchButton.addEventListener('click', filterDoctors);
        searchInput.addEventListener('keyup', e => {
            if (e.key === 'Enter') filterDoctors();
        });
        specialtyFilter.addEventListener('change', filterDoctors);
        departmentFilter.addEventListener('change', filterDoctors);
    });
</script>
@endpush