@extends('root')
@section('title', 'Add-ons')

@push('styles')
<style>
    .addon-hero {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 16px;
        position: relative;
        overflow: hidden;
    }
    .addon-hero::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -20%;
        width: 400px;
        height: 400px;
        background: rgba(255,255,255,0.1);
        border-radius: 50%;
    }
    .addon-hero::after {
        content: '';
        position: absolute;
        bottom: -30%;
        left: -10%;
        width: 300px;
        height: 300px;
        background: rgba(255,255,255,0.05);
        border-radius: 50%;
    }
    .stat-card {
        background: rgba(255,255,255,0.15);
        backdrop-filter: blur(10px);
        border-radius: 12px;
        padding: 1.25rem;
        border: 1px solid rgba(255,255,255,0.2);
        transition: transform 0.2s, box-shadow 0.2s;
    }
    .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }
    .stat-value {
        font-size: 2rem;
        font-weight: 700;
        line-height: 1.2;
    }
    .stat-label {
        font-size: 0.85rem;
        opacity: 0.9;
    }
    .progress-ring {
        width: 120px;
        height: 120px;
    }
    .progress-ring-circle {
        transition: stroke-dashoffset 0.5s ease;
        transform: rotate(-90deg);
        transform-origin: 50% 50%;
    }
    .action-btn {
        border-radius: 10px;
        padding: 0.75rem 1.25rem;
        font-weight: 600;
        transition: all 0.2s;
    }
    .action-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    }
    .balance-card {
        background: linear-gradient(135deg, #11998e 0%, #11998e 100%);
        border-radius: 16px;
        color: white;
    }
    .transaction-item {
        transition: background 0.2s;
        border-left: 3px solid transparent;
    }
    .transaction-item:hover {
        background: #f8f9fa;
        border-left-color: #667eea;
    }
    .download-badge {
        background: rgba(255,255,255,0.25);
        backdrop-filter: blur(5px);
        border-radius: 8px;
        padding: 0.5rem 1rem;
        transition: all 0.2s;
    }
    .download-badge:hover {
        background: rgba(255,255,255,0.4);
        transform: scale(1.02);
    }
    .empty-state-icon {
        width: 120px;
        height: 120px;
        background: linear-gradient(135deg, #e0e5ec 0%, #f5f7fa 100%);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1.5rem;
    }
    .feature-list li {
        padding: 0.5rem 0;
        border-bottom: 1px solid #eee;
    }
    .feature-list li:last-child {
        border-bottom: none;
    }
    .feature-list li i {
        width: 24px;
    }
</style>
@endpush

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Add-ons',
        'links' => [
            ['url' => route('client.dashboard'), 'label' => 'Dashboard'],
        ],
        'current' => 'Add-ons'
    ])

    <div class="row">
        {{-- Main Content --}}
        <div class="col-lg-8">
            {{-- Loading State --}}
            <div id="loading-state" class="card">
                <div class="card-body text-center py-5">
                    <div class="spinner-border text-primary mb-3" role="status" style="width: 3rem; height: 3rem;"></div>
                    <p class="text-muted mb-0">Memuat data add-ons...</p>
                </div>
            </div>

            {{-- No Addon State --}}
            <div id="no-addon-state" style="display: none;">
                <div class="card border-0 shadow-sm overflow-hidden text-center p-5 animated-card" style="background: white;">
                    <div class="wc-brand-icon">
                        <img src="{{ url($setting->logo??'') }}" alt="{{ $setting->website_name ?? 'MeeChat' }} Logo" width="40" height="40" style="width: 40px; height: 40px; object-fit: contain;" fetchpriority="high">
                    </div>
                    <h3 class="fw-bold mb-2">Mobile Agent Access</h3>
                    <p class="text-muted mb-4 mx-auto" style="max-width: 400px;">
                        Berikan akses kepada agent Anda untuk membalas chat pelanggan langsung dari smartphone.
                    </p>
                    <a href="https://drive.google.com/drive/folders/1S-rVQUBJJPMWnjCHXSKsflMhS_HT4JSv?usp=drive_link" class="btn btn-info btn-sm action-btn mb-3">Download apk</a>
                    
                    <ul class="feature-list list-unstyled text-start mx-auto mb-4" style="max-width: 350px;">
                        <li><i class="ti ti-check text-success me-2"></i> Balas chat dari mana saja</li>
                        <li><i class="ti ti-check text-success me-2"></i> Real-time notifikasi</li>
                        <li><i class="ti ti-check text-success me-2"></i> Sinkronisasi otomatis</li>
                    </ul>

                    <div class="price-tag mb-4">
                        <span class="text-muted">Mulai dari</span>
                        <h2 class="fw-bold text-primary mb-0">
                            <span id="starting-price">Rp 0</span><small class="fs-6 text-muted fw-normal">/bulan</small>
                        </h2>
                    </div>

                    <button class="btn btn-primary btn-lg rounded-pill px-5 shadow-sm hover-scale" data-bs-toggle="modal" data-bs-target="#purchaseModal">
                        <i class="ti ti-shopping-cart me-2"></i> Aktifkan Sekarang
                    </button>
                </div>
            </div>

            {{-- Active Addon State --}}
            <div id="active-addon-state" style="display:none;">
                {{-- Hero Card --}}
                <div class="addon-hero text-white p-4 mb-4">
                    <div class="row align-items-center position-relative" style="z-index: 1;">
                        <div class="col-md-8">
                            <div class="d-flex align-items-center mb-3">
                                <div class="rounded-circle bg-white bg-opacity-25 p-2 me-3">
                                    <i class="ti ti-device-mobile fs-4"></i>
                                </div>
                                <div>
                                    <h4 class="mb-0 text-white">Mobile Access</h4>
                                    <span class="badge bg-success" id="addon-status">Aktif</span>
                                    <span id="pending-downgrade-badge" class="badge bg-warning ms-1" style="display:none;"></span>
                                </div>
                            </div>
                            
                            <div class="row g-3">
                                <div class="col-6 col-md-4">
                                    <div class="stat-card">
                                        <div class="stat-value" id="quota-limit">0</div>
                                        <div class="stat-label">Total Kuota</div>
                                    </div>
                                </div>
                                <div class="col-6 col-md-4">
                                    <div class="stat-card">
                                        <div class="stat-value" id="active-count">0</div>
                                        <div class="stat-label">Terpakai</div>
                                    </div>
                                </div>
                                <div class="col-6 col-md-4">
                                    <div class="stat-card">
                                        <div class="stat-value" id="remaining-count">0</div>
                                        <div class="stat-label">Tersedia</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4 text-center mt-4 mt-md-0">
                            <div class="position-relative d-inline-block">
                                <svg class="progress-ring" viewBox="0 0 120 120">
                                    <circle class="progress-ring-bg" cx="60" cy="60" r="52" 
                                            fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="12"/>
                                    <circle class="progress-ring-circle" id="usage-ring" cx="60" cy="60" r="52" 
                                            fill="none" stroke="rgba(255,255,255,0.9)" stroke-width="12"
                                            stroke-dasharray="326.73" stroke-dashoffset="326.73" stroke-linecap="round"/>
                                </svg>
                                <div class="position-absolute top-50 start-50 translate-middle text-center">
                                    <div class="fs-4 fw-bold" id="usage-percent">0%</div>
                                    <small class="opacity-75">Terpakai</small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Info & Actions --}}
                <div class="card mb-4">
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4 mb-3 mb-md-0">
                                <div class="d-flex align-items-center">
                                    <div class="rounded-circle bg-light-primary p-3 me-3">
                                        <i class="ti ti-coin text-primary fs-4"></i>
                                    </div>
                                    <div>
                                        <small class="text-muted d-block">Biaya Bulanan</small>
                                        <h5 class="mb-0" id="total-price">Rp 0</h5>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 mb-3 mb-md-0">
                                <div class="d-flex align-items-center">
                                    <div class="rounded-circle bg-light-warning p-3 me-3">
                                        <i class="ti ti-calendar text-warning fs-4"></i>
                                    </div>
                                    <div>
                                        <small class="text-muted d-block">Berakhir</small>
                                        <h6 class="mb-0" id="end-date">-</h6>
                                        <small class="text-muted" id="days-remaining"></small>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 text-md-end">
                                <a href="https://drive.google.com/drive/folders/1S-rVQUBJJPMWnjCHXSKsflMhS_HT4JSv?usp=drive_link" 
                                   target="_blank" class="btn btn-outline-primary action-btn">
                                    <i class="ti ti-download me-1"></i> Download APK
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Expiry Warning Banner --}}
                <div class="card mb-4 border-warning" id="expiry-warning-card" style="display:none;">
                    <div class="card-body py-3">
                        <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                            <div class="d-flex align-items-center">
                                <div class="rounded-circle bg-light-warning p-2 me-3">
                                    <i class="ti ti-alert-triangle text-warning fs-4"></i>
                                </div>
                                <div>
                                    <h6 class="mb-0 fw-bold" id="expiry-warning-title">Segera Berakhir</h6>
                                    <small class="text-muted" id="expiry-warning-text"></small>
                                </div>
                            </div>
                            <button class="btn btn-warning action-btn" data-bs-toggle="modal" data-bs-target="#renewModal">
                                <i class="ti ti-refresh me-1"></i> Perpanjang Sekarang
                            </button>
                        </div>
                    </div>
                </div>

                {{-- Action Buttons --}}
                <div class="card">
                    <div class="card-header">
                        <h6 class="mb-0"><i class="ti ti-settings me-2"></i>Kelola Langganan</h6>
                    </div>
                    <div class="card-body">
                        <div class="d-flex gap-2 flex-wrap">
                            <button class="btn btn-primary action-btn" id="btn-renew" data-bs-toggle="modal" data-bs-target="#renewModal">
                                <i class="ti ti-refresh me-1"></i> Perpanjang
                            </button>
                            <button class="btn btn-success action-btn" id="btn-upgrade" data-bs-toggle="modal" data-bs-target="#upgradeModal">
                                <i class="ti ti-plus me-1"></i> Tambah Agent
                            </button>
                            <button class="btn btn-outline-warning action-btn" id="btn-downgrade" data-bs-toggle="modal" data-bs-target="#downgradeModal">
                                <i class="ti ti-minus me-1"></i> Kurangi Agent
                            </button>
                            <button class="btn btn-outline-danger action-btn" id="btn-cancel" data-bs-toggle="modal" data-bs-target="#cancelModal">
                                <i class="ti ti-ban me-1"></i> Berhenti Langganan
                            </button>
                            <button class="btn btn-outline-secondary action-btn" id="btn-cancel-downgrade" style="display:none;">
                                <i class="ti ti-x me-1"></i> Batalkan Downgrade
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- Sidebar --}}
        <div class="col-lg-4">
            {{-- Balance Card --}}
            <div class="balance-card p-4 mb-4">
                <div class="d-flex align-items-center mb-3">
                    <div class="rounded-circle bg-white bg-opacity-25 p-2 me-3">
                        <i class="ti ti-wallet fs-4"></i>
                    </div>
                    <div>
                        <small class="opacity-75">Saldo Tersedia</small>
                        <h3 class="mb-0 text-white" id="balance">Rp 0</h3>
                    </div>
                </div>
                <a href="{{ route('client.topup.index') }}" class="btn btn-light btn-sm w-100">
                    <i class="ti ti-plus me-1"></i> Topup Saldo
                </a>
            </div>

            {{-- Transactions --}}
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h6 class="mb-0"><i class="ti ti-history me-2"></i>Riwayat Transaksi</h6>
                </div>
                <div class="card-body p-0">
                    <div id="transactions-container" style="max-height: 350px; overflow-y: auto;">
                        <div class="text-center py-4 text-muted">
                            <i class="ti ti-receipt-off fs-1 opacity-50 mb-2 d-block"></i>
                            <small>Belum ada transaksi</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- Purchase Modal --}}
