@extends('frontend.layouts.app')

@section('contents')
@php
$cartSubTotal = 0;
@endphp

@php
$currencyIcon = \App\Models\Setting::where('key', 'site_currency_icon')->value('value');
@endphp

<x-frontend.breadcrumb :items="[['label' => 'Home', 'url' => '/'], ['label' => 'Cart']]" />
<div class="container mb-60 mt-55">
    <div class="row">
        <div class="col-lg-8 mb-40">
            <h1 class="heading-2 mb-10">Your Cart</h1>
            <div class="d-flex flex-wrap justify-content-between">
                <h6 class="text-body">There are <span class="text-brand">{{ cartCount() }}</span> products in your cart
                </h6>
                {{-- <h6 class="text-body"><a href="#" class="text-muted"><i class="fi-rs-trash mr-5"></i>Clear
                        Cart</a></h6> --}}
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xl-8">
            <div class="table-responsive shopping-summery">
                <table class="table table-wishlist">
                    <thead>
                        <tr class="main-heading">
                            <th colspan="2">Product</th>
                            <th>Unit Price</th>
                            <th>Quantity</th>
                            <th>Subtotal</th>
                            <th class="end">Remove</th>
                        </tr>
                    </thead>
                    <tbody class="cart-items">
                        @if(is_object($cartItems))
                        @forelse($cartItems as $cartKey => $cartItem)
                        <tr class="">
                            <td class="image product-thumbnail"><img
                                    src="{{ is_object($cartItem) ? asset($cartItem->product?->primaryImage?->path) : $cartItem['image'] }}"
                                    alt="#"></td>
                            <td class="product-des product-name">
                                <h6 class="mb-5"><a class="product-name mb-10 text-heading"
                                        href="shop-product-right.html">{{ is_object($cartItem) ?
                                        $cartItem->product?->name : $cartItem['name'] }}</a></h6>
                                <div class="product-rate-cover">
                                    <span>{{ is_object($cartItem) ? ($cartItem->product?->variants()->where('id',
                                        $cartItem->variant_id)->first()->name ?? '') : '' }}</span>
                                </div>
                                <div class="product-rate-cover">
                                    <div class="product-rate d-inline-block">
                                        <div class="product-rating" style="width:90%">
                                        </div>
                                    </div>
                                    <span class="font-small ml-5 text-muted"> (4.0)</span>
                                </div>
                            </td>
                            @php
                            $price = null;
                            if (is_object($cartItem) && $cartItem->product) {
                            $price = $cartItem->product->getVariantOrProductPriceAndStock($cartItem->variant_id);
                            $cartSubTotal += $price['price'] * $cartItem->quantity;
                            } else if (!is_object($cartItem)) {
                            // Guest user cart item
                            $cartSubTotal += $cartItem['price'] * $cartItem['quantity'];
                            }
                            @endphp

                            @if (is_object($cartItem))
                            @if ($price && $price['in_stock'])
                            <td class="price" data-title="Price">

                                @if ($price && $price['old_price'])
                                <h4 class="text-body">{{ $currencyIcon }}{{ $price ? $price['price'] : 0 }}</h4>
                                <h4 class="text-danger" style="font-size: 18px;text-decoration: line-through;">{{
                                    $currencyIcon }}
                                    {{ $price ? $price['old_price'] : 0 }}</h4>
                                @else
                                <h4 class="text-body">{{ $currencyIcon }}{{ $price['price'] }}</h4>
                                @endif

                            </td>
                            <td class="text-center detail-info" data-title="Stock">
                                <div class="detail-extralink mr-15">
                                    <div class="detail-qty border radius">
                                        <a href="#" class="qty-down"><i class="fi-rs-angle-small-down"></i></a>
                                        <input type="number" data-cart-item="{{ $cartItem->id }}" name="quantity"
                                            class="qty-val" value="{{ $cartItem->quantity }}" min="1">
                                        <a href="#" class="qty-up"><i class="fi-rs-angle-small-up"></i></a>
                                    </div>
                                </div>
                            </td>
                            <td class="price" data-title="Price">
                                <h4 class="text-brand">{{ $currencyIcon }}{{ $price['price'] * $cartItem->quantity }}
                                </h4>
                            </td>
                            @else
                            <td colspan="3">
                                <h4 class="text-brand">Out of stock</h4>
                            </td>
                            @endif
                            @else
                            <td class="price" data-title="Price">
                                <h4 class="text-body">{{ $currencyIcon }}{{ $cartItem['price'] }}</h4>
                            </td>
                            <td class="text-center detail-info" data-title="Stock">
                                <div class="detail-extralink mr-15">
                                    <div class="detail-qty border radius">
                                        <a href="#" class="qty-down"><i class="fi-rs-angle-small-down"></i></a>
                                        <input type="number" data-cart-item="{{ $cartKey }}" name="quantity"
                                            class="qty-val" value="{{ $cartItem['quantity'] }}" min="1">
                                        <a href="#" class="qty-up"><i class="fi-rs-angle-small-up"></i></a>
                                    </div>
                                </div>
                            </td>
                            <td class="price" data-title="Price">
                                <h4 class="text-brand">{{ $currencyIcon }}{{ $cartItem['price'] * $cartItem['quantity']
                                    }}
                                </h4>
                            </td>
                            @endif
                            <td class="action text-center" data-title="Remove">
                                <button
                                    data-url="{{ route('cart.destroy', is_object($cartItem) ? $cartItem->id : $cartKey) }}"
                                    data-cart-item="{{ is_object($cartItem) ? $cartItem->id : $cartKey }}"
                                    class="text-body delete-item btn btn-link p-0">
                                    <i class="fi-rs-trash"></i>
                                </button>
                            </td>
                        </tr>
                        @empty
                        <tr class="pt-30">
                            <td colspan="6" class="text-center">Cart is empty</td>
                            </td>
                        </tr>
                        @endforelse
                        @else
                        @forelse($cartItems as $cartKey => $cartItem)
                        <tr class="">
                            <td class="image product-thumbnail"><img src="{{ $cartItem['image'] }}" alt="#"></td>
                            <td class="product-des product-name">
                                <h6 class="mb-5"><a class="product-name mb-10 text-heading"
                                        href="shop-product-right.html">{{ $cartItem['name'] }}</a></h6>
                            </td>
                            <td class="price" data-title="Price">
                                <h4 class="text-body">{{ $currencyIcon }}{{ $cartItem['price'] }}</h4>
                            </td>
                            <td class="text-center detail-info" data-title="Stock">
                                <div class="detail-extralink mr-15">
                                    <div class="detail-qty border radius">
                                        <a href="#" class="qty-down"><i class="fi-rs-angle-small-down"></i></a>
                                        <input type="number" data-cart-item="{{ $cartKey }}" name="quantity"
                                            class="qty-val" value="{{ $cartItem['quantity'] }}" min="1">
                                        <a href="#" class="qty-up"><i class="fi-rs-angle-small-up"></i></a>
                                    </div>
                                </div>
                            </td>
                            <td class="price" data-title="Price">
                                <h4 class="text-brand">{{ $currencyIcon }}{{ $cartItem['price'] * $cartItem['quantity']
                                    }} </h4>
                            </td>
                            <td class="action text-center" data-title="Remove">
                                <button
                                    data-url="{{ route('cart.destroy', is_object($cartItem) ? $cartItem->id : $cartKey) }}"
                                    data-cart-item="{{ is_object($cartItem) ? $cartItem->id : $cartKey }}"
                                    class="text-body delete-item btn btn-link p-0">
                                    <i class="fi-rs-trash"></i>
                                </button>
                            </td>
                            @empty
                        <tr class="pt-30">
                            <td colspan="6" class="text-center">Cart is empty</td>
                            </td>
                        </tr>
                        @endforelse
                        @endif

                    </tbody>
                </table>
            </div>
            <div class="divider-2 mb-30"></div>
            <div class="cart-action d-flex justify-content-between">
                <a class="btn" href="{{ route('products.index') }}"><i class="fi-rs-arrow-left mr-10"></i>Continue
                    Shopping</a>
            </div>

        </div>
        <div class="col-xl-4">
            @if(cartCount() > 0)
            <div class="p-40">
                <h4 class="mb-10">Apply Coupon</h4>
                <p class="mb-30"><span class="font-lg text-muted">Using A Promo Code?</p>
                <form action="#" class="coupon-form">
                    @csrf
                    <div class="d-flex justify-content-between">
                        <input class="font-medium mr-15 coupon" name="coupon_code" placeholder="Enter Your Coupon"
                            value="{{ session()->has('coupon') ? session('coupon')['code'] : old('coupon_code') }}">
                        @if (session()->has('coupon'))
                        <button class="btn bg-danger remove-coupon" type="button"><i
                                class="fi-rs-cross mr-10"></i>Remove</button>
                        @else
                        <button class="btn coupon-btn" type="submit"><i class="fi-rs-label mr-10"></i>Apply</button>
                        @endif
                    </div>
                </form>
            </div>
            @endif
            <div class="border p-md-4 cart-totals ml-30">
                <div class="table-responsive">
                    <table class="table no-border">
                        <tbody>
                            <tr>
                                <td class="cart_total_label">
                                    <h6 class="text-muted">Subtotal</h6>
                                </td>
                                <td class="cart_total_amount">
                                    <h4 class="text-brand text-end">{{ $currencyIcon }} <span class="cart_sub_total">{{
                                            $cartSubTotal }}</span></h4>
                                </td>
                            </tr>

                            @if (session()->has('coupon'))
                            @php
                            $discount =
                            session('coupon')['coupon_type'] != 'fixed'
                            ? $cartSubTotal * (session('coupon')['coupon_value'] / 100)
                            : session('coupon')['coupon_value'];
                            @endphp
                            <tr>
                                <td class="cart_total_label">
                                    <h6 class="text-muted">Discount <span class="coupon-info">
                                            @if (session('coupon')['coupon_type'] == 'fixed')
                                            (fixed)
                                            @else
                                            ({{ session('coupon')['coupon_value'] }}%)
                                            @endif
                                        </span>
                                    </h6>
                                </td>
                                <td class="cart_total_amount">
                                    <h5 class="text-heading text-end discount">{{ $currencyIcon }}
                                        {{ $discount }}
                                        </h4>
                                </td>
                            </tr>

                            <tr>
                                <td class="cart_total_label">
                                    <h6 class="text-muted">Total</h6>
                                </td>
                                <td class="cart_total_amount">
                                    <h4 class="text-brand text-end "> {{ $currencyIcon }}<span class="total">{{
                                            $cartSubTotal - $discount }}</span></h4>
                                </td>
                            </tr>
                            @else
                            <tr>
                                <td class="cart_total_label">
                                    <h6 class="text-muted">Discount <span class="coupon-info"></span></h6>
                                </td>
                                <td class="cart_total_amount">
                                    <h5 class="text-heading text-end discount">{{ $currencyIcon }}0</h4>
                                </td>
                            </tr>

                            <tr>
                                <td class="cart_total_label">
                                    <h6 class="text-muted">Total</h6>
                                </td>
                                <td class="cart_total_amount">
                                    <h4 class="text-brand text-end ">{{ $currencyIcon }} <span class="total">{{
                                            $cartSubTotal }}</span></h4>
                                </td>
                            </tr>
                            @endif
                        </tbody>
                    </table>
                </div>
                @if(cartCount() > 0)
                <a href="{{ route('checkout.index') }}" class="btn w-100">Proceed To CheckOut<i
                        class="fi-rs-sign-out ml-15"></i></a>
                @endif
            </div>

        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    $(function() {

    // ======================
    // QTY INCREASE / DECREASE
    // ======================
    $(document).on('click', '.qty-up', function(e) {
        e.preventDefault();
        let input = $(this).siblings('.qty-val');
        input.val(parseInt(input.val()) + 1).trigger('change');
    });

    $(document).on('click', '.qty-down', function(e) {
        e.preventDefault();
        let input = $(this).siblings('.qty-val');
        let val = parseInt(input.val());
        if (val > 1) {
            input.val(val - 1).trigger('change');
        }
    });

    // ======================
    // UPDATE CART (FIXED)
    // ======================
    $(document).on('change', '.qty-val', function() {

        let input = $(this);
        let id = input.data('cart-item');
        let qty = parseInt(input.val());

        // Validate quantity
        if (isNaN(qty) || qty < 1) {
            qty = 1;
            input.val(qty);
        }

        $.ajax({
            url: "{{ route('cart.update') }}",
            method: "POST", // important
            data: {
                _token: "{{ csrf_token() }}",
                _method: "PUT",
                id: id,
                qty: qty
            },
            beforeSend: function() {
                input.prop('disabled', true);
            },
            success: function(res) {
                Swal.fire({
                    icon: 'success',
                    title: 'Updated!',
                    text: res.message || 'Cart updated successfully',
                    timer: 1200,
                    showConfirmButton: false
                }).then(() => {
                    location.reload();
                });
            },
            error: function() {
                Swal.fire('Error', 'Cart update failed', 'error');
            },
            complete: function() {
                input.prop('disabled', false);
            }
        });

    });

    // ======================
    // QTY INPUT VALIDATION (allow only numbers)
    // ======================
    $(document).on('input', '.qty-val', function() {
        let input = $(this);
        let val = input.val();

        // Remove any non-digit characters
        val = val.replace(/\D/g, '');

        // Ensure minimum of 1
        if (val !== '' && parseInt(val) < 1) {
            val = '1';
        }

        input.val(val);
    });

    // ======================
    // DELETE ITEM (FIXED)
    // ======================
    $(document).on('click', '.delete-item', function(e) {
        e.preventDefault();

        let btn = $(this);
        let url = btn.data('url');
        let id  = btn.data('cart-item');

        Swal.fire({
            title: "Are you sure?",
            text: "Remove this item from cart?",
            icon: "warning",
            showCancelButton: true,
            confirmButtonText: "Yes, remove it!",
            cancelButtonText: "Cancel"
        }).then((result) => {

            if (result.isConfirmed) {

                $.ajax({
                    url: url,
                    method: "POST", // important
                    data: {
                        _token: "{{ csrf_token() }}",
                        _method: "DELETE",
                        id: id
                    },
                    beforeSend: function() {
                        btn.prop('disabled', true);
                    },
                    success: function(res) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Removed!',
                            text: res.message || 'Item removed',
                            timer: 1200,
                            showConfirmButton: false
                        }).then(() => {
                            location.reload();
                        });
                    },
                    error: function() {
                        Swal.fire('Error', 'Delete failed', 'error');
                    },
                    complete: function() {
                        btn.prop('disabled', false);
                    }
                });

            }
        });

    });

    // ======================
    // APPLY COUPON
    // ======================
    $('.coupon-form').on('submit', function(e) {
        e.preventDefault();

        let data = $(this).serialize();

        $.ajax({
            url: "{{ route('cart.coupon') }}",
            method: "POST",
            data: data,
            beforeSend: function() {
                $('.coupon-btn').html('<span class="spinner-border spinner-border-sm"></span>');
            },
            success: function() {
                location.reload();
            },
            error: function(xhr) {
                let errors = xhr.responseJSON;
                if(errors){
                    Object.values(errors).forEach((err) => {
                        Swal.fire('Error', err, 'error');
                    });
                }
            },
            complete: function() {
                $('.coupon-btn').html('<i class="fi-rs-label mr-10"></i>Apply');
            }
        });
    });

    // ======================
    // REMOVE COUPON
    // ======================
    $('.remove-coupon').on('click', function() {

        $.ajax({
            url: "{{ route('cart.coupon.destroy') }}",
            method: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                _method: "DELETE"
            },
            success: function() {
                location.reload();
            },
            error: function() {
                Swal.fire('Error', 'Failed to remove coupon', 'error');
            }
        });

    });

});
</script>
@endpush