@extends('home.layouts.index')

@section('title')
    سبد خرید
@endsection

@section('description')

@endsection

@section('keywords')

@endsection

@section('style')
    <link
        rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
    />
    <style>


        .page-loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #900028 0%, #b8002e 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            animation: fadeOutLoader 0.5s ease 1s forwards;
        }

        .loader-content {
            text-align: center;
            color: white;
        }

        .loader-icon {
            font-size: 4rem;
            margin-bottom: 1rem;
            animation: bounceIn 1s ease;
        }

        .loader-text {
            font-size: 18px;
            font-weight: bold;
            animation: fadeInUp 1s ease 0.5s both;
        }

        @keyframes fadeOutLoader {
            to {
                opacity: 0;
                visibility: hidden;
            }
        }

        @keyframes bounceIn {
            0% {
                opacity: 0;
                transform: scale(0.3);
            }
            50% {
                opacity: 1;
                transform: scale(1.05);
            }
            70% {
                transform: scale(0.9);
            }
            100% {
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes slideInFromRight {
            from {
                opacity: 0;
                transform: translateX(100px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes slideInFromLeft {
            from {
                opacity: 0;
                transform: translateY(100px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes scaleIn {
            from {
                opacity: 0;
                transform: scale(0.8);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes floatIn {
            from {
                opacity: 0;
                transform: translateY(-50px) rotate(-5deg);
            }
            to {
                opacity: 1;
                transform: translateY(0) rotate(0deg);
            }
        }

        html,
        body {
            height: 100%;
        }

        .brand-primary {
            background-color: #900028;
        }

        .brand-primary-light {
            background-color: rgba(144, 0, 40, 0.1);
        }

        .text-brand {
            color: #900028;
        }

        .checkout-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0.75rem;
            opacity: 0;
            animation: fadeInUp 0.6s ease 1.2s forwards;
        }

        @media (min-width: 576px) {
            .checkout-container {
                padding: 1rem;
            }
        }

        @media (min-width: 768px) {
            .checkout-container {
                padding: 2rem;
            }
        }

        .step-indicator {
            display: flex;
            justify-content: space-around;
            margin-bottom: 1.5rem;
            position: relative;
            opacity: 0;
            animation: floatIn 0.6s ease 1.4s forwards;
            flex-wrap: nowrap;
            padding: 0 1rem;
        }

        @media (min-width: 768px) {
            .step-indicator {
                margin-bottom: 3rem;
                justify-content: center;
                padding: 0;
                align-items: center;
            }
        }

        .step {
            display: flex;
            align-items: center;
            position: relative;
            z-index: 2;
            flex-direction: column;
        }

        @media (min-width: 768px) {
            .step {
                flex-direction: column;
            }
        }

        .step-circle {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: white;
            margin: 0 0.25rem;
            transition: all 0.3s ease;
            animation: pulse 2s infinite;
            font-size: 12px;
        }

        @media (min-width: 576px) {
            .step-circle {
                width: 30px;
                height: 30px;
                margin: 0 0.5rem;
                font-size: 14px;
            }
        }

        @media (min-width: 768px) {
            .step-circle {
                width: 30px;
                height: 30px;
                margin: 0 1rem;
                font-size: 16px;
            }
        }

        .step-circle.active {
            background-color: #900028;
            box-shadow: 0 0 20px rgba(144, 0, 40, 0.4);
        }

        .step-circle.inactive {
            background-color: #6c757d;
        }

        .step-line {
            height: 3px;
            width: 50px;
            background-color: #dee2e6;
            position: relative;
            top: -1px;
            display: none;
            margin-top: -15px;
        }

        @media (min-width: 768px) {
            .step-line {
                display: block;
                width: 300px;
            }
        }

        .step-text {
            margin-top: 0.25rem;
            font-size: 10px;
            text-align: center;
            line-height: 1.2;
        }

        @media (min-width: 576px) {
            .step-text {
                font-size: 12px;
                margin-top: 0.5rem;
            }
        }

        @media (min-width: 768px) {
            .step-text {
                font-size: 16px;
            }
        }

        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(144, 0, 40, 0.7);
            }
            70% {
                box-shadow: 0 0 0 10px rgba(144, 0, 40, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(144, 0, 40, 0);
            }
        }

        @keyframes slideInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        .cart-item {
            background: white;
            border-radius: 12px;
            padding: 0.75rem;
            margin-bottom: 0.75rem;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            opacity: 0;
            transform: translateX(-100px);
            position: relative;
        }

        @media (min-width: 576px) {
            .cart-item {
                padding: 1rem;
                margin-bottom: 1rem;
                border-radius: 15px;
            }
        }

        @media (min-width: 768px) {
            .cart-item {
                padding: 1rem;
            }
        }

        .cart-item.animate {
            animation: slideInFromLeft 0.8s ease forwards;
        }

        .cart-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

        .item-image {
            width: 50px;
            height: 50px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1rem;
            position: relative;
            margin: 0 auto 0.75rem auto;
        }

        @media (min-width: 576px) {
            .item-image {
                width: 60px;
                height: 60px;
                font-size: 1.2rem;
                margin: 0 auto 1rem auto;
                border-radius: 10px;
            }
        }

        @media (min-width: 768px) {
            .item-image {
                width: 80px;
                height: 80px;
                font-size: 1.5rem;
                margin: 0;
            }
        }

        .quantity-controls {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            width: fit-content;
            padding: 10px;
            border-radius: 10px;
            border: 1px solid #e5e7eb;
        }

        .quantity-controls input {
            border: none;
            outline: none;
        }

        .quantity-controls input:focus {
            border: none;
            outline: none;
        }

        .quantity-btn {
            width: 30px;
            height: 30px;
            border: none;
            border-radius: 6px;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 12px;
        }

        .quantity-plus {
            background-color: #900028;
        }

        .quantity-minus {
            transition: all 0.25s ease-in-out;
            color: #000;
        }

        .quantity-minus:hover {
            background-color: #900028;
            color: #fff;
        }

        @media (min-width: 576px) {
            .quantity-btn {
                width: 35px;
                height: 35px;
                border-radius: 8px;
                font-size: 14px;
            }
        }

        .quantity-input {
            width: 40px;
            text-align: center;
            border: 2px solid #e9ecef;
            border-radius: 6px;
            padding: 0.2rem;
            font-size: 14px;
        }

        @media (min-width: 576px) {
            .quantity-input {
                width: 50px;
                border-radius: 8px;
                padding: 0.25rem;
                font-size: 16px;
            }
        }

        .summary-card {
            background: white;
            border-radius: 12px;
            padding: 1rem;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            position: static;
            margin-top: 1.5rem;
            opacity: 0;
            transform: translateX(100px);
            animation: slideInFromRight 0.6s ease 2s forwards;
        }

        @media (min-width: 576px) {
            .summary-card {
                padding: 1.5rem;
                margin-top: 1rem;
                border-radius: 15px;
            }
        }

        @media (min-width: 992px) {
            .summary-card {
                padding: 1rem;
                position: sticky;
                top: 2rem;
                margin-top: 0;
            }
        }

        .coupon-btn {
            border: none;
            color: #900028;
            padding: 0.75rem 1.5rem;
            border-radius: 10px;
            font-size: 16px;
            transition: all 0.3s ease;
            width: 100%;
            margin-bottom: 1rem;
            background-color: transparent;
            text-decoration: underline;
        }

        .coupon-btn:hover {
            transform: translateY(-2px);
            color: #900028;
        }

        .modal * {
            font-size: 14px;
        }

        .modal input::placeholder {
            font-size: 14px;
        }

        .next-btn {
            background: linear-gradient(45deg, #000000, #333333);
            border: none;
            color: white;
            padding: 15px;
            border-radius: 10px;
            font-size: 16px;
            transition: all 0.3s ease;
            width: 100%;
        }

        .next-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            background: linear-gradient(45deg, #333333, #555555);
        }

        .modal-content {
            border-radius: 15px;
            border: none;
            overflow: hidden;
        }

        .modal-header {
            background: linear-gradient(45deg, #900028, #b8002e);
            color: white;
            border: none;
        }

        .coupon-input {
            border: 2px solid #e9ecef;
            border-radius: 10px;
            padding: 0.75rem;
            font-size: 1.1rem;
            transition: all 0.3s ease;
        }

        .coupon-input:focus {
            border-color: #900028;
            box-shadow: 0 0 0 0.2rem rgba(144, 0, 40, 0.25);
        }

        .apply-coupon-btn {
            background-color: #900028;
            border: none;
            color: white;
            padding: 0.75rem 1rem;
            border-radius: 10px;
            font-size: 14px;
            transition: all 0.3s ease;
            width: fit-content;
            margin-right: auto;
        }

        .apply-coupon-btn:hover {
            background-color: #700020;
            transform: scale(1.01);
        }

        .price-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem 0;
            border-bottom: 1px solid #e9ecef;
        }

        .price-row:last-child {
            border-bottom: none;
            font-weight: bold;
            font-size: 1.2rem;
            color: #900028;
        }

        .discount-applied {
            background-color: rgba(40, 167, 69, 0.1);
            color: #28a745;
            padding: 0.5rem;
            border-radius: 8px;
            margin: 1rem 0;
            text-align: center;
        }

        .delete-btn {
            width: 35px;
            height: 35px;
            top: -5px;
            right: -5px;
            border: none;
            position: absolute;
            color: #dc3545;
            background-color: transparent;
            cursor: pointer;
            transition: all 0.2s ease;
            font-size: 12px;
            border-radius: 10px;
        }

        .delete-btn:hover {
            background-color: #f8d4d8;
        }

        .color-variant {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            margin: 5px;
            background-color: red;
            cursor: pointer;
            position: relative;
            border: 2px solid white;
        }

        .color-variant.selected::after {
            content: "";
            width: 35px;
            height: 35px;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            border: 2px dashed #000;
            transform: translate(-50%, -50%);
            transform-origin: center center;
            animation: spin 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
            transition: all 0.5s ease-in-out;
        }

        .color-variant.selected::before {
            content: "✔";
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: rgb(196, 196, 196);
            font-size: 16px;
            pointer-events: none;
            z-index: 2;
        }

        @keyframes spin {
            from {
                transform: translate(-50%, -50%) rotate(0deg);
            }
            to {
                transform: translate(-50%, -50%) rotate(360deg);
            }
        }
    </style>
@endsection

@section('script')
    <script>
        const items = {
            1: {name: "لپ تاپ گیمینگ", price: 25000000, qty: 1},
        };

        let appliedDiscount = 0;
        const shippingCost = 0;

        function formatPrice(price) {
            return price.toLocaleString("fa-IR") + " تومان";
        }

        function changeQuantity(change, cartId, key) {
            let type;
            let quantityTag = $('#qty-' + key);
            let quantityValue = parseInt(quantityTag.val());


            if (change === 1) {
                quantityValue += 1;
                type = "increase"
            } else if (quantityValue > 0) {
                if ((quantityValue - 1 === 0)) {
                    return;
                }
                quantityValue -= 1;
                type = "decrease"
            }


            updateQuantity(cartId, quantityValue, quantityTag);
        }

        function updateQuantity(cart_id, quantityValue, tag) {
            let quantity = quantityValue;
            $.ajax({
                url: "{{ route('home.cart.update') }}",
                type: "POST",
                dataType: "json",
                data: {
                    quantity: quantity,
                    cart_id: cart_id,
                    type: 0,
                    _token: "{{ csrf_token() }}"
                },
                success: function (response) {
                    if (response[0] === 1) {
                        console.log(response);
                        tag.val(quantityValue);
                        $('#total_amount').text(response[1]);
                        $('#payment').text(response[2]);
                        $('#discount').text(response[4]);
                        $('.cart-item-price-' + cart_id).text(response[3])
                    }
                    if (response[0] === 0) {
                        swal({
                            title: " دقت کنید",
                            text: "تعداد وارد شده بیش از موجودی کالا است",
                            icon: "error",
                        });

                        $(tag).val(response[1]);
                    }
                }
            });
        }


        function remove_cart(cart_id) {
            $.ajax({
                url: "{{ route('home.cart.remove') }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    cart_id: cart_id,
                },
                dataType: "json",
                type: 'POST',
                beforeSend: function () {

                },
                success: function (msg) {
                    console.log(msg);
                    if (msg) {
                        if (msg[0] == 1) {
                            let message = msg[1];
                            swal({

                                text: message,
                                icon: 'success',
                                timer: 5000,
                                button: false

                            })
                            setTimeout(function () {
                                window.location.reload();
                            }, 1500)
                        }
                        if (msg[0] == 0) {
                            let message = msg[1];
                            swal({
                                title: 'error',
                                text: message,
                                icon: 'error',

                            })
                        }
                    }
                },
            })
        }

        function checkCart() {
            $.ajax({
                url: "{{ route('home.cart.checkCartAjax') }}",
                type: "POST",
                dataType: "json",
                data: {
                    gateway: $('#input-gateway').val(),
                    _token: "{{ csrf_token() }}"
                },
                success: function (response) {
                    if (response[0] == 1) {
                        window.location.href = "{{ route('home.checkout') }}";
                    }
                    if (response[0] == 0) {
                        swal({
                            title: 'خطا',
                            text: response[1],
                            icon: 'error',
                            timer: 5000,
                            button: false
                        })
                        setTimeout(function () {
                            window.location.reload();
                        }, 5000)
                    }
                }
            });
        }

        function initializeAnimations() {
            setTimeout(() => {
                const cartItems = document.querySelectorAll(".cart-item");
                cartItems.forEach((item, index) => {
                    setTimeout(() => {
                        item.classList.add("animate");
                    }, index * 200);
                });
            }, 1000);
        }

        function setupColorSelection() {
            const colors = document.querySelectorAll(".color-variant");
            colors.forEach((color) => {
                color.addEventListener("click", () => {
                    colors.forEach((c) => c.classList.remove("selected"));
                    color.classList.add("selected");
                    console.log(color);
                });
            });
        }

        $(document).ready(function () {
            setupColorSelection();
            initializeAnimations();

            $('#couponForm').on('submit', function (e) {
                e.preventDefault();

                let button = $(this).find('button[type="submit"]');
                let originalText = button.html();

                button.prop('disabled', true).html('<i class="fas fa-spinner fa-spin ms-2"></i> در حال بررسی...');
                $('#couponMessage').html('');

                $.ajax({
                    url: '{{ route("home.coupons.check") }}',
                    type: 'POST',
                    data: $(this).serialize(),
                    success: function (response) {
                        if (response.success) {
                            $('#couponMessage').html('<div class="alert alert-success">' + response.message + '</div>');

                            // بروزرسانی کامل مقادیر summary
                            if (response.total) {
                                $('#total_amount').text(new Intl.NumberFormat('fa-IR').format(response.total.original_price) + ' تومان');
                                $('#discount').text(new Intl.NumberFormat('fa-IR').format(response.total.discount) + ' تومان');
                                $('#payment').text(new Intl.NumberFormat('fa-IR').format(response.total.payment) + ' تومان');

                                if (response.total.coupon_amount > 0) {
                                    $('#discountSection').show();
                                    $('#discountRow').show();
                                } else {
                                    $('#discountSection').hide();
                                    $('#discountRow').hide();
                                }
                            }


                            setTimeout(function () {
                                $('#couponModal').modal('hide');
                            }, 1000);

                        } else {
                            $('#couponMessage').html('<div class="alert alert-danger">' + response.message + '</div>');
                        }
                    },
                    error: function (xhr, status, error) {
                        $('#couponMessage').html('<div class="alert alert-danger">خطا در ارتباط با سرور</div>');
                        console.error('Ajax Error:', error);
                    },
                    complete: function () {
                        button.prop('disabled', false).html(originalText);
                    }
                });
            });

            // وقتی مودال بسته می‌شود، پیام‌ها و فیلدها را پاک کن
            // $('#couponModal').on('hidden.bs.modal', function () {
            //     $('#couponMessage').html('');
            //     $('#couponCode').val('');
            //     // اطمینان از حذف backdrop
            //     $('.modal-backdrop').remove();
            //     $('body').removeClass('modal-open');
            //     $('body').css('padding-right', '');
            // });
        });
    </script>
@endsection

@section('content')
    <div class="page-loader">
        <div class="loader-content">
            <div class="loader-icon">
                <i class="fas fa-shopping-cart"></i>
            </div>
            <div class="loader-text">در حال بارگذاری سبد خرید...</div>
        </div>
    </div>

    <div class="checkout-container">
        <!-- Step Indicator -->
        <div class="step-indicator">
            <div class="step">
                <div class="step-circle active">۱</div>
                <div class="step-text">بررسی سبد خرید</div>
            </div>
            <div class="step-line"></div>
            <div class="step">
                <div class="step-circle inactive">۲</div>
                <div class="step-text">اطلاعات ارسال</div>
            </div>
            <div class="step-line"></div>
            <div class="step">
                <div class="step-circle inactive">۳</div>
                <div class="step-text">پرداخت</div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-9">
                @foreach($carts as $key => $cart)
                    <div class="cart-item">
                        <div class="row align-items-center g-2">
                            <div class="col-12 col-md-3 text-center" style="height: 200px">
                                <div class="item-image" style="height: 100%; width: 90%">
                                    <button class="delete-btn" onclick="remove_cart({{$cart->id}})">
                                        <i class="bx bx-x fs-4"></i>
                                    </button>
                                    <img
                                        src="{{ imageExist(env('PRODUCT_IMAGES_UPLOAD_PATH'), $cart->Product->primary_image ?? '-') }}"
                                        alt=""
                                        class="img-fluid">
                                </div>
                            </div>

                            <div class="col-12 col-md-4 text-center text-md-start mb-2 mb-md-0">
                                <h6 class="mb-1">{{$cart->Product->name ?? ''}}</h6>
                                {{--                                <div class="text-muted small d-flex align-items-center justify-content-start">--}}
                                {{--                                    رنگ:--}}
                                {{--                                    <div class="color-variant">{{$cart->Color->name ?? ''}}</div>--}}
                                {{--                                </div>--}}

                                <div class="col-12 col-md-12 d-flex align-items-center justify-content-between">
                                    <div class="quantity-controls my-2">
                                        <button class="quantity-btn quantity-plus"
                                                onclick="changeQuantity(1, {{$cart->id}}, {{$key}})">
                                            <i class="bx bx-plus"></i>
                                        </button>

                                        <input type="number"
                                               class="quantity-input text-center"
                                               id="qty-{{$key}}"
                                               value="1"
                                               readonly/>

                                        <button class="quantity-btn quantity-minus"
                                                onclick="changeQuantity(-1, {{$cart->id}}, {{$key}})">
                                            <i class="bx bx-minus"></i>
                                        </button>
                                    </div>


                                </div>
                            </div>

                            <div
                                class="col-12 col-md-5 d-flex flex-column justify-content-end align-self-stretch text-center text-md-end">
                                <p class="text-brand mb-0 fs-4 cart-item-price-{{$cart->id}}">
                    <span class="fw-bold">
                        {{ number_format(product_price_for_user_normal($cart->product_id,$cart->variation_id)[2] * $cart->quantity) }}
                    </span>
                                    تومان
                                </p>

                            </div>
                        </div>
                    </div>
                @endforeach

            </div>
            <!-- Order Summary -->
            <div class="col-lg-3">
                <div class="summary-card">
                    <div
                        id="discountSection"
                        class="discount-applied"
                        style="display: none">
                        <i class="fas fa-check-circle ms-1"></i>
                        کد تخفیف اعمال شد!
                    </div>

                    <div class="price-row">

                        <span>جمع کل:</span>
                        <span id="total_amount">{{number_format(calculateCartPrice()['original_price'])}} </span>
                    </div>
                    @if(session()->exists('coupon'))
                        <div class="price-row" id="discountRow">
                            <span>تخفیف:</span>
                            <span class="text-success" id="discount">{{number_format(session()->get('coupon.amount'))}} تومان</span>
                        </div>
                    @endif
                    <div class="price-row" id="discountRow">
                        <span>تخفیف کالا ها:</span>
                        <span class="text-success" id="discount">{{number_format(calculateCartPrice()['total_sale'])}} تومان</span>
                    </div>

                    <div class="price-row">
                        <span>مبلغ نهایی:</span>
                        <span
                            id="payment">{{number_format(calculateCartPrice()['sale_price']- session()->get('coupon.amount'))}}</span>
                    </div>

                    <button
                        class="coupon-btn"
                        data-bs-toggle="modal"
                        data-bs-target="#couponModal">
                        <i class="fas fa-tag mx-2"></i>
                        اعمال کد تخفیف
                    </button>

                    <button class="next-btn" onclick="checkCart()">
                        ادامه به مرحله بعد
                        <i class="fas fa-arrow-left mx-2"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Coupon Modal -->
    <div class="modal fade" id="couponModal"
         aria-hidden="true" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title fs-6">
                        <i class="fas fa-tag ms-2"></i>
                        کد تخفیف
                    </h5>
                    <button
                        type="button"
                        class="btn-close btn-close-white"
                        data-bs-dismiss="modal"
                    ></button>
                </div>
                <div class="modal-body">
                    <form id="couponForm" method="post">
                        @csrf
                        <div class="mb-3">
                            <label for="couponCode" class="form-label">کد تخفیف خود را وارد کنید:</label>
                            <input
                                type="text"
                                class="form-control coupon-input"
                                id="couponCode"
                                name="couponCode"
                                placeholder="مثال: SAVE20"
                            />

                            <div id="couponMessage" class="mt-2"></div>

                        </div>
                        <div class="d-grid">
                            <button class="apply-coupon-btn text-xs">
                                <i class="fas fa-check ms-2"></i>
                                اعمال کد تخفیف
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection