@php use Modules\Core\Helpers\Helper; @endphp
@extends('front::layouts.master')
@section('title','Cart Page')
@section('content')
    <!-- Breadcrumbs -->
    <div class="breadcrumbs">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="bread-inner">
                        <ul class="bread-list">
                            <li><a href="{{url('home')}}">Home<i class="ti-arrow-right"></i></a></li>
                            <li class="active"><a href="">Cart</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Breadcrumbs -->

    <!-- Shopping Cart -->
    <div class="shopping-cart section">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <!-- Shopping Summery - Desktop Table (hidden on mobile) -->
                    <div class="desktop-table-view d-none d-md-block">
                        <table class="table shopping-summery">
                            <thead>
                                <tr class="main-hading">
                                    <th>@lang('partials.product')</th>  
                                    <th>@lang('partials.name')</th>
                                    <th class="text-center">UNIT PRICE...</th>
                                    <th class="text-center">QUANTITY</th>
                                    <th class="text-center">TOTAL</th>
                                    <th class="text-center"><i class="ti-trash remove-icon"></i></th>
                                </tr>
                            </thead>
                            <tbody id="cart_item_list_desktop">
                                @if(Helper::getAllProductFromCart())
                                    <form action="{{route('cart-update')}}" method="POST">
                                        @csrf
                                        @foreach(Helper::getAllProductFromCart() as $key=>$cart)
                                            <tr>
                                                <td class="image" data-title="No">
                                                    <img class="default-img" src="{{$cart->product->imageUrl}}" alt="{{$cart->product['title']}}">
                                                </td>
                                                <td class="product-des" data-title="Description">
                                                    <p class="product-name">
                                                        <a href="{{route('front.product-detail',$cart->product['slug'])}}" target="_blank">
                                                            {{$cart->product['title']}}
                                                        </a>
                                                    </p>
                                                </td>
                                                <td class="price" data-title="Price">
                                                    <span>${{number_format($cart['price'],2)}}</span>
                                                </td>
                                                <td class="qty" data-title="Qty">
                                                    <!-- Input Order -->
                                                    <div class="input-group">
                                                        <div class="button minus">
                                                            <button type="button" class="btn btn-primary qty-btn"
                                                                    data-type="minus" data-field="quantity[{{$key}}]">
                                                                <i class="ti-minus"></i>
                                                            </button>
                                                        </div>
                                                        <input type="text" name="quantity[{{$key}}]" class="input-number desktop-quantity"
                                                               data-min="1" data-max="100" value="{{$cart->quantity}}">
                                                        <input type="hidden" name="qty_id[]" value="{{$cart->id}}">
                                                        <div class="button plus">
                                                            <button type="button" class="btn btn-primary qty-btn"
                                                                    data-type="plus" data-field="quantity[{{$key}}]">
                                                                <i class="ti-plus"></i>
                                                            </button>
                                                        </div>
                                                    </div>
                                                    <!--/ End Input Order -->
                                                </td>
                                                <td class="total-amount cart_single_price" data-title="Total">
                                                    <span class="money">${{$cart['amount']}}</span>
                                                </td>
                                                <td class="action" data-title="Remove">
                                                    <a href="{{route('cart-delete',$cart->id)}}">
                                                        <i class="ti-trash remove-icon"></i>
                                                    </a>
                                                </td>
                                            </tr>
                                        @endforeach
                                        <tr>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td></td>
                                            <td class="float-right">
                                                <button class="btn float-right" type="submit">Update</button>
                                            </td>
                                        </tr>
                                    </form>
                                @else
                                    <tr>
                                        <td colspan="6" class="text-center">
                                            There are no any carts available. 
                                            <a href="{{route('front.product-grids')}}" style="color:blue;">Continue shopping</a>
                                        </td>
                                    </tr>
                                @endif
                            </tbody>
                        </table>
                    </div>

                    <!-- Mobile Card View (visible only on mobile) -->
                    <div class="mobile-cart-view d-block d-md-none">
                        @if(Helper::getAllProductFromCart())
                            <form action="{{route('cart-update')}}" method="POST" id="mobile-cart-form">
                                @csrf
                                @foreach(Helper::getAllProductFromCart() as $key=>$cart)
                                    <div class="cart-item-card mb-3 p-3 border rounded">
                                        <div class="row">
                                            <!-- Product Image and Title -->
                                            <div class="col-4">
                                                <img src="{{$cart->product->imageUrl}}" 
                                                     alt="{{$cart->product['title']}}"
                                                     class="img-fluid rounded">
                                            </div>
                                            <div class="col-8">
                                                <h5 class="product-title mb-1">
                                                    <a href="{{route('front.product-detail',$cart->product['slug'])}}" 
                                                       class="text-dark text-decoration-none">
                                                        {{$cart->product['title']}}
                                                    </a>
                                                </h5>
                                                
                                                <!-- Price and Total Row -->
                                                <div class="d-flex justify-content-between mb-2 small">
                                                    <span class="text-muted">Unit Price:</span>
                                                    <span class="font-weight-bold">${{number_format($cart['price'],2)}}</span>
                                                </div>
                                                
                                                <!-- Quantity Controls -->
                                                <div class="quantity-controls mb-2">
                                                    <label class="text-muted small d-block">Quantity:</label>
                                                    <div class="input-group input-group-sm" style="max-width: 130px;">
                                                        <div class="button minus">
                                                            <button type="button" class="btn btn-primary qty-btn btn-sm"
                                                                    data-type="minus" data-field="mobile_quantity[{{$key}}]">
                                                                <i class="ti-minus"></i>
                                                            </button>
                                                        </div>
                                                        <input type="text" name="mobile_quantity[{{$key}}]" 
                                                               class="form-control input-number text-center mobile-quantity" 
                                                               data-min="1" data-max="100" value="{{$cart->quantity}}"
                                                               style="height: 38px;">
                                                        <input type="hidden" name="qty_id[]" value="{{$cart->id}}">
                                                        <div class="button plus">
                                                            <button type="button" class="btn btn-primary qty-btn btn-sm"
                                                                    data-type="plus" data-field="mobile_quantity[{{$key}}]">
                                                                <i class="ti-plus"></i>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <!-- Total and Remove Row -->
                                                <div class="d-flex justify-content-between align-items-center mt-2">
                                                    <div>
                                                        <span class="text-muted small">Total:</span>
                                                        <span class="font-weight-bold text-primary">${{$cart['amount']}}</span>
                                                    </div>
                                                    <a href="{{route('cart-delete',$cart->id)}}" 
                                                       class="btn btn-sm btn-outline-danger">
                                                        <i class="ti-trash"></i> Remove
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                                
                                <!-- Mobile Update Button -->
                                <div class="mobile-update-btn mt-3">
                                    <button type="submit" class="btn btn-primary btn-block w-100 py-3">
                                        Update Cart
                                    </button>
                                </div>
                            </form>
                        @else
                            <div class="text-center py-5">
                                <p class="mb-3">There are no any carts available.</p>
                                <a href="{{route('front.product-grids')}}" class="btn btn-primary">
                                    Continue shopping
                                </a>
                            </div>
                        @endif
                    </div>
                    <!--/ End Shopping Summery -->
                </div>
            </div>
            
            <div class="row">
                <div class="col-12">
                    <!-- Total Amount -->
                    <div class="total-amount">
                        <div class="row">
                            <div class="col-lg-8 col-md-5 col-12">
                                <div class="left">
                                    <!-- Coupon Section - ALWAYS VISIBLE with input field -->
                                    <div class="coupon-box p-3 bg-light rounded">
                                        <!-- Success Message (shows when coupon applied) -->
                                        @if(session()->has('coupon'))
                                            @php
                                                $coupon = session('coupon');
                                                $discountValue = is_array($coupon) ? ($coupon['value'] ?? 0) : (property_exists($coupon, 'value') ? $coupon->value : 0);
                                                $couponCode = is_array($coupon) ? ($coupon['code'] ?? '') : (property_exists($coupon, 'code') ? $coupon->code : '');
                                            @endphp
                                            <div class="alert alert-success mb-3">
                                                <strong>Coupon Applied Successfully!</strong><br>
                                                <span class="coupon-code-display">Code: <strong>{{ $couponCode }}</strong></span><br>
                                                <span class="coupon-discount-display">
                                                    Discount: <strong>
                                                        @if(Helper::totalCartPrice() > 0)
                                                            ${{ number_format($discountValue, 2) }}
                                                        @else
                                                            $0.00 (Add items to cart to see discount)
                                                        @endif
                                                    </strong>
                                                </span>
                                            </div>
                                        @endif
                                        
                                        <!-- Input Field - ALWAYS VISIBLE (not in else condition) -->
                                        <h5 class="mb-3" id="couponHeading">
                                            @if(session()->has('coupon'))
                                                Update Coupon
                                            @else
                                                Apply Coupon
                                            @endif
                                        </h5>
                                        
                                        <div class="form-group">
                                            <input type="text" id="coupon_code" 
                                                   class="form-control form-control-lg" 
                                                   placeholder="Enter coupon code"
                                                   value="{{ session()->has('coupon') ? (is_array(session('coupon')) ? session('coupon')['code'] : session('coupon')->code) : '' }}">
                                            
                                            <div style="display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap;">
                                                <button type="button" id="applyCouponBtn" 
                                                        class="btn btn-primary py-2" style="flex: 1;">
                                                    {{ session()->has('coupon') ? 'Update Coupon' : 'Apply Coupon' }}
                                                </button>
                                                
                                                @if(session()->has('coupon'))
                                                    <button type="button" id="removeCouponBtn" 
                                                            class="btn btn-danger py-2" style="flex: 0.5;">
                                                        Remove
                                                    </button>
                                                @endif
                                            </div>
                                        </div>
                                   
                                        <div id="couponMessage" class="mt-2"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4 col-md-7 col-12">
                                <div class="right p-3 bg-white rounded shadow-sm mt-3 mt-md-0">
                                    <h5 class="mb-3">Cart Summary</h5>
                                    <ul class="list-unstyled">
                                        <li class="order_subtotal d-flex justify-content-between py-2 border-bottom"
                                            data-price="{{Helper::totalCartPrice()}}">
                                            <span>Cart Subtotal</span>
                                            <span class="font-weight-bold">${{number_format(Helper::totalCartPrice(),2)}}</span>
                                        </li>
                                        
                                        @if(session()->has('coupon') && Helper::totalCartPrice() > 0)
                                            @php
                                                $coupon = session('coupon');
                                                $discountValue = is_array($coupon) ? ($coupon['value'] ?? 0) : (property_exists($coupon, 'value') ? $coupon->value : 0);
                                            @endphp
                                            <li class="coupon_price d-flex justify-content-between py-2 border-bottom"
                                                data-price="{{ $discountValue }}">
                                                <span>You Save</span>
                                                <span class="text-success discount-amount">-${{ number_format($discountValue, 2) }}</span>
                                            </li>
                                        @endif
                                        
                                        @php
                                            $total_amount = Helper::totalCartPrice();
                                            if(session()->has('coupon') && Helper::totalCartPrice() > 0){
                                                $coupon = session('coupon');
                                                $discountValue = is_array($coupon) ? ($coupon['value'] ?? 0) : (property_exists($coupon, 'value') ? $coupon->value : 0);
                                                $total_amount = $total_amount - $discountValue;
                                            }
                                        @endphp
                                        
                                        <li class="last d-flex justify-content-between py-3 border-top font-weight-bold"
                                            id="order_total_price">
                                            <span class="h6 mb-0">You Pay</span>
                                            <span class="text-primary h5 mb-0 total-amount-display">
                                                @if(Helper::totalCartPrice() > 0)
                                                    ${{number_format($total_amount,2)}}
                                                @else
                                                    $0.00
                                                @endif
                                            </span>
                                        </li>
                                    </ul>
                                    
                                    <div class="button-group mt-4">
                                        <a href="{{route('checkout')}}" class="btn btn-primary btn-block w-100 mb-2 py-3 white-text{{ !Helper::totalCartPrice() > 0 ? 'disabled' : '' }}">
                                            Proceed to Checkout
                                        </a>
                                        <a href="{{route('front.product-grids')}}" class="btn btn-outline-secondary btn-block w-100 py-3 white-text">
                                            Continue Shopping
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--/ End Total Amount -->
                </div>
            </div>
        </div>
    </div>
    <!--/ End Shopping Cart -->

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog">
        <!-- ... modal content (keep as is) ... -->
    </div>
    <!-- Modal end -->

