@extends('user.layout')

@section('title','ড্রাইভ প্যাক')

@section('content')
@php
    $submittedDrivePack = session('drive_pack_success');

    $isEnabled = (bool)($driveSetting->is_enabled ?? true);
    $currentOperator = strtoupper((string) request('operator'));

    /*
     * Drive Pack operator only.
     * Brilliant / Ryze intentionally removed from UI.
     */
    $allowedDriveOperators = [
        'BL',
        'BANGLALINK',

        'GP',
        'GRAMEENPHONE',

        'RB',
        'ROBI',

        'AR',
        'AT',
        'AIRTEL',

        'TL',
        'TT',
        'TELETALK',

        'SK',
        'SKITTO',
    ];

    $operatorIcons = [
        'BL' => 'bl.png',
        'BANGLALINK' => 'bl.png',

        'GP' => 'gp.png',
        'GRAMEENPHONE' => 'gp.png',

        'RB' => 'rb.png',
        'ROBI' => 'rb.png',

        'AR' => 'ar.png',
        'AT' => 'ar.png',
        'AIRTEL' => 'ar.png',

        'TL' => 'tl.png',
        'TT' => 'tl.png',
        'TELETALK' => 'tl.png',

        'SK' => 'sk.png',
        'SKITTO' => 'sk.png',
    ];

    $operatorImage = function($code) use ($operatorIcons) {
        $code = strtoupper((string)$code);

        if (!isset($operatorIcons[$code])) {
            return null;
        }

        return asset('images/operator/' . $operatorIcons[$code]);
    };

    $operatorNameBn = [
        'BL' => 'বাংলালিংক',
        'GP' => 'গ্রামীণফোন',
        'RB' => 'রবি',
        'AR' => 'এয়ারটেল',
        'AT' => 'এয়ারটেল',
        'TL' => 'টেলিটক',
        'TT' => 'টেলিটক',
        'SK' => 'স্কিটো',
    ];

    $makeFilterUrl = function($operator = null) {
        $query = request()->only('search');

        if ($operator) {
            $query['operator'] = strtoupper((string)$operator);
        }

        return route('user.drive-packs', $query);
    };

    $totalPacks = method_exists($packs, 'total') ? $packs->total() : $packs->count();
    $renderedPacks = 0;
@endphp

<style>
:root{
    --st-primary:#ff5a00;
    --st-deep:#ff303c;
    --st-bg:#f0f4f8;
    --st-card:#ffffff;
    --st-text:#111827;
    --st-muted:#6b7280;
    --st-line:#e5e7eb;
}

.st-drive-page{
    min-height:100vh;
    background:var(--st-bg);
    padding:0 0 calc(var(--footer-h,72px) + 16px);
    color:var(--st-text);
    overflow-x:hidden;
}

.st-filter-sticky{
    position:sticky;
    top:0;
    z-index:20;
    background:#fff;
    border-bottom:1px solid #eef0f4;
    box-shadow:0 2px 8px rgba(15,23,42,.04);
}

.st-filter-inner{
    padding:14px 14px 12px;
}

.st-header-line{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    margin-bottom:12px;
}

.st-page-title{
    margin:0;
    font-size:17px;
    font-weight:900;
    color:#1f2937;
}

.st-pack-count{
    background:#fff4ed;
    color:var(--st-primary);
    border:1px solid rgba(255,90,0,.18);
    border-radius:999px;
    padding:6px 10px;
    font-size:12px;
    font-weight:900;
    white-space:nowrap;
}

.st-operator-grid{
    display:flex;
    flex-wrap:nowrap;
    gap:9px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:2px 2px 6px;
    margin:0 -2px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
}

.st-operator-grid::-webkit-scrollbar{
    display:none;
}

.st-op-btn{
    flex:0 0 62px;
    width:62px;
    height:58px;
    border-radius:15px;
    border:1px solid #e5e7eb;
    background:#f9fafb;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none !important;
    transition:.18s ease;
    box-shadow:0 1px 4px rgba(15,23,42,.03);
    scroll-snap-align:start;
}

.st-op-btn img{
    width:34px;
    height:34px;
    object-fit:contain;
    display:block;
}

.st-op-btn.active{
    border-color:rgba(255,90,0,.35);
    background:linear-gradient(135deg,var(--st-primary),var(--st-deep));
    box-shadow:0 7px 16px rgba(255,90,0,.22);
    transform:translateY(-1px);
}

