@extends('frontend.layouts.main')

@section('title', $program->title . ' - ' . ($seoSetting->site_name ?? 'PT Bumenjaya Praduta Abadi'))

@section('content')
<!-- Page Header -->
<div class="page-header position-relative overflow-hidden" style="background: var(--gradient-primary); padding: 100px 0 80px;">
    <div class="container position-relative" style="z-index: 2;">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <nav aria-label="breadcrumb" class="mb-3" data-aos="fade-up">
                    <ol class="breadcrumb justify-content-center breadcrumb-custom">
                        <li class="breadcrumb-item"><a href="{{ route('frontend.index') }}" class="text-white text-decoration-none">Home</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('frontend.programs') }}" class="text-white text-decoration-none">Program</a></li>
                        <li class="breadcrumb-item active text-white" aria-current="page">{{ $program->title }}</li>
                    </ol>
                </nav>
                <div class="text-center" data-aos="fade-up" data-aos-delay="100">
                    <span class="badge bg-white bg-opacity-25 text-white px-4 py-2 rounded-pill fw-bold mb-3" style="font-size: 0.95rem; backdrop-filter: blur(10px);">
                        <i class="fas fa-graduation-cap me-2"></i>Program Pelatihan
                    </span>
                    <h1 class="display-3 fw-bold text-white mb-3" style="text-shadow: 0 2px 10px rgba(0,0,0,0.2);">{{ $program->title }}</h1>
                    <p class="lead text-white mb-4" style="text-shadow: 0 1px 5px rgba(0,0,0,0.2);">Tingkatkan keahlian Anda dengan program pelatihan profesional kami</p>
                    <div class="d-flex justify-content-center gap-3 flex-wrap">
                        <div class="badge bg-white px-4 py-2 fs-6 fw-bold" style="color: #1e40af !important;">
                            <i class="fas fa-clock me-2"></i>{{ $program->duration_months }} Bulan
                        </div>
                        <div class="badge bg-white px-4 py-2 fs-6 fw-bold" style="color: #1e40af !important;">
                            <i class="fas fa-users me-2"></i>Max {{ $program->max_students }} Siswa
                        </div>
                        <div class="badge bg-white px-4 py-2 fs-6 fw-bold" style="color: #1e40af !important;">
                            <i class="fas fa-certificate me-2"></i>Sertifikat Resmi
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="position-absolute top-0 end-0 opacity-10" style="font-size: 25rem; z-index: 1; color: white;">
        <i class="fas fa-book-reader"></i>
    </div>
</div>

<!-- Program Image -->
<section class="py-5 bg-light">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-10" data-aos="fade-up">
                <div class="position-relative" style="border-radius: 20px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.15);">
                    @if($program->image)
                        <img src="{{ program_image($program->image, $program->title) }}" class="img-fluid w-100" alt="{{ $program->title }}" style="height: 500px; object-fit: cover;" onerror="this.src='https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=1200&h=600&fit=crop&q=80'">
                    @else
                        <img src="{{ program_image(null, $program->title) }}" class="img-fluid w-100" alt="{{ $program->title }}" style="height: 500px; object-fit: cover;">
                    @endif
                    <div class="position-absolute bottom-0 start-0 w-100 p-4" style="background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);">
                        <div class="text-white">
                            <h3 class="fw-bold mb-2">{{ $program->title }}</h3>
                            <p class="mb-0 opacity-90"><i class="fas fa-tag me-2"></i>Program Unggulan</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Program Details -->
