@extends(getTemplate().'.view.layout.layout')

@section('title')
    Shopping Cart - {{ !empty($setting['site']['site_title']) ? $setting['site']['site_title'] : '' }}
@endsection

@section('page')

<style>
    .cart-container {
        max-width: 960px;
        margin: 0 auto;
        padding: 40px 20px;
    }

    .cart-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 28px;
    }

    .cart-header h1 {
        font-size: 28px;
        font-weight: 700;
        color: #1f2937;
        margin: 0;
    }

    .cart-header .item-count {
        font-size: 16px;
        color: #6b7280;
    }

    .cart-empty {
        text-align: center;
        padding: 80px 20px;
        color: #9ca3af;
    }

    .cart-empty .empty-icon {
        font-size: 64px;
        margin-bottom: 16px;
    }

    .cart-empty h3 {
        font-size: 22px;
        color: #6b7280;
        margin-bottom: 8px;
    }

    .cart-empty p {
        margin-bottom: 24px;
    }

    .cart-item {
        display: flex;
        align-items: center;
        gap: 16px;
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 16px 20px;
        margin-bottom: 12px;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    }

    .cart-item .item-number {
        width: 28px;
        height: 28px;
        background: #f3f4f6;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        font-weight: 600;
        color: #6b7280;
        flex-shrink: 0;
    }

    .cart-item .item-info {
        flex: 1;
        min-width: 0;
    }

    .cart-item .item-info h3 {
        font-size: 16px;
        font-weight: 600;
        color: #1f2937;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .cart-item .item-info .item-meta {
        font-size: 13px;
        color: #9ca3af;
        margin-top: 2px;
    }

    .cart-item .item-price {
        font-size: 18px;
        font-weight: 700;
        color: #1f2937;
        white-space: nowrap;
    }

    .cart-item .btn-remove {
        background: none;
        border: none;
        color: #ef4444;
        font-size: 18px;
        cursor: pointer;
        padding: 4px 8px;
        border-radius: 6px;
        transition: background 0.15s ease;
        flex-shrink: 0;
    }

    .cart-item .btn-remove:hover {
        background: #fef2f2;
    }

    .cart-item.root-item {
        border-left: 4px solid #22c55e;
    }

    .cart-summary {
        background: #f9fafb;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 24px;
        margin-top: 24px;
    }

    .cart-summary .summary-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 0;
        font-size: 15px;
    }

    .cart-summary .summary-row.total {
        border-top: 2px solid #e5e7eb;
        margin-top: 8px;
        padding-top: 16px;
        font-size: 20px;
        font-weight: 700;
        color: #1f2937;
    }

    .cart-summary .summary-row.discount {
        color: #16a34a;
    }

    .cart-summary .summary-row .label {
        color: #6b7280;
    }

    .cart-summary .summary-row.total .label {
        color: #1f2937;
    }

    .checkout-actions {
        display: flex;
        gap: 12px;
        margin-top: 20px;
        justify-content: flex-end;
    }

    .checkout-actions .btn-continue {
        padding: 12px 24px;
        background: white;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        font-size: 15px;
        font-weight: 500;
        color: #374151;
        text-decoration: none;
        transition: background 0.15s ease;
    }

    .checkout-actions .btn-continue:hover {
        background: #f3f4f6;
    }

    .checkout-actions .btn-checkout {
        padding: 12px 32px;
        background: #2563eb;
        border: none;
        border-radius: 8px;
        font-size: 15px;
        font-weight: 600;
        color: white;
        text-decoration: none;
        transition: background 0.15s ease;
    }

    .checkout-actions .btn-checkout:hover {
        background: #1d4ed8;
    }

    .cart-bundle-badge {
        display: inline-block;
        background: #f0fdf4;
        color: #16a34a;
        font-size: 13px;
        font-weight: 600;
        padding: 6px 14px;
        border-radius: 20px;
        margin-bottom: 16px;
    }

    .cross-sell-section {
        margin-top: 48px;
    }

    .cross-sell-section h2 {
        font-size: 20px;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 16px;
    }

    .cross-sell-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
    }

    .cross-sell-card {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 16px;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    }

    .cross-sell-card h3 {
        font-size: 14px;
        font-weight: 600;
        color: #1f2937;
        margin: 0 0 8px 0;
        line-height: 1.4;
    }

    .cross-sell-card .price {
        font-size: 18px;
        font-weight: 700;
        color: #1f2937;
    }

    .cross-sell-card .btn-add-cross {
        width: 100%;
        margin-top: 12px;
        padding: 8px;
        background: #f3f4f6;
        color: #374151;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        text-decoration: none;
        display: inline-block;
        text-align: center;
        transition: background 0.15s ease;
    }

    .cross-sell-card .btn-add-cross:hover {
        background: #e5e7eb;
    }

    .cross-sell-card .owned-badge {
        display: inline-block;
        font-size: 12px;
        color: #9ca3af;
        margin-top: 8px;
    }
</style>