.st-op-btn.active img{
    filter:drop-shadow(0 2px 4px rgba(0,0,0,.18));
}

.st-op-fallback{
    width:34px;
    height:34px;
    border-radius:12px;
    background:linear-gradient(135deg,var(--st-primary),var(--st-deep));
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:900;
}

.st-op-btn.active .st-op-fallback{
    background:rgba(255,255,255,.18);
    color:#fff;
}

.st-pack-logo .st-op-fallback{
    width:38px;
    height:38px;
}

.st-chip-row{
    margin-top:13px;
    display:flex;
    align-items:center;
    gap:9px;
    overflow-x:auto;
    padding-bottom:2px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
}

.st-chip-row::-webkit-scrollbar{
    display:none;
}

.st-chip{
    flex:0 0 auto;
    min-width:70px;
    height:39px;
    padding:0 17px;
    border-radius:999px;
    border:0;
    background:#f3f4f6;
    color:#4b5563 !important;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none !important;
    font-size:13px;
    font-weight:900;
}

.st-chip.active{
    background:var(--st-primary);
    color:#fff !important;
    box-shadow:0 7px 14px rgba(255,90,0,.22);
}

.st-search-card{
    padding:12px 14px;
    background:#fff;
    border-bottom:1px solid #eef0f4;
}

.st-search-form{
    display:grid;
    grid-template-columns:1fr 45px;
    gap:8px;
}

.st-search-input{
    height:42px;
    border:1px solid #e5e7eb;
    background:#f9fafb;
    border-radius:13px;
    padding:0 13px;
    font-size:14px;
    font-weight:800;
    outline:0;
}

.st-search-input:focus{
    border-color:var(--st-primary);
    background:#fff;
    box-shadow:0 0 0 3px rgba(255,90,0,.10);
}

.st-search-btn{
    height:42px;
    border:0;
    border-radius:13px;
    background:var(--st-primary);
    color:#fff;
    font-size:15px;
    font-weight:900;
}

.st-alert-wrap{
    padding:12px 14px 0;
}

.st-alert{
    border-radius:14px;
    padding:12px 13px;
    font-size:13px;
    font-weight:900;
    line-height:1.45;
    margin-bottom:10px;
}

.st-alert-danger{
    background:#fff1f2;
    color:#be123c;
    border:1px solid #fecdd3;
}

.st-alert-success{
    background:#f0fdf4;
    color:#166534;
    border:1px solid #bbf7d0;
}

.st-list{
    padding:14px;
    display:flex;
    flex-direction:column;
    gap:13px;
}

.st-pack-card{
    width:100%;
    border:0;
    background:#fff;
    border-radius:20px;
    padding:14px;
    box-shadow:0 3px 10px rgba(15,23,42,.05);
    display:grid;
    grid-template-columns:64px 1fr auto;
    align-items:center;
    gap:12px;
    text-align:left;
    cursor:pointer;
    transition:.16s ease;
}

.st-pack-card:active{
    transform:scale(.985);
}

.st-pack-logo{
    width:52px;
    height:52px;
    border-radius:15px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 4px 12px rgba(15,23,42,.06);
}

.st-pack-logo img{
    width:38px;
    height:38px;
    object-fit:contain;
}

.st-pack-title{
    font-size:16px;
    font-weight:900;
    line-height:1.25;
    color:#1f2937;
    margin-bottom:9px;
    word-break:break-word;
}

.st-meta-row{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:6px;
}

.st-meta-pill{
    min-height:26px;
    border-radius:999px;
    padding:5px 10px;
    background:#f3f4f6;
    color:#6b7280;
    font-size:12px;
    font-weight:900;
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.st-meta-pill.orange{
    background:#fff4ed;
    color:var(--st-primary);
}

.st-meta-pill.green{
    background:#f0fdf4;
    color:#15803d;
}

.st-price{
    color:var(--st-primary);
    font-size:20px;
    font-weight:900;
    white-space:nowrap;
    padding-left:5px;
}

.st-empty{
    background:#fff;
    border-radius:20px;
    padding:38px 18px;
    text-align:center;
    box-shadow:0 3px 10px rgba(15,23,42,.05);
}

.st-empty-icon{
    width:62px;
    height:62px;
    border-radius:20px;
    background:#fff4ed;
    color:var(--st-primary);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    margin:0 auto 14px;
}

.st-empty-title{
    font-size:15px;
    font-weight:900;
    color:#1f2937;
}

.st-empty-text{
    margin-top:5px;
    font-size:13px;
    font-weight:800;
    color:#6b7280;
}

.st-pagination{
    display:none;
}

.st-infinite-loader{
    min-height:54px;
    padding:0 14px 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    color:#64748b;
    font-size:13px;
    font-weight:900;
}

.st-infinite-loader.d-none{
    display:none;
}

.st-loader-spinner{
    width:18px;
    height:18px;
    border:3px solid #e5e7eb;
    border-top-color:var(--st-primary);
    border-radius:50%;
    animation:stSpin .7s linear infinite;
}

@keyframes stSpin{
    to{transform:rotate(360deg)}
}

.st-modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(17,24,39,.56);
    z-index:99999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:16px;
}

.st-modal-overlay.show{
    display:flex;
}

.st-modal{
    width:100%;
    max-width:430px;
    max-height:calc(100vh - 32px);
    overflow-y:auto;
    background:#fff;
    border-radius:24px;
    padding:18px 16px 16px;
    box-shadow:0 25px 70px rgba(0,0,0,.25);
    animation:popIn .22s ease;
}

@keyframes popIn{
    from{transform:scale(.92);opacity:0}
    to{transform:scale(1);opacity:1}
}

.st-modal-bar{
    width:44px;
    height:5px;
    border-radius:99px;
    background:#d1d5db;
    margin:0 auto 14px;
}

.st-modal-head{
    display:flex;
    justify-content:space-between;
    gap:12px;
    align-items:flex-start;
    margin-bottom:14px;
}

.st-modal-title{
    font-size:17px;
    font-weight:900;
    color:#111827;
    line-height:1.3;
}

.st-modal-price{
    color:var(--st-primary);
    font-size:20px;
    font-weight:900;
    white-space:nowrap;
}

.st-info-box{
    background:#f9fafb;
    border:1px solid #e5e7eb;
    border-radius:16px;
    padding:10px 12px;
    margin-bottom:12px;
}

.st-info-line{
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:7px 0;
    border-bottom:1px dashed #dbe3ef;
    font-size:13px;
}

.st-info-line:last-child{
    border-bottom:none;
}

.st-info-line span{
    color:#6b7280;
    font-weight:800;
}

.st-info-line strong{
    color:#111827;
    font-weight:900;
    text-align:right;
}

.st-input-label{
    display:block;
    font-size:13px;
    font-weight:900;
    color:#374151;
    margin:0 0 8px;
}

.st-mobile-input{
    width:100%;
    height:46px;
    border:1px solid #e5e7eb;
    background:#f9fafb;
    border-radius:14px;
    padding:0 13px;
    font-size:15px;
    font-weight:900;
    outline:0;
    margin-bottom:12px;
}

.st-mobile-input:focus{
    border-color:var(--st-primary);
    background:#fff;
    box-shadow:0 0 0 3px rgba(255,90,0,.10);
}

.st-modal-actions{
    display:grid;
    grid-template-columns:95px 1fr;
    gap:10px;
}

.st-cancel-btn,
.st-order-btn{
    height:46px;
    border:0;
    border-radius:15px;
    font-size:14px;
    font-weight:900;
}

.st-cancel-btn{
    background:#f3f4f6;
    color:#374151;
}

.st-order-btn{
    background:linear-gradient(135deg,var(--st-primary),var(--st-deep));
    color:#fff;
}

.st-order-btn:disabled{
    background:#cbd5e1;
    cursor:not-allowed;
}

.success-popup-overlay{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.55);
    z-index:999999;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;
}

.success-popup{
    width:100%;
    max-width:390px;
    background:#fff;
    border-radius:22px;
    padding:20px;
    text-align:center;
    box-shadow:0 25px 70px rgba(0,0,0,.25);
    animation:popIn .25s ease;
}

.success-icon{
    width:62px;
    height:62px;
    border-radius:50%;
    margin:0 auto 12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#ecfdf5;
    color:#16a34a;
    font-size:34px;
}

.success-title{
    font-size:19px;
    font-weight:900;
    color:#0f172a;
}