@endsection

@push('styles')
    <style>
        /* Existing styles plus coupon box fixes */
        li.shipping {
            display: inline-flex;
            width: 100%;
            font-size: 14px;
        }

        li.shipping .input-group-icon {
            width: 100%;
            margin-left: 10px;
        }

        .input-group-icon .icon {
            position: absolute;
            left: 20px;
            top: 0;
            line-height: 40px;
            z-index: 3;
        }

        .form-select {
            height: 30px;
            width: 100%;
        }

        .form-select .nice-select {
            border: none;
            border-radius: 0px;
            height: 40px;
            background: #f6f6f6 !important;
            padding-left: 45px;
            padding-right: 40px;
            width: 100%;
        }

        .list li {
            margin-bottom: 0 !important;
        }

        .list li:hover {
            background: #F7941D !important;
            color: white !important;
        }

        .form-select .nice-select::after {
            top: 14px;
        }

        /* Coupon box fixes - ALWAYS VISIBLE */
        .coupon-box {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 20px !important;
            margin-bottom: 20px;
            border: 1px solid #e9ecef;
        }
        
        #coupon_code {
            width: 100%;
            padding: 12px;
            margin: 10px 0;
            border: 1px solid #ced4da;
            border-radius: 4px;
            font-size: 16px;
        }
        
        #applyCouponBtn, #removeCouponBtn {
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
        }
        
        #applyCouponBtn {
            background: #007bff;
            color: white;
        }
        
        #applyCouponBtn:hover {
            background: #0056b3;
        }
        
        #removeCouponBtn {
            background: #dc3545;
            color: white;
        }
        
        #removeCouponBtn:hover {
            background: #c82333;
        }
        
        #removeCouponBtn:disabled,
        #applyCouponBtn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .alert-success {
            color: #155724;
            background-color: #d4edda;
            border-color: #c3e6cb;
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 4px;
            display: block !important;
        }
        
        .btn.disabled {
            opacity: 0.5;
            pointer-events: none;
            cursor: not-allowed;
        }
        
        /* Mobile-specific styles */
        @media (max-width: 767px) {
            .cart-item-card {
                background: #fff;
                box-shadow: 0 2px 8px rgba(0,0,0,0.1);
                transition: transform 0.2s;
            }
            
            .cart-item-card .product-title {
                font-size: 1rem;
                line-height: 1.3;
                max-height: 2.6rem;
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                margin-bottom: 8px;
            }
            
            .quantity-controls .input-group {
                max-width: 140px;
            }
            
            .btn-block {
                width: 100%;
                display: block;
            }
            
            button, 
            .btn,
            a.btn {
                min-height: 44px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }
            
            .container {
                padding-left: 15px;
                padding-right: 15px;
            }
            
            .section {
                padding: 30px 0;
            }
        }
        .white-text{
            color:#fff !important;
        }
        /* Animation for coupon message */
        #couponMessage .alert {
            animation: slideDown 0.3s ease-out;
        }
        
        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Loading spinner */
        .spinner-border-sm {
            width: 1rem;
            height: 1rem;
            border-width: 0.2em;
            margin-right: 5px;
        }

        /* Fix for quantity buttons */
        .input-group {
            position: relative;
            display: flex;
            flex-wrap: nowrap;
            align-items: stretch;
            width: 100%;
        }
        
        .input-group .button {
            display: flex;
        }
        
        .input-group .btn-number {
            border-radius: 0;
            height: 40px;
            width: 40px;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .input-group .input-number {
            text-align: center;
            height: 40px;
            width: 60px;
            border: 1px solid #ddd;
            border-left: none;
            border-right: none;
        }
        
        .input-group-sm .btn-number {
            height: 38px;
            width: 38px;
        }
        
        .input-group-sm .input-number {
            height: 38px;
            width: 50px;
        }
    </style>
@endpush

@push('scripts')
    <script src="{{asset('frontend/js/nice-select/js/jquery.nice-select.min.js')}}"></script>
    <script src="{{ asset('frontend/js/select2/js/select2.min.js') }}"></script>
    <script>
        $(document).ready(function () {
            $("select.select2").select2();
            $('select.nice-select').niceSelect();
            
            // Quantity controls
            // ✅ GLOBAL FLAG (double binding rokega)
            if (!window.qtyHandlerInit) {
                window.qtyHandlerInit = true;

                $(document).on('click', '.qty-btn', function(e) {
                    e.preventDefault();

                    let button = $(this);
                    let input = button.closest('.input-group').find('input[type="text"]').first();

                    let currentVal = parseInt(input.val()) || 0;
                    let min = parseInt(input.data('min')) || 1;
                    let max = parseInt(input.data('max')) || 100;
                    let type = button.data('type');

                    if (type === 'minus') {
                        if (currentVal > min) {
                            input.val(currentVal - 1).trigger('change');
                        }
                    } else if (type === 'plus') {
                        if (currentVal < max) {
                            input.val(currentVal + 1).trigger('change');
                        }
                    }
                });
            }

            // Handle input change
            $(document).on('change', '.desktop-quantity, .mobile-quantity, .input-number', function() {
                let val = parseInt($(this).val());
                let min = parseInt($(this).data('min'));
                let max = parseInt($(this).data('max'));
                
                if (isNaN(val) || val < min) {
                    $(this).val(min);
                } else if (val > max) {
                    $(this).val(max);
                }
            });

            // Allow only numbers
            $(document).on('keypress', '.desktop-quantity, .mobile-quantity, .input-number', function(e) {
                if (e.which < 48 || e.which > 57) {
                    e.preventDefault();
                }
            });
        });

        // Coupon application script
        document.getElementById('applyCouponBtn')?.addEventListener('click', function () {
            let code = document.getElementById('coupon_code').value.trim();
            let messageBox = document.getElementById('couponMessage');
            let button = this;

            if (!code) {
                messageBox.innerHTML = '<div class="alert alert-danger">Please enter a coupon code.</div>';
                setTimeout(() => {
                    messageBox.innerHTML = '';
                }, 3000);
                return;
            }

            // Disable button
            button.disabled = true;
            button.innerHTML = '<span class="spinner-border spinner-border-sm" role="status"></span> Applying...';

            fetch("{{ route('coupon-store') }}", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"
                },
                body: JSON.stringify({ code: code })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    messageBox.innerHTML = '<div class="alert alert-success">' + data.message + '</div>';
                    
                    // Reload to update totals
                    setTimeout(() => {
                        window.location.reload();
                    }, 1000);
                } else {
                    messageBox.innerHTML = '<div class="alert alert-danger">' + data.message + '</div>';
                    button.disabled = false;
                    button.innerHTML = '{{ session()->has('coupon') ? 'Update Coupon' : 'Apply Coupon' }}';
                    
                    setTimeout(() => {
                        messageBox.innerHTML = '';
                    }, 3000);
                }
            })
            .catch(error => {
                messageBox.innerHTML = '<div class="alert alert-danger">Something went wrong. Try again.</div>';
                button.disabled = false;
                button.innerHTML = '{{ session()->has('coupon') ? 'Update Coupon' : 'Apply Coupon' }}';
                
                setTimeout(() => {
                    messageBox.innerHTML = '';
                }, 3000);
            });
        });

        // Remove coupon
        document.getElementById('removeCouponBtn')?.addEventListener('click', function () {
            let messageBox = document.getElementById('couponMessage');
            let button = this;

            button.disabled = true;
            button.innerHTML = '<span class="spinner-border spinner-border-sm" role="status"></span> Removing...';

            fetch("{{ route('coupon-remove') }}", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    "X-CSRF-TOKEN": "{{ csrf_token() }}"
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    messageBox.innerHTML = '<div class="alert alert-success">' + data.message + '</div>';
                    
                    // Clear input and reload
                    document.getElementById('coupon_code').value = '';
                    setTimeout(() => {
                        window.location.reload();
                    }, 1000);
                } else {
                    messageBox.innerHTML = '<div class="alert alert-danger">' + data.message + '</div>';
                    button.disabled = false;
                    button.innerHTML = 'Remove';
                    
                    setTimeout(() => {
                        messageBox.innerHTML = '';
                    }, 3000);
                }
            })
            .catch(error => {
                messageBox.innerHTML = '<div class="alert alert-danger">Failed to remove coupon.</div>';
                button.disabled = false;
                button.innerHTML = 'Remove';
                
                setTimeout(() => {
                    messageBox.innerHTML = '';
                }, 3000);
            });
        });

        // Handle enter key
        document.getElementById('coupon_code')?.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                document.getElementById('applyCouponBtn')?.click();
            }
        });

        // Add loading state to forms
        $(document).on('submit', 'form', function() {
            $(this).find('button[type="submit"]').prop('disabled', true).html(
                '<span class="spinner-border spinner-border-sm" role="status"></span> Updating...'
            );
        });
    </script>
@endpush