@extends('partial.layout')
@section('content')
    <x-toast/>
    <div class="cart__section">
        <div class="container">
            <div class="row">
                <div class="col-12 mb-4 mt-3">
                    <p class="cart-title fw-bold mb-4">انتخاب شیوه پرداخت</p>
                </div>
            </div>
            <div class="row">
                <div class="col-12 col-md-8 pl-2">
                    <div class="payment-methods-container">
                        @foreach($paymentMethods as $paymentMethod)
                            <div class="payment-method bg-gray mb-3 rounded-3 shadow-sm">
                                <div class="form-check p-3">
                                    <input class="form-check-input payment-radio" type="radio" name="payment_method_id"
                                           id="flexRadioDefault-{{$paymentMethod->id}}" value="{{$paymentMethod->id}}">
                                    <label class="form-check-label payment-method-label w-100"
                                           for="flexRadioDefault-{{$paymentMethod->id}}">
                                        <div class="d-flex align-items-center">
                                            <div class="payment-icon me-3">
                                                @if(str_contains(strtolower($paymentMethod->title), 'online'))
                                                    <i class="bi bi-credit-card-2-front text-primary fs-4"></i>
                                                @elseif(str_contains(strtolower($paymentMethod->title), 'cash'))
                                                    <i class="bi bi-cash-stack text-success fs-4"></i>
                                                @else
                                                    <i class="bi bi-wallet2 text-info fs-4"></i>
                                                @endif
                                            </div>
                                            <div class="payment-info">
                                                <h5 class="mb-1">{{$paymentMethod->title}}</h5>
                                                <p class="text-muted mb-0 small">{!! $paymentMethod->description !!}</p>
                                            </div>
                                        </div>
                                    </label>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    <div class="off-section mt-4">
                        <div class="accordion accordion-flush" id="accordionFlushExample">
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="flush-headingOne">
                                    <button class="accordion-button collapsed off-section-btn" type="button"
                                            data-bs-toggle="collapse" data-bs-target="#flush-collapseOne"
                                            aria-expanded="false" aria-controls="flush-collapseOne">
                                        کد تخفیف
                                    </button>
                                </h2>
                                <div id="flush-collapseOne" class="accordion-collapse collapse"
                                     aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                                    <div class="accordion-body accordion-body-custom">
                                        <p class="fw-bold">استفاده از کد تخفیف {{ $config['site_title'] ?? config('app.name') }} </p>
                                        <p>با ثبت کد تخفیف ، مبلغ کد تخفیف از "مبلغ قابل پرداخت" کسر میشود.</p>
                                        <div class="input-group mb-3">
                                            <input type="text" class="form-control" id="discount-code"
                                                   placeholder="لطفا کد تخفیف خود را وارد نمایید"
                                                   aria-label="لطفا کد تخفیف خود را وارد نمایید"
                                                   aria-describedby="button-addon1">
                                            <button class="btn btn-outline-secondary" type="button" id="apply-discount">
                                                ثبت
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="flush-headingTwo">
                                    <button class="accordion-button collapsed off-section-btn" type="button"
                                            data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo"
                                            aria-expanded="false" aria-controls="flush-collapseTwo">
                                        کارت هدیه
                                    </button>
                                </h2>
                                <div id="flush-collapseTwo" class="accordion-collapse collapse"
                                     aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
                                    <div class="accordion-body accordion-body-custom">
                                        <p class="fw-bold">استفاده از کارت هدیه {{ $config['site_title'] ?? config('app.name') }}</p>
                                        <p>با ثبت کد کارت هدیه، مبلغ کارت هدیه از "مبلغ قابل پرداخت" کسر می‌شود.</p>
                                        @if(!$basket->gift_card_id)
                                            <div class="input-group mb-3">
                                                <input type="text" class="form-control" id="gift-card-code"
                                                       placeholder="لطفا کد هدیه خود را وارد نمایید"
                                                       aria-label="لطفا کد هدیه خود را وارد نمایید"
                                                       aria-describedby="button-addon1">
                                                <button class="btn btn-outline-secondary" type="button"
                                                        id="apply-gift-card">
                                                    ثبت
                                                </button>
                                            </div>
                                        @else
                                            <div class="d-flex justify-content-between align-items-center mt-3">
                                                <div class="text-success">
                                                    <i class="bi bi-check-circle me-2"></i>
                                                    کد هدیه اعمال شده: {{ $basket->giftCard->code }}
                                                </div>
                                                <button class="btn btn-outline-danger btn-sm" type="button"
                                                        id="remove-gift-card">
                                                    <i class="bi bi-x-circle me-1"></i>
                                                    حذف کد هدیه
                                                </button>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-md-4">
                    <div class="cart-summary  bg-gray  p-2">
                        <div class="row g-4">
                            <div class="col-12">
                                <div class="card border-0 bg-gray">
                                    <div class="card-body p-4 mb-4">
                                        <div class="price-summary">
                                            <!-- Original Price -->
                                            <div
                                                class="price-row d-flex justify-content-between align-items-center mb-3 p-2 rounded-3 bg-light">
                                                <span class="text-dark d-flex align-items-center">
                                                    <i class="bi bi-tag me-2 text-primary"></i>
                                                    قیمت کالاها
                                                </span>
                                                <span class="fw-bold text-dark">{{ number_format($basket->total_original_price + $basket->total_discount) }} ریال</span>
                                            </div>

                                            <!-- Discount -->
                                            @if($basket->total_discount > 0)
                                                <div
                                                    class="price-row d-flex justify-content-between align-items-center mb-3 p-2 rounded-3"
                                                    style="background-color: rgba(25, 135, 84, 0.1);">
                                                    <span class="text-success d-flex align-items-center">
                                                        <i class="bi bi-piggy-bank me-2"></i>
                                                        سود شما از خرید
                                                    </span>
                                                    <span class="text-success fw-bold">{{ number_format($basket->total_discount) }}- ریال</span>
                                                </div>
                                            @endif

                                            <!-- Gift Card -->
                                            @if($basket->gift_card_amount)
                                                <div
                                                    class="price-row d-flex justify-content-between align-items-center mb-3 p-2 rounded-3"
                                                    style="background-color: rgba(13, 110, 253, 0.1);">
                                                    <span class="text-primary d-flex align-items-center">
                                                        <i class="bi bi-gift me-2"></i>
                                                        مبلغ کارت هدیه
                                                    </span>
                                                    <span class="text-primary fw-bold">{{ number_format($basket->gift_card_amount) }}- ریال</span>
                                                </div>
                                            @endif

                                            <!-- Shipping Cost -->
                                            @if($basket->total_with_shipping > $basket->total_final_price)
                                                <div
                                                    class="price-row d-flex justify-content-between align-items-center mb-3 p-2 rounded-3 bg-light">
                                                    <span class="text-dark d-flex align-items-center">
                                                        <i class="bi bi-truck me-2 text-primary"></i>
                                                        هزینه ارسال
                                                    </span>
                                                    <span class="fw-bold text-dark">{{ number_format($basket->total_with_shipping - $basket->total_final_price) }} ریال</span>
                                                </div>
                                            @endif

                                            <!-- Total Price -->
                                            <div
                                                class="price-row d-flex justify-content-between align-items-center mt-4 pt-3 border-top border-2">
                                                <span class="fw-bold fs-5 text-dark">مبلغ قابل پرداخت</span>
                                                <span class="fw-bold fs-5 text-primary">{{ number_format($basket->total_with_shipping) }} ریال</span>
                                            </div>

                                            <!-- Item Count -->
                                            <div
                                                class="text-muted small mt-3 d-flex align-items-center p-2 rounded-3 bg-light">
                                                <i class="bi bi-box me-2 text-primary"></i>
                                                تعداد کالا: {{ $basket->basket_total_count }} عدد
                                            </div>
                                        </div>

                                        @if($basket->giftCard)
                                            <div id="gift-card-info"
                                                 class="alert alert-info mt-3 mb-3 d-flex align-items-center"
                                                 style="display: none;">
                                                <i class="bi bi-gift me-2"></i>
                                                <span id="gift-card-amount">کد هدیه: {{$basket->giftCard->code}}</span>
                                            </div>
                                        @endif

                                        @if(\Illuminate\Support\Facades\Auth::guard('customer')->check())
                                            <button type="button"
                                                    class="w-100 btn btn-primary btn-lg mb-4 shadow-sm"
                                                    id="submitOrder">
                                                <span class="submit-order-icon me-2">
                                                    <i class="bi bi-cart-check"></i>
                                                </span>
                                                <span class="submit-order-text">ثبت سفارش</span>
                                                <span class="spinner-border spinner-border-sm ms-2 d-none submit-order-spinner"
                                                      role="status" aria-hidden="true"></span>
                                            </button>
                                        @else
                                            <a href="{{route('customer.login',['basket'=>'true'])}}"
                                               class="text-decoration-none">
                                                <button type="button"
                                                        class="w-100 btn btn-primary btn-lg mb-4 shadow-sm">
                                                    <i class="bi bi-cart-check me-2"></i>
                                                    ادامه ثبت سفارش
                                                </button>
                                            </a>
                                        @endif

                                    </div>
                                    <div class="alert alert-light border mb-0 p-3 d-flex align-items-center">
                                        <i class="bi bi-info-circle me-2 text-primary"></i>
                                        کالاهای موجود در سبد شما ثبت و رزرو نشده‌اند، برای ثبت سفارش مراحل بعدی را تکمیل
                                        کنید
                                    </div>
                                    <div class="d-flex align-items-center mb-3 p-2 mt-3">
                                        <img src="/theme/img/icons/change-warranty.svg" alt="ضمانت تعویض کالا"
                                             class="ms-2">
                                        <span>یک روز ضمانت تعویض</span>
                                    </div>

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


    <div id="order-loading-overlay" class="order-loading-overlay d-none">
        <div class="order-loading-content">
            <div class="spinner-border text-light" role="status" aria-hidden="true"></div>
            <p class="mt-3 mb-0 text-white">در حال ثبت سفارش...</p>
        </div>
    </div>

    <script>
        const submitOrderBtn = $('#submitOrder');
        const submitOrderIcon = submitOrderBtn.find('.submit-order-icon');
        const submitOrderText = submitOrderBtn.find('.submit-order-text');
        const submitOrderSpinner = submitOrderBtn.find('.submit-order-spinner');
        const orderLoadingOverlay = $('#order-loading-overlay');

        const setOrderLoadingState = (isLoading) => {
            if (!submitOrderBtn.length) {
                return;
            }

            if (isLoading) {
                submitOrderBtn.data('loading', true);
                submitOrderBtn.prop('disabled', true).addClass('btn-loading');
                submitOrderIcon.addClass('d-none');
                // submitOrderText.text('در حال ثبت سفارش...');
                submitOrderSpinner.removeClass('d-none');
                orderLoadingOverlay.removeClass('d-none');
            } else {
                submitOrderBtn.data('loading', false);
                submitOrderBtn.prop('disabled', false).removeClass('btn-loading');
                submitOrderIcon.removeClass('d-none');
                submitOrderText.text('ثبت سفارش');
                submitOrderSpinner.addClass('d-none');
                orderLoadingOverlay.addClass('d-none');
            }
        };

        $('#apply-discount').on('click', function () {
            var code = $('#discount-code').val();

            $.ajax({
                url: '{{ route('basket.setDiscount') }}',
                method: 'POST',
                data: {
                    code: code,
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function (data) {
                    showAlert({type: 'success', message: data.message});
                },
                error: function (xhr) {
                    const response = xhr.responseJSON;
                    showAlert({
                        type: 'danger',
                        message: response.message || 'خطایی رخ داده'
                    });
                }
            });
        });

        $('#apply-gift-card').on('click', function () {
            var code = $('#gift-card-code').val();

            $.ajax({
                url: '{{ route('basket.setGiftCard') }}',
                method: 'POST',
                data: {
                    code: code,
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function (response) {
                    if (response.status === 'success') {
                        showAlert({type: 'success', message: response.message});
                        $('#gift-card-info').show();
                        $('#gift-card-amount').text('مبلغ کارت هدیه: ' + response.data.remain_price + ' ریال');
                        // Reload the page to update the total price
                        setTimeout(() => window.location.reload(), 2000);
                    }
                },
                error: function (xhr) {
                    const response = xhr.responseJSON;
                    showAlert({
                        type: 'danger',
                        message: response.message || 'خطایی رخ داده'
                    });
                }
            });
        });

        $('#remove-gift-card').on('click', function () {
            $.ajax({
                url: '{{ route('basket.removeGiftCard') }}',
                method: 'POST',
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function (response) {
                    if (response.status === 'success') {
                        showAlert({type: 'success', message: response.message});
                        // Reload the page to update the total price
                        setTimeout(() => window.location.reload(), 2000);
                    }
                },
                error: function (xhr) {
                    const response = xhr.responseJSON;
                    showAlert({
                        type: 'danger',
                        message: response.message || 'خطایی رخ داده'
                    });
                }
            });
        });

        $('#submitOrder').on('click', function () {
            if (submitOrderBtn.data('loading')) {
                return;
            }

            let basketId = '{{ $basket->id ?? '' }}';
            let paymentMethodId = $('input[name="payment_method_id"]:checked').val();

            if (!paymentMethodId) {
                showAlert({
                    type: 'danger',
                    message: 'لطفا شیوه پرداخت را انتخاب کنید'
                });
                return;
            }

            setOrderLoadingState(true);
            let shouldResetLoading = true;

            $.ajax({
                url: '{{ route('order.store') }}',
                method: 'POST',
                data: {
                    basket_id: basketId,
                    payment_method_id: paymentMethodId,
                    _token: $('meta[name="csrf-token"]').attr('content')
                },
                success: function (response) {
                    if (response.status === 'success') {
                        shouldResetLoading = false;
                        const message = response.message || 'اطلاعات سفارش با موفقیت ثبت شد.';
                        showAlert({type: 'success', message: message});
                        const redirectUrl = response.redirect_url || window.location.href;
                        setTimeout(() => window.location.href = redirectUrl, 1200);
                    } else {
                        showAlert({type: response.status || 'danger', message: response.message});
                    }
                },
                error: function () {
                    showAlert({type: 'danger', message: 'خطایی در ثبت سفارش رخ داده است.'});
                },
                complete: function () {
                    if (shouldResetLoading) {
                        setOrderLoadingState(false);
                    }
                }
            });
        });

        $(document).ready(function () {
            // Add active class to payment method when selected
            $('.payment-radio').change(function () {
                $('.payment-method').removeClass('active');
                $(this).closest('.payment-method').addClass('active');
            });

            // Make the entire payment method card clickable
            $('.payment-method-label').click(function () {
                $(this).find('input[type="radio"]').prop('checked', true).trigger('change');
            });
        });
    </script>
@endsection

@push('styles')
    <style>
        .order-loading-overlay {
            position: fixed;
            inset: 0;
            background: rgba(15, 15, 15, 0.55);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1050;
        }

        .order-loading-content {
            background: rgba(0, 0, 0, 0.85);
            padding: 2rem 2.5rem;
            border-radius: 1.25rem;
            text-align: center;
            color: #fff;
            box-shadow: 0 10px 35px rgba(0, 0, 0, 0.35);
        }

        .order-loading-content .spinner-border {
            width: 2.5rem;
            height: 2.5rem;
        }

        #submitOrder.btn-loading {
            pointer-events: none;
            opacity: 0.85;
        }

        #submitOrder .submit-order-spinner {
            vertical-align: middle;
        }

        .payment-method {
            transition: all 0.3s ease;
            border: 2px solid transparent;
        }

        .payment-method:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
        }

        .payment-radio:checked + .payment-method-label .payment-method {
            border-color: var(--primaryColor);
            background-color: rgba(var(--primaryColor-rgb), 0.05);
        }

        .payment-method-label {
            cursor: pointer;
        }

        .payment-method-label:hover {
            color: var(--primaryColor);
        }

        .payment-icon {
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(var(--primaryColor-rgb), 0.1);
            border-radius: 12px;
        }

        .payment-info h5 {
            font-size: 1.1rem;
            font-weight: 600;
        }

        .payment-info p {
            font-size: 0.9rem;
            line-height: 1.4;
        }

        /* Custom radio button styling */
        .payment-radio {
            width: 20px;
            height: 20px;
            margin-top: 0.3rem;
            border: 2px solid #dee2e6;
            transition: all 0.2s ease;
        }

        .payment-radio:checked {
            background-color: var(--primaryColor);
            border-color: var(--primaryColor);
        }

        .payment-radio:focus {
            box-shadow: 0 0 0 0.25rem rgba(var(--primaryColor-rgb), 0.25);
        }
    </style>
@endpush