@extends('web.layouts.app')

@section('title', 'سلة التسوق')

@section('content')
<div class="content">

    <div class="cart-page">
        <div class="container">

            <div class="section-padding">
                <div class="container">
                    <div class="row justify-content-center">
                        <div class="col-lg-8">
                            <div class="steps steps-sm">
                                <ul class="row">

                                    <li class="col current">
                                        <a href="#">
                                            <span class="step-item" data-text="السلة"><span>1</span></span>
                                        </a>
                                    </li>

                                    <li class="col">
                                        <a href="#">
                                            <span class="step-item" data-text="الشحن"><span>2</span></span>
                                        </a>
                                    </li>

                                    <li class="col">
                                        <a href="#">
                                            <span class="step-item" data-text="الدفع"><span>3</span></span>
                                        </a>
                                    </li>

                                    <li class="col">
                                        <a href="#">
                                            <span class="step-item" data-text="إنهاء"><span>4</span></span>
                                        </a>
                                    </li>

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


            <div class="checkout">
                <h6>سلة التسوق <span class="highlighted" id="cart-count">{{ count($cartItems) }}</span></h6>
                <div class="row">
                    @if (count($cartItems) > 0)
                        <div class="col-lg-8">
                            <div class="shop-cards">
                                @foreach ($cartItems as $item)
                                    @if ($item->product)
                                        <div class="shop-card" id="item-{{ $item->id }}">
                                            <div class="dropdown-box-list-item">
                                                <div class="cart-item-preview">
                                                    <a class="cart-item-preview-image" href="{{ route('products.details', $item->product->id) }}">
                                                        <img src="{{ Storage::url($item->product->main_image) }}" alt="{{ $item->product->name }}">
                                                    </a>
                                                    <div class="cart-item-preview-text">
                                                        {{ $item->product->category ? $item->product->category->name : 'قسم غير محدد' }}
                                                    </div>
                                                    <div class="cart-item-preview-title">
                                                        {{ $item->product->name }}
                                                    </div>
                                                    <div class="cart-item-preview-price">
                                                        <span>{{ $item->product->price }}<span class="q">x {{ $item->quantity }}</span><span class="highlighted">L.E</span></span>
                                                    </div>
                                                </div>

                                                <div class="quantity-input">
                                                    <div class="number">
                                                        <input type="number" class="number__field" id="quantity-{{ $item->id }}" min="1" max="100" step="1" value="{{ $item->quantity }}" data-item-id="{{ $item->id }}" data-price="{{ $item->product->price }}">
                                                    </div>
                                                </div>

                                                <div class="item-price">
                                                    <h6 id="item-total-{{ $item->id }}">{{ $item->quantity * $item->price }}<span class="highlighted">L.E</span></h6>
                                                </div>

                                                <div class="cart-item-preview-action">
                                                    <form action="{{ route('cart.remove', $item->id) }}" method="POST">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" style="background-color: transparent; border: none;" onclick="return confirm('هل أنت متأكد من حذف هذا المنتج من السلة؟')">
                                                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                                                                <path d="M7 4V2H17V4H22V6H20V21C20 21.5523 19.5523 22 19 22H5C4.44772 22 4 21.5523 4 21V6H2V4H7ZM6 6V20H18V6H6ZM9 9H11V17H9V9ZM13 9H15V17H13V9Z"></path>
                                                            </svg>
                                                        </button>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    @else
                                        <div class="alert alert-warning">
                                            المنتج "{{ $item->product->name }}" غير متوفر.
                                        </div>
                                    @endif
                                @endforeach
                            </div>
                        </div>

                        <div class="col-lg-4">
                            <div id="cart-message"></div>
                            <div class="sidebar-box">
                                <div class="sidebar-box-title">بيانات الطلب</div>

                                <div class="sidebar-box-content">
                                    <div class="price-title" id="price-title">{{ number_format($total, 2) }}<span class="currency">L.E</span></div>

                                    <div class="totals-line">
                                        <div class="totals-line-title">السلة ({{ count($cartItems) }})</div>
                                        <div class="price-title-small" id="subtotal">{{ number_format($cartItems->sum(function ($item) { return $item->product ? $item->quantity * $item->product->price : 0; }), 2) }}<span class="currency">L.E</span></div>
                                    </div>

                                    <div class="discount">
                                        <div class="promo-line-actions">
                                            <form action="{{ route('cart.apply.coupon') }}" method="POST" id="apply-coupon-form">
                                                @csrf
                                                <div class="form-group">
                                                    <input type="text" name="coupon_code" id="coupon_code" class="form-control" placeholder="كود الخصم" value="{{ $cart && $cart->coupon ? $cart->coupon->code : '' }}">
                                                </div>
                                                <button type="submit" class="create-account-btn" id="apply-coupon-button">
                                                    {{ $cart && $cart->coupon ? 'إزالة' : 'تطبيق' }}
                                                </button>
                                            </form>
                                        </div>
                                    </div>

                                    <div id="coupon-info">
                                        @if ($cart && $cart->coupon)
                                            <div class="totals-line">
                                                <div class="totals-line-title">كود خصم: {{ $cart->coupon->code }}</div>
                                                <div class="price-title-small" id="discount-amount">
                                                    @if ($cart->coupon->discount_type == 'percentage')
                                                        {{ $cart->coupon->discount_value }}%
                                                    @else
                                                        {{ number_format($cart->coupon->discount_value, 2) }}<span class="currency">L.E</span>
                                                    @endif
                                                </div>
                                            </div>
                                            <div class="totals-line">
                                                <div class="totals-line-title">الإجمالي بعد الخصم</div>
                                                <div class="price-title-small" id="total-after-discount">
                                                    @php
                                                        $totalAfterDiscount = $cartItems->sum(function ($item) {
                                                            return $item->product ? $item->quantity * $item->product->price : 0;
                                                        });
                                                        if ($cart->coupon) {
                                                            if ($cart->coupon->discount_type == 'percentage') {
                                                                $totalAfterDiscount -= $totalAfterDiscount * ($cart->coupon->discount_value / 100);
                                                            } else {
                                                                $totalAfterDiscount -= $cart->coupon->discount_value;
                                                            }
                                                        }
                                                    @endphp
                                                    {{ number_format($totalAfterDiscount, 2) }}<span class="currency">L.E</span>
                                                </div>
                                            </div>
                                        @endif
                                    </div>

                                    <div id="applied-taxes">
                                        @if(isset($appliedTaxes) && !empty($appliedTaxes))
                                            @foreach($appliedTaxes as $tax)
                                                <div class="totals-line">
                                                    <div class="totals-line-title">{{ $tax['name'] }}</div>
                                                    <div class="price-title-small">{{ number_format($tax['amount'], 2) }}<span class="currency">L.E</span></div>
                                                </div>
                                            @endforeach
                                        @endif
                                    </div>

                                    <div class="totals-line">
                                        <div class="totals-line-title">الإجمالى</div>
                                        <div class="price-title-small" id="cart-total">{{ number_format($total, 2) }}<span class="currency">L.E</span></div>
                                    </div>

                                    <div class="sidebar-box-actions">
                                        <a href="{{ route('checkout.address') }}" class="pay-btn">
                                            اختيار عنوان الشحن
                                        </a>
                                    </div>
                                </div>

                            </div>
                        </div>
                    @else
                        <div class="col-12">
                            <div class="alert alert-info" role="alert">
                                سلة التسوق فارغة.
                            </div>
                        </div>
                    @endif
                </div>
            </div>

        </div>
    </div>