.success-info{
    background:#f8fafc;
    border:1px solid #e2e8f0;
    border-radius:15px;
    padding:10px 12px;
    margin:14px 0;
}

.success-info div{
    display:flex;
    justify-content:space-between;
    gap:10px;
    padding:7px 0;
    border-bottom:1px dashed #dbe3ef;
    font-size:13px;
}

.success-info div:last-child{
    border-bottom:none;
}

.success-info span{
    color:#64748b;
    font-weight:800;
}

.success-info strong{
    color:#0f172a;
    text-align:right;
}

.success-close-btn{
    width:100%;
    height:44px;
    border:0;
    border-radius:14px;
    background:linear-gradient(135deg,var(--st-primary),var(--st-deep));
    color:#fff;
    font-weight:900;
    cursor:pointer;
}

.success-history-link{
    width:100%;
    height:42px;
    margin-top:8px;
    border-radius:14px;
    background:#f8fafc;
    color:var(--st-primary)!important;
    border:1px solid rgba(255,90,0,.20);
    font-size:13px;
    font-weight:900;
    text-decoration:none!important;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
}

@media(max-width:420px){
    .st-filter-inner{
        padding:13px 12px 11px;
    }

    .st-list{
        padding:13px 12px;
        gap:12px;
    }

    .st-pack-card{
        grid-template-columns:58px 1fr auto;
        gap:10px;
        border-radius:19px;
        padding:13px;
    }

    .st-pack-logo{
        width:48px;
        height:48px;
    }

    .st-pack-logo img{
        width:35px;
        height:35px;
    }

    .st-pack-title{
        font-size:15px;
    }

    .st-price{
        font-size:19px;
    }

    .st-modal{
        max-width:100%;
    }
}
</style>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"/>

@if($submittedDrivePack)
    <div class="success-popup-overlay" id="successPopup">
        <div class="success-popup">
            <div class="success-icon">
                <i class="fa-solid fa-circle-check"></i>
            </div>

            <div class="success-title">Drive Pack Request Submitted</div>

            <div class="success-info">
                <div>
                    <span>Amount</span>
                    <strong>৳{{ number_format((float)($submittedDrivePack['amount'] ?? 0), 2) }}</strong>
                </div>

                <div>
                    <span>Mobile</span>
                    <strong>{{ $submittedDrivePack['mobile_number'] ?? '-' }}</strong>
                </div>

                <div>
                    <span>Operator</span>
                    <strong>{{ $submittedDrivePack['operator'] ?? '-' }}</strong>
                </div>

                <div>
                    <span>Pack</span>
                    <strong>{{ $submittedDrivePack['pack'] ?? '-' }}</strong>
                </div>

                <div>
                    <span>Trx ID</span>
                    <strong>{{ $submittedDrivePack['trx_id'] ?? '-' }}</strong>
                </div>

                <div>
                    <span>Status</span>
                    <strong>{{ $submittedDrivePack['status'] ?? 'Processing' }}</strong>
                </div>

                <div>
                    <span>Time</span>
                    <strong>{{ $submittedDrivePack['datetime'] ?? '-' }}</strong>
                </div>
            </div>

            <button type="button" class="success-close-btn" onclick="closeSuccessPopup()">
                ঠিক আছে
            </button>

            <a href="{{ route('user.drive-packs.history') }}" class="success-history-link">
                <i class="fa-solid fa-clock-rotate-left"></i>
                Drive Pack History
            </a>
        </div>
    </div>
@endif

