@extends('root')
@section('title', 'Paket Langganan')

@push('styles')
<style>
    .package-hero {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 20px;
        padding: 2rem;
        color: white;
        margin-bottom: 2rem;
    }
    
    .package-hero .balance-display {
        background: rgba(255,255,255,0.15);
        backdrop-filter: blur(10px);
        border-radius: 15px;
        padding: 1.5rem;
        border: 1px solid rgba(255,255,255,0.2);
    }
    
    .status-card {
        background: white;
        border-radius: 15px;
        padding: 1.5rem;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        height: 100%;
    }
    
    .status-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }
    
    .status-icon {
        width: 60px;
        height: 60px;
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
    }
    
    .package-card {
        background: white;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 10px 40px rgba(0,0,0,0.1);
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        position: relative;
        height: 100%;
    }
    
    .package-card:hover {
        transform: translateY(-10px) scale(1.02);
        box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    }
    
    .package-card.current {
        border: 3px solid #667eea;
    }
    
    .package-card.current::before {
        content: 'AKTIF';
        position: absolute;
        top: 15px;
        right: -30px;
        background: linear-gradient(135deg, #667eea, #764ba2);
        color: white;
        padding: 5px 40px;
        font-size: 0.7rem;
        font-weight: 700;
        transform: rotate(45deg);
        z-index: 10;
    }
    
    .package-header {
        padding: 2rem;
        text-align: center;
        position: relative;
    }
    
    .package-header.basic {
        background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
    }
    
    .package-header.pro {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }
    
    .package-header.enterprise {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        color: white;
    }
    
    .package-price {
        font-size: 2.5rem;
        font-weight: 800;
        margin: 1rem 0 0.5rem;
    }
    
    .package-price small {
        font-size: 1rem;
        font-weight: 400;
        opacity: 0.8;
    }
    
    .package-body {
        padding: 1.5rem;
    }
    
    .feature-list {
        list-style: none;
        padding: 0;
        margin: 0 0 1.5rem;
    }
    
    .feature-list li {
        padding: 0.75rem 0;
        border-bottom: 1px solid #f0f0f0;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    
    .feature-list li:last-child {
        border-bottom: none;
    }
    
    .feature-list .icon-check {
        width: 24px;
        height: 24px;
        background: linear-gradient(135deg, #11998e, #38ef7d);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 0.8rem;
        flex-shrink: 0;
    }
    
    .feature-list .icon-x {
        width: 24px;
        height: 24px;
        background: #f0f0f0;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #999;
        font-size: 0.8rem;
        flex-shrink: 0;
    }
    
    .btn-purchase {
        width: 100%;
        padding: 1rem;
        border-radius: 12px;
        font-weight: 600;
        font-size: 1rem;
        transition: all 0.3s ease;
    }
    
    .btn-purchase.btn-primary {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border: none;
    }
    
    .btn-purchase.btn-primary:hover {
        transform: scale(1.05);
        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
    }
    
    .btn-purchase:disabled {
        opacity: 0.6;
        transform: none !important;
    }
    
    .quota-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        background: linear-gradient(135deg, #f5f7fa, #e4e8eb);
        padding: 0.5rem 1rem;
        border-radius: 20px;
        font-size: 0.85rem;
        margin: 0.25rem;
    }
    
    .quota-badge.unlimited {
        background: linear-gradient(135deg, #11998e, #38ef7d);
        color: white;
    }
    
    .features-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1rem;
    }
    
    .feature-item {
        background: white;
        border-radius: 12px;
        padding: 1rem;
        display: flex;
        align-items: center;
        gap: 1rem;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    
    .feature-item .icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .feature-item .icon.enabled {
        background: linear-gradient(135deg, #11998e, #38ef7d);
        color: white;
    }
    
    .feature-item .icon.disabled {
        background: #f0f0f0;
        color: #999;
    }
    
    .pulse-dot {
        width: 10px;
        height: 10px;
        background: #38ef7d;
        border-radius: 50%;
        animation: pulse 2s infinite;
    }
    
    @keyframes pulse {
        0% { box-shadow: 0 0 0 0 rgba(56, 239, 125, 0.7); }
        70% { box-shadow: 0 0 0 10px rgba(56, 239, 125, 0); }
        100% { box-shadow: 0 0 0 0 rgba(56, 239, 125, 0); }
    }
    
    .countdown-timer {
        font-size: 2rem;
        font-weight: 700;
        background: linear-gradient(135deg, #667eea, #764ba2);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }
</style>
@endpush

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

    {{-- Hero Section --}}
    <div class="package-hero">
        <div class="row align-items-center">
            <div class="col-lg-8">
                <div class="d-flex align-items-center gap-3 mb-3">
                    @if($activePackage)
                        <div class="pulse-dot"></div>
                        @php
                            $effectivePackage = $activePackage->effective_package;
                        @endphp
                        @if($effectivePackage)
                            <span class="badge bg-white text-dark px-3 py-2 rounded-pill">
                                {{ method_exists($effectivePackage, 'getTypeLabelAttribute') ? $effectivePackage->getTypeLabelAttribute() : ($effectivePackage->type ?? 'Custom') }} Package
                            </span>
                        @endif
                    @else
                        <span class="badge bg-warning text-dark px-3 py-2 rounded-pill">Legacy Mode</span>
                    @endif
                </div>
                
                @if($activePackage)
                    @php
                        $effectivePackage = $activePackage->effective_package;
                    @endphp
                    <h1 class="display-5 fw-bold mb-2">{{ $effectivePackage?->name }}</h1>
                    <p class="mb-0 opacity-75">
                        <i class="ti ti-calendar me-2"></i>
                        @if($activePackage->remaining_days !== null)
                            Berakhir dalam <strong>{{ $activePackage->remaining_days }} hari</strong>
                            ({{ $activePackage->end_at->format('d M Y') }})
                        @else
                            Permanen / Unlimited
                        @endif
                    </p>
                    <div class="mt-3 d-flex gap-3">
                        <div class="d-flex align-items-center gap-2">
                            <i class="ti ti-users fs-4"></i>
                            <div>
                                <small class="d-block opacity-75" style="line-height:1">Limit Agent</small>
                                <span class="fw-bold">
                                    @php
                                        $agentLimit = $client->getAgentLimit();
                                    @endphp
                                    {{ $agentLimit === -1 ? 'Unlimited' : $agentLimit . ' Agent' }}
                                </span>
                            </div>
                        </div>
                    </div>
                @else
                    <h1 class="display-5 fw-bold mb-2 text-white">Mode Legacy</h1>
                    <p class="mb-0 opacity-75 ">Anda memiliki akses unlimited ke semua fitur</p>
                @endif
            </div>
            <div class="col-lg-4">
                <div class="balance-display text-center">
                    <small class="d-block mb-1 opacity-75 text-white">Saldo Anda</small>
                    <h2 class="mb-2 fw-bold text-white">Rp {{ number_format($client->balance, 0, ',', '.') }}</h2>
                    <a href="{{ route('client.topup.index') }}" class="btn btn-light btn-sm rounded-pill px-4">
                        <i class="ti ti-plus me-1"></i>Top Up Saldo
                    </a>
                </div>
            </div>
        </div>
    </div>

    {{-- Next Package Info --}}
    @if($activePackage && $activePackage->next_package_id)
    <div class="alert alert-info border-0 rounded-3 mb-4" style="background: linear-gradient(135deg, #e0f7fa, #b2ebf2);">
        <div class="d-flex align-items-center">
            <i class="ti ti-arrow-right-circle fs-3 me-3 text-info"></i>
            <div>
                <strong>Dijadwalkan:</strong> Paket <strong>{{ $activePackage->nextPackage->name }}</strong> akan aktif setelah paket saat ini berakhir.
            </div>
            <button class="btn btn-outline-danger btn-sm ms-auto" id="cancelDowngrade">
                <i class="ti ti-x me-1"></i>Batalkan
            </button>
        </div>
    </div>
    @endif

    {{-- Billing Toggle --}}
    <div class="d-flex justify-content-center mb-5">
        <div class="bg-white p-1 rounded-pill d-inline-flex shadow-sm border" style="position:relative;">
            <button class="btn btn-sm px-4 rounded-pill fw-bold transition-all active-billing" id="btnMonthly" onclick="setBilling('monthly')">
                Bulanan
            </button>
            <button class="btn btn-sm px-4 rounded-pill fw-bold transition-all text-muted" id="btnYearly" onclick="setBilling('yearly')">
                Tahunan 
                <span class="badge bg-success ms-1 small text-white">-20%</span>
            </button>
        </div>
    </div>

    {{-- Available Packages --}}
    <div class="mb-5">
        <div class="row g-4 justify-content-center">
            @foreach($availablePackages as $package)
                {{-- Skip shared packages from purchase list --}}
                @continue($package->isShared())

                <div class="col-lg-4 col-md-6">
                    <div class="package-card {{ $activePackage && $activePackage->package_id === $package->id ? 'current' : '' }} d-flex flex-column">
                        <div class="package-header {{ $package->tier }}">
                            <span class="badge bg-white text-dark rounded-pill px-3 py-1 mb-2">
                                {{ strtoupper($package->getTypeLabelAttribute()) }}
                            </span>
                            <h3 class="fw-bold mb-0 text-white">{{ $package->name }}</h3>
                            
                            {{-- Dynamic Price Display --}}
                            <div class="package-price price-monthly">
                                Rp {{ number_format($package->price_monthly, 0, ',', '.') }}
                                <small>/ bulan</small>
                            </div>
                            <div class="package-price price-yearly d-none">
                                Rp {{ number_format($package->price_yearly, 0, ',', '.') }}
                                <small>/ tahun</small>
                            </div>
                        </div>
                        
                        <div class="package-body d-flex flex-column flex-grow-1">
                            @if($package->description)
                            <p class="text-muted mb-3">{{ $package->description }}</p>
                            @endif

                            {{-- Agent Limit Highlight --}}
                            <div class="bg-light p-3 rounded-3 mb-3 text-center">
                                <span class="text-muted small text-uppercase fw-bold ls-1">Kapasitas Agent</span>
                                <div class="fs-4 fw-bold text-dark mt-1">
                                    <i class="ti ti-users text-primary me-1"></i> 
                                    {{ $package->max_agent }} Agent
                                </div>
                            </div>
                            
                            <ul class="feature-list mb-auto">
                                @php
                                    $features = $package->features->where('is_enabled', true);
                                @endphp
                                @foreach($features->take(5) as $feature)
                                <li>
                                    <span class="icon-check"><i class="ti ti-check"></i></span>
                                    {{ \App\Models\PackageFeature::getFeatureName($feature->feature_code) }}
                                </li>
                                @endforeach
                            </ul>

                            <div class="mt-4">
                                @if($activePackage && $activePackage->package_id === $package->id)
                                    <button class="btn btn-secondary btn-purchase w-100" disabled>
                                        <i class="ti ti-check me-2"></i>Paket Aktif
                                    </button>
                                @else
                                    <button class="btn btn-primary btn-purchase w-100" 
                                            data-id="{{ $package->id }}" 
                                            data-name="{{ $package->name }}"
                                            data-price-monthly="{{ $package->price_monthly }}"
                                            data-price-yearly="{{ $package->price_yearly }}"
                                            onclick="openPurchaseModal(this)">
                                        <i class="ti ti-shopping-cart me-2"></i>Pilih Paket
                                    </button>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </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 rounded-4 overflow-hidden">
            <div class="modal-header border-0 pb-0" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                <div class="text-center w-100 py-4">
                    <div class="bg-white rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width:80px;height:80px;">
                        <i class="ti ti-shopping-cart fs-1 text-primary"></i>
                    </div>
                    <h4 class="text-white mb-0">Konfirmasi Pembelian</h4>
                </div>
            </div>
            <div class="modal-body p-4">
                <div class="text-center mb-4">
                    <h3 class="fw-bold" id="purchasePackageName">-</h3>
                    <div class="countdown-timer" id="purchasePackagePrice">Rp 0</div>
                    <small class="text-muted">untuk <span id="purchaseDuration">30</span> hari</small>
                </div>
                
                <div class="bg-light rounded-3 p-3 mb-4">
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted">Saldo Saat Ini</span>
                        <strong>Rp {{ number_format($client->balance, 0, ',', '.') }}</strong>
                    </div>
                    <hr class="my-2">
                    <div class="d-flex justify-content-between">
                        <span class="text-muted">Saldo Setelah Pembelian</span>
                        <strong class="text-success" id="balanceAfter">Rp 0</strong>
                    </div>
                </div>
            </div>
            <div class="modal-footer border-0 pt-0 px-4 pb-4">
                <button type="button" class="btn btn-light flex-fill rounded-3" data-bs-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-primary flex-fill rounded-3" id="confirmPurchase" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border: none;">
                    <i class="ti ti-check me-1"></i>Konfirmasi
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
    var selectedPackageId = null;
    var currentBalance = {{ $client->balance }};
    var currentBilling = 'monthly'; // default

    function setBilling(cycle) {
        currentBilling = cycle;
        
        // Update functionality
        if (cycle === 'monthly') {
            $('#btnMonthly').removeClass('text-muted').addClass('active-billing btn-light shadow-sm');
            $('#btnYearly').addClass('text-muted').removeClass('active-billing btn-light shadow-sm');
            
            $('.price-monthly').removeClass('d-none');
            $('.price-yearly').addClass('d-none');
        } else {
            $('#btnYearly').removeClass('text-muted').addClass('active-billing btn-light shadow-sm');
            $('#btnMonthly').addClass('text-muted').removeClass('active-billing btn-light shadow-sm');
            
            $('.price-yearly').removeClass('d-none');
            $('.price-monthly').addClass('d-none');
        }
    }

    function openPurchaseModal(btn) {
        var el = $(btn);
        selectedPackageId = el.data('id');
        var name = el.data('name');
        var priceMonthly = el.data('price-monthly');
        var priceYearly = el.data('price-yearly');
        
        var price = currentBilling === 'monthly' ? priceMonthly : priceYearly;
        var duration = currentBilling === 'monthly' ? 30 : 365;

        $('#purchasePackageName').text(name + ' (' + (currentBilling === 'monthly' ? 'Bulanan' : 'Tahunan') + ')');
        $('#purchasePackagePrice').text('Rp ' + parseInt(price).toLocaleString('id-ID'));
        $('#purchaseDuration').text(duration);
        
        // Calculate balance
        var afterBalance = currentBalance - price;
        $('#balanceAfter').text('Rp ' + parseInt(afterBalance).toLocaleString('id-ID'));
        
        if (afterBalance < 0) {
            $('#balanceAfter').removeClass('text-success').addClass('text-danger');
            $('#confirmPurchase').prop('disabled', true).text('Saldo Tidak Cukup');
        } else {
            $('#balanceAfter').removeClass('text-danger').addClass('text-success');
            $('#confirmPurchase').prop('disabled', false).html('<i class="ti ti-check me-1"></i>Konfirmasi');
        }

        $('#purchaseModal').modal('show');
    }

    $(document).ready(function() {
        // Initialize billing view
        setBilling('monthly');

        $('#confirmPurchase').on('click', function() {
            var btn = $(this);
            btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-1"></span>Memproses...');

            $.ajax({
                url: '{{ url("client/packages") }}/' + selectedPackageId + '/purchase',
                type: 'POST',
                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                data: {
                    billing_cycle: currentBilling,
                    auto_renew: 1
                },
                success: function(res) {
                    $('#purchaseModal').modal('hide');
                    toastr.success(res.meta.message);
                    setTimeout(function() {
                        window.location.reload();
                    }, 1500);
                },
                error: function(xhr) {
                    btn.prop('disabled', false).html('<i class="ti ti-check me-1"></i>Konfirmasi');
                    toastr.error(xhr.responseJSON?.meta?.message || 'Gagal memproses pembelian');
                }
            });
        });

        $('#cancelDowngrade').on('click', function() {
            if (!confirm('Batalkan jadwal downgrade?')) return;

            $.ajax({
                url: '{{ route("client.packages.cancel-downgrade") }}',
                type: 'POST',
                headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                success: function(res) {
                    toastr.success(res.meta.message);
                    window.location.reload();
                },
                error: function(xhr) {
                    toastr.error(xhr.responseJSON?.meta?.message || 'Gagal membatalkan');
                }
            });
        });
    });
</script>
@endpush