@extends('layouts.app', [
    'title' => $course->meta_title ?? $course->title . ' | SEO Specialist Kenya',
    'canonical' => url('/training/courses/' . $course->slug),
    'keywords' => $course->keywords ?? 'digital marketing course, SEO training, ' . strtolower($course->title) . ', ' . $course->level . ' level course',
    'description' => $course->meta_description ?? Str::limit(strip_tags($course->description), 160)
])

@section('content')
    @php
        $thumb = $course->thumbnail
            ? asset('assets/courses/' . $course->thumbnail)
            : asset(config('specialist.brand.logo'));
        $levelSlug = Str::slug($course->level ?? 'all-levels');
    @endphp

    <section class="sk-course-hero">
        <div class="container">
            @if(session('success') || session('error'))
                <div class="sk-course-hero__alerts">
                    @if(session('success'))
                        <div class="alert alert-success alert-dismissible fade show mb-0" role="alert">
                            {{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif
                    @if(session('error'))
                        <div class="alert alert-danger alert-dismissible fade show mb-0" role="alert">
                            {{ session('error') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    @endif
                </div>
            @endif

            <nav aria-label="breadcrumb">
                <ol class="breadcrumb sk-course-hero__breadcrumb mb-0">
                    <li class="breadcrumb-item"><a href="{{ url('/') }}">Home</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('guest.courses') }}">Courses</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ $course->title }}</li>
                </ol>
            </nav>

            <h1 class="sk-course-hero__title">{{ $course->title }}</h1>

            <div class="sk-course-hero__meta">
                <span class="sk-course-hero__badge sk-course-hero__badge--{{ $levelSlug }}">
                    {{ ucfirst($course->level) }}
                </span>
                @if($course->duration)
                    <span class="sk-course-hero__meta-item">
                        <i class="fas fa-clock" aria-hidden="true"></i>
                        {{ $course->duration }}
                    </span>
                @endif
                <span class="sk-course-hero__meta-item sk-course-hero__meta-item--price">
                    @if($course->is_free)
                        Free Course
                    @else
                        KES {{ number_format($course->price, 0) }}
                    @endif
                </span>
            </div>
        </div>
    </section>

    <div class="sk-course">
        <div class="container">
            <div class="row g-4 g-lg-5">
                <div class="col-lg-8">
                    <section class="sk-course__section">
                        <h2 class="sk-course__section-title">Course Description</h2>
                        <div class="sk-course__content blog-content">
                            {!! $course->description !!}
                        </div>
                    </section>

                    @if($course->requirements)
                        <section class="sk-course__section">
                            <h2 class="sk-course__section-title">Requirements</h2>
                            <div class="sk-course__content blog-content">
                                {!! $course->requirements !!}
                            </div>
                        </section>
                    @endif

                    @if($course->what_you_learn)
                        <section class="sk-course__section">
                            <h2 class="sk-course__section-title">What You'll Learn</h2>
                            <div class="sk-course__content blog-content">
                                {!! $course->what_you_learn !!}
                            </div>
                        </section>
                    @endif
                </div>

                <aside class="col-lg-4">
                    <div class="sk-course-sidebar sticky-top sk-career-sticky">
                        <img src="{{ $thumb }}"
                             class="sk-course-sidebar__image"
                             alt="{{ $course->title }}"
                             width="400"
                             height="220">

                        <div class="sk-course-sidebar__body">
                            @if(!$course->is_free)
                                <p class="sk-course-sidebar__price mb-0">
                                    KES {{ number_format($course->price, 0) }}
                                </p>
                                <p class="sk-course-sidebar__price-note">One-time course fee</p>
                            @else
                                <p class="sk-course-sidebar__price sk-course-sidebar__price--free mb-0">Free</p>
                            @endif

                            <ul class="sk-course-sidebar__facts list-unstyled mb-0">
                                <li>
                                    <i class="fas fa-signal" aria-hidden="true"></i>
                                    {{ ucfirst($course->level) }} level
                                </li>
                                @if($course->duration)
                                    <li>
                                        <i class="fas fa-clock" aria-hidden="true"></i>
                                        {{ $course->duration }}
                                    </li>
                                @endif
                                <li>
                                    <i class="fas fa-certificate" aria-hidden="true"></i>
                                    Certificate on completion
                                </li>
                            </ul>

                            <div class="d-grid gap-2 mt-4">
                                <button class="btn btn-primary btn-lg"
                                        type="button"
                                        data-bs-toggle="modal"
                                        data-bs-target="#enrollModal">
                                    Enroll Now
                                </button>
                                <a href="{{ url('/book-consultation') }}" class="btn btn-outline-primary">
                                    Ask About This Course
                                </a>
                            </div>
                        </div>
                    </div>
                </aside>
            </div>
        </div>
    </div>

    <div class="modal fade sk-course-modal" id="enrollModal" tabindex="-1" aria-labelledby="enrollModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header border-0 pb-0">
                    <div>
                        <h2 class="modal-title h5 mb-1" id="enrollModalLabel">Enroll in {{ $course->title }}</h2>
                        <p class="text-muted small mb-0">We'll contact you with enrollment details.</p>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body pt-3">
                    <form method="POST" action="{{ route('guest.courses.enroll', $course->slug) }}" id="courseEnrollForm">
                        @csrf
                        <input type="text" name="website" value="" tabindex="-1" autocomplete="off" class="sk-lead-form__honeypot" aria-hidden="true">
                        <div class="mb-3">
                            <label for="name" class="form-label">Full Name</label>
                            <input type="text"
                                   class="form-control @error('name') is-invalid @enderror"
                                   id="name"
                                   name="name"
                                   value="{{ old('name') }}"
                                   required>
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="mb-3">
                            <label for="email" class="form-label">Email Address</label>
                            <input type="email"
                                   class="form-control @error('email') is-invalid @enderror"
                                   id="email"
                                   name="email"
                                   value="{{ old('email') }}"
                                   required>
                            @error('email')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="mb-3">
                            <label for="phone" class="form-label">Phone Number</label>
                            <input type="tel"
                                   class="form-control @error('phone') is-invalid @enderror"
                                   id="phone"
                                   name="phone"
                                   value="{{ old('phone') }}"
                                   required>
                            @error('phone')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary btn-lg">Submit Enrollment</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    @if($errors->any() || session('error'))
        @push('scripts')
            <script>
                document.addEventListener('DOMContentLoaded', function () {
                    var el = document.getElementById('enrollModal');
                    if (el && typeof bootstrap !== 'undefined') {
                        bootstrap.Modal.getOrCreateInstance(el).show();
                    }
                });
            </script>
        @endpush
    @endif
@endsection