@extends('layouts.app')

@section('title', 'TVKu - Subscription Management')

@section('content')
<div class="container">
    <div class="header">
        <h1>🎬 TVKu - Subscription Management</h1>
        <p>Panel administrasi untuk mengelola langganan pengguna</p>
        <div style="margin-top: 15px;">
            <a href="{{ route('admin.logout') }}" style="color: #ecf0f1; text-decoration: none;">🚪 Logout</a>
        </div>
    </div>

    <div class="content">
        @if(session('success'))
            <div class="success">✅ {{ session('success') }}</div>
        @endif

        @if(session('error'))
            <div class="error">❌ {{ session('error') }}</div>
        @endif

        <!-- Stats Section -->
        <div class="stats">
            <div class="stat-card">
                <div class="stat-number">{{ $stats['total'] }}</div>
                <div>Total Subscription</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">{{ $stats['active'] }}</div>
                <div>Aktif</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">{{ $stats['expired'] }}</div>
                <div>Expired/Nonaktif</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">{{ $stats['filtered'] }}</div>
                <div>Hasil Pencarian</div>
            </div>
        </div>

        <!-- Search Section -->
        <div class="search-container">
            <h2 class="search-title">🔍 Pencarian & Filter Subscription</h2>
            <form method="GET" id="searchForm" action="{{ route('admin.panel') }}">
                <input type="hidden" name="page" value="1">

                <div class="search-grid">
                    <div class="form-group">
                        <label for="search">Cari berdasarkan ID atau Catatan:</label>
                        <input type="text" id="search" name="search"
                               value="{{ $searchQuery }}"
                               placeholder="Ketik ID subscription atau kata kunci...">
                    </div>

                    <div class="form-group">
                        <label for="status">Filter Status:</label>
                        <select id="status" name="status">
                            <option value="">Semua Status</option>
                            <option value="active" {{ $searchStatus === 'active' ? 'selected' : '' }}>✅ Aktif</option>
                            <option value="inactive" {{ $searchStatus === 'inactive' ? 'selected' : '' }}>❌ Tidak Aktif</option>
                            <option value="expired" {{ $searchStatus === 'expired' ? 'selected' : '' }}>⏰ Expired</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="sort">Urutkan berdasarkan:</label>
                        <select id="sort" name="sort">
                            <option value="id" {{ $searchSort === 'id' ? 'selected' : '' }}>ID (A-Z)</option>
                            <option value="expiry" {{ $searchSort === 'expiry' ? 'selected' : '' }}>Tanggal Kadaluarsa ↗</option>
                            <option value="expiry_desc" {{ $searchSort === 'expiry_desc' ? 'selected' : '' }}>Tanggal Kadaluarsa ↘</option>
                            <option value="status" {{ $searchSort === 'status' ? 'selected' : '' }}>Status</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <button type="submit" class="btn btn-success">🔍 Cari</button>
                        <a href="{{ route('admin.panel') }}" class="btn btn-warning">🔄 Reset</a>
                    </div>
                </div>
            </form>

            @if($searchQuery || $searchStatus)
            <div class="search-results">
                📊 Menampilkan <strong>{{ $stats['filtered'] }}</strong> dari <strong>{{ $stats['total'] }}</strong> subscription
                @if($searchQuery)
                    | Pencarian: "<strong>{{ $searchQuery }}</strong>"
                @endif
                @if($searchStatus)
                    | Status: <strong>
                    @switch($searchStatus)
                        @case('active') ✅ Aktif @break
                        @case('inactive') ❌ Tidak Aktif @break
                        @case('expired') ⏰ Expired @break
                    @endswitch
                    </strong>
                @endif
            </div>
            @endif
        </div>

        @include('admin.partials.subscription-form')
        @include('admin.partials.subscription-list')
        @include('admin.partials.info-box')
        @include('admin.partials.extend-modal')
    </div>
</div>
@endsection

@section('additional_js')
<script>
// JavaScript functions yang diperlukan untuk form
function editSubscription(id, expiresAt, active, note) {
    document.getElementById('subscription_id').value = id;
    document.getElementById('is_update').value = '1';
    document.getElementById('active').value = active ? '1' : '0';
    document.getElementById('note').value = note;
    document.getElementById('submitBtn').textContent = '💾 Update Subscription';
    document.getElementById('subscription_id').scrollIntoView();
}

function resetForm() {
    document.getElementById('subscriptionForm').reset();
    document.getElementById('is_update').value = '0';
    document.getElementById('submitBtn').textContent = '💾 Simpan Subscription';
}

function showExtendModal(subscriptionId) {
    document.getElementById('extend_id').value = subscriptionId;
    document.getElementById('extend_display_id').value = subscriptionId;
    document.getElementById('extendModal').style.display = 'block';
}

function closeExtendModal() {
    document.getElementById('extendModal').style.display = 'none';
}

// Close modal when clicking outside
window.onclick = function(event) {
    var modal = document.getElementById('extendModal');
    if (event.target == modal) {
        modal.style.display = 'none';
    }
}
</script>
@endsection
