@extends('layouts.appLayout')

@section('title', 'My Cart')
@section('nav_title', 'My Cart')

@section('content')
<div class="container my-4">

    <!-- Breadcrumbs -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb bg-transparent px-0">
            <li class="breadcrumb-item"><a href="{{ route('myProfilePage') }}" class="text-decoration-none text-primary">Profile</a></li>
            <li class="breadcrumb-item active text-muted" aria-current="page">My Cart</li>
        </ol>
    </nav>

    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="display-5  text-white mb-0">Cart</h1>
    </div>

    @if ($courses->isEmpty())
        <!-- Empty Cart State -->
        <div class="card border-0 shadow-sm rounded-4">
            <div class="card-body text-center py-5">
                <div class="text-primary mb-4">
                    <i class="fas fa-shopping-cart fa-4x opacity-25"></i>
                </div>
                <h3 class="fw-bold mb-3">Your cart is empty</h3>
                <p class="text-muted mb-4">Browse our courses and start learning today</p>
                <a href="{{ route('discoverPage') }}" class="btn btn2 px-4 py-2 rounded-3">
                    <i class="fas fa-search me-2"></i> Explore Courses
                </a>
            </div>
        </div>
    @else
        <div class="row g-4">
            <!-- Course List -->
<div class="col-lg-8">
    <ul class="list-group shadow-sm rounded-4">
        @foreach ($courses as $course)
        <li class="list-group-item py-3">
            <div class="d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between">
                <!-- Left Side: Image + Title + Description -->
                <div class="d-flex align-items-start w-100 me-md-3">
                    <!-- Image -->
                    <img src="{{ asset('img/coverIMG/cover' . $course->id . '.jpg') }}"
                        alt="{{ $course->title }}"
                        class="img-fluid rounded-3 shadow-sm me-3"
                        style="width: 60px; height: 60px; object-fit: cover;">

                    <!-- Course Details -->
                    <div class="flex-grow-1" style="min-width: 0;">
                        <h5 class="fw-bold mb-1 text-dark text-truncate">{{ $course->title }}</h5>
                        <p class="text-muted small mb-0 text-truncate">
                            {{ Str::limit($course->description ?? 'No description available', 80) }}
                        </p>
                    </div>
                </div>

                <!-- Right Side: Price + Remove Button -->
                <div class="d-flex align-items-center mt-3 mt-md-0 ms-auto">
                    <span class="fw-bold me-3 text-nowrap">{{ number_format($course->price, 2) }}€</span>
                    <form action="{{ route('cart.destroy', ['course' => $course->id]) }}" method="POST">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn4 btn-sm">
                            <i class="fas fa-trash-alt me-1"></i> Remove
                        </button>
                    </form>
                </div>
            </div>
        </li>
        @endforeach
    </ul>
</div>




            <!-- Order Summary -->
<div class="col-lg-4">
    <div class="card border-0 bg-light shadow-sm rounded-4 sticky-top" style="top: 20px;">
        <div class="card-body p-4">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h5 class="fw-bold text-dark mb-0">Order Summary</h5>
                @if ($courses->count() > 0)
                    <span class="badge rounded-pill fs-6 bg-secondary-subtle text-dark">
                        {{ $courses->count() }} items
                    </span>
                @endif
            </div>

            <ul class="list-group list-group-flush mb-3">
                @foreach ($courses as $course)
                <li class="list-group-item bg-transparent px-0 d-flex justify-content-between">
                    <span class="text-muted">{{ $course->title }}</span>
                    <span class="fw-bold">{{ number_format($course->price, 2) }}€</span>
                </li>
                @endforeach
            </ul>

            <hr class="my-3">

            <div class="d-flex justify-content-between align-items-center mb-4">
                <span class="fw-bold fs-5 text-dark">Total</span>
                <span class="fw-bold fs-4 textOrange">{{ number_format($courses->sum('price'), 2) }}€</span>
            </div>

            <!-- Checkout Button -->
            <form action="{{ route('checkout') }}" method="POST">
                @csrf
                <button type="submit" class="btn btn2 btn-lg w-100 mx-0 rounded-3 shadow-sm">
                    <i class="fas fa-lock me-2"></i> Secure Checkout
                </button>
            </form>
            <!-- Payment Method Icons -->
            <div class="text-center">
                <small class="text-muted d-block mb-2 my-3">Accepted payment methods</small>
                <div class="d-flex justify-content-center align-items-center gap-3 flex-wrap">
                    <img src="https://js.stripe.com/v3/fingerprinted/img/visa-729c05c240c4bdb47b03ac81d9945bfe.svg" alt="Visa" class="BrandIcon" loading="lazy" fetchpriority="low">
                    <img src="https://js.stripe.com/v3/fingerprinted/img/mastercard-4d8844094130711885b5e41b28c9848f.svg" alt="MasterCard" class="BrandIcon" loading="lazy" fetchpriority="low">
                    <img src="https://js.stripe.com/v3/fingerprinted/img/amex-a49b82f46c5cd6a96a6e418a6ca1717c.svg" alt="American Express" class="BrandIcon" loading="lazy" fetchpriority="low">
                    <img src="https://js.stripe.com/v3/fingerprinted/img/unionpay-8a10aefc7295216c338ba4e1224627a1.svg" alt="UnionPay" class="BrandIcon" loading="lazy" fetchpriority="low">
                    <img src="https://js.stripe.com/v3/fingerprinted/img/jcb-271fd06e6e7a2c52692ffa91a95fb64f.svg" alt="JCB" class="BrandIcon" loading="lazy" fetchpriority="low">
                    <img src="https://js.stripe.com/v3/fingerprinted/img/discover-ac52cd46f89fa40a29a0bfb954e33173.svg" alt="Discover" class="BrandIcon" loading="lazy" fetchpriority="low">
                    <img src="https://js.stripe.com/v3/fingerprinted/img/diners-fbcbd3360f8e3f629cdaa80e93abdb8b.svg" alt="Diners Club" class="BrandIcon" loading="lazy" fetchpriority="low">
                </div>
            </div>
        </div>
    </div>
</div>
        </div>
    @endif

</div>
@endsection