@extends('frontend.layouts.master')
<!-- Start Header section -->
@section('meta_description', 'Review your selected tours and packages - Bangladesh Unbound Shopping Cart.')
@section('meta_keywords', 'cart, booking, tours, Bangladesh, travel, shopping cart.')

@section('canonical_url', 'https://www.bangladeshunbound.com/')
@section('title')
Shopping Cart - Bangladesh Unbound
@endsection
<!-- Open Graph -->
@section('og_type', 'website')
@section('og_title', 'Shopping Cart - Bangladesh Unbound')
@section('og_description', 'Review your selected tours and packages.')
@section('og_image', "{{ asset('frontend/img/logo/logo_rec.png') }}")
@section('og_url', 'https://www.bangladeshunbound.com/cart')
@section('og_site_name', 'Bangladesh Unbound')
<!-- Twitter Card -->
@section('x_card', 'summary_large_image')
@section('x_title', 'Bangladesh Unbound')
@section('x_description', 'Review your selected tours and packages.')
@section('x_image', "{{ asset('frontend/img/logo/logo_rec.png') }}")
<!-- End Header Section -->

@section('content')
<!-- Cart Hero Section -->
<section class="py-5 text-white tours-hero bg-success">
    <div class="container">
        <h1 class="mb-3 text-center display-4 fw-bold">Cart</h1>
    </div>
</section>

<nav class="breadcrumb-nav" aria-label="breadcrumb">
    <div class="container">
        <div class="text-white d-flex align-items-center">
            <i class="bi bi-house-door me-2"></i>
            <a href="{{ route('home.home') }}" class="text-white text-decoration-none me-2">Home</a>
            <span class="me-2">•</span>
            <a href="{{ route('home.tours') }}" class="text-white text-decoration-none me-2">Tours</a>
            <span class="me-2">•</span>
            <span>Cart</span>
        </div>
    </div>
</nav>

<section class="py-5 checkout-content">
    <div class="container">
        <!-- Cart Items -->
        <div class="row">
            <div class="col-lg-8">
                <div class="p-4 mb-4 bg-white rounded shadow-sm">
                    <h3 class="mb-4 fw-bold">Your Selected Tours</h3>

                    @include('frontend.cart.partials.cart-card')

                    <!-- Continue Shopping -->
                    <div class="text-start">
                        <a href="{{ route('home.tours') }}" class="btn btn-outline-success">
                            <i class="bi bi-arrow-left me-2"></i>Continue Shopping
                        </a>
                    </div>
                </div>
            </div>

            <!-- Cart Summary -->
            <div class="col-lg-4">
                <div class="p-4 bg-white rounded shadow-sm">
                    <h4 class="mb-4 fw-bold">Order Summary</h4>

                    <div class="mb-2 d-flex justify-content-between">
                        <span>Subtotal ({{ $totalItems }} items):</span>
                        <span id="subtotal">৳ {{ $cartItems->sum('booking_total_payable_amount') ?? 0 }}</span>
                    </div>

                    <div class="mb-2 d-flex justify-content-between text-success fw-semibold" id="discount-row"
                        style="display: none;">
                        <span>Discount:</span>
                        <span id="discountAmount">৳ {{ $cartItems->sum('booking_discount_amount') ?? 0 }}</span>
                    </div>
                    <div class="mb-2 d-flex justify-content-between text-success fw-semibold" id="discount-row"
                        style="display: none;">
                        <span>Current Payable Amount:</span>
                        <span id="currentPayableAmount">৳ {{ $cart->total_payable_amount ?? 0 }}</span>
                    </div>

                    <hr>

                    <div class="mb-4 d-flex justify-content-between">
                        <strong>Total:</strong>
                        <strong class="text-success" id="total">৳ {{ $cart->total_payable_amount ?? 0 }}</strong>
                    </div>

                    <!-- Promo Code -->
                    <div class="mb-4">
                        <label for="promoCode" class="form-label fw-semibold">Promo Code</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="promoCode" placeholder="Enter code">
                            <button class="btn btn-outline-success" type="button" id="applyPromoBtn"
                                onclick="applyPromo()">Apply
                            </button>
                        </div>
                        <small id="promoMessage" class="mt-2 text-muted d-block"></small>
                        <small id="promoSuccessMessage" class="mt-2 text-muted d-block"></small>
                    </div>

                    <!-- Checkout Button -->
                    <div class="d-grid">
                        <a href="{{ route('home.checkout.create') }}" class="btn btn-success btn-lg"
                            onclick="checkout(this); return false;">
                            Proceed to Checkout <i class="bi bi-arrow-right ms-2"></i>
                        </a>
                    </div>

                    <!-- Security Badge -->
                    <div class="mt-3 text-center">
                        <small class="text-muted">
                            <i class="bi bi-shield-check me-1"></i>
                            Secure checkout with SSL encryption
                        </small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- Axios for coupon apply --}}
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    function applyPromo() {
            const button = document.getElementById('applyPromoBtn');
            const code = document.getElementById('promoCode').value.trim();
            const subtotalEl = document.getElementById('subtotal');
            const subtotal = parseFloat(subtotalEl.innerText.replace('৳', '').trim());
            const messageEl = document.getElementById('promoMessage');
            const messageSucEl = document.getElementById('promoSuccessMessage');
            const discountAmount = document.getElementById('discountAmount');

            if (!code) {
                messageEl.innerHTML = '<span class="text-danger">Please enter a coupon code.</span>';
                return;
            }

            const cartId = `{{ $cart->id ?? null }}`;
            const bookingId = `{{ $cartItems?->last()? $cartItems->last()->booking_id : null }}`;

            if (!cartId || !bookingId) {
                messageEl.innerHTML = '<span class="text-danger">Please select a package to add to the cart after applying your coupon code</span>';
                return;
            }

            button.disabled = true;
            button.innerText = 'Applying...';

            axios.post('{{ route('home.customer.coupon.apply') }}', {
                code: code,
                cart_total: subtotal,
                cart_id: cartId,
                booking_id: bookingId
            }).then(response => {
                const data = response.data;
                if (data.success) {
                    code.value = '';
                    code.disabled = true;
                    // document.getElementById('discount-row').style.display = 'flex';
                    // document.getElementById('total').innerText = '৳ ' + data.new_total;
                    discountAmount.innerHTML = '৳ ' + data.discount;

                    messageEl.innerHTML = '<span class="text-success">' + data.message + '</span>';
                    messageSucEl.innerHTML = '';
                    messageEl.innerHTML = `
                        <div class="alert alert-success alert-dismissible fade show mt-2" role="alert">
                            <strong><i class="bi bi-check-circle-fill"></i> Success!</strong> ${data.message}<br>
                            <ul class="mb-0 mt-1">
                                <li><strong>Coupon Discount Amount:</strong> ৳ ${data.discount}</li>
                                <li><strong>Payable Amount:</strong> ৳ ${data.old_total}</li>
                                <li><strong>Total Payable Amount:</strong> ৳ ${data.new_total}</li>
                                <li><strong>Min Payable Amount:</strong> ৳ ${data.min_payable}</li>
                            </ul>
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    `;
                } else {
                    messageEl.innerHTML = '<span class="text-danger">' + data.message + '</span>';
                    messageSucEl.innerHTML = '';
                     messageEl.innerHTML = `
                        <div class="alert alert-danger alert-dismissible fade show mt-2" role="alert">
                            <strong><i class="bi bi-exclamation-triangle-fill"></i> </strong> ${data.message}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    `;
                }
            }).catch(error => {
                console.error(error);
                messageEl.innerHTML = '<span class="text-danger">An error occurred while applying the coupon.</span>';
            }).finally(() => {
                button.disabled = false;
                button.innerText = 'Apply';
            });
        }

    function checkout(button) {
        button.disabled = true;
        button.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>Processing...';
        window.location.href = button.getAttribute('href');
    }

</script>
@endsection