@extends('layouts.website_layout')

@section('content')
<!-- Main Content -->
<main id="main-content">
    <!-- Hero Section with Slider -->
     <section class="nisd-hero-section">
        
        <!-- 1. Dedicated Banner Block (Top) -->
        <div class="nisd-hero-slider" id="nisdHeroSlider">
            
            @foreach ($sliders as $key => $slider)
            <div class="nisd-slide-item {{ $key == 0 ? 'nisd-active' : '' }}" 
                 style="background-image: url('{{ $slider->file_url }}');"
                 role="img"
                 aria-label="{{ getLocalizedDataFromObj($slider, 'title') }}">
            </div>
            @endforeach

            <!-- Overlay & Indicators -->
            <div class="nisd-hero-overlay"></div>

            <div class="nisd-indicators">
                @foreach ($sliders as $key => $slider)
                <button class="nisd-indicator {{ $key == 0 ? 'nisd-active' : '' }}" 
                        data-slide="{{ $key }}"
                        aria-label="Go to slide {{ $key + 1 }}">
                </button>
                @endforeach
            </div>
        </div>

        <!-- 2. Search Section (Overlapping Bottom of Banner) -->
        <div class="nisd-content-wrapper">
            <div class="container">
                <div class="nisd-search-card">
                    
                    <!-- Card Header -->
                    <div class="nisd-card-header">
                        <div class="nisd-title-group">
                            <i class="fas fa-hand-holding-heart fa-2x" style="color: var(--nisd-accent-orange);"></i>
                            <h2 class="nisd-main-title">Find Geriatric Caregiver</h2>
                        </div>
                        <p class="nisd-subtitle">
                            Connect with <span class="nisd-highlight-text">certified & trained</span> geriatric caregivers in your area.<br>
                            <small class="text-muted">(NISD is the awarding and assessment body affiliated by the NCBT)</small>
                        </p>
                    </div>

                    <!-- Tabs -->
                    <div class="nisd-tab-container">
                        <button class="nisd-tab-btn nisd-tab-active" data-mode="basic">Basic Search</button>
                        <button class="nisd-tab-btn" data-mode="advanced">Advanced Search</button>
                    </div>

                    <!-- Search Form -->
                    <div class="nisd-form-body">
                        <form action="/search-caregiver" method="GET" class="nisd-search-form">
                            <div class="row g-3">
                                <div class="col-lg-5 col-md-12">
                                    <div class="nisd-input-group">
                                        <i class="fas fa-map-marker-alt nisd-input-icon"></i>
                                        <input type="text" name="location" class="form-control nisd-form-control" placeholder="Enter City, Region or Pincode">
                                    </div>
                                </div>
                                <div class="col-lg-5 col-md-12">
                                    <div class="nisd-input-group">
                                        <i class="fas fa-user-nurse nisd-input-icon"></i>
                                        <select name="specialization" class="form-select nisd-form-control">
                                            <option value="" selected>Select Specialization</option>
                                            <option value="1">Geriatric Care Certificate</option>
                                            <option value="2">PG Diploma Geriatric Care</option>
                                            <option value="3">Dementia Care Specialist</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-2 col-md-12">
                                    <button type="submit" class="nisd-submit-btn">
                                        <i class="fas fa-search"></i> Search
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>

                    <!-- Footer Tags -->
                    <div class="nisd-card-footer">
                        <span class="nisd-footer-label">Trending:</span>
                        <a href="#" class="nisd-tag-chip">Delhi NCR</a>
                        <a href="#" class="nisd-tag-chip">Mumbai</a>
                        <a href="#" class="nisd-tag-chip">Full-time Care</a>
                        <a href="#" class="nisd-tag-chip">Assisted Living</a>
                        <a href="/caregivers" class="nisd-tag-chip nisd-view-all">View All <i class="fas fa-arrow-right ms-1"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Programs Section -->
    <section class="tp-programs-section" id="programs">
        <div class="container">
            <!-- Header -->
            <div class="tp-header">
                <h2 class="section-title">Our Training Programs</h2>
                <p class="section-subtitle">
                    Comprehensive training programs designed to create skilled and compassionate caregivers
                </p>
            </div>

            <!-- Grid -->
            <div class="row g-4 justify-content-center">
                @foreach ($trainingPrograms as $trainingProgram)

                    <div class="col-lg-6 col-md-6">
                        <div class="tp-card">
                            
                            <!-- Image Section Removed -->

                            <div class="tp-body">
                                <!-- Badge moved here -->
                                <div class="tp-badge">
                                    {{ $trainingProgram->course_type_desc }}
                                </div>
                                
                                <h3 class="tp-title">{{ $trainingProgram->title }}</h3>
                                
                                <!-- Clean Grid Stats -->
                                <div class="tp-stats-grid">
                                    <div class="tp-stat-item">
                                        <span class="tp-stat-label">Tuition</span>
                                        <span class="tp-stat-value">
                                            @if ($trainingProgram->fees == 0)
                                                <span class="text-free">Free</span>
                                            @else
                                                <span class="text-price">{{ $trainingProgram->fees }} Rs</span>
                                            @endif
                                        </span>
                                    </div>
                                    <div class="tp-stat-item">
                                        <span class="tp-stat-label">Duration</span>
                                        <span class="tp-stat-value">
                                            <!-- Added Icon for visual flair -->
                                            <i class="fas fa-clock fa-xs"></i>{{ $trainingProgram->total_hours }}h
                                        </span>
                                    </div>
                                    <div class="tp-stat-item">
                                        <span class="tp-stat-label">Batch Size</span>
                                        <span class="tp-stat-value">
                                            {{ $trainingProgram->batch_size_min }}-{{ $trainingProgram->batch_size_max }}
                                        </span>
                                    </div>
                                </div>

                                <p class="tp-desc">
                                    Click on the view details to view complete details of the course.
                                </p>

                                <div class="tp-footer">
                                    <a href="{{ route('public.login') }}" class="btn-tp btn-primary-tp">Apply Now</a>
                                    <a href="{{ route('show-program-details', ['id' => $trainingProgram->id]) }}" class="btn-tp btn-outline-tp">Details</a>
                                </div>

                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <!-- Video Section -->
    <section class="nisd-split-section">
        <div class="container nisd-content-wrapper">
            <div class="row align-items-center">
                
                <!-- Left Column: Video -->
                <div class="col-lg-7 col-md-12 mb-lg-0">
                    <div class="nisd-video-frame-outer">
                        <div class="nisd-video-frame-inner">
                            <video class="nisd-video-element" id="nisdJourneyVideo" playsinline loop poster="{{ asset('storage/video_gallery/videos/video_coverpic.png') }}">
                                <source src="{{ asset('storage/video_gallery/videos/nisd_video.mp4') }}" type="video/mp4">
                                Your browser does not support the video tag.
                            </video>
                            
                            <!-- Centered Play Button -->
                            <div class="nisd-play-btn" id="nisdPlayBtn" onclick="togglePlay()">
                                <i class="fas fa-play"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Right Column: Quick Links -->
                <div class="col-lg-5 col-md-12">
                    <div class="nisd-links-wrapper">
                        
                        <div class="nisd-links-header">
                            <h3>Quick Access</h3>
                            <p>Essential resources and information just a click away.</p>
                        </div>

                        <!-- Link 1 -->
                        <a href="https://www.skillindiadigital.gov.in" target="_blank" class="nisd-quick-link">
                            <div class="link-icon-box">
                                <i class="fas fa-hands-helping"></i>
                            </div>
                            <div class="link-text">
                                <h5>Sidh Portal</h5>
                                <span>Skill India Digital</span>
                            </div>
                            <div class="link-arrow">
                                <i class="fas fa-chevron-right"></i>
                            </div>
                        </a>

                        <!-- Link 2 -->
                        <a href="https://www.nisd.gov.in" target="_blank" class="nisd-quick-link">
                            <div class="link-icon-box">
                                <i class="fas fa-file-contract"></i>
                            </div>
                            <div class="link-text">
                                <h5>Nisd Website</h5>
                                <span>National Institute of Social Defense</span>
                            </div>
                            <div class="link-arrow">
                                <i class="fas fa-chevron-right"></i>
                            </div>
                        </a>

                        <!-- Link 3 -->
                        <a href="{{ route('public.register') }}#nav-partner-tab" class="nisd-quick-link">
                            <div class="link-icon-box">
                                <i class="fas fa-book-open"></i>
                            </div>
                            <div class="link-text">
                                <h5>Partner Registration</h5>
                                <span>Register for Partner</span>
                            </div>
                            <div class="link-arrow">
                                <i class="fas fa-chevron-right"></i>
                            </div>
                        </a>

                        <!-- Link 4 -->
                        <a href="{{ route('public.register') }}" class="nisd-quick-link">
                            <div class="link-icon-box">
                                <i class="fas fa-users"></i>
                            </div>
                            <div class="link-text">
                                <h5>Student Registration</h5>
                                <span>Register for Student</span>
                            </div>
                            <div class="link-arrow">
                                <i class="fas fa-chevron-right"></i>
                            </div>
                        </a>

                    </div>
                </div>

            </div>            

        </div>
    </section>


    <!-- Impact Section -->
    <section class="imp-section">
        <div class="container">
            
            <!-- Section Header -->
            <div class="imp-header">
                <h2 class="imp-title">
                    Our <span class="imp-text-accent">Impact</span>
                </h2>
                <p class="imp-subtitle">
                    Transforming lives through professional care education, creating a legacy of skilled caregivers across the nation.
                </p>
            </div>

            <!-- Classic Grid Layout -->
            <div class="row g-4 justify-content-center">
                
                <!-- Card 1: Programs (Gold Theme) -->
                <div class="col-lg-4 col-md-6">
                    <div class="imp-card theme-gold">
                        <div class="imp-icon-wrapper">
                            <i class="fas fa-graduation-cap"></i>
                        </div>
                        <div class="imp-number imp-count-up" data-target="{{ $impactStats['programs'] }}">
                            {{ $impactStats['programs'] }}
                        </div>
                        <div class="imp-label">Training Programs</div>
                    </div>
                </div>

                <!-- Card 2: Caregivers (Navy Theme) -->
                <div class="col-lg-4 col-md-6">
                    <div class="imp-card theme-navy">
                        <div class="imp-icon-wrapper">
                            <i class="fas fa-users"></i>
                        </div>
                        <div class="imp-number imp-count-up" data-target="{{ $impactStats['caregivers'] }}">
                            {{ $impactStats['caregivers'] }}
                        </div>
                        <div class="imp-label">Trained Caregivers</div>
                    </div>
                </div>

                <!-- Card 3: Centers (Gold Theme) -->
                <div class="col-lg-4 col-md-6">
                    <div class="imp-card theme-gold">
                        <div class="imp-icon-wrapper">
                            <i class="fas fa-building"></i>
                        </div>
                        <div class="imp-number imp-count-up" data-target="{{ $impactStats['centres'] }}">
                            {{ $impactStats['centres'] }}
                        </div>
                        <div class="imp-label">Training Centers</div>
                    </div>
                </div>

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


    <!-- Quick Actions Section -->
    {{-- <section class="qa-section">
        <div class="container">
            
            <!-- Header -->
            <div class="qa-header">
                <h2 class="qa-title">Quick <span class="text-highlight">Actions</span></h2>
                <p class="qa-subtitle">Get started with our services and programs</p>
            </div>

            <div class="row g-4 justify-content-center">
                
                <!-- Card 1: Student Application -->
                <div class="col-lg-4 col-md-6">
                    <div class="qa-card">
                        <div class="qa-icon-wrapper qa-icon-gold">
                            <i class="fas fa-graduation-cap"></i>
                        </div>
                        <h3 class="qa-card-title">Student Application</h3>
                        <p class="qa-card-text">Apply for our training programs</p>
                        <a href="{{ route('public.login') }}" class="btn-qa">
                            Get Started <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>

                <!-- Card 2: Training Partner (Navy Theme) -->
                <div class="col-lg-4 col-md-6">
                    <div class="qa-card">
                        <div class="qa-icon-wrapper qa-icon-navy">
                            <i class="fas fa-building"></i>
                        </div>
                        <h3 class="qa-card-title">Register Training Partner</h3>
                        <p class="qa-card-text">Become an accredited partner</p>
                        <a href="{{ route('public.register') }}" class="btn-qa">
                            Get Started <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>

                <!-- Card 3: Find Caregivers -->
                <div class="col-lg-4 col-md-6">
                    <div class="qa-card">
                        <div class="qa-icon-wrapper qa-icon-gold">
                            <i class="fas fa-heart"></i>
                        </div>
                        <h3 class="qa-card-title">Find Caregivers</h3>
                        <p class="qa-card-text">Connect with certified professionals</p>
                        <a href="{{ route('public.login') }}" class="btn-qa">
                            Get Started <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>

            </div>
        </div>
    </section> --}}