@endsection

@section('scripts')
<script>
   $(document).ready(function() {
    function applyCouponHandler(e) {
        e.preventDefault();
        var formData = $(this).serialize();
        var isRemoveAction = $('#apply-coupon-button').text().trim() === 'إزالة';

        if (isRemoveAction) {
            removeCouponHandler(e);
            return;
        }
        $.ajax({
            url: "{{ route('cart.apply.coupon') }}",
            type: "POST",
            data: formData,
            success: function(response) {
                $('#cart-message').html('<div class="alert alert-success">' + response.success + '</div>');
                updateCartSummary(response);
            },
            error: function(xhr) {
                var errors = xhr.responseJSON;
                $('#cart-message').html('<div class="alert alert-danger">' + errors.error + '</div>');
            }
        });
    }

    function removeCouponHandler(e) {
        e.preventDefault();
        $.ajax({
            url: "{{ route('cart.remove.coupon') }}",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}"
            },
            success: function(response) {
                $('#cart-message').html('<div class="alert alert-success">' + response.success + '</div>');
                updateCartSummary(response);
            },
            error: function(xhr) {
                var errors = xhr.responseJSON;
                $('#cart-message').html('<div class="alert alert-danger">' + errors.error + '</div>');
            }
        });
    }


    function updateCartSummary(response) {
        $('#cart-count').text(response.cart_items_count);
        $('#subtotal').text(response.subtotal.toFixed(2) + ' L.E');
        $('#cart-total').text(response.total.toFixed(2) + ' L.E');
        $('.price-title').text(response.total.toFixed(2) + ' L.E');

        if (response.coupon) {
            $('#coupon_code').val(response.coupon.code);
            $('#apply-coupon-button').text('إزالة');
            $('#coupon-info').html(`
                <div class="totals-line">
                    <div class="totals-line-title">كود خصم: ${response.coupon.code}</div>
                    <div class="price-title-small" id="discount-amount">
                        ${response.coupon.discount_type == 'percentage' ? response.coupon.discount_value + '%' : response.coupon.discount_value.toFixed(2) + '<span class="currency">L.E</span>'}
                    </div>
                </div>
                <div class="totals-line">
                    <div class="totals-line-title">الإجمالي بعد الخصم</div>
                    <div class="price-title-small" id="total-after-discount">
                        ${response.total_after_discount.toFixed(2)}<span class="currency">L.E</span>
                    </div>
                </div>
            `);
            $('#apply-coupon-form').off('submit').submit(removeCouponHandler);
        } else {
            $('#coupon_code').val('');
            $('#apply-coupon-button').text('تطبيق');
            $('#coupon-info').empty();
            $('#apply-coupon-form').off('submit').submit(applyCouponHandler);
        }

        $('#applied-taxes').empty();
        if (response.applied_taxes && response.applied_taxes.length > 0) {
            let taxesHtml = '';
            response.applied_taxes.forEach(tax => {
                taxesHtml += `
                    <div class="totals-line">
                        <div class="totals-line-title">${tax.name}</div>
                        <div class="price-title-small">${tax.amount.toFixed(2)}<span class="currency">L.E</span></div>
                    </div>
                `;
            });
            $('#applied-taxes').html(taxesHtml);
        }
    }

    $('#apply-coupon-form').submit(applyCouponHandler);

    $('.number__field').change(function() {
        var itemId = $(this).data('item-id');
        var quantity = $(this).val();
        var price = parseFloat($(this).data('price'));
        var itemTotal = quantity * price;

        $('#item-total-' + itemId).html(itemTotal.toFixed(2) + '<span class="highlighted">L.E</span>');

        $.ajax({
            url: "{{ route('cart.update.cart') }}",
            type: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                items: [{
                    id: itemId,
                    quantity: quantity
                }]
            },
            success: function(response) {
                $('#cart-message').html('<div class="alert alert-success">' + response.message + '</div>');
                updateCartSummary(response);
            },
            error: function(xhr) {
                var errors = xhr.responseJSON;
                $('#cart-message').html('<div class="alert alert-danger">' + errors.message + '</div>');
            }
        });
    });
});

</script>
@endsection