<div class="st-drive-page">

    <div class="st-filter-sticky">
        <div class="st-filter-inner">
            <div class="st-header-line">
                <h1 class="st-page-title">ড্রাইভ প্যাক</h1>

                <div class="st-pack-count">
                    {{ $totalPacks }} প্যাকেজ
                </div>
            </div>

            <div class="st-operator-grid">
                @foreach($operators as $code => $name)
                    @php
                        $codeUpper = strtoupper((string)$code);

                        if (!in_array($codeUpper, $allowedDriveOperators, true)) {
                            continue;
                        }

                        $isActiveOperator = $currentOperator === $codeUpper;
                        $opImg = $operatorImage($codeUpper);
                    @endphp

                    <a
                        href="{{ $makeFilterUrl($codeUpper) }}"
                        class="st-op-btn {{ $isActiveOperator ? 'active' : '' }}"
                        title="{{ $operatorNameBn[$codeUpper] ?? $name }}"
                    >
                        @if($opImg)
                            <img
                                src="{{ $opImg }}"
                                alt="{{ $operatorNameBn[$codeUpper] ?? $name }}"
                                loading="lazy"
                            >
                        @else
                            <span class="st-op-fallback">{{ substr($codeUpper, 0, 2) }}</span>
                        @endif
                    </a>
                @endforeach
            </div>

            <div class="st-chip-row">
                <a href="{{ $makeFilterUrl(null) }}" class="st-chip {{ request('operator') ? '' : 'active' }}">
                    সব
                </a>

                @if(request('operator') && in_array($currentOperator, $allowedDriveOperators, true))
                    <span class="st-chip active">
                        {{ $operatorNameBn[$currentOperator] ?? $currentOperator }}
                    </span>
                @endif

                <a href="{{ route('user.drive-packs.history') }}" class="st-chip">
                    হিস্ট্রি
                </a>
            </div>
        </div>

        <div class="st-search-card">
            <form method="GET" action="{{ route('user.drive-packs') }}" class="st-search-form">
                @if(request('operator') && in_array($currentOperator, $allowedDriveOperators, true))
                    <input type="hidden" name="operator" value="{{ request('operator') }}">
                @endif

                <input
                    type="text"
                    name="search"
                    value="{{ request('search') }}"
                    class="st-search-input"
                    placeholder="প্যাক সার্চ করুন"
                >

                <button type="submit" class="st-search-btn">
                    <i class="fa-solid fa-magnifying-glass"></i>
                </button>
            </form>
        </div>
    </div>

    <div class="st-alert-wrap">
        @if(!$isEnabled)
            <div class="st-alert st-alert-danger">
                ড্রাইভ প্যাক সার্ভিস এখন বন্ধ আছে।
            </div>
        @endif

        @if(session('success'))
            <div class="st-alert st-alert-success">
                {{ session('success') }}
            </div>
        @endif

        @if(session('error'))
            <div class="st-alert st-alert-danger">
                {{ session('error') }}
            </div>
        @endif
    </div>

    <div class="st-list">
        @foreach($packs as $pack)
            @php
                $packOperator = strtoupper((string)($pack->operator ?? ''));

                if (!in_array($packOperator, $allowedDriveOperators, true)) {
                    continue;
                }

                $renderedPacks++;

                $packPrice = method_exists($pack, 'sellPriceFor')
                    ? (float) $pack->sellPriceFor($userType, $driveSetting)
                    : (float)($pack->sell_price ?? $pack->api_price ?? 0);

                $priceText = fmod($packPrice, 1) == 0.0 ? number_format($packPrice, 0) : number_format($packPrice, 2);

                $commissionAmount = (float)($pack->api_commission_amount ?? 0);
                $commissionText = fmod($commissionAmount, 1) == 0.0 ? number_format($commissionAmount, 0) : number_format($commissionAmount, 2);

                $raw = is_array($pack->raw_response ?? null) ? $pack->raw_response : [];

                $rawCategory = strtolower((string)(
                    data_get($raw, 'category')
                    ?? data_get($raw, 'pack_category')
                    ?? data_get($raw, 'offer_category')
                    ?? data_get($raw, 'pack_type')
                    ?? data_get($raw, 'offer_type')
                    ?? ''
                ));

                $categoryBn = match($rawCategory) {
                    'combo', 'bundle', 'bundles' => 'বান্ডেল',
                    'data', 'internet' => 'ডাটা',
                    'voice', 'minute', 'minutes' => 'ভয়েস',
                    'sms' => 'এসএমএস',
                    default => '',
                };

                $validityText = $pack->validity ?: '-';
                $operatorText = $operatorNameBn[$packOperator] ?? ($pack->operator_name ?: ($pack->operator ?: '-'));
                $packOpImg = $operatorImage($packOperator);
            @endphp

            <button
                type="button"
                class="st-pack-card js-open-pack"
                data-pack-id="{{ $pack->id }}"
                data-title="{{ e($pack->title) }}"
                data-operator="{{ e($operatorText) }}"
                data-validity="{{ e($validityText) }}"
                data-price="৳{{ $priceText }}"
                data-commission="৳{{ number_format($commissionAmount, 2) }}"
                data-enabled="{{ $isEnabled ? '1' : '0' }}"
            >
                <div class="st-pack-logo">
                    @if($packOpImg)
                        <img src="{{ $packOpImg }}" alt="{{ $operatorText }}" loading="lazy">
                    @else
                        <span class="st-op-fallback">{{ substr($packOperator, 0, 2) ?: 'DP' }}</span>
                    @endif
                </div>

                <div>
                    <div class="st-pack-title">
                        {{ $pack->title }}
                    </div>

                    <div class="st-meta-row">
                        @if($pack->validity)
                            <span class="st-meta-pill">{{ $pack->validity }}</span>
                        @endif

                        @if($categoryBn)
                            <span class="st-meta-pill orange">{{ $categoryBn }}</span>
                        @endif

                        <span class="st-meta-pill green">
                            কমিশন ৳{{ $commissionText }}
                        </span>
                    </div>
                </div>

                <div class="st-price">
                    ৳{{ $priceText }}
                </div>
            </button>
        @endforeach

        @if($renderedPacks < 1)
            <div class="st-empty">
                <div class="st-empty-icon">
                    <i class="fa-solid fa-box-open"></i>
                </div>

                <div class="st-empty-title">
                    কোনো ড্রাইভ প্যাক পাওয়া যায়নি
                </div>

                <div class="st-empty-text">
                    অপারেটর পরিবর্তন করে আবার চেষ্টা করুন
                </div>
            </div>
        @endif
    </div>

    <div class="st-pagination" id="paginationLinks">
        {{ $packs->appends(request()->query())->links() }}
    </div>

    <div
        id="infiniteLoader"
        class="st-infinite-loader {{ $packs->nextPageUrl() ? '' : 'd-none' }}"
        data-next-url="{{ $packs->nextPageUrl() }}"
    >
        <span class="st-loader-spinner"></span>
        <span>আরও প্যাক লোড হচ্ছে...</span>
    </div>
