@extends('layouts.site')

@section('title', $course->title . ' | XRD LAB')

@push('styles')
<style>
    .course-detail-page {
        padding-top: 8px;
    }

    .course-detail-card {
        border: 1px solid #e5e7eb;
        background: #fff;
        box-shadow: var(--theme-shadow);
        overflow: hidden;
    }

    .course-detail-image {
        width: 100%;
        max-height: 420px;
        object-fit: cover;
        display: block;
    }

    .course-detail-body {
        padding: 22px;
    }

    .course-detail-meta {
        color: var(--theme-text-muted);
        margin-bottom: 10px;
    }

    .course-pricing-panel {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
        margin: 14px 0 18px;
    }

    .course-price-pill {
        background: rgba(255, 255, 255, 0.95);
        color: var(--theme-primary);
        padding: 8px 12px;
        font-weight: 700;
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    }

    .course-price-pill.discount {
        background: #ff9b51;
        color: #25343F;
    }

    .course-original-price {
        color: var(--theme-text-muted);
        text-decoration: line-through;
        font-weight: 600;
    }

    .course-access-note {
        color: var(--theme-text-muted);
        margin-bottom: 16px;
    }

    .course-back-link {
        text-decoration: none;
        font-weight: 600;
    }
</style>
@endpush

@section('content')
<main id="main">
    @include('partials.breadcrumbs', [
        'items' => [
            ['label' => 'الرئيسية', 'url' => route('home')],
            ['label' => 'الدورات', 'url' => route('courses')],
            ['label' => $course->title],
        ],
    ])

    <section class="blog course-detail-page" dir="rtl">
        <div class="container">
            <article class="course-detail-card">
                <img class="course-detail-image" src="{{ $course->cover_image ? asset('storage/' . $course->cover_image) : asset('assets/img/error_image.webp') }}" alt="{{ $course->title }}">
                <div class="course-detail-body">
                    <p class="course-detail-meta">المستوى: {{ $course->level }} | النوع: {{ $course->course_type }} | المدة: {{ $course->duration_minutes ? $course->duration_minutes . ' دقيقة' : 'غير محددة' }}</p>
                    <h3>{{ $course->title }}</h3>
                    <div class="course-pricing-panel">
                        @if(! $course->is_paid)
                            <span class="course-price-pill">هذه الدورة مجانية</span>
                        @elseif($course->hasActiveDiscount())
                            <span class="course-price-pill discount">خصم {{ $course->discountPercent() }}%</span>
                            <span class="course-price-pill">السعر الحالي: {{ number_format($course->currentPrice(), 0) }} {{ $course->currency }}</span>
                            <span class="course-original-price">بدلاً من {{ number_format($course->originalPrice(), 0) }} {{ $course->currency }}</span>
                        @else
                            <span class="course-price-pill">السعر: {{ number_format($course->currentPrice(), 0) }} {{ $course->currency }}</span>
                        @endif
                    </div>
                    <p class="course-access-note">
                        @if($course->access_type === 'login_required')
                            تتطلب هذه الدورة تسجيل الدخول لمتابعة التقدم{{ $course->has_certificate ? ' وإصدار شهادة الإتمام' : '' }}{{ $course->is_paid ? '، كما يلزم إتمام التسجيل أو السداد قبل الوصول الكامل إلى المحتوى.' : '.' }}
                        @else
                            هذه الدورة متاحة للاستعراض العام{{ $course->is_paid ? '، وقد تتطلب إتمام التسجيل أو السداد للاستفادة الكاملة منها.' : '.' }}
                        @endif
                    </p>
                    <p>{{ $course->excerpt }}</p>
                    <p class="mb-0">{{ $course->description ?: 'سيتم إضافة وصف الدورة الكامل قريباً.' }}</p>
                    @if($course->instructors->isNotEmpty())
                        <div class="mt-3">
                            <strong>المدربون:</strong>
                            {{ $course->instructors->pluck('name')->join('، ') }}
                        </div>
                    @endif
                    @if($course->lessons->isNotEmpty())
                        <div class="mt-3">
                            <strong>عدد الدروس:</strong> {{ $course->lessons->count() }}
                        </div>
                    @endif
                    <div class="mt-3">
                        <a class="course-back-link" href="{{ route('courses') }}">العودة إلى صفحة الدورات</a>
                    </div>
                </div>
            </article>
        </div>
    </section>
</main>
@endsection