@extends('layouts.app')

@section('title', 'Visual Impairment Solutions: Inclusive Opportunities and navigation for English Learning')

@section('content')
    <!-- Hero Section with Background Slider -->
    <section class="hero-slider-bg position-relative">
        <!-- Background Image Slider -->
        <div id="heroCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="5000">
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <div class="hero-slide"
                        style="background-image: linear-gradient(135deg, rgba(45, 55, 72, 0.8), rgba(45, 55, 72, 0.6)), url('https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');">
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="hero-slide"
                        style="background-image: linear-gradient(135deg, rgba(45, 55, 72, 0.8), rgba(45, 55, 72, 0.6)), url('https://images.unsplash.com/photo-1524178232363-1fb2b075b655?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');">
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="hero-slide"
                        style="background-image: linear-gradient(135deg, rgba(45, 55, 72, 0.8), rgba(45, 55, 72, 0.6)), url('https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&q=80');">
                    </div>
                </div>
            </div>
        </div>

        <!-- Hero Content -->
        <div class="hero-content position-absolute top-50 start-50 translate-middle w-100">
            <div class="container">
                <div class="row justify-content-center text-center text-white">
                    <div class="col-lg-10">
                        <h1 class="display-1 fw-bold mb-4 text-gradient" style="font-size: 6rem; letter-spacing: 0.2em;">
                            VISION
                        </h1>
                        <p class="fs-3 mb-4 fw-light">
                            English for Young Learner
                        </p>
                        <p class="fs-5 mb-5 opacity-90">
                            Visual Impairment Solutions: Inclusive Opportunities and navigation for English Learning
                        </p>

                        <!-- Search Bar -->
                        <div class="row justify-content-center mb-5">
                            <div class="col-md-6">
                                <form action="{{ route('courses.public') }}" method="GET" class="search-form">
                                    <div class="input-group input-group-lg">
                                        <input type="text" name="search" class="form-control"
                                            placeholder="Search courses..." style="border-radius: 50px 0 0 50px;"
                                            value="{{ request('search') }}">
                                        <button class="btn btn-edunetra" type="submit"
                                            style="border-radius: 0 50px 50px 0;">
                                            <i class="bi bi-search"></i>
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <!-- Course Management Button for Teachers -->
                        @auth
                            @if (auth()->user()->isTeacher() || auth()->user()->isAdmin())
                                <div class="mb-4">
                                    <a href="#" class="btn btn-edunetra btn-lg">
                                        <i class="bi bi-gear-fill me-2"></i> Course Management
                                    </a>
                                </div>
                            @endif
                        @endauth

                        <!-- Scroll Down Indicator -->
                        <div class="mt-5">
                            <a href="#info-section" class="text-white text-decoration-none">
                                <i class="bi bi-chevron-down fs-2 animate-bounce"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Info Buttons Section -->
    <section id="info-section" class="bg-edunetra-yellow py-5">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center mb-4">
                    <h2 class="fw-bold text-dark mb-3">Informasi & Layanan</h2>
                    <p class="text-dark opacity-75">Akses informasi terbaru dan layanan yang tersedia untuk umum</p>
                </div>
            </div>

            <div class="row g-4 mb-4">
                <div class="col-lg-2 col-md-4 col-sm-6">
                    <a href="#new-info" class="info-card-link text-decoration-none">
                        <div class="info-card bg-primary text-white text-center h-100">
                            <div class="info-card-body p-4">
                                <i class="bi bi-info-circle fs-1 mb-3"></i>
                                <h6 class="fw-bold mb-2">New Info</h6>
                                <small class="opacity-90">Informasi Terbaru</small>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-2 col-md-4 col-sm-6">
                    <a href="#volunteer" class="info-card-link text-decoration-none">
                        <div class="info-card bg-success text-white text-center h-100">
                            <div class="info-card-body p-4">
                                <i class="bi bi-people fs-1 mb-3"></i>
                                <h6 class="fw-bold mb-2">Volunteer</h6>
                                <small class="opacity-90">Program Relawan</small>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-2 col-md-4 col-sm-6">
                    <a href="#recruitment" class="info-card-link text-decoration-none">
                        <div class="info-card bg-warning text-dark text-center h-100">
                            <div class="info-card-body p-4">
                                <i class="bi bi-briefcase fs-1 mb-3"></i>
                                <h6 class="fw-bold mb-2">Open Recruitment</h6>
                                <small class="opacity-75">Lowongan Kerja</small>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-2 col-md-4 col-sm-6">
                    <a href="#shadow-teacher" class="info-card-link text-decoration-none">
                        <div class="info-card bg-info text-white text-center h-100">
                            <div class="info-card-body p-4">
                                <i class="bi bi-person-workspace fs-1 mb-3"></i>
                                <h6 class="fw-bold mb-2">Shadow Teacher</h6>
                                <small class="opacity-90">Program Magang</small>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-lg-4 col-md-8 col-sm-12">
                    <a href="#lentera" class="info-card-link text-decoration-none">
                        <div class="info-card bg-danger text-white text-center h-100">
                            <div class="info-card-body p-4">
                                <i class="bi bi-eye fs-1 mb-3"></i>
                                <h6 class="fw-bold mb-2">LENTERA</h6>
                                <small class="opacity-90">Layanan Pendampingan Mobilitas Difabel Netra</small>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Latest Courses Section -->
    <section class="section-padding bg-light">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center mb-5">
                    <h2 class="display-4 fw-bold text-edunetra-dark mb-3">Course Terbaru</h2>
                    <p class="fs-5 text-muted">Temukan program pembelajaran terbaru kami</p>
                </div>
            </div>

            <div class="row g-4">
                @foreach ($featuredCourses as $course)
                    <div class="col-lg-4 col-md-6">
                        <div class="card h-100 border-0 shadow course-card">
                            <div class="card-img-top bg-light d-flex align-items-center justify-content-center"
                                style="height: 200px;">
                                @if ($course->image)
                                    <img src="{{ $course->image }}" alt="{{ $course->title }}" class="img-fluid rounded-top" style="object-fit: cover; height: 100%; width: 100%;">
                                @else
                                    <div class="text-center text-muted">
                                        <i class="bi bi-book fs-1 mb-2"></i>
                                        <p class="mb-0 small">{{ Str::limit($course->title, 20) }}</p>
                                    </div>
                                @endif
                            </div>

                            <div class="card-body d-flex flex-column">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <div class="d-flex gap-2">
                                        <span class="badge bg-edunetra-yellow text-dark">
                                            {{ ucfirst($course->level) }}
                                        </span>
                                        @auth
                                            @php
                                                $userEnrollment = $course->enrollments()->where('user_id', auth()->id())->where('status', 'enrolled')->first();
                                            @endphp
                                            @if($userEnrollment)
                                                <span class="badge bg-success text-white">
                                                    <i class="bi bi-check-circle me-1"></i>Enrolled
                                                </span>
                                            @endif
                                        @endauth
                                    </div>
                                    <small class="text-muted">
                                        <i class="bi bi-clock"></i> {{ $course->duration_weeks }} weeks
                                    </small>
                                </div>

                                <h5 class="card-title fw-bold mb-2">{{ $course->title }}</h5>
                                <p class="card-text text-muted flex-grow-1">{{ Str::limit($course->description, 100) }}</p>

                                <!-- Course Info -->
                                <div class="mb-3">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <small class="text-muted">
                                            <i class="bi bi-person"></i> {{ $course->teacher->name }}
                                        </small>
                                        <small class="text-muted">
                                            <i class="bi bi-people"></i> {{ $course->getEnrolledStudentsCount() }} students
                                        </small>
                                    </div>

                                    @if ($course->start_date)
                                        <small class="text-muted d-block">
                                            <i class="bi bi-calendar"></i> Start: {{ $course->start_date->format('d M Y') }}
                                        </small>
                                    @endif
                                </div>

                                <div class="d-flex justify-content-between align-items-center">
                                    {{-- <span class="h5 mb-0 fw-bold">
                                        @if ($course->price > 0)
                                            Rp {{ number_format($course->price, 0, ',', '.') }}
                                        @else
                                            <span class="text-success">Free</span>
                                        @endif
                                    </span> --}}

                                    @auth
                                        @if($userEnrollment)
                                            <a href="{{ route('courses.show', $course->slug) }}" class="btn btn-success">
                                                <i class="bi bi-play-circle me-1"></i> Continue
                                            </a>
                                        @else
                                            <a href="{{ route('courses.show', $course->slug) }}" class="btn btn-edunetra">
                                                <i class="bi bi-plus-circle me-1"></i> Enroll
                                            </a>
                                        @endif
                                    @else
                                        <a href="{{ route('courses.show', $course->slug) }}" class="btn btn-edunetra">
                                            <i class="bi bi-eye me-1"></i> View Details
                                        </a>
                                    @endauth
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="row mt-5">
                <div class="col-12 text-center">
                    <a href="{{ route('courses.public') }}" class="btn btn-outline-dark btn-lg">
                        <i class="bi bi-grid me-2"></i> Lihat Semua Course
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Product Showcase Section -->
    <section class="section-padding bg-white">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center mb-5">
                    <h2 class="display-4 fw-bold text-edunetra-dark mb-3">Produk Edunetra</h2>
                    <p class="fs-5 text-muted">Koleksi karya dan produk edukasi dari Edunetra</p>
                </div>
            </div>

            <div class="row g-4 justify-content-center">
                <div class="col-md-6">
                    <div class="card border-0 shadow-lg product-card">
                        <div class="row g-0">
                            <div class="col-md-5">
                                <div class="product-image bg-light d-flex align-items-center justify-content-center"
                                    style="height: 100%">
                                    <img src="https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=60"
                                        alt="Antologi Cerpen Edunetra" class="img-fluid rounded-start"
                                        style="object-fit: cover; height: 100%; width: 100%;" />
                                </div>
                            </div>
                            <div class="col-md-7 px-3">
                                <div class="card-body h-100 d-flex flex-column">
                                    <div class="mb-3">
                                        <span class="badge bg-warning text-dark mb-2">
                                            <i class="bi bi-star me-1"></i> Pre Order
                                        </span>
                                    </div>
                                    <h4 class="card-title fw-bold text-edunetra-dark">Antologi Cerpen Edunetra</h4>
                                    <p class="card-text text-muted flex-grow-1">
                                        Kumpulan cerita pendek inspiratif dari komunitas Edunetra yang mengangkat tema
                                        inklusi, pendidikan, dan pemberdayaan difabel netra.
                                    </p>

                                    <div class="product-details mb-3">
                                        <small class="text-muted d-block">
                                            <i class="bi bi-bookmark me-1"></i> Kategori: Sastra & Edukasi
                                        </small>
                                        <small class="text-muted d-block">
                                            <i class="bi bi-calendar me-1"></i> Estimasi Terbit: Desember 2024
                                        </small>
                                    </div>

                                    <div class="">
                                        <div>
                                            <span class="h4 fw-bold text-edunetra-dark">Rp 75.000</span>
                                            <small class="text-muted d-block">Pre Order Price</small>
                                        </div>
                                        <button class="btn btn-edunetra mt-3">
                                            <i class="bi bi-cart-plus me-2"></i> Tambah ke Keranjang
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card border-0 shadow-lg product-card">
                        <div class="row g-0">
                            <div class="col-md-5">
                                <div class="product-image bg-light d-flex align-items-center justify-content-center"
                                    style="height: 100%">
                                    <img src="https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=60"
                                        alt="Antologi Cerpen Edunetra" class="img-fluid rounded-start"
                                        style="object-fit: cover; height: 100%; width: 100%;" />
                                </div>
                            </div>
                            <div class="col-md-7 px-3">
                                <div class="card-body h-100 d-flex flex-column">
                                    <div class="mb-3">
                                        <span class="badge bg-warning text-dark mb-2">
                                            <i class="bi bi-star me-1"></i> Pre Order
                                        </span>
                                    </div>
                                    <h4 class="card-title fw-bold text-edunetra-dark">Antologi Cerpen Edunetra</h4>
                                    <p class="card-text text-muted flex-grow-1">
                                        Kumpulan cerita pendek inspiratif dari komunitas Edunetra yang mengangkat tema
                                        inklusi, pendidikan, dan pemberdayaan difabel netra.
                                    </p>

                                    <div class="product-details mb-3">
                                        <small class="text-muted d-block">
                                            <i class="bi bi-bookmark me-1"></i> Kategori: Sastra & Edukasi
                                        </small>
                                        <small class="text-muted d-block">
                                            <i class="bi bi-calendar me-1"></i> Estimasi Terbit: Desember 2024
                                        </small>
                                    </div>

                                    <div class="">
                                        <div>
                                            <span class="h4 fw-bold text-edunetra-dark">Rp 75.000</span>
                                            <small class="text-muted d-block">Pre Order Price</small>
                                        </div>
                                        <button class="btn btn-edunetra mt-3">
                                            <i class="bi bi-cart-plus me-2"></i> Tambah ke Keranjang
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card border-0 shadow-lg product-card">
                        <div class="row g-0">
                            <div class="col-md-5">
                                <div class="product-image bg-light d-flex align-items-center justify-content-center"
                                    style="height: 100%">
                                    <img src="https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0?ixlib=rb-4.0.3&auto=format&fit=crop&w=500&q=60"
                                        alt="Antologi Cerpen Edunetra" class="img-fluid rounded-start"
                                        style="object-fit: cover; height: 100%; width: 100%;" />
                                </div>
                            </div>
                            <div class="col-md-7 px-3">
                                <div class="card-body h-100 d-flex flex-column">
                                    <div class="mb-3">
                                        <span class="badge bg-warning text-dark mb-2">
                                            <i class="bi bi-star me-1"></i> Pre Order
                                        </span>
                                    </div>
                                    <h4 class="card-title fw-bold text-edunetra-dark">Antologi Cerpen Edunetra</h4>
                                    <p class="card-text text-muted flex-grow-1">
                                        Kumpulan cerita pendek inspiratif dari komunitas Edunetra yang mengangkat tema
                                        inklusi, pendidikan, dan pemberdayaan difabel netra.
                                    </p>

                                    <div class="product-details mb-3">
                                        <small class="text-muted d-block">
                                            <i class="bi bi-bookmark me-1"></i> Kategori: Sastra & Edukasi
                                        </small>
                                        <small class="text-muted d-block">
                                            <i class="bi bi-calendar me-1"></i> Estimasi Terbit: Desember 2024
                                        </small>
                                    </div>

                                    <div class="">
                                        <div>
                                            <span class="h4 fw-bold text-edunetra-dark">Rp 75.000</span>
                                            <small class="text-muted d-block">Pre Order Price</small>
                                        </div>
                                        <button class="btn btn-edunetra mt-3">
                                            <i class="bi bi-cart-plus me-2"></i> Tambah ke Keranjang
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Activity Photos Section -->
    <section class="section-padding bg-light">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center mb-5">
                    <h2 class="display-4 fw-bold text-edunetra-dark mb-3">Kegiatan Edunetra</h2>
                    <p class="fs-5 text-muted">Dokumentasi kegiatan dan program yang telah dilaksanakan</p>
                </div>
            </div>

            <div class="row g-4">
                <!-- Language Exchange -->
                <div class="col-lg-4 col-md-6">
                    <div class="activity-card card border-0 shadow h-100">
                        <div class="activity-image bg-primary bg-opacity-10 d-flex align-items-center justify-content-center"
                            style="height: 250px;">
                            <div class="text-center">
                                <i class="bi bi-chat-dots fs-1 text-primary mb-3"></i>
                                <h5 class="text-primary">Language Exchange</h5>
                            </div>
                        </div>
                        <div class="card-body">
                            <h5 class="card-title fw-bold">Language Exchange</h5>
                            <p class="card-text text-muted">
                                Program pertukaran bahasa yang memfasilitasi pembelajaran bahasa Inggris
                                melalui interaksi langsung dengan native speaker dan sesama pembelajar.
                            </p>
                            <small class="text-muted">
                                <i class="bi bi-calendar me-1"></i> Setiap Sabtu, 14:00 WIB
                            </small>
                        </div>
                    </div>
                </div>

                <!-- Layar Bisik -->
                <div class="col-lg-4 col-md-6">
                    <div class="activity-card card border-0 shadow h-100">
                        <div class="activity-image bg-success bg-opacity-10 d-flex align-items-center justify-content-center"
                            style="height: 250px;">
                            <div class="text-center">
                                <i class="bi bi-headphones fs-1 text-success mb-3"></i>
                                <h5 class="text-success">Layar Bisik</h5>
                            </div>
                        </div>
                        <div class="card-body">
                            <h5 class="card-title fw-bold">Layar Bisik</h5>
                            <p class="card-text text-muted">
                                Layanan audio deskripsi untuk membantu aksesibilitas konten visual
                                bagi penyandang disabilitas netra dalam berbagai kegiatan pembelajaran.
                            </p>
                            <small class="text-muted">
                                <i class="bi bi-calendar me-1"></i> Tersedia untuk semua kegiatan
                            </small>
                        </div>
                    </div>
                </div>

                <!-- Pelatihan -->
                <div class="col-lg-4 col-md-6">
                    <div class="activity-card card border-0 shadow h-100">
                        <div class="activity-image bg-warning bg-opacity-10 d-flex align-items-center justify-content-center"
                            style="height: 250px;">
                            <div class="text-center">
                                <i class="bi bi-mortarboard fs-1 text-warning mb-3"></i>
                                <h5 class="text-warning">Pelatihan</h5>
                            </div>
                        </div>
                        <div class="card-body">
                            <h5 class="card-title fw-bold">Pelatihan & Workshop</h5>
                            <p class="card-text text-muted">
                                Berbagai program pelatihan keterampilan, workshop teknologi assistif,
                                dan pengembangan kapasitas untuk komunitas difabel netra.
                            </p>
                            <small class="text-muted">
                                <i class="bi bi-calendar me-1"></i> Jadwal bervariasi
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Announcements Section -->
    <section class="section-padding bg-white">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center mb-5">
                    <h2 class="display-4 fw-bold text-edunetra-dark mb-3">Latest Announcements</h2>
                    <p class="fs-5 text-muted">Stay updated with our latest news and opportunities</p>
                </div>
            </div>

            <div class="row g-4 mb-5">
                @foreach ($announcements as $announcement)
                    <div class="col-lg-4 col-md-6">
                        <div class="card h-100 border-0 shadow-sm">
                            <div class="card-body">
                                <div class="d-flex align-items-center mb-3">
                                    <span class="badge bg-edunetra-yellow text-dark me-2">
                                        {{ ucwords(str_replace('_', ' ', $announcement->type)) }}
                                    </span>
                                    @if ($announcement->is_featured)
                                        <i class="bi bi-star-fill text-warning"></i>
                                    @endif
                                </div>
                                <h5 class="card-title fw-bold">{{ $announcement->title }}</h5>
                                <p class="card-text text-muted">{{ Str::limit($announcement->content, 120) }}</p>
                                <small class="text-muted">
                                    <i class="bi bi-calendar"></i> {{ $announcement->published_at->format('M d, Y') }}
                                </small>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <!-- View All Announcements -->
            <div class="row">
                <div class="col-12 text-center">
                    <a href="#" class="btn btn-outline-dark btn-lg">
                        <i class="bi bi-megaphone me-2"></i> Lihat Semua Pengumuman
                    </a>
                </div>
            </div>
        </div>
    </section>
@endsection