<section class="py-5">
    <div class="container">
        <div class="row g-4">
            <!-- Main Content -->
            <div class="col-lg-8">
                <!-- Quick Info Cards -->
                <div class="row g-3 mb-4" data-aos="fade-up">
                    <div class="col-md-4">
                        <div class="card border-0 shadow-sm h-100 text-center p-3" style="border-radius: 15px; background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);">
                            <div class="card-body text-white">
                                <div class="icon-wrapper mx-auto mb-3" style="width: 60px; height: 60px; background: rgba(255,255,255,0.2); border-radius: 15px; display: flex; align-items: center; justify-content: center;">
                                    <i class="fas fa-clock fa-2x"></i>
                                </div>
                                <h5 class="fw-bold mb-1">{{ $program->duration_months }} Bulan</h5>
                                <small class="opacity-90">Durasi Pelatihan</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card border-0 shadow-sm h-100 text-center p-3" style="border-radius: 15px; background: linear-gradient(135deg, #10b981 0%, #059669 100%);">
                            <div class="card-body text-white">
                                <div class="icon-wrapper mx-auto mb-3" style="width: 60px; height: 60px; background: rgba(255,255,255,0.2); border-radius: 15px; display: flex; align-items: center; justify-content: center;">
                                    <i class="fas fa-users fa-2x"></i>
                                </div>
                                <h5 class="fw-bold mb-1">{{ $program->max_students }} Siswa</h5>
                                <small class="opacity-90">Kapasitas Kelas</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card border-0 shadow-sm h-100 text-center p-3" style="border-radius: 15px; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);">
                            <div class="card-body text-white">
                                <div class="icon-wrapper mx-auto mb-3" style="width: 60px; height: 60px; background: rgba(255,255,255,0.2); border-radius: 15px; display: flex; align-items: center; justify-content: center;">
                                    <i class="fas fa-certificate fa-2x"></i>
                                </div>
                                <h5 class="fw-bold mb-1">Sertifikat</h5>
                                <small class="opacity-90">Resmi & Diakui</small>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Description -->
                <div class="card border-0 shadow-sm mb-4" style="border-radius: 20px;" data-aos="fade-up">
                    <div class="card-body p-4">
                        <div class="d-flex align-items-center mb-4">
                            <div class="icon-box me-3" style="width: 50px; height: 50px; background: rgba(30,64,175,0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center;">
                                <i class="fas fa-info-circle fa-lg text-primary"></i>
                            </div>
                            <h3 class="fw-bold mb-0">Deskripsi Program</h3>
                        </div>
                        <div class="text-muted lh-lg fs-6">
                            {!! $program->description !!}
                        </div>
                    </div>
                </div>

                <!-- Curriculum -->
                <div class="card border-0 shadow-sm mb-4" style="border-radius: 20px;" data-aos="fade-up">
                    <div class="card-body p-4">
                        <div class="d-flex align-items-center mb-4">
                            <div class="icon-box me-3" style="width: 50px; height: 50px; background: rgba(16,185,129,0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center;">
                                <i class="fas fa-book-open fa-lg text-success"></i>
                            </div>
                            <h3 class="fw-bold mb-0">Kurikulum Pelatihan</h3>
                        </div>
                        <div class="text-muted lh-lg fs-6">
                            {!! $program->curriculum !!}
                        </div>
                    </div>
                </div>

                <!-- What You'll Learn -->
                <div class="card border-0 shadow-sm mb-4" style="border-radius: 20px; background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);" data-aos="fade-up">
                    <div class="card-body p-4">
                        <div class="d-flex align-items-center mb-4">
                            <div class="icon-box me-3" style="width: 50px; height: 50px; background: rgba(30,64,175,0.2); border-radius: 12px; display: flex; align-items: center; justify-content: center;">
                                <i class="fas fa-lightbulb fa-lg text-primary"></i>
                            </div>
                            <h3 class="fw-bold mb-0">Yang Akan Anda Pelajari</h3>
                        </div>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <div class="d-flex align-items-start">
                                    <i class="fas fa-check-circle text-success me-3 mt-1"></i>
                                    <div>
                                        <h6 class="fw-bold mb-1">Materi Komprehensif</h6>
                                        <p class="text-muted small mb-0">Pembelajaran dari dasar hingga mahir</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="d-flex align-items-start">
                                    <i class="fas fa-check-circle text-success me-3 mt-1"></i>
                                    <div>
                                        <h6 class="fw-bold mb-1">Praktik Langsung</h6>
                                        <p class="text-muted small mb-0">Hands-on project dan studi kasus</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="d-flex align-items-start">
                                    <i class="fas fa-check-circle text-success me-3 mt-1"></i>
                                    <div>
                                        <h6 class="fw-bold mb-1">Instruktur Berpengalaman</h6>
                                        <p class="text-muted small mb-0">Dibimbing oleh praktisi industri</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="d-flex align-items-start">
                                    <i class="fas fa-check-circle text-success me-3 mt-1"></i>
                                    <div>
                                        <h6 class="fw-bold mb-1">Sertifikat Kompetensi</h6>
                                        <p class="text-muted small mb-0">Diakui oleh industri</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Requirements -->
                <div class="card border-0 shadow-sm mb-4" style="border-radius: 20px;" data-aos="fade-up">
                    <div class="card-body p-4">
                        <div class="d-flex align-items-center mb-4">
                            <div class="icon-box me-3" style="width: 50px; height: 50px; background: rgba(239,68,68,0.1); border-radius: 12px; display: flex; align-items: center; justify-content: center;">
                                <i class="fas fa-clipboard-list fa-lg text-danger"></i>
                            </div>
                            <h3 class="fw-bold mb-0">Persyaratan</h3>
                        </div>
                        <ul class="list-unstyled mb-0">
                            <li class="mb-3 d-flex align-items-start">
                                <i class="fas fa-chevron-right text-primary me-3 mt-1"></i>
                                <span class="text-muted">Minimal pendidikan SMA/SMK sederajat</span>
                            </li>
                            <li class="mb-3 d-flex align-items-start">
                                <i class="fas fa-chevron-right text-primary me-3 mt-1"></i>
                                <span class="text-muted">Memiliki laptop/komputer untuk praktik</span>
                            </li>
                            <li class="mb-3 d-flex align-items-start">
                                <i class="fas fa-chevron-right text-primary me-3 mt-1"></i>
                                <span class="text-muted">Motivasi tinggi untuk belajar dan berkembang</span>
                            </li>
                            <li class="mb-0 d-flex align-items-start">
                                <i class="fas fa-chevron-right text-primary me-3 mt-1"></i>
                                <span class="text-muted">Tidak ada pengalaman sebelumnya diperlukan</span>
                            </li>
                        </ul>
                    </div>
                </div>

                <!-- Career Opportunities -->
                <div class="card border-0 shadow-sm" style="border-radius: 20px; background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);" data-aos="fade-up">
                    <div class="card-body p-4">
                        <div class="d-flex align-items-center mb-4">
                            <div class="icon-box me-3" style="width: 50px; height: 50px; background: rgba(245,158,11,0.3); border-radius: 12px; display: flex; align-items: center; justify-content: center;">
                                <i class="fas fa-briefcase fa-lg text-warning"></i>
                            </div>
                            <h3 class="fw-bold mb-0">Peluang Karir</h3>
                        </div>
                        <p class="text-muted mb-3">Setelah menyelesaikan program ini, Anda akan siap untuk berbagai posisi seperti:</p>
                        <div class="d-flex flex-wrap gap-2">
                            <span class="badge bg-white text-dark px-3 py-2">Specialist</span>
                            <span class="badge bg-white text-dark px-3 py-2">Consultant</span>
                            <span class="badge bg-white text-dark px-3 py-2">Manager</span>
                            <span class="badge bg-white text-dark px-3 py-2">Freelancer</span>
                            <span class="badge bg-white text-dark px-3 py-2">Entrepreneur</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="col-lg-4">
                <!-- Sticky Sidebar -->
                <div class="sticky-sidebar" style="position: sticky; top: 100px;">
                    <!-- Enrollment Card -->
                    <div class="card border-0 shadow-lg mb-4" style="border-radius: 20px;" data-aos="fade-left">
                        <div class="card-body p-4">
                            <div class="text-center mb-4">
                                <div class="price-tag mb-3">
                                    <h2 class="fw-bold text-primary mb-0" style="font-size: 2.5rem;">
                                        Rp {{ number_format($program->fee, 0, ',', '.') }}
                                    </h2>
                                    <p class="text-muted mb-0">Biaya Pelatihan</p>
                                </div>
                                <div class="alert alert-success mb-0 py-2" style="border-radius: 10px;">
                                    <small><i class="fas fa-tag me-2"></i>Cicilan tersedia!</small>
                                </div>
                            </div>
                            
                            <div class="d-grid gap-2 mb-4">
                                <a href="{{ route('frontend.contact') }}" class="btn btn-primary btn-lg py-3 fw-bold" style="border-radius: 12px;">
                                    <i class="fas fa-user-plus me-2"></i>Daftar Sekarang
                                </a>
                                <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $contactInfo->phone ?? '') }}?text=Halo, saya tertarik dengan program {{ $program->title }}" target="_blank" class="btn btn-success btn-lg py-3 fw-bold" style="border-radius: 12px;">
                                    <i class="fab fa-whatsapp me-2"></i>Chat WhatsApp
                                </a>
                            </div>

                            <div class="border-top pt-3">
                                <h6 class="fw-bold mb-3">Program ini termasuk:</h6>
                                <ul class="list-unstyled mb-0">
                                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Materi lengkap & up-to-date</li>
                                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Sertifikat resmi</li>
                                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Akses konsultasi instruktur</li>
                                    <li class="mb-2"><i class="fas fa-check text-success me-2"></i>Job placement assistance</li>
                                    <li class="mb-0"><i class="fas fa-check text-success me-2"></i>Alumni network</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- Program Info -->
                    <div class="card border-0 shadow-sm mb-4" style="border-radius: 20px;" data-aos="fade-left" data-aos-delay="100">
                        <div class="card-body p-4">
                            <h5 class="fw-bold mb-4">
                                <i class="fas fa-info-circle text-primary me-2"></i>Informasi Program
                            </h5>
                            <ul class="list-unstyled mb-0">
                                <li class="mb-3 pb-3 border-bottom">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span class="text-muted"><i class="fas fa-calendar-alt me-2 text-primary"></i>Durasi</span>
                                        <span class="fw-bold">{{ $program->duration_months }} Bulan</span>
                                    </div>
                                </li>
                                <li class="mb-3 pb-3 border-bottom">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span class="text-muted"><i class="fas fa-users me-2 text-primary"></i>Kapasitas</span>
                                        <span class="fw-bold">{{ $program->max_students }} Siswa</span>
                                    </div>
                                </li>
                                <li class="mb-3 pb-3 border-bottom">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span class="text-muted"><i class="fas fa-clock me-2 text-primary"></i>Jadwal</span>
                                        <span class="fw-bold">Fleksibel</span>
                                    </div>
                                </li>
                                <li class="mb-3 pb-3 border-bottom">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span class="text-muted"><i class="fas fa-language me-2 text-primary"></i>Bahasa</span>
                                        <span class="fw-bold">Indonesia</span>
                                    </div>
                                </li>
                                <li class="mb-0">
                                    <div class="d-flex justify-content-between align-items-center">
                                        <span class="text-muted"><i class="fas fa-certificate me-2 text-primary"></i>Sertifikat</span>
                                        <span class="fw-bold">Ya</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <!-- Contact Card -->
                    <div class="card border-0 shadow-sm" style="border-radius: 20px; background: var(--gradient-primary);" data-aos="fade-left" data-aos-delay="200">
                        <div class="card-body p-4 text-white">
                            <h5 class="fw-bold mb-4">
                                <i class="fas fa-headset me-2"></i>Butuh Bantuan?
                            </h5>
                            <p class="mb-3 opacity-90">Hubungi kami untuk informasi lebih lanjut</p>
                            <ul class="list-unstyled mb-0">
                                <li class="mb-3">
                                    <i class="fas fa-phone me-2"></i>
                                    <a href="tel:{{ $contactInfo->phone ?? '' }}" class="text-white text-decoration-none">{{ $contactInfo->phone ?? '-' }}</a>
                                </li>
                                <li class="mb-3">
                                    <i class="fas fa-envelope me-2"></i>
                                    <a href="mailto:{{ $contactInfo->email ?? '' }}" class="text-white text-decoration-none">{{ $contactInfo->email ?? '-' }}</a>
                                </li>
                                <li class="mb-0">
                                    <i class="fas fa-map-marker-alt me-2"></i>
                                    <span class="opacity-90">{{ $contactInfo->address ?? '-' }}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- CTA Section -->
