@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="{{('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">
                                <form action="{{route('cart-update')}}" method="POST">
                                    @csrf
                                    @if(Helper::getAllProductFromCart())
                                        @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 btn-number"
                                                                    disabled="disabled" data-type="minus"
                                                                    data-field="quantity[{{$key}}]">
                                                                <i class="ti-minus"></i>
                                                            </button>
                                                        </div>
                                                        <input type="text" name="quantity[{{$key}}]" class="input-number"
                                                               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 btn-number"
                                                                    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>
                                    @else
                                        <tr>
                                            <td class="text-center" colspan="6">
                                                There are no any carts available. 
                                                <a href="{{route('front.product-grids')}}" style="color:blue;">Continue shopping</a>
                                            </td>
                                        </tr>
                                    @endif
                                </form>
                            </tbody>
                        </table>
                    </div>

                    <!-- Mobile Card View (visible only on mobile) -->
                    <div class="mobile-cart-view d-block d-md-none">
                        <form action="{{route('cart-update')}}" method="POST" id="mobile-cart-form">
                            @csrf
                            @if(Helper::getAllProductFromCart())
                                @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 btn-number btn-sm" 
                                                                    disabled="disabled" 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" 
                                                               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 btn-number 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>
                            @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
                        </form>
                    </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 - Mobile Optimized -->
                                    <div class="coupon-box p-3 bg-light rounded">
                                        @if(session()->has('coupon'))
                                            <div class="alert alert-success mb-0">
                                                <strong>Coupon Applied!</strong><br>
                                                Code: <strong>{{ session('coupon.code') }}</strong><br>
                                                Discount: ${{ number_format(session('coupon.value'), 2) }}
                                            </div>
                                        @else
                                            <h5 class="mb-3" id="applycoupon">Apply Coupon</h5>
                                            <div class="form-group">
                                                <input type="text" id="coupon_code" 
                                                       class="form-control form-control-lg" 
                                                       placeholder="Enter coupon code">
                                                <button type="button" id="applyCouponBtn" 
                                                        class="btn btn-primary btn-block w-100 mt-2 py-2">
                                                    Apply Coupon
                                                </button>
                                            </div>
                                        @endif
                                        <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'))
                                            <li class="coupon_price d-flex justify-content-between py-2 border-bottom"
                                                data-price="{{Session::get('coupon')['value']}}">
                                                <span>You Save</span>
                                                <span class="text-success">-${{number_format(Session::get('coupon')['value'],2)}}</span>
                                            </li>
                                        @endif
                                        
                                        @php
                                            $total_amount = Helper::totalCartPrice();
                                            if(session()->has('coupon')){
                                                $total_amount = $total_amount - Session::get('coupon')['value'];
                                            }
                                        @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">${{number_format($total_amount,2)}}</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">
                                            Proceed to Checkout
                                        </a>
                                        <a href="{{route('front.product-grids')}}" class="btn btn-outline-secondary btn-block w-100 py-2">
                                            Continue Shopping
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--/ End Total Amount -->
                </div>
            </div>
        </div>
    </div>
    <!--/ End Shopping Cart -->

    <!-- Start Shop Services Area (Optional - Uncomment if needed) -->
    {{-- <section class="shop-services section">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-6 col-12">
                    <div class="single-service">
                        <i class="ti-rocket"></i>
                        <h4>Free shiping</h4>
                        <p>Orders over $100</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-12">
                    <div class="single-service">
                        <i class="ti-reload"></i>
                        <h4>Free Return</h4>
                        <p>Within 30 days returns</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-12">
                    <div class="single-service">
                        <i class="ti-lock"></i>
                        <h4>Sucure Payment</h4>
                        <p>100% secure payment</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6 col-12">
                    <div class="single-service">
                        <i class="ti-tag"></i>
                        <h4>Best Peice</h4>
                        <p>Guaranteed price</p>
                    </div>
                </div>
            </div>
        </div>
    </section> --}}
    <!-- End Shop Newsletter -->

    <!-- Modal (Keep existing modal code if needed) -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span class="ti-close" aria-hidden="true"></span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row no-gutters">
                        <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
                            <!-- Product Slider -->
                            <div class="product-gallery">
                                <div class="quickview-slider-active">
                                    <div class="single-slider">
                                        <img src="images/modal1.jpg" alt="#">
                                    </div>
                                    <div class="single-slider">
                                        <img src="images/modal2.jpg" alt="#">
                                    </div>
                                    <div class="single-slider">
                                        <img src="images/modal3.jpg" alt="#">
                                    </div>
                                    <div class="single-slider">
                                        <img src="images/modal4.jpg" alt="#">
                                    </div>
                                </div>
                            </div>
                            <!-- End Product slider -->
                        </div>
                        <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
                            <div class="quickview-content">
                                <h2>Flared Shift Dress</h2>
                                <div class="quickview-ratting-review">
                                    <div class="quickview-ratting-wrap">
                                        <div class="quickview-ratting">
                                            <i class="yellow fa fa-star"></i>
                                            <i class="yellow fa fa-star"></i>
                                            <i class="yellow fa fa-star"></i>
                                            <i class="yellow fa fa-star"></i>
                                            <i class="fa fa-star"></i>
                                        </div>
                                        <a href="#"> (1 customer review)</a>
                                    </div>
                                    <div class="quickview-stock">
                                        <span><i class="fa fa-check-circle-o"></i> in stock</span>
                                    </div>
                                </div>
                                <h3>$29.00</h3>
                                <div class="quickview-peragraph">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia iste laborum
                                        ad impedit pariatur esse optio tempora sint ullam autem deleniti nam in quos qui
                                        nemo ipsum numquam.</p>
                                </div>
                                <div class="size">
                                    <div class="row">
                                        <div class="col-lg-6 col-12">
                                            <h5 class="title">Size</h5>
                                            <select>
                                                <option selected="selected">s</option>
                                                <option>m</option>
                                                <option>l</option>
                                                <option>xl</option>
                                            </select>
                                        </div>
                                        <div class="col-lg-6 col-12">
                                            <h5 class="title">Color</h5>
                                            <select>
                                                <option selected="selected">orange</option>
                                                <option>purple</option>
                                                <option>black</option>
                                                <option>pink</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="quantity">
                                    <!-- Input Order -->
                                    <div class="input-group">
                                        <div class="button minus">
                                            <button type="button" class="btn btn-primary btn-number" disabled="disabled"
                                                    data-type="minus" data-field="quantity[1]">
                                                <i class="ti-minus"></i>
                                            </button>
                                        </div>
                                        <input type="text" name="quantity[1]" class="input-number" data-min="1"
                                               data-max="1000" value="1">
                                        <div class="button plus">
                                            <button type="button" class="btn btn-primary btn-number" data-type="plus"
                                                    data-field="quantity[1]">
                                                <i class="ti-plus"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <!--/ End Input Order -->
                                </div>
                                <div class="add-to-cart">
                                    <a href="#" class="btn">Add to cart</a>
                                    <a href="#" class="btn min"><i class="ti-heart"></i></a>
                                    <a href="#" class="btn min"><i class="fa fa-compress"></i></a>
                                </div>
                                <div class="default-social">
                                    <h4 class="share-now">Share:</h4>
                                    <ul>
                                        <li><a class="facebook" href="#"><i class="fa fa-facebook"></i></a></li>
                                        <li><a class="twitter" href="#"><i class="fa fa-twitter"></i></a></li>
                                        <li><a class="youtube" href="#"><i class="fa fa-pinterest-p"></i></a></li>
                                        <li><a class="dribbble" href="#"><i class="fa fa-google-plus"></i></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal end -->

@endsection

@push('styles')
    <style>
        /* Existing styles plus mobile optimizations */
        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;
        }

        /* 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:active {
                transform: scale(0.99);
            }
            
            .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;
            }
            
            .cart-item-card .product-title a {
                color: #333;
                font-weight: 600;
            }
            
            .quantity-controls .input-group {
                max-width: 140px;
            }
            
            .quantity-controls .btn-number {
                padding: 8px 12px;
            }
            
            .button-group .btn {
                padding: 12px;
                font-size: 1rem;
                border-radius: 8px;
            }
            
            .total-amount {
                margin-top: 20px;
                padding: 0;
            }
            
            .total-amount .right {
                background: #fff;
                border-radius: 12px;
                padding: 20px !important;
            }
            
            .coupon-box {
                background: #fff;
                border-radius: 12px;
                padding: 20px !important;
                margin-bottom: 20px;
            }
            
            .coupon-box input.form-control-lg {
                font-size: 1rem;
                padding: 12px;
                border-radius: 8px;
            }
            
            #order_total_price span.h5 {
                font-size: 1.3rem;
            }
            
            .btn-block {
                width: 100%;
                display: block;
            }
            
            .btn-outline-danger {
                padding: 6px 12px;
                font-size: 0.9rem;
            }
            
            /* Improve touch targets */
            button, 
            .btn,
            a.btn {
                min-height: 44px;
                display: inline-flex;
                align-items: center;
                justify-content: center;
            }
            
            .btn-sm {
                min-height: 38px;
            }
            
            /* Better spacing */
            .container {
                padding-left: 15px;
                padding-right: 15px;
            }
            
            .section {
                padding: 30px 0;
            }
            
            /* Improve readability */
            .text-muted {
                font-size: 0.9rem;
            }
            
            .font-weight-bold {
                font-weight: 600;
            }
        }
        
        /* Tablet adjustments */
        @media (min-width: 768px) and (max-width: 991px) {
            .table.shopping-summery {
                font-size: 0.9rem;
            }
            
            .table.shopping-summery td {
                padding: 10px 5px;
            }
            
            .table.shopping-summery img {
                max-width: 60px;
            }
            
            .input-group {
                max-width: 120px;
            }
        }
        
        /* Small desktop adjustments */
        @media (min-width: 992px) and (max-width: 1199px) {
            .table.shopping-summery {
                font-size: 0.95rem;
            }
        }
        
        /* Utility classes */
        .w-100 {
            width: 100% !important;
        }
        
        .btn-block {
            display: block;
            width: 100%;
        }
        
        .rounded {
            border-radius: 0.5rem !important;
        }
        
        .shadow-sm {
            box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important;
        }
        
        .bg-light {
            background-color: #f8f9fa !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);
            }
        }
    </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();
            
            // Mobile quantity controls
            $('.btn-number').click(function(e) {
                e.preventDefault();
                
                let fieldName = $(this).data('field');
                let type = $(this).data('type');
                let input = $('input[name="' + fieldName + '"]');
                
                if (input.length) {
                    let currentVal = parseInt(input.val());
                    let min = parseInt(input.data('min'));
                    let max = parseInt(input.data('max'));
                    
                    if (!isNaN(currentVal)) {
                        if (type == 'minus') {
                            if (currentVal > min) {
                                input.val(currentVal - 1);
                            }
                        } else if (type == 'plus') {
                            if (currentVal < max) {
                                input.val(currentVal + 1);
                            }
                        }
                    }
                }
            });

            // Shipping calculator (if enabled)
            $('.shipping select[name=shipping]').change(function () {
                let cost = parseFloat($(this).find('option:selected').data('price')) || 0;
                let subtotal = parseFloat($('.order_subtotal').data('price'));
                let coupon = parseFloat($('.coupon_price').data('price')) || 0;
                $('#order_total_price span').text('$' + (subtotal + cost - coupon).toFixed(2));
            });

            // Auto-hide coupon input after successful application
            setInterval(function () {
                if ($('#coupondone').length > 0) {
                    $('#applycoupon').hide();
                }
            }, 1000);
        });

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

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

            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 => ({
                status: response.status,
                body: data
            })))
            .then(result => {
                if (result.status === 200) {
                    $("#applycoupon").hide();
                    messageBox.innerHTML = 
                        '<div class="alert alert-success" id="coupondone">' + result.body.message + '</div>';
                    
                    // Update totals without reload (optional)
                    setTimeout(() => {
                        window.location.reload();
                    }, 1500);
                } else {
                    messageBox.innerHTML = 
                        '<div class="alert alert-danger">' + result.body.message + '</div>';
                    
                    // Clear error message after 3 seconds
                    setTimeout(() => {
                        messageBox.innerHTML = '';
                    }, 3000);
                }
            })
            .catch(() => {
                messageBox.innerHTML = 
                    '<div class="alert alert-danger">Something went wrong. Try again.</div>';
                
                setTimeout(() => {
                    messageBox.innerHTML = '';
                }, 3000);
            });
        });

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

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