@extends('layouts.app')

@section('title', __('Shopping Cart'))

@section('content')
    <div class="container pt-4">@include('partials.how-it-works', ['key' => 'student.cart'])</div>

<div class="container py-4">
    <h1 class="h3 fw-bold mb-4">{{ __('Shopping Cart') }}</h1>

    @if($cartItems->isEmpty())
        <div class="card border-0 shadow-sm">
            <div class="card-body text-center py-5">
                <i class="bi bi-cart-x display-4 text-muted d-block mb-3"></i>
                <h5>{{ __('Your cart is empty') }}</h5>
                <p class="text-muted">{{ __('Browse our courses and add something you love.') }}</p>
                <a href="{{ route('courses.index') }}" class="btn btn-primary">{{ __('Explore Courses') }}</a>
            </div>
        </div>
    @else
        <div class="row g-4">
            <div class="col-lg-8">
                <div class="card border-0 shadow-sm">
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table align-middle mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th>{{ __('Course') }}</th>
                                        <th class="text-end">{{ __('Price') }}</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($cartItems as $item)
                                        <tr>
                                            <td>
                                                @include('partials.cart-item', ['item' => $item, 'size' => 80])
                                            </td>
                                            <td class="text-end fw-semibold">{{ money($item->price) }}</td>
                                            <td class="text-end">
                                                <form action="{{ route('cart.remove', $item) }}" method="POST" data-confirm="{{ __('Remove this course from cart?') }}">
                                                    @csrf @method('DELETE')
                                                    <button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
                                                </form>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="card border-0 shadow-sm mb-3">
                    <div class="card-body">
                        <h5 class="fw-bold mb-3">{{ __('Order Summary') }}</h5>
                        <div class="d-flex justify-content-between mb-2">
                            <span class="text-muted">{{ __('Subtotal') }}</span>
                            <span>{{ money($subtotal) }}</span>
                        </div>
                        @if($discount > 0)
                            <div class="d-flex justify-content-between mb-2 text-success">
                                <span>{{ __('Discount') }} @if($coupon)({{ $coupon->code }})@endif</span>
                                <span>-{{ money($discount) }}</span>
                            </div>
                        @endif
                        <hr>
                        <div class="d-flex justify-content-between mb-3">
                            <span class="fw-bold">{{ __('Total') }}</span>
                            <span class="fw-bold h5 mb-0">{{ money($total) }}</span>
                        </div>
                        <a href="{{ route('checkout.index') }}" class="btn btn-primary w-100">
                            <i class="bi bi-lock me-1"></i> {{ __('Proceed to Checkout') }}
                        </a>
                    </div>
                </div>

                <div class="card border-0 shadow-sm">
                    <div class="card-body">
                        <h6 class="fw-bold mb-3">{{ __('Have a coupon?') }}</h6>
                        <form action="{{ route('cart.coupon') }}" method="POST" class="input-group">
                            @csrf
                            <input type="text" name="code" class="form-control" placeholder="{{ __('Enter code') }}" value="{{ $coupon->code ?? '' }}">
                            <button class="btn btn-outline-primary">{{ __('Apply') }}</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    @endif
</div>
@endsection