@extends('theme.layout')
@section('title', 'Offer Letter')
@section('page_name', 'Offer Letter')

@push('styles')
    <style>
        /* Offer Letter Page Styles */
        .offer-letter-section {
            background: linear-gradient(135deg, #f6f9fc 0%, #f1f5f9 100%);
            min-height: 100vh;
            padding: 2rem 0 4rem;
        }

        /* Breadcrumb */
        .breadcrumb-nav {
            background: rgba(255,255,255,0.8);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-radius: 50px;
            padding: 0.8rem 1.5rem;
            margin-bottom: 2rem;
            border: 1px solid rgba(255,215,0,0.2);
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
        }

        .breadcrumb-nav .breadcrumb {
            margin: 0;
            background: transparent;
        }

        .breadcrumb-nav .breadcrumb-item a {
            color: #2c3e50;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.2s;
        }

        .breadcrumb-nav .breadcrumb-item a:hover {
            color: gold;
        }

        .breadcrumb-nav .breadcrumb-item.active {
            color: gold;
            font-weight: 600;
        }

        .breadcrumb-item+.breadcrumb-item::before {
            color: rgba(44,62,80,0.3);
        }

        /* Main Card */
        .offer-main-card {
            background: white;
            border-radius: 40px;
            box-shadow: 0 30px 60px rgba(0,0,0,0.1);
            overflow: hidden;
            border: 1px solid rgba(255,215,0,0.2);
            margin-bottom: 2rem;
        }

        /* Offer Header */
        .offer-header {
            background: linear-gradient(145deg, #0b1f3b, #132c4d);
            padding: 2.5rem;
            position: relative;
            overflow: hidden;
        }

        .offer-header::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -10%;
            width: 300px;
            height: 300px;
            background: radial-gradient(circle, rgba(255,215,0,0.1) 0%, transparent 70%);
            border-radius: 50%;
        }

        .offer-header::after {
            content: '';
            position: absolute;
            bottom: -30%;
            left: -5%;
            width: 200px;
            height: 200px;
            background: radial-gradient(circle, rgba(255,215,0,0.08) 0%, transparent 70%);
            border-radius: 50%;
        }

        .offer-badge {
            display: inline-block;
            background: rgba(255,215,0,0.15);
            border: 1px solid gold;
            color: gold;
            padding: 0.5rem 1.5rem;
            border-radius: 40px;
            font-size: 0.9rem;
            font-weight: 600;
            letter-spacing: 0.5px;
            margin-bottom: 1.5rem;
            position: relative;
            z-index: 2;
        }

        .offer-badge i {
            margin-right: 0.5rem;
            color: gold;
        }

        .offer-title {
            font-size: 2.8rem;
            font-weight: 800;
            color: white;
            font-family: 'Outfit', 'Poppins', sans-serif;
            margin-bottom: 1rem;
            line-height: 1.2;
            position: relative;
            z-index: 2;
            text-shadow: 0 4px 20px rgba(0,0,0,0.2);
        }

        .offer-meta {
            display: flex;
            gap: 2rem;
            flex-wrap: wrap;
            position: relative;
            z-index: 2;
        }

        .offer-meta-item {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            color: rgba(255,255,255,0.9);
        }

        .offer-meta-item i {
            font-size: 1.3rem;
            color: gold;
        }

        /* Two Column Layout - Fixed */
        .offer-content-wrapper {
            display: flex;
            flex-wrap: nowrap;
        }

        /* Left Sidebar - Courses */
        .courses-sidebar {
            flex: 0 0 320px;
            background: #f8fafd;
            padding: 2rem;
            border-right: 1px solid rgba(255,215,0,0.2);
        }

        .courses-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: #0b1f3b;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 0.8rem;
            font-family: 'Outfit', 'Poppins', sans-serif;
        }

        .courses-title i {
            color: gold;
            font-size: 1.8rem;
        }

        .courses-title::after {
            content: '';
            flex: 1;
            height: 2px;
            background: linear-gradient(90deg, gold, transparent);
            margin-left: 1rem;
        }

        .courses-list {
            list-style: none;
            padding: 0;
            margin: 0;
            max-height: 400px;
            overflow-y: auto;
            padding-right: 0.5rem;
        }

        .courses-list::-webkit-scrollbar {
            width: 5px;
        }

        .courses-list::-webkit-scrollbar-track {
            background: #e9ecef;
            border-radius: 10px;
        }

        .courses-list::-webkit-scrollbar-thumb {
            background: gold;
            border-radius: 10px;
        }

        .course-item {
            background: white;
            border-radius: 20px;
            padding: 1.2rem;
            margin-bottom: 1rem;
            border: 1px solid rgba(255,215,0,0.15);
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 1rem;
            box-shadow: 0 5px 15px rgba(0,0,0,0.02);
        }

        .course-item:hover {
            transform: translateX(8px);
            border-color: gold;
            box-shadow: 0 15px 30px rgba(255,215,0,0.1);
        }

        .course-icon {
            width: 45px;
            height: 45px;
            background: rgba(255,215,0,0.1);
            border-radius: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: gold;
            font-size: 1.4rem;
            flex-shrink: 0;
        }

        .course-name {
            font-weight: 600;
            color: #2c3e50;
            font-size: 1rem;
            flex: 1;
        }

        .course-badge {
            background: #e8f0fe;
            color: #0b1f3b;
            font-size: 0.7rem;
            padding: 0.2rem 0.8rem;
            border-radius: 30px;
            font-weight: 600;
            flex-shrink: 0;
        }

        /* Right Content - Main Offer Content */
        .offer-main-content {
            flex: 1;
            padding: 2rem;
        }

        /* Image Container */
        .offer-image-container {
            width: 100%;
            max-height: 250px;
            overflow: hidden;
            border-radius: 24px;
            margin-bottom: 2rem;
            position: relative;
            border: 3px solid gold;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }

        .offer-image-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s;
        }

        .offer-image-container:hover img {
            transform: scale(1.05);
        }

        .image-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, transparent);
            color: white;
            padding: 1rem 1.5rem;
            font-size: 0.9rem;
        }

        .image-caption i {
            color: gold;
            margin-right: 0.5rem;
        }

        /* Description Card */
        .description-card {
            background: #f8fafd;
            border-radius: 30px;
            padding: 2rem;
            border: 1px solid rgba(255,215,0,0.2);
            margin-bottom: 2rem;
        }

        .description-title {
            font-size: 1.3rem;
            font-weight: 700;
            color: #0b1f3b;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 0.8rem;
        }

        .description-title i {
            color: gold;
            font-size: 1.5rem;
        }

        .offer-description {
            color: #4a5568;
            line-height: 1.8;
            font-size: 1.05rem;
        }

        .offer-description h1,
        .offer-description h2,
        .offer-description h3 {
            color: #0b1f3b;
            font-family: 'Outfit', 'Poppins', sans-serif;
            margin-top: 1.5rem;
            margin-bottom: 1rem;
        }

        .offer-description ul,
        .offer-description ol {
            padding-left: 1.5rem;
            margin-bottom: 1.5rem;
        }

        .offer-description li {
            margin-bottom: 0.5rem;
        }

        .offer-description strong {
            color: #0b1f3b;
        }

        .offer-description a {
            color: gold;
            text-decoration: none;
            font-weight: 600;
        }

        .offer-description a:hover {
            text-decoration: underline;
        }

        /* Benefits Section */
        .benefits-section {
            background: linear-gradient(145deg, #0b1f3b, #132c4d);
            border-radius: 30px;
            padding: 2.5rem;
            color: white;
            margin-top: 2rem;
            position: relative;
            overflow: hidden;
        }

        .benefits-section::before {
            content: '';
            position: absolute;
            top: -20%;
            right: -10%;
            width: 300px;
            height: 300px;
            background: radial-gradient(circle, rgba(255,215,0,0.1) 0%, transparent 70%);
            border-radius: 50%;
        }

        .benefits-title {
            font-size: 1.8rem;
            font-weight: 700;
            font-family: 'Outfit', 'Poppins', sans-serif;
            margin-bottom: 1.5rem;
            display: flex;
            align-items: center;
            gap: 1rem;
            position: relative;
            z-index: 2;
        }

        .benefits-title i {
            color: gold;
            font-size: 2rem;
        }

        .benefits-title::after {
            content: '';
            flex: 1;
            height: 2px;
            background: linear-gradient(90deg, gold, transparent);
            margin-left: 1rem;
        }

        .benefits-content {
            position: relative;
            z-index: 2;
            color: rgba(255,255,255,0.9);
            line-height: 1.8;
        }

        .benefits-content h1,
        .benefits-content h2,
        .benefits-content h3 {
            color: gold;
            font-family: 'Outfit', 'Poppins', sans-serif;
        }

        .benefits-content ul,
        .benefits-content ol {
            padding-left: 1.5rem;
        }

        .benefits-content li {
            margin-bottom: 0.8rem;
        }

        .benefits-content strong {
            color: gold;
        }

        /* Responsive */
        @media (max-width: 992px) {
            .offer-content-wrapper {
                flex-wrap: wrap;
            }

            .courses-sidebar {
                flex: 0 0 100%;
                border-right: none;
                border-bottom: 1px solid rgba(255,215,0,0.2);
            }

            .courses-list {
                max-height: none;
            }

            .offer-title {
                font-size: 2rem;
            }

            .offer-header {
                padding: 1.5rem;
            }
        }

        @media (max-width: 768px) {
            .offer-letter-section {
                padding: 1rem 0 2rem;
            }

            .breadcrumb-nav {
                padding: 0.6rem 1rem;
                font-size: 0.9rem;
            }

            .offer-title {
                font-size: 1.6rem;
            }

            .courses-sidebar {
                padding: 1.5rem;
            }

            .offer-main-content {
                padding: 1.5rem;
            }

            .description-card,
            .benefits-section {
                padding: 1.5rem;
            }
        }
    </style>
@endpush

@section('content')
    <section class="offer-letter-section position-relative">
        <!-- Breadcrumb Navigation -->
        <div class="container position-relative" style="z-index: 10; margin-top: 70px;">
            <!-- Main Offer Card -->
            <div class="offer-main-card">
                <!-- Header -->
                <div class="offer-header">
                    <div class="offer-badge">
                        <i class="bi bi-award-fill"></i> Scholarship Offer Letter
                    </div>
                    <h1 class="offer-title">{{ $offer->title }}</h1>
                </div>

                <!-- Two Column Content - Side by Side -->
                <div class="offer-content-wrapper">
                    <!-- Left Sidebar - Courses List -->
                    <div class="courses-sidebar">
                        <h3 class="courses-title">
                            <i class="bi bi-book"></i> Available Courses
                        </h3>
                        <ul class="courses-list">
                            @forelse($course as $index => $c)
                                <li class="course-item">
                                    <div class="course-icon">
                                        <i class="bi bi-{{ $index % 2 == 0 ? 'mortarboard' : 'journal-bookmark-fill' }}"></i>
                                    </div>
                                    <span class="course-name">{{ $c->name }}</span>
                                    <span class="course-badge">{{ $c->duration ?? 'Full Time' }}</span>
                                </li>
                            @empty
                                <li class="text-muted text-center py-4">No courses available</li>
                            @endforelse
                        </ul>

                        <!-- Quick Stats -->
                        <div class="mt-4 p-3 bg-white rounded-3 border border-warning border-opacity-10">
                            <div class="d-flex justify-content-between mb-2">
                                <span class="text-muted">Total Courses:</span>
                                <span class="fw-bold text-dark">{{ count($course) }}</span>
                            </div>
                            <div class="d-flex justify-content-between mb-2">
                                <span class="text-muted">Application Fee:</span>
                                <span class="fw-bold text-dark">Free</span>
                            </div>
                            <div class="d-flex justify-content-between">
                                <span class="text-muted">Language:</span>
                                <span class="fw-bold text-dark">English</span>
                            </div>
                        </div>
                    </div>

                    <!-- Right Content - Main Offer Content -->
                    <div class="offer-main-content">
                        <!-- Image -->
                        @if($offer->image)
                            <div class="offer-image-container">
                                <img src="{{ asset('storage/'.$offer->image) }}" alt="{{ $offer->title }}">
                                <div class="image-caption">
                                    <i class="bi bi-image"></i> Scholarship featured image
                                </div>
                            </div>
                        @endif

                        <!-- Description -->
                        <div class="description-card">
                            <h3 class="description-title">
                                <i class="bi bi-file-text"></i> Offer Details
                            </h3>
                            <div class="offer-description">
                                {!! $offer->description !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Benefits Section (below the main card) -->
            <div class="benefits-section">
                <h3 class="benefits-title">
                    <i class="bi bi-gift-fill"></i> Scholarship Benefits
                </h3>
                <div class="benefits-content">
                    {!! $benefit->content ?? '<p>No benefits information available.</p>' !!}
                </div>
            </div>
        </div>
    </section>
@endsection