@extends('layouts.front')
@section('title', $course->title . ' Details')

@section('content')
<div class="container py-5">
    <div class="row align-items-center mb-5">
        <div class="col-md-6 text-center">
            <img src="{{ asset('storage/' . $course->image_url) }}" alt="{{ $course->title }}" class="course-img">
        </div>
        <div class="col-md-6">
            <div class="course-title">{{ $course->title }}</div>
            <p class="text-muted">{{ $course->description }}</p>
            <div class="price mb-3">{{ number_format($course->price, 0, '.', ',') }} {{ $course->currency }}</div>

            <div class="mb-2"><strong>Duration:</strong> {{ $course->duration_days }} days</div>
            <div class="mb-2"><strong>Time for activation:</strong> {{ $course->activation_period }} months</div>
            <div class="mb-2"><strong>Difficulty:</strong>
                @php
                    $difficultyValue = $course->difficulty_level == 'Beginner' ? 1 : ($course->difficulty_level == 'Intermediate' ? 2 : 3);
                @endphp
                @for ($i = 1; $i <= 3; $i++)
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 9 10" fill="{{ $i > $difficultyValue ? '#ccc' : '#21fb2a' }}">
                        <path d="M8.008 9.577V10l-.033-.002H.06l-.032-.002v-.411c.971-.02 1.818-.432 2.52-1.272.702-.842 1.075-1.882 1.124-3.097a5.4 5.4 0 0 0-.432-2.374C2.921 2.1 2.474 1.513 1.9 1.081 1.324.648.698.43.025.434V0h7.982v.435l-.144.003c-.164.006-.327.03-.489.065-.354.077-.69.218-1.012.42-.383.242-.72.56-1.013.949-.14.185-.268.385-.38.6-.244.462-.42.96-.518 1.501a5.432 5.432 0 0 0-.09.803 5.935 5.935 0 0 0 .08 1.215c.097.575.288 1.1.547 1.588.158.3.348.567.559.808.224.256.471.472.737.652.357.243.737.397 1.136.481.12.025.243.038.364.05.074.007.148.005.222.007h.001Z"></path>
                    </svg>
                @endfor
            </div>
            <div class="mb-3"><strong>Inventory:</strong> {{ $course->inventory_type }}</div>

            <a href="{{ route('course.checkout', ['id' => $course->id]) }}"><button class="buy-btn">BUY</button></a>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6 course-aim">
            <div class="section-title">The course is aimed at:</div>
           {!! $course->aim !!}
           <div class="row">
            <div class="col-md-12">
            @if($course->video_url)
            <video src="{{ asset('storage/' . $course->video_url) }}" controls class="w-100 h-50 mt-3"></video>
            @endif
            </div>
           </div>
        </div>
        <div class="col-md-6 course-content">
            <div class="section-title">Content of the course:</div>
            {!! $course->content !!}
        </div>
    </div>
</div>
@endsection