<div class="container-fluid">
    <div class="cart-container">
        <div class="cart-header">
            <h1>Shopping Cart</h1>
            @if($itemCount > 0)
                <span class="item-count">{{ $itemCount }} {{ \Illuminate\Support\Str::plural('course', $itemCount) }}</span>
            @endif
        </div>

        @if($itemCount == 0)
            <div class="cart-empty">
                <div class="empty-icon">🛒</div>
                <h3>Your cart is empty</h3>
                <p>Browse our courses and add some to get started!</p>
                <a href="/" class="btn btn-primary">Browse Courses</a>
            </div>
        @else
            @if($discountPercent > 0)
                <div class="cart-bundle-badge">
                    🎉 Bundle discount: {{ $discountPercent }}% off — you save {{ currencySign() }}{{ number_format($totalAmount - $discountedAmount) }}
                </div>
            @endif

            <div class="cart-items">
                @foreach($cartItems as $index => $item)
                    @php $courseItem = App\Models\Content::find($item->content_id); @endphp
                    @if($courseItem)
                        <div class="cart-item {{ $item->parent_id ? '' : 'root-item' }}">
                            <span class="item-number">{{ $index + 1 }}</span>
                            <div class="item-info">
                                <h3>
                                    <a href="/product/{{ $courseItem->id }}" class="text-decoration-none text-dark">
                                        {{ $courseItem->title }}
                                    </a>
                                </h3>
                                <div class="item-meta">{{ $courseItem->sub_title ?: 'Online course' }}</div>
                            </div>
                            <div class="item-price">{{ currencySign() }}{{ number_format($item->amount) }}</div>
                            <form method="POST" action="/cart/remove/{{ $item->id }}" style="display:inline;">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn-remove" title="Remove">&times;</button>
                            </form>
                        </div>
                    @endif
                @endforeach
            </div>

            <div class="cart-summary">
                <div class="summary-row">
                    <span class="label">Subtotal ({{ $itemCount }} {{ \Illuminate\Support\Str::plural('course', $itemCount) }})</span>
                    <span>{{ currencySign() }}{{ number_format($totalAmount) }}</span>
                </div>
                @if($discountPercent > 0)
                    <div class="summary-row discount">
                        <span class="label">Bundle discount ({{ $discountPercent }}% off)</span>
                        <span>-{{ currencySign() }}{{ number_format($totalAmount - $discountedAmount) }}</span>
                    </div>
                @endif
                <div class="summary-row total">
                    <span class="label">Total</span>
                    <span>{{ currencySign() }}{{ number_format($discountedAmount) }}</span>
                </div>

                <div class="checkout-actions">
                    <a href="/" class="btn-continue">Continue shopping</a>
                    <form method="POST" action="/cart/checkout" style="display:inline;">
                        @csrf
                        <button type="submit" class="btn-checkout">
                            Proceed to Checkout — {{ currencySign() }}{{ number_format($discountedAmount) }}
                        </button>
                    </form>
                </div>
            </div>
        @endif

        @if(count($crossSellCourses) > 0)
            <div class="cross-sell-section">
                <h2>You might also like</h2>
                <div class="cross-sell-grid">
                    @foreach($crossSellCourses as $course)
                        @php $alreadyOwned = in_array($course->id, $ownedCourseIds); @endphp
                        <div class="cross-sell-card">
                            <h3>{{ $course->title }}</h3>
                            @if($alreadyOwned)
                                <div class="owned-badge">✓ You own this</div>
                            @else
                                <div class="price">{{ currencySign() }}{{ number_format($course->price) }}</div>
                                <form method="POST" action="/cart/add/{{ $course->id }}" style="display:inline;">
                                    @csrf
                                    <button type="submit" class="btn-add-cross">Add to cart</button>
                                </form>
                            @endif
                        </div>
                    @endforeach
                </div>
            </div>
        @endif
    </div>
</div>

{{-- Exit-intent discount modal --}}
<div class="modal fade" id="exitDiscountModal" tabindex="-1" role="dialog" aria-labelledby="exitDiscountLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content" style="border-radius: 16px; border: none; box-shadow: 0 20px 60px rgba(0,0,0,0.15);">
            <div class="modal-body" style="padding: 40px 32px; text-align: center;">
                <div style="font-size: 48px; margin-bottom: 16px;">⏳</div>
                <h3 style="font-size: 22px; font-weight: 700; color: #1f2937; margin: 0 0 8px;">Wait! Don't leave yet...</h3>
                <p style="font-size: 15px; color: #6b7280; margin: 0 0 4px;">Complete your checkout now and get an</p>
                <p style="font-size: 28px; font-weight: 800; color: #16a34a; margin: 0 0 24px;">Extra 15% Off!</p>
                <form id="exitDiscountForm" method="POST" action="/cart/checkout-with-discount">
                    @csrf
                    <button type="submit" style="display: block; width: 100%; padding: 14px; background: #16a34a; color: white; border: none; border-radius: 10px; font-size: 16px; font-weight: 600; cursor: pointer;">
                        Apply Discount &amp; Checkout
                    </button>
                </form>
                <button type="button" data-dismiss="modal" style="margin-top: 12px; background: none; border: none; color: #9ca3af; font-size: 14px; cursor: pointer; text-decoration: underline;">
                    No thanks, I'll pass
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('script')
@if($itemCount > 0)
<script>
(function() {
    var shown = localStorage.getItem('exitDiscountShown');
    if (shown) {
        var sevenDays = 7 * 24 * 60 * 60 * 1000;
        if (Date.now() - parseInt(shown) < sevenDays) return;
    }
    var fired = false;
    document.documentElement.addEventListener('mouseleave', function(e) {
        if (fired) return;
        if (e.clientY > 0) return;
        fired = true;
        localStorage.setItem('exitDiscountShown', '' + Date.now());
        $('#exitDiscountModal').modal('show');
    });
})();
</script>
@endif
@endsection