</main>
@endsection
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const counters = document.querySelectorAll('.stat-number');

        const observer = new IntersectionObserver(entries => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const el = entry.target;
                    const target = +el.getAttribute('data-count');
                    let count = 0;
                    const speed = 50;

                    const updateCount = () => {
                        const increment = Math.ceil(target / speed);
                        count += increment;
                        if (count < target) {
                            el.innerText = count;
                            requestAnimationFrame(updateCount);
                        } else {
                            el.innerText = target;
                        }
                    };

                    updateCount();
                    observer.unobserve(el); // Only animate once
                }
            });
        }, { threshold: 0.7 });

        counters.forEach(counter => observer.observe(counter));
    });
    
</script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const video = document.getElementById('journeyVideo');
    const playBtn = document.getElementById('playPauseBtn');
    const playIcon = playBtn.querySelector('i');

    playBtn.addEventListener('click', () => {
      if (video.paused) {
        video.play();
        playIcon.classList.replace('fa-play', 'fa-pause');
      } else {
        video.pause();
        playIcon.classList.replace('fa-pause', 'fa-play');
      }
    });
  });

  document.addEventListener('DOMContentLoaded', () => {
        const counters = document.querySelectorAll('.imp-count-up');
        const speed = 200; // The lower the slower

        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const counter = entry.target;
                    const target = +counter.getAttribute('data-target');
                    
                    const updateCount = () => {
                        const count = +counter.innerText;
                        const inc = target / speed;

                        if (count < target) {
                            counter.innerText = Math.ceil(count + inc);
                            setTimeout(updateCount, 20);
                        } else {
                            counter.innerText = target;
                        }
                    };
                    updateCount();
                    observer.unobserve(counter); // Only animate once
                }
            });
        }, { threshold: 0.5 });

        counters.forEach(counter => observer.observe(counter));
    });
</script>