</div>

<div class="st-modal-overlay" id="packModal">
    <div class="st-modal">
        <div class="st-modal-bar"></div>

        <form method="POST" action="{{ route('user.drive-packs.order') }}" id="driveOrderForm">
            @csrf

            <input type="hidden" name="drive_pack_id" id="modalPackId">

            <div class="st-modal-head">
                <div class="st-modal-title" id="modalPackTitle">-</div>
                <div class="st-modal-price" id="modalPackPrice">৳0</div>
            </div>

            <div class="st-info-box">
                <div class="st-info-line">
                    <span>অপারেটর</span>
                    <strong id="modalPackOperator">-</strong>
                </div>

                <div class="st-info-line">
                    <span>ভ্যালিডিটি</span>
                    <strong id="modalPackValidity">-</strong>
                </div>

                <div class="st-info-line">
                    <span>কমিশন</span>
                    <strong id="modalPackCommission">৳0.00</strong>
                </div>
            </div>

            <label class="st-input-label">মোবাইল নম্বর</label>
            <input
                type="text"
                name="mobile_number"
                id="modalMobileNumber"
                class="st-mobile-input"
                value="{{ old('mobile_number') }}"
                placeholder="01XXXXXXXXX"
                inputmode="numeric"
                maxlength="11"
                autocomplete="off"
            >

            <div class="st-modal-actions">
                <button type="button" class="st-cancel-btn" id="closePackModal">
                    বাতিল
                </button>

                <button type="submit" class="st-order-btn" id="modalOrderBtn" @disabled(!$isEnabled)>
                    অর্ডার করুন
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function closeSuccessPopup(){
    const popup = document.getElementById('successPopup');
    if(popup){
        popup.style.display = 'none';
    }
}