<section class="py-5 my-5 position-relative overflow-hidden" style="background: var(--gradient-primary);">
    <div class="container position-relative" style="z-index: 2;">
        <div class="row align-items-center">
            <div class="col-lg-8 text-white" data-aos="fade-right">
                <h2 class="display-5 fw-bold mb-3">Siap Memulai Perjalanan Belajar Anda?</h2>
                <p class="lead mb-4">Bergabunglah dengan ribuan alumni sukses kami dan raih karir impian Anda!</p>
            </div>
            <div class="col-lg-4 text-lg-end" data-aos="fade-left">
                <a href="{{ route('frontend.contact') }}" class="btn btn-light btn-lg px-5 py-3 fw-bold" style="border-radius: 12px;">
                    Daftar Sekarang <i class="fas fa-arrow-right ms-2"></i>
                </a>
            </div>
        </div>
    </div>
    <div class="position-absolute top-0 end-0 opacity-10" style="font-size: 20rem; z-index: 1;">
        <i class="fas fa-graduation-cap"></i>
    </div>
</section>
@endsection

@push('styles')
<style>
    .breadcrumb-custom {
        background: transparent;
        margin-bottom: 0;
    }
    
    .breadcrumb-custom .breadcrumb-item + .breadcrumb-item::before {
        content: "/";
        color: rgba(255, 255, 255, 0.7);
        padding: 0 0.5rem;
    }
    
    .breadcrumb-custom .breadcrumb-item a {
        color: white !important;
        text-decoration: none;
        transition: all 0.3s ease;
        opacity: 0.9;
    }
    
    .breadcrumb-custom .breadcrumb-item a:hover {
        opacity: 1;
        text-decoration: underline;
    }
    
    .breadcrumb-custom .breadcrumb-item.active {
        color: white !important;
        opacity: 1;
    }
    
    .sticky-sidebar {
        transition: all 0.3s ease;
    }
    
    @media (max-width: 991px) {
        .sticky-sidebar {
            position: relative !important;
            top: 0 !important;
        }
    }
    
    .card {
        transition: all 0.3s ease;
    }
    
    .card:hover {
        transform: translateY(-5px);
    }
    
    .btn {
        transition: all 0.3s ease;
    }
    
    .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    }
    
    .badge {
        border-radius: 10px !important;
    }
</style>
@endpush