@extends('main-site.partials.app', [
    'whiteHeader' => true,
])
@section('title', __('messages_302.Offers'))

@section('content')


    <!-- blog -->
    <section class="offer-details-section cart-section sec-padding bg-grey wow fadeInUp">
        <div class="container">
            <ol class="breadcrumb mb-45">
                <li class="breadcrumb-item">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path opacity="0.4"
                            d="M3 9.84694C3 8.99003 3.36644 8.17402 4.00691 7.60471L9.34255 2.86193C10.8581 1.51477 13.1419 1.51478 14.6575 2.86193L19.9931 7.60471C20.6336 8.17402 21 8.99003 21 9.84694V17.9997C21 20.2089 19.2091 21.9997 17 21.9997H7C4.79086 21.9997 3 20.2089 3 17.9997V9.84694Z"
                            fill="#120404" />
                        <path d="M10 18H14" stroke="#120404" stroke-width="1.5" stroke-linecap="round" />
                    </svg>
                </li>
                <li class="breadcrumb-item">
                    <a href="{{ route('offers.index') }}">{{ __("messages_302.Offers") }}</a>
                </li>
                <li class="breadcrumb-item active">
                    {{ $data->title }}
                </li>
            </ol>
            <div class="section-title2 mb-3">
                <h2 class="mb-0"> {{ $data->title }}</h2>
            </div>
            <div class="row gx-lg-6">
                <div class="col-lg-8 cart-details">
                    <h5 class="title dark-color">({{ $data->courses_count }}) {{ __("website_301.offers.ContainCourse") }} {{ $data->courses_count }} {{ __("website_301.offers.Courses") }}
                    </h5>
                    @foreach ($data->courses as $course)

                    <div class="cart-card d-flex gap-4 mb-3">
                        <div class="cart-img position-relative">
                            <img src="{{ asset($course->image) }}" class="img-fluid" alt="">
                        </div>
                        <div class="card-content">
                            <div class="content-title d-flex align-items-center justify-content-between mb-2">
                                <h5 class="dark-color mb-0">{{ $course->title }}</h5>
                            </div>
                            <p class="small-text dark-color">{!! $course->description !!}</p>
                            <div class="teacher d-flex align-items-center gap-1">
                                <img src="{{$course->user->image ? asset($course->user->image) : asset('default-images/user-image.png') }}" width="24" height="24" alt="">
                                <span class="dark-color">{{ $course->user->name }}</span>
                            </div>
                            <div class="d-flex align-items-center justify-content-between">
                                <div class="course-duration">
                                    <i class="icon-hourglass-end"><span class="path1"></span><span
                                            class="path2"></span></i>
                                    <span class="duration small-text dark-color">{{ __('website_301.course.CourseTime') }} {{ $course->hours }} {{ __("website_301.course.Hours") }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach

                </div>
                <div class="cart-total col-lg-4">
                    <div class="total bg-white p-3 mt-lg-5 mt-3">
                        <p class="mb-3 dark-color">{{__("website_301.cart.Total")}}:</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="small-text dark-color">{{ __("website_301.cart.SubTotal") }} ({{ $data->courses_count }})</span>
                            <span class="dark-color"> JOD {{ $price }}</span>
                        </div>
                    </div>
                    <div class="total-price">
                        <h4 class="dark-color"> JOD {{ $price }}</h4>
                        {{-- <del class="discount">$359.99</del> --}}
                        {{-- <p class="dark-color mb-3">خصم %20</p> --}}
                    </div>
                    <a href="{{ route('offers.payment.create',$data->id) }}" class="main-btn w-100 text-center">{{ __("website_301.cart.ContinuePurchase") }}</a>
                </div>
            </div>
        </div>
    </section>
@endsection