document.addEventListener('DOMContentLoaded', function(){
    const modal = document.getElementById('packModal');
    const closeBtn = document.getElementById('closePackModal');
    const orderForm = document.getElementById('driveOrderForm');
    const orderBtn = document.getElementById('modalOrderBtn');

    const packIdInput = document.getElementById('modalPackId');
    const mobileInput = document.getElementById('modalMobileNumber');

    const titleEl = document.getElementById('modalPackTitle');
    const priceEl = document.getElementById('modalPackPrice');
    const operatorEl = document.getElementById('modalPackOperator');
    const validityEl = document.getElementById('modalPackValidity');
    const commissionEl = document.getElementById('modalPackCommission');

    const list = document.querySelector('.st-list');
    const loader = document.getElementById('infiniteLoader');

    let isLoadingMore = false;
    let nextPageUrl = loader ? loader.dataset.nextUrl : '';

    function normalizeNumber(value){
        value = String(value || '').replace(/[^0-9]/g, '');

        if(value.startsWith('880')){
            value = '0' + value.substring(3);
        }

        return value.substring(0, 11);
    }

    function openModal(card){
        if(!modal) return;

        packIdInput.value = card.dataset.packId || '';
        titleEl.textContent = card.dataset.title || '-';
        priceEl.textContent = card.dataset.price || '৳0';
        operatorEl.textContent = card.dataset.operator || '-';
        validityEl.textContent = card.dataset.validity || '-';

        if(commissionEl){
            commissionEl.textContent = card.dataset.commission || '৳0.00';
        }

        if(orderBtn){
            orderBtn.disabled = card.dataset.enabled !== '1';
            orderBtn.textContent = card.dataset.enabled === '1' ? 'অর্ডার করুন' : 'সার্ভিস বন্ধ';
        }

        if(mobileInput){
            mobileInput.value = normalizeNumber(mobileInput.value);
        }

        modal.classList.add('show');

        setTimeout(function(){
            if(mobileInput) mobileInput.focus();
        }, 180);
    }

    function closeModal(){
        if(!modal) return;
        modal.classList.remove('show');
    }

    if(list){
        list.addEventListener('click', function(e){
            const card = e.target.closest('.js-open-pack');
            if(card){
                openModal(card);
            }
        });
    }

    if(closeBtn){
        closeBtn.addEventListener('click', closeModal);
    }

    if(modal){
        modal.addEventListener('click', function(e){
            if(e.target === modal){
                closeModal();
            }
        });
    }

    document.addEventListener('keydown', function(e){
        if(e.key === 'Escape'){
            closeModal();
        }
    });

    if(mobileInput){
        mobileInput.addEventListener('input', function(){
            mobileInput.value = normalizeNumber(mobileInput.value);
        });
    }

    if(orderForm){
        orderForm.addEventListener('submit', function(e){
            if(mobileInput){
                mobileInput.value = normalizeNumber(mobileInput.value);
            }

            const number = mobileInput ? mobileInput.value : '';

            if(!/^01[0-9]{9}$|^096[0-9]{8}$/.test(number)){
                e.preventDefault();
                alert('সঠিক মোবাইল নম্বর দিন');
                return false;
            }

            if(!packIdInput.value){
                e.preventDefault();
                alert('প্যাকেজ সিলেক্ট করুন');
                return false;
            }

            if(orderBtn){
                orderBtn.disabled = true;
                orderBtn.textContent = 'Processing...';
            }
        });
    }

    async function loadMorePacks(){
        if(isLoadingMore || !nextPageUrl || !list || !loader) return;

        isLoadingMore = true;
        loader.classList.remove('d-none');

        try{
            const response = await fetch(nextPageUrl, {
                method: 'GET',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            });

            const html = await response.text();
            const parser = new DOMParser();
            const doc = parser.parseFromString(html, 'text/html');

            const newCards = doc.querySelectorAll('.st-list .st-pack-card');

            newCards.forEach(function(card){
                list.appendChild(document.importNode(card, true));
            });

            const newLoader = doc.getElementById('infiniteLoader');
            nextPageUrl = newLoader ? (newLoader.dataset.nextUrl || '') : '';

            loader.dataset.nextUrl = nextPageUrl;

            if(!nextPageUrl){
                loader.classList.add('d-none');
            }
        }catch(error){
            console.error('Drive pack load more failed:', error);
        }finally{
            isLoadingMore = false;
        }
    }

    if(loader && nextPageUrl){
        if('IntersectionObserver' in window){
            const observer = new IntersectionObserver(function(entries){
                entries.forEach(function(entry){
                    if(entry.isIntersecting){
                        loadMorePacks();
                    }
                });
            }, {
                root: null,
                rootMargin: '250px',
                threshold: 0
            });

            observer.observe(loader);
        }else{
            window.addEventListener('scroll', function(){
                if((window.innerHeight + window.scrollY) >= (document.body.offsetHeight - 400)){
                    loadMorePacks();
                }
            });
        }
    }
});
</script>
@endsection