@extends('home.layouts.index')

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

@section('description')

@endsection

@section('keywords')

@endsection

@section('style')
    <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;
                pointer-events: none;
            }
        }

        @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: translateX(-100px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

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

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

        .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;
            align-items: center;
        }

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

        .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;
            font-size: 12px;
        }

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

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

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

        .step-circle.completed {
            background-color: #28a745;
        }

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

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

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

        .step-line.completed {
            background-color: #28a745;
        }

        .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);
            }
        }

        .section-card {
            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;
            border-right: 4px solid #900028;
            opacity: 0;
            transform: translateX(-100px);
        }

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

        @media (min-width: 768px) {
            .section-card {
                padding: 1.5rem;
            }
        }

        .section-card.animate {
            animation: slideInFromLeft 0.8s ease forwards;
        }

        .address-card {
            border: 1px solid #e9ecef;
            border-radius: 12px;
            padding: 1rem;
            margin-bottom: 0.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
        }

        .address-card:hover {
            border-color: #900028;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(144, 0, 40, 0.1);
        }

        .address-card.selected {
            border-color: #900028;
            background-color: rgba(144, 0, 40, 0.05);
        }

        .address-card .check-icon {
            position: absolute;
            top: 15px;
            left: 15px;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background-color: #900028;
            color: white;
            display: none;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }

        .address-card.selected .check-icon {
            display: flex;
        }

        .shipping-method {
            border: 2px solid #e9ecef;
            border-radius: 12px;
            padding: 1rem;
            margin-bottom: 0.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
        }

        .shipping-method:hover {
            border-color: #900028;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(144, 0, 40, 0.1);
        }

        .shipping-method.selected {
            border-color: #900028;
            background-color: rgba(144, 0, 40, 0.05);
        }

        .shipping-method .check-icon {
            position: absolute;
            top: 15px;
            left: 15px;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            background-color: #900028;
            color: white;
            display: none;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }

        .shipping-method.selected .check-icon {
            display: flex;
        }

        .shipping-icon {
            width: 60px;
            height: 60px;
            background: linear-gradient(45deg, #900028, #b8002e);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.5rem;
            margin: 0 auto 1rem auto;
        }

        @media (min-width: 768px) {
            .shipping-icon {
                margin: 0;
            }
        }

        .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;
        }

        .summary-card p {
            text-align: justify;
        }

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

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

        .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);
        }

        .next-btn:disabled {
            background: #6c757d;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .back-btn {
            background: transparent;
            border: 2px solid #900028;
            color: #900028;
            padding: 0.75rem 1rem;
            border-radius: 10px;
            font-weight: bold;
            font-size: 14px;
            transition: all 0.3s ease;
            width: 100%;
            margin-bottom: 1rem;
            width: fit-content;
        }

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

        .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;
        }

        .add-address-btn {
            background: linear-gradient(45deg, #900028, #b8002e);
            border: none;
            color: white;
            padding: 0.75rem 1.5rem;
            border-radius: 10px;
            font-size: 14px;
            transition: all 0.3s ease;
            width: 100%;
            margin-bottom: 1rem;
            width: fit-content;
            margin-right: auto;
        }

        .add-address-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(144, 0, 40, 0.3);
            background: linear-gradient(45deg, #700020, #900028);
        }

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

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

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

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

        .add-address-submit-btn {
            background: linear-gradient(45deg, #900028, #b8002e);
            border: none;
            color: white;
            padding: 0.75rem 1.5rem;
            border-radius: 10px;
            font-size: 16px;
            transition: all 0.3s ease;
            width: fit-content;
            margin-right: auto;
        }

        .add-address-submit-btn:hover {
            background: linear-gradient(45deg, #700020, #900028);
            transform: scale(1.02);
        }

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

        @keyframes bounceInLeft {
            0% {
                opacity: 0;
                transform: translateX(-100px) scale(0.8);
            }
            60% {
                opacity: 1;
                transform: translateX(10px) scale(1.05);
            }
            100% {
                opacity: 1;
                transform: translateX(0) scale(1);
            }
        }

        @keyframes bounceInRight {
            0% {
                opacity: 0;
                transform: translateX(100px) scale(0.8);
            }
            60% {
                opacity: 1;
                transform: translateX(-10px) scale(1.05);
            }
            100% {
                opacity: 1;
                transform: translateX(0) scale(1);
            }
        }

        .address-card.new-address {
            animation: bounceInLeft 0.8s ease forwards;
        }

        .shipping-method:nth-child(1) {
            animation-delay: 0.2s;
        }

        .shipping-method:nth-child(2) {
            animation-delay: 0.4s;
        }

        .shipping-method:nth-child(3) {
            animation-delay: 0.6s;
        }

        .shipping-method:nth-child(4) {
            animation-delay: 0.8s;
        }

        /* Error state styling */
        .input-error {
            border-color: #dc3545 !important; /* Bootstrap red */
            box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
        }

        .label-error {
            color: #dc3545 !important;
        }

        .error-message {
            color: #dc3545;
            font-size: 14px;
            margin-top: 0.25rem;
            display: block;
            animation: fadeIn 0.3s ease;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-5px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .form-label {
            font-size: 14px;
        }

        input::placeholder,
        textarea::placeholder,
        input,
        textarea,
        select,
        option {
            font-size: 16px !important;
        }

        option {
            cursor: pointer;
        }

        .summary-card .image-wrapper {
            width: 70px;
            height: 70px;
            padding: 10px;
            border-radius: 50%;
            background-color: #fff;
            margin: -50px auto 15px;
            box-shadow: 0px 2px 5px #d9d9d9;
        }

        .summary-card .image-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    </style>
@endsection

@section('script')
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>

        function NumberFormat(tag) {
            let price = $(tag).val();
            $(tag).val(number_format(price));
        }

        function number_format(number, decimals, dec_point, thousands_sep) {
            // Strip all characters but numerical ones.
            number = (number + '').replace(/[^0-9+\-Ee.]/g, '');
            var n = !isFinite(+number) ? 0 : +number,
                prec = !isFinite(+decimals) ? 0 : Math.abs(decimals),
                sep = (typeof thousands_sep === 'undefined') ? ',' : thousands_sep,
                dec = (typeof dec_point === 'undefined') ? '.' : dec_point,
                s = '',
                toFixedFix = function (n, prec) {
                    var k = Math.pow(10, prec);
                    return '' + Math.round(n * k) / k;
                };
            // Fix for IE parseFloat(0.55).toFixed(0) = 0;
            s = (prec ? toFixedFix(n, prec) : '' + Math.round(n)).split('.');
            if (s[0].length > 3) {
                s[0] = s[0].replace(/\B(?=(?:\d{3})+(?!\d))/g, sep);
            }
            if ((s[1] || '').length < prec) {
                s[1] = s[1] || '';
                s[1] += new Array(prec - s[1].length + 1).join('0');
            }
            return s.join(dec);
        }

        function formatPrice(price) {
            return price.toLocaleString("fa-IR");
        }

        function selectAddress(tag, address_id) {
            // حذف انتخاب از تمام آدرس‌ها
            document.querySelectorAll(".address-card").forEach((address) => {
                address.classList.remove("selected");
            });

            // انتخاب آدرس کلیک شده
            tag.classList.add("selected");
            $('#address_selected_id').val(address_id);
            checkout_calculate_delivery(address_id);
        }

        function checkout_calculate_delivery(address_id) {
            $('#delivery_method_selected_id').val('');
            $.ajax({
                url: "{{ route('home.checkout_calculate_delivery') }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    address_id: address_id,
                    type: 'cash'
                },
                type: "POST",
                dataType: "json",
                success: function (msg) {
                    if (msg) {

                        if (msg[0] === 1) {

                            $('#selectDeliveryItems').html(msg[1]);
                            $('#delivery_method_selected_id').html(msg[2]);
                            if (msg[3]) {
                                $('#delivery_time .factor-item-time').removeClass('d-none');


                            } else {
                                $('#delivery_time .factor-item-time').addClass('d-none');
                            }
                            $('#calculate_delivery_price').html(msg[4]);
                        }
                        if (msg[0] === 0) {

                            $('#selectDeliveryItems').html(msg[1]);
                            $('#calculate_delivery_price').html('<p style="font-size: 9pt;margin: 0" class="text-danger">امکان ارسال وجود ندارد</p>');
                        }
                    }
                }
            })
        }

        function updateShippingCost(shippingPrice) {
            const shippingCostElement = document.getElementById("shippingCost");
            const totalCostElement = document.getElementById("totalCost");

            if (shippingPrice === 0) {
                shippingCostElement.textContent = "رایگان";
            } else {
                shippingCostElement.textContent = formatPrice(shippingPrice);
            }

            const total = subtotal + shippingPrice;
            totalCostElement.textContent = formatPrice(total);
        }


        ["mobile", "nationalId", "postalCode"].forEach((id) => {
            const input = document.getElementById(id);
            input.addEventListener("input", function () {
                this.value = this.value.replace(/\D/g, "");
            });
        });

        function validateAddressForm() {

            const form = document.getElementById("addAddressForm");
            let isValid = true;

            form.querySelectorAll(".error-message").forEach((el) => el.remove());
            form.querySelectorAll(".input-error").forEach((el) => el.classList.remove("input-error"));
            form.querySelectorAll(".label-error").forEach((el) => el.classList.remove("label-error"));

            const toEnglishNumbers = (str) => {
                return str.replace(/[۰-۹]/g, function (d) {
                    return String.fromCharCode(d.charCodeAt(0) - 1728);
                });
            };

            // استفاده از IDهای صحیح
            const fields = [
                {id: "firstName", name: "نام گیرنده"},
                {id: "lastName", name: "نام خانوادگی گیرنده"},
                {id: "mobile", name: "شماره موبایل", pattern: /^09\d{9}$/},
                {id: "nationalId", name: "کد ملی", pattern: /^\d{10}$/},
                {id: "province", name: "استان"}, // تغییر به "province"
                {id: "city", name: "شهر"}, // تغییر به "city"
                {id: "address", name: "آدرس کامل"},
                {id: "postalCode", name: "کد پستی", pattern: /^\d{10}$/},
            ];

            fields.forEach((field) => {
                const input = document.getElementById(field.id);

                if (!input) {
                    console.warn(`فیلد با شناسه '${field.id}' یافت نشد`);
                    return;
                }

                const label = input.closest(".mb-3, .col-md-6")?.querySelector("label");

                let inputValue = input.value.trim();

                if (field.pattern) {
                    inputValue = toEnglishNumbers(inputValue);
                }

                let errorText = "";

                // برای فیلدهای select بررسی مقدار 0 یا خالی
                if (field.id === "province" || field.id === "city") {
                    if (!inputValue || inputValue === "0") {
                        errorText = `${field.name} الزامی است.`;
                    }
                } else if (!inputValue) {
                    errorText = `${field.name} الزامی است.`;
                } else if (field.pattern && !field.pattern.test(inputValue)) {
                    if (field.id === "mobile")
                        errorText = "شماره موبایل باید با ۰۹ شروع شود و ۱۱ رقم باشد.";
                    if (field.id === "nationalId")
                        errorText = "کد ملی باید ۱۰ رقم باشد.";
                    if (field.id === "postalCode")
                        errorText = "کد پستی باید ۱۰ رقم باشد.";
                }

                if (errorText) {
                    isValid = false;
                    input.classList.add("input-error");
                    if (label) label.classList.add("label-error");

                    const errorMsg = document.createElement("small");
                    errorMsg.classList.add("error-message");
                    errorMsg.textContent = errorText;
                    input.insertAdjacentElement("afterend", errorMsg);
                }
            });

            return isValid;
        }

        function resetAddressFormErrors() {
            const form = document.getElementById("addAddressForm");

            form.querySelectorAll(".error-message").forEach((el) => el.remove());

            form
                .querySelectorAll(".input-error")
                .forEach((el) => el.classList.remove("input-error"));
            form
                .querySelectorAll(".label-error")
                .forEach((el) => el.classList.remove("label-error"));
        }

        function createAddressCard(addressData, addressId) {
            return `
                <div class="address-card new-address" onclick="selectAddress(this, ${addressId})">
                    <div class="check-icon">
                        <i class="fas fa-check"></i>
                    </div>
                    <div class="row">
                        <div class="col-md-8">
                            <h6 class=" mb-2">${addressData.name}</h6>
                            <p class="mb-1"><strong>آدرس:</strong> ${addressData.address}</p>
                            <p class="mb-1"><strong>کد پستی:</strong> ${addressData.postalCode}</p>
                            <p class="mb-1"><strong>کد ملی:</strong> ${addressData.nationalId}</p>
                        </div>
                        <div class="col-md-4 text-md-start">
                            <p class="mb-1"><strong>شهر:</strong> ${addressData.city}</p>
                            <p class="mb-1"><strong>استان:</strong> ${addressData.province}</p>

                            ${
                addressData.isDefault
                    ? '<small class="text-success"><i class="fas fa-check-circle ms-1"></i>آدرس پیش‌فرض</small>'
                    : ""
            }
                        </div>
                    </div>
                </div>
            `;
        }

        document
            .getElementById("addAddressModal")
            .addEventListener("hidden.bs.modal", function () {
                resetAddressFormErrors();
                document.getElementById("addAddressForm").reset();
            });


        function initializeAnimations() {
            setTimeout(() => {
                const sectionCards = document.querySelectorAll(".section-card");
                sectionCards.forEach((card, index) => {
                    setTimeout(() => {
                        card.classList.add("animate");
                    }, index * 200);
                });
            }, 1600);
        }

        // Initialize
        initializeAnimations();


        $('.province-select').change(function () {
            var provinceID = $(this).val();
            if (provinceID) {
                $.ajax({
                    type: "GET",
                    url: "{{ url('/get-province-cities-list') }}?province_id=" + provinceID,
                    success: function (res) {
                        if (res) {
                            $("#city").empty(); // استفاده از ID
                            $('#city').append('<option value="0">انتخاب کنید</option>');
                            $.each(res, function (key, city) {
                                $("#city").append('<option value="' + city.id + '">' + city.name + '</option>');
                            });
                        } else {
                            $("#city").empty();
                        }
                    }
                });
            } else {
                $("#city").empty();
            }
        });


        function add_price_to_payment_box() {
            let delivery_method_selected = $('#selectDeliveryItems').find('.selected');
            let price = delivery_method_selected.find('.priceIn').text();

            let send_method = delivery_method_selected.find('.priceIn').find('.send_method').val();
            price = price.replaceAll(',', '');

            price = price.replaceAll(' ', '');

            price = price.replaceAll('تومان', '');
            // console.log(price);
            if (price == 0) {
                $('#calculate_delivery_price').text(delivery_method_selected.find('.priceIn').text());
                price = 0;
            } else {

                $('#calculate_delivery_price').text(number_format(parseInt(price)) + ' تومان ');
            }


            let total_payment;
            @if(auth('web')->check())
                @if(auth()->user()->organ_id != 0 && auth()->user()->personnel_activation==1)

                @php
                    $total_sale_old = calculateCartPrice()['sale_price']- session()->get('coupon.amount');
                    $discount_percent_sale_organ = auth()->user()->Organ->discount_percent;

                    $total_sale=$total_sale_old - (($total_sale_old*($discount_percent_sale_organ/100)));
                @endphp
                total_payment = {{ $total_sale }};
            @else
                total_payment = {{ calculateCartPrice()['sale_price']- session()->get('coupon.amount') }};
            @endif
                @else
                total_payment = {{ calculateCartPrice()['sale_price']- session()->get('coupon.amount') }};
            @endif


            if (isNaN(parseInt(price))) {
                total_payment = parseInt(total_payment);
            } else {
                total_payment = parseInt(total_payment) + parseInt(price);
            }


            $('#total_payment').text(number_format(total_payment) + ' تومان ');
        }
        {{--function selectDeliveryMethod(tag, delivery_selected_id) {--}}
        {{--    $('.form-check').removeClass('selected');--}}
        {{--    $(tag).addClass('selected');--}}
        {{--    $('#delivery_method_selected_id').val(delivery_selected_id);--}}
        {{--    if (delivery_selected_id == 3) {--}}
        {{--        $('#MapModal').modal('show');--}}
        {{--        //show Map--}}
        {{--        var map_token = '{{ \App\Models\AlopeykConfig::first()->neshan_token }}';--}}
        {{--        setTimeout(function () {--}}
        {{--            var location = $('[name="alopeyk_location"]').val();--}}
        {{--            if (location.length > 0) {--}}
        {{--                var center = [location.split('-')[0], location.split('-')[1]];--}}
        {{--            } else {--}}
        {{--                var center = [35.699739, 51.338097];--}}
        {{--            }--}}
        {{--            var map = new L.Map('map', {--}}
        {{--                key: map_token,--}}
        {{--                maptype: 'dreamy',--}}
        {{--                poi: true,--}}
        {{--                traffic: false,--}}
        {{--                center: center,--}}
        {{--                zoom: 14--}}
        {{--            });--}}
        {{--            var marker;--}}
        {{--            if (location.length > 0) {--}}
        {{--                location = location.split('-');--}}
        {{--                console.log(location);--}}
        {{--                marker = new L.Marker([location[0], location[1]]).addTo(map); // set--}}
        {{--            }--}}
        {{--            map.on('click', function (e) {--}}
        {{--                if (marker) { // check--}}
        {{--                    map.removeLayer(marker); // remove--}}
        {{--                }--}}
        {{--                marker = new L.Marker([e.latlng.lat, e.latlng.lng]).addTo(map); // set--}}
        {{--                $('[name="alopeyk_location"]').val(e.latlng.lat + '-' + e.latlng.lng);--}}
        {{--                console.log(marker.getLatLng());--}}
        {{--            });--}}
        {{--        }, 1000);--}}
        {{--    }--}}
        {{--    $.ajax({--}}
        {{--        url: "{{ route('home.select_delivery_method') }}",--}}
        {{--        data: {--}}
        {{--            _token: "{{ csrf_token() }}",--}}
        {{--            delivery_selected_id: delivery_selected_id,--}}
        {{--        },--}}
        {{--        type: "POST",--}}
        {{--        dataType: "json",--}}
        {{--        success: function (msg) {--}}
        {{--            if (msg) {--}}
        {{--                if (msg[0] == 1) {--}}
        {{--                    if (msg[1]) {--}}
        {{--                        $('#delivery_time .factor-item-time').removeClass('d-none');--}}


        {{--                    } else {--}}
        {{--                        $('#delivery_time .factor-item-time').addClass('d-none');--}}
        {{--                    }--}}
        {{--                }--}}
        {{--            }--}}
        {{--        }--}}
        {{--    })--}}
        {{--    add_price_to_payment_box();--}}
        {{--}--}}

        function getAlopeykPrice() {
            let alopeyk_location = $('#alopeyk_location').val();
            $.ajax({
                url: "{{ route('home.calculateAloPeykPrice') }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    alopeyk_location: alopeyk_location,
                },
                type: "POST",
                dataType: "json",
                success: function (msg) {
                    if (msg) {
                        if (msg[0] == 0) {
                            swal({
                                title: 'دقت کنید',
                                text: msg[1],
                                icon: 'warning',
                                timer: 3000,
                            })
                        }
                        if (msg[0] == 1) {
                            if (msg[1]) {
                                $('#MapModal').modal('hide');
                                $('.alopeyk_price').text(msg[1]);
                            } else {
                                $('#delivery_time .factor-item-time').addClass('d-none');
                            }
                            add_price_to_payment_box();
                        }
                    }
                }
            })
        }

        function selectDayName(tag, day) {
            $('.day').removeClass('active');
            $(tag).addClass('active');
            $('#dayNameInput').val(day);
        }

        function selectSendTime(tag, time) {
            $('.hours').removeClass('active');
            $(tag).addClass('active');
            $('#send_time_select').val(time);
        }

        function submitCheckOut(e, tag) {
            e.preventDefault();
            let address_id = $('#address_selected_id').val();
            let delivery_method_selected_id = $('#delivery_method_selected_id').val();
            let dayNameInput = $('#dayNameInput').val();
            let send_time_select = $('#send_time_select').val();
            let alopeyk_location = $('#alopeyk_location').val();
            $.ajax({
                url: "{{ route('home.checkoutSaveStep1') }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    address_id: address_id,
                    delivery_method_selected_id: delivery_method_selected_id,
                    dayNameInput: dayNameInput,
                    send_time_select: send_time_select,
                    alopeyk_location: alopeyk_location,
                },
                type: "POST",
                dataType: "json",
                success: function (msg) {
                    if (msg) {
                        if (msg[0] == 0) {
                            swal({

                                text: msg[1],
                                icon: 'warning',
                                timer: 5000,
                                buttons: false,
                            })
                        }
                        if (msg[0] == 1) {
                            swal({
                                text: msg[1],
                                icon: 'success',
                                timer: 5000,
                                buttons: false,
                            })
                            setTimeout(function () {
                                location.href = "{{ route('home.checkout.preview') }}"
                            }, 1500)
                        }
                        if (msg[0] == 2) {
                            swal({
                                text: msg[1],
                                icon: 'warning',
                                timer: 3000,
                            });
                            $('#MapModal').modal('show');
                        }
                        if (msg[0] == 3) {
                            $('#modal_address').text(msg[1]);
                            $('#modal_address_id').val(address_id);
                            $('#PostalCodeModal').modal('show');
                        }
                    }
                }
            })
        }

        function AddPostalCodeToAddress() {
            $('#error_postalCode').hide();
            let address_id = $('#modal_address_id').val();
            let modal_postalCode = $('#modal_postalCode').val();
            $.ajax({
                url: "{{ route('home.AddPostalCodeToAddress') }}",
                data: {
                    _token: "{{ csrf_token() }}",
                    address_id: address_id,
                    modal_postalCode: modal_postalCode,
                },
                type: "POST",
                dataType: "json",
                success: function (msg) {
                    if (msg[0] === 0) {
                        $('#error_postalCode').show();
                        $('#error_postalCode').text(msg[1]);
                    }
                    if (msg[0] === 1) {
                        $('#PostalCodeModal').modal('hide');
                        swal({
                            text: msg[1],
                            icon: 'success',
                            timer: 1500,
                        })
                        setTimeout(function () {
                            location.href = "{{ route('home.checkout.preview') }}"
                        }, 1500)
                    }
                }
            })
        }


        function autoSelectFirstAddress() {
            const firstAddress = document.querySelector('.address-card');
            if (firstAddress) {
                const addressId = firstAddress.getAttribute('data-id');
                firstAddress.classList.add('selected');
                $('#address_selected_id').val(addressId);
                checkout_calculate_delivery(addressId);
            }
        }

        document.addEventListener('DOMContentLoaded', function () {
            autoSelectFirstAddress();
        });

    </script>
@endsection

@section('content')
    <!-- Page Loader -->
    <div class="page-loader">
        <div class="loader-content">
            <div class="loader-icon">
                <i class="fas fa-map-marker-alt"></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 completed">
                    <i class="fas fa-check"></i>
                </div>
                <div class="step-text">بررسی سبد خرید</div>
            </div>
            <div class="step-line completed"></div>
            <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>

        <div class="row">
            <div class="col-lg-9">
                <!-- Address Selection -->
                <div class="section-card" style="animation-delay: 1.6s">
                    <h4 class="text-brand mb-4" style="font-size: 18px">
                        <i class="fas fa-map-marker-alt ms-2"></i>
                        انتخاب آدرس ارسال
                    </h4>

                    @if($addresses)
                        @foreach($addresses as $address)
                            <div data-id="{{$address->id}}" class="address-card"
                                 onclick="selectAddress(this,{{ $address->id }})"
                                 id="address-{{ $address->id }}">
                                <div class="check-icon">
                                    <i class="bx bx-check"></i>
                                </div>
                                <div class="row">
                                    <div class="col-md-8">
                                        <p class="mb-2">{{ $address->user->first_name . ' ' . $address->user->last_name }}</p>
                                        <p class="mb-1">
                                            <strong>آدرس:</strong> {{ $address->address }}
                                        </p>
                                        <p class="mb-1"><strong>کد پستی:</strong> {{ $address->postal_code }}</p>
                                        <p class="mb-1"><strong>کد ملی:</strong> {{ $address->user->national_code }}</p>
                                    </div>
                                    <div class="col-md-4 text-md-start">
                                        <p class="mb-1"><strong>شهر:</strong> {{ $address->city->name }}</p>
                                        <p class="mb-1"><strong>استان:</strong> {{ $address->city->province->name }}</p>
                                        @if($address->is_default)
                                            <small class="text-success">
                                                <i class="bx bx-check ms-1"></i>
                                                آدرس پیش‌فرض
                                            </small>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                        {{--                        <input id="address_selected_id" type="hidden" name="address_selected_id" value="{{ $address_id }}">--}}
                        <input id="address_selected_id" type="hidden" name="address_selected_id" value="">
                    @else
                        <div class="alert alert-warning text-center">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            هیچ آدرسی ثبت نشده است. لطفاً یک آدرس جدید اضافه کنید.
                        </div>
                    @endif

                    <button
                        class="add-address-btn"
                        data-bs-toggle="modal"
                        data-bs-target="#addAddressModal"
                    >
                        <i class="fas fa-map-marker-alt mx-2"></i>
                        افزودن آدرس جدید
                    </button>
                </div>

                <!-- Shipping Methods -->
                {{--                <div class="section-card" style="animation-delay: 1.8s">--}}
                {{--                    <h4 class="text-brand mb-4" style="font-size: 18px">--}}
                {{--                        <i class="fas fa-truck ms-2"></i>--}}
                {{--                        انتخاب روش ارسال--}}
                {{--                    </h4>--}}

                {{--                    @foreach($deliveryMethod as $key=>$item)--}}
                {{--                            <?php--}}
                {{--                            if ($item->exist_service == true) {--}}
                {{--                                $onclick = 'onclick="selectDeliveryMethod(this,' . $item->id . ')"';--}}
                {{--                            } else {--}}
                {{--                                $onclick = '';--}}


                {{--                            }--}}
                {{--                            ?>--}}
                {{--                        <div--}}
                {{--                            class="shipping-method  {{ $item->exist_service==true ? ($key == 0 ? 'selected': '') : 'disabled' }}"--}}
                {{--                            --}}
                {{--                            data-price="500000"--}}
                {{--                            >--}}
                {{--                            <div class="check-icon">--}}
                {{--                                <i class="fas fa-check"></i>--}}
                {{--                            </div>--}}
                {{--                            <div class="row align-items-center">--}}
                {{--                                <div class="col-12 col-md-2 text-center mb-3 mb-md-0">--}}
                {{--                                    <div class="shipping-icon">--}}
                {{--                                        <img width="25" alt="پیک موتوری"--}}
                {{--                                             src="{{ imageExist(env('DELIVERY_METHOD_ICON'),$item->image) }}">--}}
                {{--                                    </div>--}}
                {{--                                </div>--}}
                {{--                                <div class="col-12 col-md-7 text-center text-md-start">--}}
                {{--                                    <input type="radio" checked=""--}}
                {{--                                           class="form-check-input d-none"--}}
                {{--                                           name="post" id="post-{{$key}}">--}}
                {{--                                    <label for="post-{{$key}}"--}}
                {{--                                           class="form-check-label">--}}
                {{--                                        {{ $item->name }}--}}
                {{--                                    </label>--}}
                {{--                                    <p class="text-muted mb-1"> {{ $item->description }}  </p>--}}

                {{--                                </div>--}}
                {{--                                <div class="col-12 col-md-3 text-center text-md-end">--}}
                {{--                                    <p class="text-brand mb-0">   <input type="hidden" class="send_method"--}}
                {{--                                                                         value="{{  $item->id }}">--}}
                {{--                                        {{$item->delivery_price }} تومان</p>--}}
                {{--                                </div>--}}
                {{--                            </div>--}}
                {{--                        </div>--}}
                {{--                    @endforeach--}}


                {{--                </div>--}}
                <button class="back-btn my-2 small" onclick="window.history.back()">
                    <i class="fas fa-arrow-right mx-2"></i>
                    بازگشت به مرحله قبل
                </button>
            </div>

            <!-- Order Summary -->
            <div class="col-lg-3">
                <div class="summary-card">
                    <div class="price-row">
                        <span>جمع کل کالاها:</span>
                        <span>
                <span class="fw-bold">{{ number_format(calculateCartPrice()['original_price']) }}</span>
                <span>تومان</span>
              </span>
                    </div>

                    <div class="price-row">
                        <span>هزینه ارسال:</span>
                        <span>
{{--                <span class="fw-bold" id="calculate_delivery_price"></span>--}}
                <span class="fw-bold">آپلاس</span>

              </span>
                    </div>

                    <div class="price-row">
                        <span>تخفیف کالا ها:</span>
                        <span>
                <span class="fw-bold">{{  number_format( session()->get('coupon.amount') ) }}</span>
                <span>تومان</span>
              </span>
                    </div>

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

                    <p class="mt-4">
                        هزینه‌ی ارسال در ادامه بر اساس آدرس، زمان و نحوه‌ی ارسال انتخابی
                        شما‌ محاسبه و به این مبلغ اضافه خواهد شد
                    </p>

                    <button
                        class="next-btn mt-1 small"

                        onclick="submitCheckOut(event,this)"
                    >
                        ادامه پرداخت
                        <i class="fas fa-arrow-left ms-2"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
    <input id="delivery_method_selected_id" name="shippingoption"
           type="hidden"
           value="">
    <!-- Add Address Modal -->
    <div class="modal fade" id="addAddressModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">
                        <i class="fas fa-map-marker-alt mx-2"></i>
                        افزودن آدرس جدید
                    </h5>
                    <button
                        type="button"
                        class="btn-close btn-close-white"
                        data-bs-dismiss="modal"
                    ></button>
                </div>
                <div class="modal-body">
                    <form id="addAddressForm" action="{{ route('home.addresses.store') }}" method="POST">
                        @csrf
                        <div class="col-md-12 mb-3">
                            <label for="firstName" class="form-label">عنوان</label>
                            <input
                                type="text"
                                class="form-control address-input"
                                id="firstName"
                                name="title"
                                placeholder="عنوان"
                            />
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="firstName" class="form-label">نام گیرنده</label>
                                <input
                                    type="text"
                                    class="form-control address-input"
                                    id="firstName"
                                    name="first_name"
                                    placeholder="نام"
                                />
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="lastName" class="form-label"
                                >نام خانوادگی گیرنده</label
                                >
                                <input
                                    type="text"
                                    class="form-control address-input"
                                    id="lastName"
                                    name="last_name"
                                    placeholder="نام خانوادگی"
                                />
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="mobile" class="form-label">شماره موبایل</label>
                                <input
                                    dir="ltr"
                                    type="tel"
                                    class="form-control address-input"
                                    id="mobile"
                                    placeholder="۰۹۱۲۳۴۵۶۷۸۹"
                                    maxlength="11"
                                    inputmode="numeric"
                                    pattern="[0-9]*"
                                    name="cellphone"
                                />
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="nationalId" class="form-label">کد ملی</label>
                                <input
                                    dir="ltr"
                                    type="text"
                                    class="form-control address-input"
                                    id="nationalId"
                                    placeholder="۰۰۱۲۳۴۵۶۷۸"
                                    maxlength="10"
                                    inputmode="numeric"
                                    pattern="[0-9]*"
                                    name="national_code"
                                />
                            </div>
                        </div>


                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="province" class="form-label">استان</label>
                                <select name="province_id" id="province" class="form-select province-select">
                                    @foreach ($provinces as $province)
                                        <option value="{{ $province->id }}">{{ $province->name }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="city" class="form-label">شهر</label>
                                <select name="city_id" id="city" class="form-select city-select">
                                </select>
                            </div>
                        </div>


                        <div class="mb-3">
                            <label for="address" class="form-label">آدرس کامل</label>
                            <textarea
                                class="form-control address-input"
                                id="address"
                                rows="3"
                                name="address"
                                placeholder="آدرس کامل شامل خیابان، کوچه، پلاک و واحد"
                            ></textarea>
                        </div>
                        <div class="mb-3">
                            <label for="postalCode" class="form-label">کد پستی</label>
                            <input
                                type="text"
                                class="form-control address-input"
                                id="postalCode"
                                name="postal_code"
                                placeholder="۱۲۳۴۵۶۷۸۹۰"
                            />
                        </div>
                        <div class="d-grid">
                            <button type="submit" class="add-address-submit-btn">
                                <i class="fas fa-check ms-2"></i>
                                افزودن آدرس
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection