@extends('layout.template')
@section('title','Cusella Home Furnishing | Curtains, Sofas, Wallpapers & Interior Solutions')
@section('content')
<style>
    .card,
    .cart-card {
        box-shadow: rgba(14, 63, 126, 0.06) 0px 0px 0px 1px, rgba(42, 51, 70, 0.03) 0px 1px 1px -0.5px, rgba(42, 51, 70, 0.04) 0px 2px 2px -1px, rgba(42, 51, 70, 0.04) 0px 3px 3px -1.5px, rgba(42, 51, 70, 0.03) 0px 5px 5px -2.5px, rgba(42, 51, 70, 0.03) 0px 10px 10px -5px, rgba(42, 51, 70, 0.03) 0px 24px 24px -8px;
    }
</style>
<div class="cart-area mt-60 pb-50">
    <div class="container">
        @if(empty($cart['items']) || count($cart['items']) == 0)

        {{-- EMPTY CART DESIGN --}}
        <div class="empty-cart-wrapper text-center py-5">

            <div class="empty-cart-box">

                <div class="empty-cart-icon">
                    <i class="pe-7s-cart"></i>
                </div>

                <h3>Your Cart is Empty</h3>
                <p>Looks like you haven’t added anything yet.</p>

                <a href="{{ url('/shop') }}" class="btn-shop">
                    Continue Shopping
                </a>

            </div>

        </div>
        @else

        {{-- EXISTING CART DESIGN --}}


        <h5 class="mb-4">Your Cart ({{ count($cart['items']) }} item)</h5>

        <div class="row">

            <!-- LEFT SIDE -->
            <div class="col-lg-8">

                @foreach($cart['items'] as $item)
                <div class="cart-card mb-4">

                    <div class="row">

                        <!-- IMAGE -->
                        <div class="col-md-4">
                            <img src="{{ $item['variant']['image'] ?? asset('assets/images/default.png') }}"
                                class="img-fluid rounded">
                        </div>

                        <!-- DETAILS -->
                        <div class="col-md-8">

                            <h5>{{ $item['name'] }}</h5>

                            <p class="text-muted mb-1">
                                {{ $item['variant']['color'] ?? '' }}
                            </p>

                            <!-- QTY -->
                            <div class="mb-2">
                                QTY &nbsp;
                                <select class="form-control d-inline-block w-auto qty-change"
                                    data-id="{{ $item['cart_item_id'] }}">
                                    @for($i=1;$i<=100;$i++)
                                        <option value="{{ $i }}" {{ $item['quantity']==$i ? 'selected':'' }}>
                                        {{ $i }}
                                        </option>
                                        @endfor
                                </select>
                            </div>

                            <!-- PRICE -->
                            <div class="price-section">

                                <!-- SELLING PRICE -->
                                <h5 class="text-dark mb-1">
                                    ₹{{ number_format($item['price'], 2) }}

                                    <!-- MRP (CUT) -->
                                    <span class="text-muted" style="text-decoration: line-through; font-size:14px;">
                                        ₹{{ number_format($item['mrp'], 2) }}
                                    </span>

                                    <!-- OFFER % -->
                                    <span class="text-success" style="font-size:14px;">
                                        ({{ $item['offer_percent'] }}% Off)
                                    </span>
                                </h5>

                                <!-- YOU SAVE -->
                                <p class="text-success mb-0" style="font-size:13px;">
                                    You Save ₹{{ number_format($item['mrp'] - $item['price'], 2) }}
                                </p>

                            </div>



                            <!-- ACTIONS -->
                            <div class="mt-3">
                                <button class="btn btn-outline-warning btn-sm wishlist-btn"
                                    data-product="{{ $item['product_id'] }}"
                                    data-variant="{{ $item['variant']['id'] ?? '' }}"">Wishlist</button>

                                <button class=" btn btn-outline-danger btn-sm remove-cart"
                                    data-id="{{ $item['cart_item_id'] }}">
                                    Delete
                                </button>
                            </div>

                        </div>

                    </div>
                </div>
                @endforeach

            </div>


            <!-- RIGHT SIDE -->
            <div class="col-lg-4">

                <!-- DELIVERY -->


                <!-- COUPON -->
                @if(isset($cart['coupon']))
                <div class="coupon-box mb-3 d-flex justify-content-between align-items-center">
                    <div>
                        <strong class="text-success">✔ {{ $cart['coupon']['code'] }}</strong><br>
                        <small>Coupon Applied</small>
                    </div>

                    <button class="btn btn-sm btn-outline-danger" id="removeCouponBtn">
                        Remove
                    </button>
                </div>
                @else
                <button class="btn btn-outline-dark w-100 mb-3"
                    onclick="openCouponPopup()">
                    View Offers
                </button>
                @endif


                <!-- SUMMARY -->
                <div class="card p-3">

                    <h5 class="mb-3">Cart Summary</h5>

                    <div class="d-flex justify-content-between">
                        <span>MRP</span>
                        <span>₹{{ number_format($cart['price_details']['sub_total'],2) }}</span>
                    </div>

                    @if(isset($cart['coupon']))
                    <div class="d-flex justify-content-between text-success">
                        <span>Coupon Discount</span>
                        <span>-₹{{ number_format($cart['coupon']['value'],2) }}</span>
                    </div>
                    @endif

                    <hr>

                    <div class="d-flex justify-content-between fw-bold">
                        <span>YOU PAY</span>
                        <span>₹{{ number_format($cart['price_details']['total'],2) }}</span>
                    </div>

                    <p class="text-success mt-2">
                        You Save ₹{{ number_format($cart['price_details']['discount'],2) }}
                    </p>

                    <a href="{{ url('checkout') }}" class="btn btn-danger w-100 mt-3">
                        PROCEED TO CHECKOUT
                    </a>

                </div>

            </div>

        </div>
        @endif
    </div>
</div>

<!-- popup section -->

<!-- COUPON POPUP -->
<div class="modal fade" id="couponModal" tabindex="-1" role="dialog" aria-labelledby="couponModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="couponModalLabel">Available Coupons</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="couponList">
                <!-- Coupons will load here -->
            </div>
            
        </div>
    </div>
</div>

<script>
    window.apiUrls = {
        coupons: '{{ url("cart/coupons") }}',
        applyCoupon: '{{ url("cart/apply-coupon") }}',
        addresses: '{{ url("cart/addresses") }}',
        addAddress: '{{ url("cart/addresses") }}',
        removeCart: '{{ url("cart/remove") }}',
        removeCoupon: '{{ url("cart/remove-coupon") }}',
        updateQuantity: '{{ url("cart/update-quantity") }}',
    };
</script>
<script src="{{asset('assets/js/coupon.js')}}"></script>

<script>
    document.getElementById('addressForm').addEventListener('submit', function(e) {
        e.preventDefault();
        const formData = new FormData(this);
        const data = Object.fromEntries(formData);
        data.type_of_address = 'Home';
        data.is_default = '1';

        fetch(window.apiUrls.addAddress, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify(data)
            })
            .then(res => res.json())
            .then(data => {
                alert(data.message || 'Address added successfully');
                location.reload();
            })
            .catch(err => {
                alert('Error adding address');
            });
    });
</script>
@endsection