<div class="modal fade" id="purchaseModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <form id="purchaseForm">
                <div class="modal-header bg-primary text-white border-0">
                    <h5 class="modal-title text-white"><i class="ti ti-shopping-cart me-2"></i>Beli Mobile Access</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4">
                    <p class="text-muted mb-4">Berapa agent yang ingin Anda izinkan login via mobile?</p>
                    
                    {{-- Quantity Stepper --}}
                    <div class="mb-4">
                        <label class="form-label fw-semibold">Jumlah Access</label>
                        <div class="input-group input-group-lg">
                            <button class="btn btn-outline-secondary" type="button" id="purchase-minus">
                                <i class="ti ti-minus"></i>
                            </button>
                            <input type="number" class="form-control text-center fw-bold" id="purchase-quantity" 
                                   name="quantity" min="0" max="100" value="0" style="font-size: 1.5rem;">
                            <button class="btn btn-outline-secondary" type="button" id="purchase-plus">
                                <i class="ti ti-plus"></i>
                            </button>
                        </div>
                    </div>

                    {{-- Price Calculation --}}
                    <div class="bg-light rounded-3 p-3 mb-3">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="text-muted">Harga per Access:</span>
                            <span class="fw-semibold" id="purchase-price-unit">Rp 0</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="text-muted">Jumlah Access:</span>
                            <span class="fw-semibold">× <span id="purchase-qty-display">0</span></span>
                        </div>
                        <hr class="my-2">
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="fw-bold">Total Pembayaran:</span>
                            <span class="fw-bold text-primary fs-4" id="purchase-total">Rp 0</span>
                        </div>
                    </div>

                    {{-- Balance Comparison --}}
                    <div class="border rounded-3 p-3">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="text-muted"><i class="ti ti-wallet me-1"></i>Saldo Anda:</span>
                            <span class="fw-semibold text-success" id="purchase-balance">Rp 0</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="text-muted">Total Pembelian:</span>
                            <span class="fw-semibold text-danger" id="purchase-total-compare">-Rp 0</span>
                        </div>
                        <hr class="my-2">
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="fw-bold">Sisa Saldo:</span>
                            <span class="fw-bold" id="purchase-remaining">Rp 0</span>
                        </div>
                    </div>

                    <div class="alert alert-danger mt-3 mb-0" id="purchase-balance-warning" style="display:none;">
                        <i class="ti ti-alert-triangle me-1"></i> Saldo tidak mencukupi. 
                        <a href="{{ route('client.topup.index') }}" class="alert-link">Topup sekarang</a>
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary px-4" id="purchase-submit">
                        <i class="ti ti-shopping-cart me-1"></i> Beli Sekarang
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Upgrade Modal --}}
<div class="modal fade" id="upgradeModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <form id="upgradeForm">
                <div class="modal-header bg-success text-white border-0">
                    <h5 class="modal-title"><i class="ti ti-plus me-2"></i>Tambah Agent Mobile</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4">
                    <div class="mb-4">
                        <label class="form-label fw-semibold">Jumlah Agent Baru</label>
                        <input type="number" class="form-control form-control-lg text-center" id="upgrade-quantity" 
                               name="quantity" min="1" max="100" value="1" style="font-size: 1.5rem; font-weight: 600;">
                        <small class="text-muted">Saat ini: <span id="upgrade-current">0</span> agent</small>
                    </div>

                    <div class="bg-light rounded-3 p-3">
                        <div class="d-flex justify-content-between mb-2">
                            <span class="text-muted">Tambahan Agent:</span>
                            <span class="fw-semibold" id="upgrade-additional">+0</span>
                        </div>
                        <hr class="my-2">
                        <div class="d-flex justify-content-between">
                            <span class="fw-bold">Biaya Tambahan:</span>
                            <span class="fw-bold text-success fs-5" id="upgrade-cost">Rp 0</span>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-success" id="upgrade-submit">
                        <i class="ti ti-plus me-1"></i> Upgrade
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Downgrade Modal --}}
<div class="modal fade" id="downgradeModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <form id="downgradeForm">
                <div class="modal-header bg-warning border-0">
                    <h5 class="modal-title"><i class="ti ti-minus me-2"></i>Kurangi Agent Mobile</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4">
                    <div class="alert alert-warning border-0">
                        <i class="ti ti-info-circle me-1"></i> 
                        Pengurangan akan berlaku saat perpanjangan berikutnya.
                    </div>

                    <div class="mb-3">
                        <label class="form-label fw-semibold">Jumlah Agent Baru</label>
                        <input type="number" class="form-control form-control-lg text-center" id="downgrade-quantity" 
                               name="quantity" min="1" max="100" value="1" style="font-size: 1.5rem; font-weight: 600;">
                        <small class="text-muted">Saat ini: <span id="downgrade-current">0</span> agent</small>
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-warning" id="downgrade-submit">
                        <i class="ti ti-minus me-1"></i> Jadwalkan Downgrade
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Renewal Modal --}}
<div class="modal fade" id="renewModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <form id="renewForm">
                <div class="modal-header bg-primary text-white border-0">
                    <h5 class="modal-title text-white"><i class="ti ti-refresh me-2"></i>Perpanjang Langganan</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4">
                    <div class="text-center mb-4">
                        <div class="rounded-circle bg-light-primary d-inline-flex align-items-center justify-content-center" style="width: 70px; height: 70px;">
                            <i class="ti ti-device-mobile text-primary fs-1"></i>
                        </div>
                    </div>

                    <div class="bg-light rounded-3 p-3 mb-3">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="text-muted">Agent Mobile:</span>
                            <span class="fw-semibold" id="renew-quantity">0 access</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="text-muted">Durasi:</span>
                            <span class="fw-semibold" id="renew-duration">30 hari</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="text-muted">Berlaku mulai:</span>
                            <span class="fw-semibold" id="renew-start-date">-</span>
                        </div>
                        <hr class="my-2">
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="fw-bold">Biaya Perpanjangan:</span>
                            <span class="fw-bold text-primary fs-4" id="renew-total-price">Rp 0</span>
                        </div>
                    </div>

                    <div class="border rounded-3 p-3">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="text-muted"><i class="ti ti-wallet me-1"></i>Saldo Anda:</span>
                            <span class="fw-semibold text-success" id="renew-balance">Rp 0</span>
                        </div>
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="text-muted">Biaya Perpanjangan:</span>
                            <span class="fw-semibold text-danger" id="renew-cost-compare">-Rp 0</span>
                        </div>
                        <hr class="my-2">
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="fw-bold">Sisa Saldo:</span>
                            <span class="fw-bold" id="renew-remaining">Rp 0</span>
                        </div>
                    </div>

                    <div class="alert alert-danger mt-3 mb-0" id="renew-balance-warning" style="display:none;">
                        <i class="ti ti-alert-triangle me-1"></i> Saldo tidak mencukupi.
                        <a href="{{ route('client.topup.index') }}" class="alert-link">Topup sekarang</a>
                    </div>

                    <div class="alert alert-info mt-3 mb-0 small" id="renew-early-info" style="display:none;">
                        <i class="ti ti-info-circle me-1"></i> Perpanjangan dini: durasi baru akan ditambahkan setelah masa aktif saat ini berakhir.
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary px-4" id="renew-submit">
                        <i class="ti ti-refresh me-1"></i> Perpanjang
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Cancel Modal --}}
<div class="modal fade" id="cancelModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <form id="cancelForm">
                <div class="modal-header bg-danger text-white border-0">
                    <h5 class="modal-title"><i class="ti ti-alert-triangle me-2"></i>Berhenti Langganan</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-4 text-center">
                    <div class="mb-4">
                        <div class="rounded-circle bg-light-danger d-inline-flex align-items-center justify-content-center" style="width: 80px; height: 80px;">
                            <i class="ti ti-alert-triangle text-danger fs-1"></i>
                        </div>
                    </div>
                    <h5>Apakah Anda yakin?</h5>
                    <p class="text-muted mb-0">
                        Semua agent mobile akan logout paksa dan sisa masa aktif akan hangus.
                    </p>
                </div>
                <div class="modal-footer border-0 pt-0 justify-content-center">
                    <button type="button" class="btn btn-light px-4" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-danger px-4" id="cancel-submit">
                        <i class="ti ti-ban me-1"></i> Ya, Berhenti
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    let currentData = null;
    let mobileAgentAddon = null;
    let clientAddonId = null;

    loadStatus();

    function loadStatus() {
        $.get('{{ route("client.addons.status") }}', function(res) {
            currentData = res.data;
            updateUI(res.data);
            loadTransactions();
        }).fail(function() {
            $('#loading-state').html('<div class="alert alert-danger">Gagal memuat data</div>');
        });
    }

    function updateUI(data) {
        $('#loading-state').hide();
        $('#balance').text('Rp ' + parseInt(data.balance).toLocaleString('id-ID'));

        mobileAgentAddon = data.addons.find(a => a.code === 'mobile_agent_access');
        
        if (!mobileAgentAddon || !mobileAgentAddon.has_addon) {
            $('#no-addon-state').show();
            $('#active-addon-state').hide();
            
            if (mobileAgentAddon) {
                $('#purchase-price-unit').text(mobileAgentAddon.formatted_price + ' /bulan');
                $('#starting-price').text(mobileAgentAddon.formatted_price);
            }
        } else {
            $('#no-addon-state').hide();
            $('#active-addon-state').show();

            const addon = mobileAgentAddon.client_addon;
            clientAddonId = addon.id;

            const activeCount = data.mobile_agent.active_count;
            const quota = addon.quantity;
            const remaining = data.mobile_agent.remaining;

            $('#active-count').text(activeCount);
            $('#quota-limit').text(quota);
            $('#remaining-count').text(remaining);
            
            // Circular progress
            const usage = quota > 0 ? (activeCount / quota) * 100 : 0;
            const circumference = 326.73;
            const offset = circumference - (usage / 100) * circumference;
            $('#usage-ring').css('stroke-dashoffset', offset);
            $('#usage-percent').text(Math.round(usage) + '%');

            $('#total-price').text(addon.formatted_total);

            if (addon.end_at) {
                const endDate = new Date(addon.end_at);
                $('#end-date').text(endDate.toLocaleDateString('id-ID', { 
                    day: 'numeric', month: 'short', year: 'numeric' 
                }));
                $('#days-remaining').text('(' + addon.remaining_days + ' hari lagi)');
            }

            // Expiry / near-expiry state
            const isExpired = mobileAgentAddon.is_expired;
            const isNearExpiry = mobileAgentAddon.is_near_expiry;

            if (isExpired) {
                $('#addon-status').removeClass('bg-success bg-warning').addClass('bg-danger').text('Kadaluarsa');
                $('#expiry-warning-card').show().find('.card').removeClass('border-warning').addClass('border-danger');
                $('#expiry-warning-title').text('Langganan Kadaluarsa');
                $('#expiry-warning-text').text('Perpanjang sekarang untuk mengaktifkan kembali akses mobile agent.');
                $('#btn-upgrade, #btn-downgrade').prop('disabled', true);
            } else if (isNearExpiry) {
                $('#addon-status').removeClass('bg-success bg-danger').addClass('bg-warning').text('Segera Berakhir');
                $('#expiry-warning-card').show();
                $('#expiry-warning-title').text('Segera Berakhir');
                $('#expiry-warning-text').text('Langganan akan berakhir dalam ' + addon.remaining_days + ' hari. Perpanjang sekarang agar tidak terputus.');
                $('#btn-upgrade, #btn-downgrade').prop('disabled', false);
            } else {
                $('#addon-status').removeClass('bg-warning bg-danger').addClass('bg-success').text('Aktif');
                $('#expiry-warning-card').hide();
                $('#btn-upgrade, #btn-downgrade').prop('disabled', false);
            }

            if (addon.has_pending_downgrade) {
                $('#pending-downgrade-badge').show().text('→ ' + addon.next_quantity + ' agent');
                $('#btn-cancel-downgrade').show();
            } else {
                $('#pending-downgrade-badge').hide();
                $('#btn-cancel-downgrade').hide();
            }

            $('#upgrade-current').text(quota);
            $('#upgrade-quantity').val(quota + 1).attr('min', quota + 1);
            $('#downgrade-current').text(quota);
            $('#downgrade-quantity').val(quota - 1).attr('max', quota - 1);

            // Renewal modal data
            updateRenewModal();
        }

        // Trigger calculation for purchase modal default value
        $('#purchase-quantity').trigger('input');
    }

    function loadTransactions() {
        $.get('{{ route("client.addons.transactions") }}', function(res) {
            const container = $('#transactions-container');
            container.empty();

            if (!res.data || res.data.length === 0) {
                container.html(`
                    <div class="text-center py-4 text-muted">
                        <i class="ti ti-receipt-off fs-1 opacity-50 mb-2 d-block"></i>
                        <small>Belum ada transaksi</small>
                    </div>
                `);
                return;
            }

            res.data.forEach(function(tx) {
                const date = new Date(tx.created_at);
                const amountClass = tx.amount > 0 ? 'text-danger' : 'text-success';
                container.append(`
                    <div class="transaction-item p-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <div class="fw-semibold">${tx.type_label}</div>
                                <small class="text-muted">${date.toLocaleDateString('id-ID')} · ${tx.quantity_before} → ${tx.quantity_after}</small>
                            </div>
                            <span class="${amountClass} fw-bold">${tx.formatted_amount}</span>
                        </div>
                    </div>
                `);
            });
        });
    }

    // Purchase quantity stepper
    $('#purchase-minus').on('click', function() {
        const input = $('#purchase-quantity');
        let val = parseInt(input.val());
        if (isNaN(val)) val = 0;
        if (val > 0) input.val(val - 1).trigger('input');
    });
    $('#purchase-plus').on('click', function() {
        const input = $('#purchase-quantity');
        let val = parseInt(input.val());
        if (isNaN(val)) val = 0;
        if (val < 100) input.val(val + 1).trigger('input');
    });

    // Purchase quantity change - update all displays
    $('#purchase-quantity').on('input', function() {
        let val = parseInt($(this).val());
        if (isNaN(val)) val = 0; // Allow 0
        
        $('#purchase-qty-display').text(val);
        
        if (mobileAgentAddon && currentData) {
            const pricePerUnit = mobileAgentAddon.price_per_unit;
            const total = pricePerUnit * val;
            const balance = currentData.balance;
            const remaining = balance - total;

            // Update price displays
            $('#purchase-price-unit').text('Rp ' + pricePerUnit.toLocaleString('id-ID') + '/bulan');
            $('#purchase-total').text('Rp ' + total.toLocaleString('id-ID'));
            
            // Update balance comparison
            $('#purchase-balance').text('Rp ' + balance.toLocaleString('id-ID'));
            $('#purchase-total-compare').text('-Rp ' + total.toLocaleString('id-ID'));
            $('#purchase-remaining').text('Rp ' + remaining.toLocaleString('id-ID'));
            
            // Color for remaining
            if (remaining >= 0) {
                $('#purchase-remaining').removeClass('text-danger').addClass('text-success');
            } else {
                $('#purchase-remaining').removeClass('text-success').addClass('text-danger');
            }

            // Warning and button state
            if (val <= 0) {
                $('#purchase-submit').prop('disabled', true);
                $('#purchase-balance-warning').hide(); 
            } else if (total > balance) {
                $('#purchase-balance-warning').show();
                $('#purchase-submit').prop('disabled', true);
            } else {
                $('#purchase-balance-warning').hide();
                $('#purchase-submit').prop('disabled', false);
            }
        }
    }).trigger('input');

    function updateRenewModal() {
        if (!mobileAgentAddon || !mobileAgentAddon.client_addon || !currentData) return;

        const addon = mobileAgentAddon.client_addon;
        const renewalPrice = mobileAgentAddon.renewal_price;
        const balance = currentData.balance;
        const remaining = balance - renewalPrice;
        const isExpired = mobileAgentAddon.is_expired;

        $('#renew-quantity').text(addon.quantity + ' access');
        $('#renew-duration').text(mobileAgentAddon.billing_cycle === 'yearly' ? '365 hari' : '30 hari');
        $('#renew-total-price').text(mobileAgentAddon.formatted_renewal_price);

        // Start date: extend from current end_at if not expired
        if (!isExpired && addon.end_at) {
            const endDate = new Date(addon.end_at);
            $('#renew-start-date').text(endDate.toLocaleDateString('id-ID', { day: 'numeric', month: 'short', year: 'numeric' }));
            $('#renew-early-info').show();
        } else {
            $('#renew-start-date').text('Hari ini');
            $('#renew-early-info').hide();
        }

        // Balance comparison
        $('#renew-balance').text('Rp ' + balance.toLocaleString('id-ID'));
        $('#renew-cost-compare').text('-Rp ' + renewalPrice.toLocaleString('id-ID'));
        $('#renew-remaining').text('Rp ' + remaining.toLocaleString('id-ID'));

        if (remaining >= 0) {
            $('#renew-remaining').removeClass('text-danger').addClass('text-success');
            $('#renew-balance-warning').hide();
            $('#renew-submit').prop('disabled', false);
        } else {
            $('#renew-remaining').removeClass('text-success').addClass('text-danger');
            $('#renew-balance-warning').show();
            $('#renew-submit').prop('disabled', true);
        }
    }

    // Upgrade quantity change
    $('#upgrade-quantity').on('input', function() {
        const qty = parseInt($(this).val()) || 1;
        if (mobileAgentAddon && mobileAgentAddon.client_addon) {
            const current = mobileAgentAddon.client_addon.quantity;
            const additional = qty - current;
            const cost = mobileAgentAddon.price_per_unit * additional;

            $('#upgrade-additional').text('+' + additional);
            $('#upgrade-cost').text('Rp ' + cost.toLocaleString('id-ID'));
        }
    });

    // Form submissions
    $('#purchaseForm').on('submit', function(e) {
        e.preventDefault();
        submitForm('{{ route("client.addons.purchase") }}', {
            addon_code: 'mobile_agent_access',
            quantity: $('#purchase-quantity').val()
        }, '#purchaseModal', '#purchase-submit');
    });

    $('#upgradeForm').on('submit', function(e) {
        e.preventDefault();
        submitForm('{{ url("client/addons") }}/' + clientAddonId + '/upgrade', {
            quantity: $('#upgrade-quantity').val()
        }, '#upgradeModal', '#upgrade-submit');
    });

    $('#downgradeForm').on('submit', function(e) {
        e.preventDefault();
        submitForm('{{ url("client/addons") }}/' + clientAddonId + '/downgrade', {
            quantity: $('#downgrade-quantity').val()
        }, '#downgradeModal', '#downgrade-submit');
    });

    $('#renewForm').on('submit', function(e) {
        e.preventDefault();
        submitForm('{{ url("client/addons") }}/' + clientAddonId + '/renew', {}, '#renewModal', '#renew-submit');
    });

    $('#cancelForm').on('submit', function(e) {
        e.preventDefault();
        submitForm('{{ url("client/addons") }}/' + clientAddonId + '/cancel', {}, '#cancelModal', '#cancel-submit');
    });

    $('#btn-cancel-downgrade').on('click', function() {
        if (!confirm('Batalkan downgrade yang dijadwalkan?')) return;
        submitForm('{{ url("client/addons") }}/' + clientAddonId + '/cancel-downgrade', {}, null, '#btn-cancel-downgrade');
    });

    function submitForm(url, data, modalId, btnId) {
        const btn = $(btnId);
        const originalHtml = btn.html();
        btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>');
        
        data._token = '{{ csrf_token() }}';

        $.ajax({
            url: url,
            type: 'POST',
            data: data,
            success: function(res) {
                if (modalId) $(modalId).modal('hide');
                toastr.success(res.meta.message);
                loadStatus();
            },
            error: function(xhr) {
                toastr.error(xhr.responseJSON?.meta?.message || 'Terjadi kesalahan');
            },
            complete: function() {
                btn.prop('disabled', false).html(originalHtml);
            }
        });
    }
});
</script>
@endpush