@extends('layout.template')
@section('title','Cusella Home Furnishing | Curtains, Sofas, Wallpapers & Interior Solutions')
@section('content')
<div class="cart-area pt-100 pb-100">
    <div class="container">
        <div class="row">
            <div class="col-12">

                <div class="card mb-4">
                    <div class="card-header">
                        <h4>Your Cart</h4>
                    </div>
                    <div class="card-body">
                        <div class="cart-table-content">
                            <div class="table-content table-responsive">
                                <table class="table ">
                                    <thead>
                                        <tr>
                                            <th class="width-thumbnail"></th>
                                            <th class="width-name">Product</th>
                                            <th class="width-price"> Price</th>
                                            <th class="width-quantity">Quantity</th>
                                            <th class="width-subtotal">Subtotal</th>
                                            <th class="width-remove"></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($cart['items'] as $item)
                                        <tr>
                                            <td class="product-thumbnail">
                                                <a href="{{ url('product-details/'.$item['product_id']) }}">
                                                    <img src="{{ $item['variant']['image'] ?? 'assets/images/default.png' }}" alt="{{ $item['name'] }}" class="img-thumbnail" style="width: 80px;">
                                                </a>
                                            </td>
                                            <td class="product-name">
                                                <h5>
                                                    <a href="{{ url('product-details/'.$item['product_id']) }}">
                                                        {{ $item['name'] }}
                                                    </a>
                                                </h5>
                                                @if(!empty($item['variant']['color']))
                                                <p>Color: {{ $item['variant']['color'] }}</p>
                                                @endif
                                            </td>
                                            <td class="product-cart-price">
                                                <span class="amount">${{ number_format($item['price'], 2) }}</span>
                                            </td>
                                            <td class="cart-quality">
                                                <div class="product-quality">
                                                    <div class="dec qtybutton">-</div>
                                                    <input class="cart-plus-minus-box input-text qty text form-control" name="qty[{{ $item['cart_item_id'] }}]" value="{{ $item['quantity'] }}">
                                                    <div class="inc qtybutton">+</div>
                                                </div>
                                            </td>
                                            <!-- <td class="cart-quality">
                                                    <div class="product-quality">
                                                        <input class="cart-plus-minus-box input-text qty text" name="qty[{{ $item['cart_item_id'] }}]" value="{{ $item['quantity'] }}">
                                                    </div>
                                                </td> -->
                                            <td class="product-total">
                                                <span>${{ number_format($item['subtotal'], 2) }}</span>
                                            </td>
                                            <td class="product-remove">
                                                <button
                                                    type="button"
                                                    class="btn text-danger btn-sm remove-cart"
                                                    data-id="{{ $item['cart_item_id'] }}">
                                                    <i class="ti-trash"></i>
                                                </button>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-12">
                            <div class="card mb-4" style="border:none;">
                                <div class="card-body">
                                    <div class="cart-shiping-update-wrapper">
                                        <div class="cart-shiping-update btn-hover">
                                            <a href="{{ url('/') }}">Continue Shopping</a>
                                        </div>
                                        <div class="cart-clear-wrap">
                                            <div class="calculate-discount-btn btn-hover">

                                                @if(isset($cart['coupon']))
                                                <!-- REMOVE COUPON -->
                                                <button type="button" class="btn btn-dark" id="removeCouponBtn">
                                                    Remove Coupon ({{ $cart['coupon']['code'] }})
                                                </button>
                                                @else
                                                <!-- VIEW / APPLY COUPON -->
                                                <button type="button" class="btn btn-dark" onclick="openCouponPopup()">
                                                    View Coupons
                                                </button>
                                                @endif

                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <div class="row">
                <div class="col-lg-8 col-12 mb-4">
                    <div class="card h-100">
                        <div class="card-header">
                            <h5>Delivery Address</h5>
                        </div>
                        <div class="card-body">
                            @if(!empty($addresses))
                            @php
                            $defaultAddress = collect($addresses)->firstWhere('is_default', 1) ?? $addresses[0];
                            @endphp
                            <div class="address-display mb-3">
                                <strong>{{ $defaultAddress['name'] }}</strong><br>
                                {{ $defaultAddress['address_line1'] }}, {{ $defaultAddress['address_line2'] }}<br>
                                {{ $defaultAddress['city'] }}, {{ $defaultAddress['state'] }}, {{ $defaultAddress['country'] }} - {{ $defaultAddress['pincode'] }}<br>
                                Phone: {{ $defaultAddress['phone'] }}
                                @if($defaultAddress['alternative_phone'])
                                , {{ $defaultAddress['alternative_phone'] }}
                                @endif
                            </div>
                            <a href="#" class="btn btn-outline-primary">Manage Addresses</a>
                            @else
                            <form id="addressForm">
                                <div class="row">
                                    <div class="col-md-6">
                                        <input type="text" name="name" class="form-control mb-2" placeholder="Name" required>
                                    </div>
                                    <div class="col-md-6">
                                        <input type="text" name="phone" class="form-control mb-2" placeholder="Phone" required>
                                    </div>
                                    <div class="col-md-6">
                                        <input type="text" name="address_line1" class="form-control mb-2" placeholder="Address Line 1" required>
                                    </div>
                                    <div class="col-md-6">
                                        <input type="text" name="address_line2" class="form-control mb-2" placeholder="Address Line 2">
                                    </div>
                                    <div class="col-md-4">
                                        <input type="text" name="city" class="form-control mb-2" placeholder="City" required>
                                    </div>
                                    <div class="col-md-4">
                                        <input type="text" name="state" class="form-control mb-2" placeholder="State" required>
                                    </div>
                                    <div class="col-md-4">
                                        <input type="text" name="pincode" class="form-control mb-2" placeholder="Pincode" required>
                                    </div>
                                    <div class="col-md-6">
                                        <input type="text" name="country" class="form-control mb-2" placeholder="Country" value="India" required>
                                    </div>
                                    <div class="col-md-6">
                                        <input type="text" name="alternative_phone" class="form-control mb-2" placeholder="Alternative Phone">
                                    </div>
                                    <div class="col-12">
                                        <button type="submit" class="btn btn-primary">Add Address</button>
                                    </div>
                                </div>
                            </form>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-12">
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5>Apply Coupon</h5>
                        </div>
                        <div class="card-body">
                            <p class="text-muted">Use available coupons to reduce your order total.</p>
                            <button type="button" class="btn btn-primary w-100" onclick="openCouponPopup()">View Coupons</button>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header">
                            <h5>Order Summary</h5>
                        </div>
                        <div class="card-body">
                            <div class="order-summary">
                                <div class="d-flex justify-content-between mb-2">
                                    <span>Subtotal</span>
                                    <span>₹{{ number_format($cart['price_details']['sub_total'], 2) }}</span>
                                </div>
                                @if(isset($cart['coupon']))
                                <div class="d-flex justify-content-between mb-2">
                                    <span>Coupon ({{ $cart['coupon']['code'] }})</span>
                                    <span>-₹{{ number_format($cart['coupon']['value'], 2) }}</span>
                                </div>
                                @endif
                                <div class="d-flex justify-content-between mb-2">
                                    <span>Delivery Fee</span>
                                    <span>₹{{ number_format($cart['price_details']['delivery_fee'], 2) }}</span>
                                </div>
                                <div class="d-flex justify-content-between mb-2">
                                    <span>Total Discount</span>
                                    <span>-₹{{ number_format($cart['price_details']['discount'], 2) }}</span>
                                </div>
                                <hr>
                                <!-- <div class="d-flex justify-content-between fw-bold">
                                <span>Total</span>
                                <span>₹{{ number_format($cart['price_details']['total'], 2) }}</span>
                            </div> -->
                            </div>
                            <a class="btn btn-primary w-100 mt-3" href="{{ url('checkout') }}">Proceed to Checkout</a>
                        </div>
                    </div>
                </div>
            </div>
        </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="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" id="couponList">
                    <!-- Coupons will load here -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </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") }}'
        };
    </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