@extends('partial.layout')
@section('content')
    @php
        $formatShippingPrice = static function ($value) {
            if ($value === null || $value === '') {
                return '-';
            }

            $value = (int) $value;

            return $value > 0 ? number_format($value) . ' ریال' : 'رایگان';
        };
        $formatCurrency = static function ($value) {
            if ($value === null || $value === '') {
                return '-';
            }

            $value = (int) $value;

            return number_format($value) . ' ریال';
        };

        $formatShippingDescription = static function ($info) use ($formatCurrency) {
            if (!$info) {
                return '';
            }

            if (!empty($info['free_limit'])) {
                return 'رایگان برای سفارش‌های بالای ' . $formatCurrency($info['free_limit']);
            }

            return 'هزینه ارسال ثابت';
        };

        $hasReadyItems = $hasReadyItems ?? false;
        $hasCustomItems = $hasCustomItems ?? false;
    @endphp
    <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">
                    <div class="customer-info">
                        <div class="row">
                            <div class="col-12 col-md-4">
                                گیرنده: {{$customer->first_name." ".$customer->last_name}}</div>
                            <div class="col-12 col-md-4">شماره تماس: {{$customer->mobile}}</div>
                            <div class="col-12 col-md-4">کد ملی: {{$customer->national_code}}</div>
                        </div>
                    </div>
                    @if(count($address) == 0)
                        <div class="address-section">
                            <div class="row">


                                <div class="col-12 text-center mb-3">تا کنون هیچ آدرسی برای شما ثبت نشده است !</div>


                                <div class="col-12 text-center">
                                    <button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal"
                                            data-bs-target="#addAddressModal">
                                        افزودن آدرس
                                    </button>
                                </div>
                            </div>

                        </div>
                    @endif
                    @if(count($address) > 0)
                        <div class="address-section">
                            <div class="row">
                                <div class="col-2 col-md-1 align-content-center">
                                    <img src="/theme/img/icons/address.svg" alt="انتخاب آدرس ارسال"/>
                                </div>
                                <div class="col-10 col-md-9 align-content-center">
                                    <p class="primary__color fw-bold mb-0">ارسال به آدرس انتخاب شده</p>
                                    <p class="mt-0 mb-0" id="address-selected">address selected</p>
                                </div>
                                <div class="col-12 col-md-2 align-content-center text-start ps-4">
                                    <p class="align-content-center primary__color cursor__pointer basket__address__icon"
                                       data-bs-toggle="modal"
                                       data-bs-target="#changeAddressModal">
                                        <i class="fa-duotone fa-solid fa-map-location-dot align-middle"></i>
                                        تغییر آدرس
                                    </p>
                                    <p class="align-content-center primary__color cursor__pointer basket__address__icon mb-0"
                                       data-bs-toggle="modal" data-bs-target="#addAddressModal">
                                        <i class="fa-duotone fa-solid fa-square-dashed-circle-plus align-middle"></i>
                                        افزودن آدرس
                                    </p>
                                </div>
                            </div>
                        </div>
                    @endif

                    <!-- 🚚 بخش انتخاب شیوه ارسال و تاریخ -->
                    <div class="shipping-method mt-4">
                        <div class="shipping-method-selection mb-4">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h5 class="fw-bold mb-0">شیوه ارسال</h5>
                                <small class="text-muted">ابتدا روش ارسال متناسب با آدرس انتخابی را مشخص کنید.</small>
                            </div>

                            <div id="noShippingMessage" class="alert alert-warning {{ $hasShippingForCurrentArea ? 'd-none' : '' }}">
                                شیوه ارسال متناسب با آدرس انتخاب‌شده در دسترس نیست.
                            </div>

                            <div id="shippingOptionsContainer" class="row row-cols-1 row-cols-md-2 g-3">
                                @forelse($shipmentsForView as $shipmentOption)
                                @php
                                    $supportsCurrentArea = $shipmentOption['supports_' . $activeAreaKey] ?? false;
                                    $isActiveShipment = $activeShipmentId !== null && (string)$activeShipmentId === (string)$shipmentOption['id'];
                                    $initialShipmentData = collect($shippingOptionsData[$activeAreaKey]['shipments'] ?? [])
                                        ->firstWhere('id', (string)$shipmentOption['id']);
                                @endphp
                                    <div class="col shipping-option-wrapper {{ $supportsCurrentArea ? '' : 'd-none' }}" data-shipment-wrapper="{{ $shipmentOption['id'] }}">
                                        <div class="shipping-option-card {{ $supportsCurrentArea ? '' : 'd-none' }} {{ $isActiveShipment ? 'active' : '' }}" data-shipment-id="{{ $shipmentOption['id'] }}">
                                            <div class="d-flex align-items-center justify-content-between mb-2">
                                                <div class="form-check mb-0">
                                                    <input class="form-check-input shipping-option-radio" type="radio" name="selected_shipment_id" id="shipment-option-{{ $shipmentOption['id'] }}" value="{{ $shipmentOption['id'] }}" {{ $isActiveShipment ? 'checked' : '' }}>
                                                    <label class="form-check-label fw-bold" for="shipment-option-{{ $shipmentOption['id'] }}">{{ $shipmentOption['title'] }}</label>
                                                </div>
                                            </div>
                                            <div class="d-flex justify-content-between align-items-center">
                                                <div class="text-muted small" data-role="shipping-description">{{ $formatShippingDescription($initialShipmentData) }}</div>
                                                <div class="shipping-option-price fw-bold" data-role="shipping-price-display">{{ $formatShippingPrice($initialShipmentData['rate'] ?? null) }}</div>
                                            </div>
                                        </div>
                                    </div>
                                @empty
                                    <div class="col-12">
                                        <div class="alert alert-warning mb-0">هیچ شیوه ارسال فعالی ثبت نشده است.</div>
                                    </div>
                                @endforelse
                            </div>
                        </div>

                        <div id="shippingPlaceholder" class="alert alert-info {{ $activeShipmentData ? 'd-none' : '' }}">
                            لطفاً ابتدا شیوه ارسال را انتخاب کنید تا تاریخ‌های ارسال نمایش داده شود.
                        </div>

                        <div id="shippingTabsContainer" class="{{ $activeShipmentData ? '' : 'd-none' }}">
                            <div class="mb-4 d-flex">
                                <div class="shipping-tab active" data-tab="group">ارسال گروهی محصولات</div>
                                @if(count($basket->items) > 1)
                                    <div class="shipping-tab" data-tab="separate_all">ارسال جداگانه</div>
                                    @if($hasReadyItems && $hasCustomItems)
                                        <div class="shipping-tab" data-tab="separate_by_Inventory">ارسال جداگانه محصولات موجود</div>
                                    @endif
                                @endif
                            </div>

                            <div id="tab-group" class="shipping-content">
                                <p class="fw-bold">تاریخ‌های پیشنهادی برای ارسال گروهی:</p>
                                <div class="row">
                                    @foreach($dates_for_custom_made as $index => $date)
                                        <div class="col-md-3 mb-3">
                                            <input type="radio" class="custom-radio" name="shipping_all"
                                                   id="shipping_all_{{ $index }}" value="{{ $date['full_date'] }}">
                                            <label class="custom-radio-label" for="shipping_all_{{ $index }}">
                                                <strong>{{ $date['day_name'] }}</strong><br>{{ $date['full_date'] }}
                                                <br>
                                                <p class="shipping-price" data-shipping-price="group">{{ $formatShippingPrice($activeShipmentData['group_cost'] ?? null) }}</p>
                                            </label>
                                        </div>
                                    @endforeach
                                </div>
                            </div>

                            @if(count($basket->items) > 1)
                                <div id="tab-separate_all" class="shipping-content d-none">
                                    <p class="fw-bold">ارسال جداگانه برای هر محصول:</p>
                                    @foreach($basket->items as $item)
                                        <div class="mb-3 border-bottom pb-2">
                                            <div class="mb-2 position-relative">
                                                {{ $item->product->title }}
                                                @if($item->product_item_id)
                                                    <span class="badge bg-success cart__product__type position-absolute">محصول آماده ارسال</span>
                                                @else
                                                    <span class="badge bg-custom-warning text-dark cart__product__type position-absolute">محصول سفارشی</span>
                                                @endif
                                            </div>
                                            <div class="row">
                                                @foreach($dates_for_each_item[$item->id] as $index => $date)
                                                    <div class="col-md-3 mb-2">
                                                        <input type="radio" class="custom-radio"
                                                               name="shipping_item_{{ $item->id }}"
                                                               id="shipping_item_{{ $item->id }}_{{ $index }}"
                                                               value="{{ $date['full_date'] }}">
                                                        <label class="custom-radio-label"
                                                               for="shipping_item_{{ $item->id }}_{{ $index }}">
                                                            <strong>{{ $date['day_name'] }}</strong><br>{{ $date['full_date'] }}
                                                            <br>
                                                            <p class="shipping-price" data-shipping-price="separate-item" data-item-id="{{ $item->id }}">
                                                                {{ $formatShippingPrice($activeShipmentData['separate_all']['items'][$item->id] ?? null) }}
                                                            </p>
                                                        </label>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    @endforeach
                                </div>

                                @if($hasReadyItems && $hasCustomItems)
                                    <div id="tab-separate_by_Inventory" class="shipping-content d-none">
                                        <p class="fw-bold">ارسال سریع‌تر محصولات موجود:</p>
                                        <div class="row mb-3">
                                            @foreach($dates_for_ready_items as $index => $date)
                                                <div class="col-md-3 mb-2">
                                                    <input type="radio" class="custom-radio" name="shipping_ready"
                                                           id="shipping_ready_{{ $index }}"
                                                           value="{{ $date['full_date'] }}">
                                                    <label class="custom-radio-label" for="shipping_ready_{{ $index }}">
                                                        <strong>{{ $date['day_name'] }}</strong><br>{{ $date['full_date'] }}
                                                        <br>
                                                        <p class="shipping-price" data-shipping-price="ready">{{ $formatShippingPrice($activeShipmentData['separate_by_inventory']['ready_cost'] ?? null) }}</p>
                                                    </label>
                                                </div>
                                            @endforeach
                                        </div>

                                        <p class="text-bold">سایر محصولات (محصولات سفارشی) بعداً ارسال خواهند شد:</p>
                                        <div class="row">
                                            @foreach($dates_for_custom_made as $index => $date)
                                                <div class="col-md-3 mb-2">
                                                    <input type="radio" class="custom-radio" name="shipping_custom_late"
                                                           id="shipping_custom_late_{{ $index }}"
                                                           value="{{ $date['full_date'] }}">
                                                    <label class="custom-radio-label" for="shipping_custom_late_{{ $index }}">
                                                        <strong>{{ $date['day_name'] }}</strong><br>{{ $date['full_date'] }}
                                                        <br>
                                                        <p class="shipping-price" data-shipping-price="custom">{{ $formatShippingPrice($activeShipmentData['separate_by_inventory']['custom_cost'] ?? null) }}</p>
                                                    </label>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif
                            @endif
                        </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-2 mb-4">
                                        <p class="fw-bold mb-2">
                                            مبلغ قابل پرداخت ({{ $basket->basket_total_count }}) :
                                            {{ number_format($basket->total_final_price) }} ریال
                                        </p>

                                        @if($basket->total_discount > 0)
                                            <p class="secondary-color mb-5 mt-3">
                                                <i class="bi bi-piggy-bank me-1"></i>
                                                سود شما از این خرید : {{ number_format($basket->total_discount) }} ریال
                                            </p>
                                        @endif
                                        @if(\Illuminate\Support\Facades\Auth::guard('customer')->check())
                                            <button type="button" class="w-100 btn btn-auth btn-block mb-5"
                                                    id="submitShippingChoice">
                                                <i class="bi bi-cart-check me-1"></i>
                                                ادامه ثبت سفارش
                                            </button>
                                        @else
                                            <a href="{{route('customer.login',['basket'=>'true'])}}">
                                                <button type="button" class="w-100 btn btn-auth btn-block mb-5">
                                                    <i class="bi bi-cart-check me-1"></i>
                                                    ادامه ثبت سفارش
                                                </button>
                                            </a>
                                        @endif

                                    </div>
                                    <div class="mb-0 p-2">
                                        کالاهای موجود در سبد شما ثبت و رزرو نشده‌اند، برای ثبت سفارش مراحل بعدی را
                                        تکمیل کنید
                                    </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 class="modal fade" id="addAddressModal" tabindex="-1" aria-labelledby="addAddressModalLabel"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title w-100" id="addAddressModalLabel">افزودن آدرس جدید</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="{{ route('customer.address.store') }}" method="POST">
                    @csrf
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="city_id" class="form-label">شهر</label>
                            <select class="form-select" id="city_id" name="city_id" required>
                                <option value="">انتخاب شهر</option>
                                @foreach($cities as $city)
                                    <option value="{{ $city->id }}">{{ $city->title }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="postal_code" class="form-label">کد پستی</label>
                            <input type="text" class="form-control" id="postal_code" name="postal_code" required>
                        </div>
                        <div class="mb-3">
                            <label for="address" class="form-label">آدرس</label>
                            <textarea class="form-control" id="address" name="address" rows="3" required></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">انصراف</button>
                        <button type="submit" class="btn btn-primary">ذخیره</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade" id="changeAddressModal" tabindex="-1" aria-labelledby="changeAddressModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5 w-100" id="changeAddressModalLabel">انتخاب آدرس</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <P class="fw-bold secondary-color">لیست آدرس های شما:</P>
                    @foreach($address as $item)
                        <div class="form-check">
                            <input class="form-check-input address-radio" type="radio" name="flexRadioDefault"
                                   id="setAddress-{{$item->id}}"
                                   data-address="{{$item->address}}"
                                   data-address-id="{{$item->id}}"
                                   data-is-tehran="{{ $item->is_tehran ? 1 : 0 }}"
                                   {{ ($selectedAddressId === $item->id) ? 'checked' : '' }}>
                            <label class="form-check-label" for="setAddress-{{$item->id}}">
                                آدرس: {{$item->city->title}} - {{$item->address}}
                            </label>
                        </div>
                    @endforeach


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">انصراف</button>
                    <button type="button" class="btn btn-primary" data-bs-dismiss="modal">ذخیره آدرس</button>
                </div>
            </div>
        </div>
    </div>

    {{--    <div class="modal fade" id="timeSelectionModal" tabindex="-1" aria-labelledby="timeSelectionModalLabel" aria-hidden="true">--}}
    {{--        <div class="modal-dialog">--}}
    {{--            <div class="modal-content">--}}
    {{--                <div class="modal-header">--}}
    {{--                    <h5 class="modal-title w-100" id="timeSelectionModalLabel">انتخاب زمان تحویل</h5>--}}
    {{--                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="بستن"></button>--}}
    {{--                </div>--}}
    {{--                <div class="modal-body">--}}
    {{--                    <div id="timeSelectionContent" class="row">--}}
    {{--                        @foreach($dates as $date)--}}
    {{--                            <div class="col-6 col-md-6 p-2 text-center">--}}
    {{--                                <input type="radio" name="selected_time" id="modal-date-{{$loop->index}}" value="{{$date['full_date']}}" class="d-none">--}}
    {{--                                <div class="shipment-item" data-date-value="{{$date['full_date']}}">--}}
    {{--                                    <p class="shipping-label">{{$date['day_name']}}</p>--}}
    {{--                                    <p class="shipping-label">{{$date['day_number']}} {{$date['month_name']}}</p>--}}
    {{--                                    <p class="shipping-price">رایگان</p>--}}
    {{--                                </div>--}}
    {{--                            </div>--}}
    {{--                        @endforeach--}}
    {{--                    </div>--}}
    {{--                </div>--}}
    {{--            </div>--}}
    {{--        </div>--}}
    {{--    </div>--}}



    @push('scripts')
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const shippingOptions = @json($shippingOptionsData);
                const htmlDecoder = document.createElement('textarea');
                const decodeHtml = (value) => {
                    if (typeof value !== 'string') {
                        return value;
                    }
                    htmlDecoder.innerHTML = value;
                    return htmlDecoder.value;
                };
                let selectedArea = '{{ $activeAreaKey }}';
                const initialShipmentId = @json($activeShipmentId !== null ? (string) $activeShipmentId : null);
                let selectedShipmentId = initialShipmentId !== null ? String(initialShipmentId) : null;
                const shippingTabsContainer = document.getElementById('shippingTabsContainer');
                const shippingPlaceholder = document.getElementById('shippingPlaceholder');
                const noShippingMessage = document.getElementById('noShippingMessage');
                const shippingCards = Array.from(document.querySelectorAll('.shipping-option-card'));
                const addressSelectedLabel = document.getElementById('address-selected');

                const formatNumberWithLocale = (number) => {
                    if (Number.isNaN(number)) {
                        return null;
                    }

                    const locales = ['fa-IR', 'en-US'];

                    for (const locale of locales) {
                        try {
                            return number.toLocaleString(locale);
                        } catch (error) {
                            continue;
                        }
                    }

                    return number.toString();
                };

                const formatCurrency = (value) => {
                    const number = Number(value);
                    if (Number.isNaN(number)) {
                        return '-';
                    }

                    const formatted = formatNumberWithLocale(number);

                    return formatted ? decodeHtml(`${formatted} ریال`) : '-';
                };

                const formatPriceLabel = (value) => {
                    if (value === null || value === undefined) {
                        return '-';
                    }
                    const number = Number(value);
                    if (Number.isNaN(number)) {
                        return '-';
                    }
                    return number > 0 ? formatCurrency(number) : decodeHtml('رایگان');
                };

                const getShipmentData = (area, shipmentId) => {
                    if (!shipmentId) {
                        return null;
                    }
                    const areaData = (shippingOptions && shippingOptions[area]) ? shippingOptions[area] : {};
                    const shipments = areaData.shipments;

                    if (!shipments) {
                        return null;
                    }

                    if (Array.isArray(shipments)) {
                        const found = shipments.find((entry) => entry && String(entry.id) === String(shipmentId));
                        return found || null;
                    }

                    if (Object.prototype.hasOwnProperty.call(shipments, shipmentId)) {
                        return shipments[shipmentId];
                    }

                    const normalizedKey = Object.keys(shipments).find((key) => String(key) === String(shipmentId));
                    return normalizedKey ? shipments[normalizedKey] : null;
                };

                const updateCardPrices = () => {
                    shippingCards.forEach((card) => {
                        const shipmentId = card.dataset.shipmentId;
                        const info = getShipmentData(selectedArea, shipmentId);
                        const priceEl = card.querySelector('[data-role="shipping-price-display"]');
                        const descEl = card.querySelector('[data-role="shipping-description"]');

                        if (!info) {
                            if (priceEl) priceEl.textContent = '-';
                            if (descEl) descEl.textContent = '';
                            return;
                        }

                        if (priceEl) {
                            priceEl.textContent = decodeHtml(formatPriceLabel(info.rate ?? 0));
                        }

                        if (descEl) {
                            if (info.free_limit) {
                                descEl.textContent = decodeHtml(`رایگان برای سفارش‌های بالای ${formatCurrency(info.free_limit)}`);
                            } else {
                                descEl.textContent = decodeHtml('هزینه ارسال ثابت');
                            }
                        }
                    });
                };

                const refreshShippingCards = () => {
                    shippingCards.forEach((card) => {
                        const shipmentId = card.dataset.shipmentId;
                        const info = getShipmentData(selectedArea, shipmentId);
                        const available = !!info;
                        card.classList.toggle('d-none', !available);
                        const wrapper = card.closest('.shipping-option-wrapper');
                        if (wrapper) {
                            wrapper.classList.toggle('d-none', !available);
                        }
                        if (!available) {
                            card.classList.remove('active');
                            const radio = card.querySelector('.shipping-option-radio');
                            if (radio) {
                                radio.checked = false;
                            }
                        }
                    });
                };

                const ensureActiveShipment = () => {
                    const info = getShipmentData(selectedArea, selectedShipmentId);
                    if (info) {
                        return;
                    }
                    const firstVisible = shippingCards.find(card => !card.classList.contains('d-none'));
                    selectedShipmentId = firstVisible && firstVisible.dataset.shipmentId
                        ? String(firstVisible.dataset.shipmentId)
                        : null;
                };

                const updateSelectedCardUI = () => {
                    shippingCards.forEach((card) => {
                        const isActive = selectedShipmentId && card.dataset.shipmentId === selectedShipmentId;
                        card.classList.toggle('active', !!isActive);
                        const radio = card.querySelector('.shipping-option-radio');
                        if (radio) {
                            radio.checked = !!isActive;
                        }
                    });
                };

                const updateShippingPriceLabels = () => {
                    const info = getShipmentData(selectedArea, selectedShipmentId);
                    const groupCost = info ? info.group_cost ?? info.rate ?? 0 : null;

                    document.querySelectorAll('[data-shipping-price="group"]').forEach((el) => {
                        el.textContent = decodeHtml(formatPriceLabel(groupCost));
                    });

                    document.querySelectorAll('[data-shipping-price="ready"]').forEach((el) => {
                        const cost = info?.separate_by_inventory?.ready_cost ?? null;
                        el.textContent = decodeHtml(formatPriceLabel(cost));
                    });

                    document.querySelectorAll('[data-shipping-price="custom"]').forEach((el) => {
                        const cost = info?.separate_by_inventory?.custom_cost ?? null;
                        el.textContent = decodeHtml(formatPriceLabel(cost));
                    });

                    document.querySelectorAll('[data-shipping-price="separate-item"]').forEach((el) => {
                        const itemId = el.dataset.itemId;
                        const cost = info?.separate_all?.items?.[itemId] ?? null;
                        el.textContent = decodeHtml(formatPriceLabel(cost));
                    });
                };

                const toggleShippingTabsAvailability = () => {
                    const hasAnyShipment = shippingCards.some(card => !card.classList.contains('d-none'));
                    if (noShippingMessage) {
                        noShippingMessage.classList.toggle('d-none', hasAnyShipment);
                    }

                    const hasSelection = !!getShipmentData(selectedArea, selectedShipmentId);
                    if (shippingTabsContainer) {
                        shippingTabsContainer.classList.toggle('d-none', !hasSelection);
                    }
                    if (shippingPlaceholder) {
                        shippingPlaceholder.classList.toggle('d-none', hasSelection);
                    }
                };

                const syncShippingState = () => {
                    refreshShippingCards();
                    ensureActiveShipment();
                    updateCardPrices();
                    updateSelectedCardUI();
                    updateShippingPriceLabels();
                    toggleShippingTabsAvailability();
                };

                const initialAddress = document.querySelector('.address-radio:checked');
                if (initialAddress && addressSelectedLabel) {
                    addressSelectedLabel.textContent = decodeHtml(initialAddress.dataset.address || '');
                }

                syncShippingState();

                shippingCards.forEach((card) => {
                    card.addEventListener('click', function () {
                        if (card.classList.contains('d-none')) {
                            return;
                        }
                        selectedShipmentId = card.dataset.shipmentId ? String(card.dataset.shipmentId) : null;
                        updateSelectedCardUI();
                        updateShippingPriceLabels();
                        toggleShippingTabsAvailability();
                    });

                    const radio = card.querySelector('.shipping-option-radio');
                    if (radio) {
                        radio.addEventListener('click', function (event) {
                            event.stopPropagation();
                            if (card.classList.contains('d-none')) {
                                return;
                            }
                            selectedShipmentId = card.dataset.shipmentId ? String(card.dataset.shipmentId) : null;
                            updateSelectedCardUI();
                            updateShippingPriceLabels();
                            toggleShippingTabsAvailability();
                        });
                    }
                });

                $('.address-radio').on('change', function () {
                    const selectedAddressText = $(this).data('address') || '';
                    if (addressSelectedLabel) {
                        addressSelectedLabel.textContent = decodeHtml(selectedAddressText);
                    }
                    const isTehran = $(this).attr('data-is-tehran') === '1';
                    selectedArea = isTehran ? 'tehran' : 'outside';
                    syncShippingState();
                });

                $('.shipping-tab').on('click', function () {
                    $('.shipping-tab').removeClass('active');
                    $(this).addClass('active');

                    const selectedTab = $(this).data('tab');
                    $('.shipping-content').addClass('d-none');
                    $('#tab-' + selectedTab).removeClass('d-none');
                });

                $('#submitShippingChoice').on('click', function () {
                    if (!selectedShipmentId) {
                        showAlert({type: 'warning', message: 'لطفاً ابتدا شیوه ارسال را انتخاب کنید'});
                        return;
                    }

                    const activeTab = $('.shipping-tab.active').data('tab');
                    const dataToSend = {
                        tab: activeTab,
                        address_id: $('.address-radio:checked').data('address-id'),
                        shipment_id: selectedShipmentId,
                    };

                    if (activeTab === 'group') {
                        dataToSend.date = $('input[name="shipping_all"]:checked').val();
                    } else if (activeTab === 'separate_all') {
                        dataToSend.items = {};
                        $('[name^="shipping_item_"]:checked').each(function () {
                            const itemId = $(this).attr('name').replace('shipping_item_', '');
                            dataToSend.items[itemId] = $(this).val();
                        });
                    } else if (activeTab === 'separate_by_Inventory') {
                        dataToSend.ready = $('input[name="shipping_ready"]:checked').val();
                        dataToSend.custom = $('input[name="shipping_custom_late"]:checked').val();
                    }

                    $.ajax({
                        url: '{{ route("basket.setTime") }}',
                        type: 'POST',
                        data: dataToSend,
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        },
                        success: function (response) {
                            const message = response.message || 'اطلاعات ارسال با موفقیت ذخیره شد';
                            showAlert({type: 'success', message: message});
                            setTimeout(() => window.location.href = response.redirect_url, 1200);
                        },
                        error: function (xhr) {
                            const response = xhr.responseJSON || {};
                            showAlert({
                                type: 'danger',
                                message: response.message || 'خطایی رخ داده'
                            });
                        }
                    });
                });
            });

            document.addEventListener('DOMContentLoaded', function () {
                const addAddressForm = document.querySelector('#addAddressModal form');
                if (addAddressForm) {
                    addAddressForm.addEventListener('submit', async function (e) {
                        e.preventDefault();

                        try {
                            const city = document.querySelector('[name="city_id"]');
                            const postal = document.querySelector('[name="postal_code"]');
                            const address = document.querySelector('[name="address"]');

                            if (!city || !postal || !address) {
                                showAlert({type: 'danger', message: 'اطلاعات ناقص است.'});
                                return;
                            }

                            let dataToSend = {
                                city_id: city.value,
                                postal_code: postal.value,
                                address: address.value
                            };

                            const response = await fetch(this.action, {
                                method: 'POST',
                                body: JSON.stringify(dataToSend),
                                headers: {
                                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                                    'X-Requested-With': 'XMLHttpRequest',
                                    'Accept': 'application/json',
                                    'Content-Type': 'application/json'
                                }
                            });

                            const result = await response.json();

                            if (response.ok) {
                                bootstrap.Modal.getInstance(document.getElementById('addAddressModal')).hide();
                                showAlert({type: 'success', message: result.message || 'آدرس با موفقیت اضافه شد'});
                                setTimeout(() => window.location.reload(), 2000);
                            } else {
                                showAlert({type: 'danger', message: result.message || 'خطا در افزودن آدرس'});
                            }
                        } catch (error) {
                            showAlert({type: 'danger', message: 'خطا در ارتباط با سرور'});
                            console.error('Error:', error);
                        }
                    });
                }
            });
        </script>
    @endpush
    @push('styles')
        <style>
            .custom-radio {
                display: none;
            }

            .custom-radio-label {
                display: block;
                border: 2px solid var(--secondaryColor);
                border-radius: 10px;
                padding: 15px;
                text-align: center;
                cursor: pointer;
                transition: all 0.2s ease;
                background-color: #fff;
                color: #333;
            }

            .custom-radio:checked + .custom-radio-label {
                background-color: var(--secondaryColor);
                color: #fff;
            }

            .custom-radio-label:hover {
                background-color: #f3e5f5;
            }

            .time-label.selected {
                background-color: var(--primaryColor);
                color: white;
            }

            .item-quantity:focus {
                border-color: #0d6efd;
                box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
            }

            .shipment-item {
                cursor: pointer;
                border: 1px solid #dee2e6;
                border-radius: 0.25rem;
                padding: 0.5rem;
                transition: all 0.3s ease;
            }

            .shipment-item:hover {
                /*border-color: #0d6efd;*/
                /*background-color: #f8f9fa;*/
            }

            .shipment-item.selected {
                /*border-color: #0d6efd;*/
                /*background-color: #e7f1ff;*/
            }

            .product-title-cart {
                height: 50px;
            }

            .shipping-tab {
                border: 1px solid var(--secondaryColor);
                color: var(--secondaryColor);
                background: #fff;
                padding: 8px 20px;
                border-radius: 8px;
                cursor: pointer;
                margin-left: 10px;
                transition: all 0.2s ease;
            }

            .shipping-tab.active {
                background: var(--secondaryColor);
                color: #fff;
            }

            .shipping-option-card {
                border: 1px solid #e0e0e0;
                border-radius: 12px;
                padding: 16px;
                background-color: #fff;
                cursor: pointer;
                transition: all 0.2s ease;
                height: 100%;
            }

            .shipping-option-card:hover {
                border-color: var(--secondaryColor);
                box-shadow: 0 8px 16px rgba(60, 68, 86, 0.08);
            }

            .shipping-option-card.active {
                border-color: var(--secondaryColor);
                box-shadow: 0 10px 20px rgba(60, 68, 86, 0.12);
            }

            .shipping-option-card .form-check-input,
            .shipping-option-card .form-check-label {
                cursor: pointer;
            }

            .shipping-option-price {
                color: var(--primaryColor);
            }

        </style>

    @endpush
@endsection