@extends('frontend::layouts.master')

@section('title')
    <title>{{ $seo?->title }}</title>
    <meta name="title" content="{{ $seo?->title }}" />
    <meta name="description" content="{{ strip_tags($seo?->description) }}" />
    <meta name="keywords" content="{{ strip_tags($seo?->keywords) }}" />
@endsection

@push('style')
    <link rel="stylesheet" href="{{ asset('frontend/assets/css/shop.css') }}">
    <link href="{{ asset('common/css/sweetalert2.min.css') }}" rel="stylesheet">
    <style>
        .cart-loading {
            opacity: 0.6;
            pointer-events: none;
        }

        .quantity-controls {
            display: inline-flex;
            align-items: center;
            border: 1px solid #ddd;
            border-radius: 4px;
            overflow: hidden;
        }

        .quantity-btn {
            background: #f8f9fa;
            border: none;
            width: 32px;
            height: 32px;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .quantity-btn:hover {
            background: #e9ecef;
        }

        .quantity-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .tg-quantity-input {
            border: none;
            width: 60px;
            text-align: center;
            height: 32px;
        }

        .delete-cart-item {
            color: #dc3545;
            cursor: pointer;
            font-size: 18px;
            transition: color 0.2s;
        }

        .delete-cart-item:hover {
            color: #c82333;
        }

        [tg-theme=dark] .quantity-controls {
            border-color: var(--tg-gray);
        }

        [tg-theme=dark] .quantity-btn,
        [tg-theme=dark] .tg-quantity-input {
            background: var(--tg-teal);
        }

        [tg-theme=dark] .tg-quantity-input,
        [tg-theme=dark] .tg-cart-page-total ul li span {
            color: var(--tg-white);
        }
    </style>
@endpush

@section('content')
    <!-- main-area -->
    <main class="fix">
        <x-frontend::breadcrumb>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('home') }}">{{ trans('frontend::translate.Home') }}</a></li>
                <li class="breadcrumb-item active" aria-current="page">{{ trans('frontend::translate.cart') }}</li>
            </ol>
        </x-frontend::breadcrumb>

        <div class="cart-area pt-130 pb-80">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        @if ($carts->isEmpty())
                            <div class="empty-cart text-center py-5">
                                <i class="fa fa-shopping-cart fa-3x text-muted mb-3"></i>
                                <h4>{{ trans('frontend::translate.Your cart is empty') }}</h4>
                                <p>{{ trans('frontend::translate.Add some products to get started!') }}</p>
                                <a href="{{ route('shop') }}" class="tg-btn">{{ trans('frontend::translate.Continue Shopping') }}</a>
                            </div>
                        @else
                            <div class="tg-cart-table-content table-responsive mb-30">
                                <table class="table" id="cart-table">
                                    <thead>
                                        <tr>
                                            <th>{{ __('frontend::translate.Product') }}</th>
                                            <th class="price">{{ __('frontend::translate.Price') }}</th>
                                            <th>{{ __('frontend::translate.Quantity') }}</th>
                                            <th class="subtotal">{{ __('frontend::translate.Subtotal') }}</th>
                                            <th>{{ __('frontend::translate.Remove') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php $subtotal = 0; @endphp
                                        @foreach ($carts as $cart)
                                            @php
                                                $itemTotal = $cart->cartable
                                                    ? $cart->cartable->getCurrentPrice() * $cart->quantity
                                                    : 0;
                                                $subtotal += $itemTotal;
                                            @endphp
                                            <tr id="cart-row-{{ $cart->id }}" data-cart-id="{{ $cart->id }}">
                                                <td class="product-thumbnail">
                                                    <a class="thumb"
                                                        href="{{ route('product.detail', $cart->cartable->slug) }}">
                                                        <img src="{{ $cart->cartable->getFirstMediaUrl('featured') }}"
                                                            alt="{{ $cart->cartable->title }}" loading="lazy">
                                                    </a>
                                                    <a class="name"
                                                        href="{{ route('product.detail', $cart->cartable->slug) }}">
                                                        {{ Str::limit($cart->cartable?->title, 35) }}
                                                    </a>
                                                </td>
                                                <td class="product-price-wrap">
                                                    <span class="amount display-price">
                                                        {!! $cart->cartable->getDisplayPrice() !!}
                                                    </span>
                                                </td>
                                                <td class="product-quantity">
                                                    <div class="tg-product-details-quantity">
                                                        <div class="quantity-controls">
                                                            <button type="button" class="quantity-btn quantity-decrease"
                                                                data-cart-id="{{ $cart->id }}">
                                                                <svg width="14" height="2" viewBox="0 0 14 2"
                                                                    fill="none">
                                                                    <path d="M1 1H13" stroke="currentColor"
                                                                        stroke-width="1.5" stroke-linecap="round"
                                                                        stroke-linejoin="round" />
                                                                </svg>
                                                            </button>
                                                            <input class="tg-quantity-input" type="number"
                                                                id="quantity-{{ $cart->id }}"
                                                                value="{{ $cart->quantity }}" min="1" max="999"
                                                                data-cart-id="{{ $cart->id }}">
                                                            <button type="button" class="quantity-btn quantity-increase"
                                                                data-cart-id="{{ $cart->id }}">
                                                                <svg width="15" height="14" viewBox="0 0 15 14"
                                                                    fill="none">
                                                                    <path d="M1.21924 7H13.3836" stroke="currentColor"
                                                                        stroke-width="1.5" stroke-linecap="round"
                                                                        stroke-linejoin="round" />
                                                                    <path d="M7.30176 13V1" stroke="currentColor"
                                                                        stroke-width="1.5" stroke-linecap="round"
                                                                        stroke-linejoin="round" />
                                                                </svg>
                                                            </button>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td class="product-subtotal">
                                                    <span class="item-total" id="item-total-{{ $cart->id }}"
                                                        data-unit-price="{{ $cart->cartable ? $cart->cartable->getCurrentPrice() : 0 }}">
                                                        {{ exchangeAmount($itemTotal) }}
                                                    </span>
                                                </td>
                                                <td class="product-remove">
                                                    <i class="fa fa-times delete-cart-item"
                                                        data-cart-id="{{ $cart->id }}"
                                                        title="{{ __('Remove item') }}"></i>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>

                            <div class="row">
                                <div class="col-xl-9 col-lg-8 col-md-7">
                                    <div class="cart-actions">
                                        <a href="{{ route('shop') }}" class="btn">
                                            {{ __('Continue Shopping') }}
                                        </a>
                                    </div>
                                </div>
                                <div class="col-xl-3 col-lg-4 col-md-5">
                                    <div class="tg-cart-page-total mb-20">
                                        <ul class="mb-20">
                                            <li>{{ __('frontend::translate.Subtotal') }}
                                                <span class="cart-subtotal">{{ exchangeAmount($subtotal) }}</span>
                                            </li>
                                            <li class="total-row">{{ __('frontend::translate.Total') }}
                                                <span class="cart-total">{{ exchangeAmount($subtotal) }}</span>
                                            </li>
                                        </ul>
                                        <div>
                                            <a class="btn btn-two" href="{{ route('checkout') }}">
                                                <span>{{ __('frontend::translate.Proceed to Checkout') }}</span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection

@push('script')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.22.3/sweetalert2.min.js"></script>
    <script>
        "use strict";

        $(document).ready(function() {

            // Initialize cart functionality
            initializeCart();
            updateCartSummary();

            // Store previous values for quantity inputs
            $('.tg-quantity-input').each(function() {
                $(this).data('previous-value', $(this).val());
            });

            // Update previous value when input changes
            $(document).on('focus', '.tg-quantity-input', function() {
                $(this).data('previous-value', $(this).val());
            });

            function initializeCart() {
                // Quantity increase/decrease buttons
                $(document).on('click', '.quantity-increase, .quantity-decrease', handleQuantityChange);

                // Direct quantity input change
                $(document).on('change', '.tg-quantity-input', handleDirectQuantityChange);

                // Delete cart item
                $(document).on('click', '.delete-cart-item', handleDeleteItem);
            }

            function handleQuantityChange(e) {
                e.preventDefault();

                var $button = $(e.currentTarget);
                var cartId = $button.data('cart-id');
                var $quantityInput = $('#quantity-' + cartId);
                var isIncrease = $button.hasClass('quantity-increase');

                var currentQuantity = parseInt($quantityInput.val()) || 1;
                var newQuantity = isIncrease ? currentQuantity + 1 : currentQuantity - 1;

                // Validate quantity
                if (newQuantity < 1) {
                    toastr.error('Quantity must be at least 1');
                    return;
                }

                if (newQuantity > 999) {
                    toastr.error('Maximum quantity is 999');
                    return;
                }

                updateCartQuantity(cartId, newQuantity);
            }

            function handleDirectQuantityChange(e) {
                var $input = $(e.currentTarget);
                var cartId = $input.data('cart-id');
                var newQuantity = parseInt($input.val()) || 1;

                // Validate and correct quantity
                if (newQuantity < 1) {
                    newQuantity = 1;
                    $input.val(newQuantity);
                } else if (newQuantity > 999) {
                    newQuantity = 999;
                    $input.val(newQuantity);
                }

                updateCartQuantity(cartId, newQuantity);
            }

            function updateCartQuantity(cartId, quantity) {
                var $row = $('#cart-row-' + cartId);
                var $quantityInput = $('#quantity-' + cartId);
                var $itemTotal = $('#item-total-' + cartId);
                var unitPrice = parseFloat($itemTotal.data('unit-price')) || 0;

                // Show loading state
                $row.addClass('cart-loading');

                // Disable quantity controls
                $row.find('.quantity-btn, .tg-quantity-input').prop('disabled', true);

                $.ajax({
                    url: '{{ route('update-cart', ':id') }}'.replace(':id', cartId),
                    method: 'POST',
                    data: {
                        quantity: quantity,
                        _token: $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        if (response.success) {
                            // Update quantity input
                            $quantityInput.val(quantity);

                            // Update item total
                            var newItemTotal = unitPrice * quantity;
                            $itemTotal.text(formatCurrency(newItemTotal));

                            // Update cart summary
                            updateCartSummary();

                            // Show success message
                            if (response.message) {
                                toastr.success(response.message);
                            }
                        } else {
                            // Revert quantity on error
                            $quantityInput.val($quantityInput.data('previous-value') || 1);

                            if (response.message) {
                                toastr.error(response.message);
                            }
                        }
                    },
                    error: function(xhr) {
                        // Revert quantity on error
                        $quantityInput.val($quantityInput.data('previous-value') || 1);

                        var errorMessage = '{{ __('An error occurred while updating the cart') }}';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMessage = xhr.responseJSON.message;
                        }
                        toastr.error(errorMessage);
                    },
                    complete: function() {
                        // Remove loading state and re-enable controls
                        $row.removeClass('cart-loading');
                        $row.find('.quantity-btn, .tg-quantity-input').prop('disabled', false);
                    }
                });
            }

            function handleDeleteItem(e) {
                e.preventDefault();

                var cartId = $(e.currentTarget).data('cart-id');

                Swal.fire({
                    title: '{{ __('Are you really want to delete this item?') }}',
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: '{{ __('Yes, Delete It') }}',
                    cancelButtonText: '{{ __('Cancel') }}'
                }).then(function(result) {
                    if (result.isConfirmed) {
                        deleteCartItem(cartId);
                    }
                });
            }

            function deleteCartItem(cartId) {
                // Show loading dialog
                Swal.fire({
                    title: '{{ __('Deleting...') }}',
                    allowOutsideClick: false,
                    showConfirmButton: false,
                    didOpen: function() {
                        Swal.showLoading();
                    }
                });

                $.ajax({
                    url: '{{ route('remove-from-cart', ':id') }}'.replace(':id', cartId),
                    method: 'DELETE',
                    data: {
                        _token: $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        Swal.close();

                        if (response.success) {
                            // Remove the row with animation
                            var $row = $('#cart-row-' + cartId);
                            $row.fadeOut(300, function() {
                                $row.remove();
                                updateCartSummary();

                                // Check if cart is empty
                                if ($('#cart-table tbody tr').length === 0) {
                                    showEmptyCart();
                                }
                            });

                            if (response.message) {
                                toastr.success(response.message);
                            }
                        } else {
                            if (response.message) {
                                toastr.error(response.message);
                            }
                        }
                    },
                    error: function(xhr) {
                        Swal.close();

                        var errorMessage = '{{ __('An error occurred while removing the item') }}';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMessage = xhr.responseJSON.message;
                        }
                        toastr.error(errorMessage);
                    }
                });
            }

            function updateCartSummary() {
                var subtotal = 0;

                $('.item-total').each(function() {
                    var $this = $(this);
                    var unitPrice = parseFloat($this.data('unit-price')) || 0;
                    var cartId = $this.attr('id').split('-')[2];
                    var quantity = parseInt($('#quantity-' + cartId).val()) || 0;

                    subtotal += unitPrice * quantity;
                });

                $('.cart-subtotal, .cart-total').text(formatCurrency(subtotal));

                // Update checkout button state
                var $checkoutBtn = $('.checkout-btn');
                if (subtotal <= 0) {
                    $checkoutBtn.addClass('disabled').attr('href', '#');
                } else {
                    $checkoutBtn.removeClass('disabled').attr('href', '#');
                }
            }

            function showEmptyCart() {
                var emptyCartHtml = '<div class="empty-cart text-center py-5">' +
                    '<i class="fa fa-shopping-cart fa-3x text-muted mb-3"></i>' +
                    '<h4>{{ __('Your cart is empty') }}</h4>' +
                    '<p>{{ __('Add some products to get started!') }}</p>' +
                    '<a href="{{ route('shop') }}" class="tg-btn">{{ __('Continue Shopping') }}</a>' +
                    '</div>';

                $('.cart-area .container .row .col-12').html(emptyCartHtml);
            }

            function formatCurrency(amount) {
                // These values should ideally be passed from Laravel to JS (via blade or meta tags)
                var currencySymbol = "{{ $currency->symbol ?? '$' }}"; // e.g. ৳
                var symbolPosition = "{{ $currency->symbol_position ?? 'before' }}"; // before | after
                var exchangeRate = parseFloat("{{ $currency->exchange_rate ?? 1 }}"); // e.g. 120.0000

                // Convert amount based on exchange rate
                var convertedAmount = amount * exchangeRate;

                // Format number with commas and 2 decimal places
                var formattedNumber = convertedAmount.toLocaleString('{{ app()->getLocale() }}', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                });

                // Place symbol before or after
                if (symbolPosition === 'before') {
                    return currencySymbol + formattedNumber;
                } else {
                    return formattedNumber + currencySymbol;
                }
            }
        });
    </script>
@endpush