@extends('layouts.app')
@section('title', 'WHMCS Admin - Billing')
@section('page-title', 'Billing Management')

@section('breadcrumb')
    <a href="{{ route('dashboard') }}" class="breadcrumb-item">Dashboard</a>
    <span class="breadcrumb-item active">Billing</span>
@endsection
@section('content')

    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="stats-card">
                <div class="d-flex align-items-center">
                    <div class="stats-card-icon primary">
                        <i class="fas fa-file-invoice-dollar"></i>
                    </div>
                    <div class="flex-grow-1">
                        <div class="stats-card-value">1,247</div>
                        <div class="stats-card-label">Total Licenses</div>
                        <div class="stats-card-change positive">
                            <i class="fas fa-arrow-up"></i> +12% from last month
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="stats-card">
                <div class="d-flex align-items-center">
                    <div class="stats-card-icon primary">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <div class="flex-grow-1">
                        <div class="stats-card-value">1,247</div>
                        <div class="stats-card-label">Active Licenses</div>
                        <div class="stats-card-change positive">
                            <i class="fas fa-arrow-up"></i> +12% from last month
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="stats-card">
                <div class="d-flex align-items-center">
                    <div class="stats-card-icon primary">
                        <i class="fas fa-clock"></i>
                    </div>
                    <div class="flex-grow-1">
                        <div class="stats-card-value">1,247</div>
                        <div class="stats-card-label">Expiring Soon</div>
                        <div class="stats-card-change text-warning">
                            <i class="fas fa-arrow-up"></i> +12% from last month
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="stats-card">
                <div class="d-flex align-items-center">
                    <div class="stats-card-icon primary">
                        <i class="fas fa-exclamation-triangle"></i>
                    </div>
                    <div class="flex-grow-1">
                        <div class="stats-card-value">1,247</div>
                        <div class="stats-card-label">Overdue</div>
                        <div class="stats-card-change text-danger">
                            <i class="fas fa-arrow-down"></i> -12% from last month
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Quick Actions -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="whmcs-card">
                <div class="whmcs-card-header">
                    <h6><i class="fas fa-bolt me-2"></i>Quick Actions</h6>
                </div>
                <div class="whmcs-card-body">
                    <div class="row">
                        <div class="col-md-3 mb-2">
                            <a class="whmcs-btn whmcs-btn-primary w-100 btn_modal" href="{{ route('invoice.create') }}"
                                type="modal">
                                <i class="fas fa-plus me-2"></i>Create Invoice
                            </a>
                        </div>
                        <div class="col-md-3 mb-2">
                            <button class="whmcs-btn whmcs-btn-success w-100" data-bs-toggle="modal"
                                data-bs-target="#recordPaymentModal">
                                <i class="fas fa-money-bill me-2"></i>Record Payment
                            </button>
                        </div>
                        <div class="col-md-3 mb-2">
                            <button class="whmcs-btn whmcs-btn-warning w-100" data-bs-toggle="modal"
                                data-bs-target="#sendReminderModal">
                                <i class="fas fa-bell me-2"></i>Send Reminder
                            </button>
                        </div>
                        <div class="col-md-3 mb-2">
                            <button class="whmcs-btn whmcs-btn-info w-100" onclick="exportInvoices()">
                                <i class="fas fa-download me-2"></i>Export Data
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Filters -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="whmcs-card">
                <div class="whmcs-card-body">
                    <div class="row g-3">
                        <div class="col-md-3">
                            <label class="whmcs-form-label">Search Invoices</label>
                            <div class="input-group">
                                <input type="text" class="whmcs-form-control"
                                    placeholder="Invoice #, customer, amount..." id="searchInvoices">
                                <button class="whmcs-btn whmcs-btn-outline-secondary" type="button">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <label class="whmcs-form-label">Status</label>
                            <select class="whmcs-form-control whmcs-form-select">
                                <option>All Status</option>
                                <option>Paid</option>
                                <option>Unpaid</option>
                                <option>Overdue</option>
                                <option>Cancelled</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="whmcs-form-label">Date Range</label>
                            <select class="whmcs-form-control whmcs-form-select">
                                <option>All Time</option>
                                <option>Today</option>
                                <option>This Week</option>
                                <option>This Month</option>
                                <option>This Year</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="whmcs-form-label">Amount Range</label>
                            <select class="whmcs-form-control whmcs-form-select">
                                <option>All Amounts</option>
                                <option>$0 - $100</option>
                                <option>$100 - $500</option>
                                <option>$500 - $1000</option>
                                <option>$1000+</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="whmcs-form-label">&nbsp;</label>
                            <div class="d-flex gap-2">
                                <button class="whmcs-btn whmcs-btn-primary">Apply Filters</button>
                                <button class="whmcs-btn whmcs-btn-outline-secondary">Clear</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="whmcs-card mt-4">
        <div class="whmcs-card-header d-flex justify-content-between align-items-center">
            <h5><i class="fas fa-list me-2"></i>Invoice Management</h5>

            <div class="d-flex align-items-center gap-3">
                <div class="d-flex align-items-center">
                    <label class="me-2">Show:</label>
                    <select class="whmcs-form-select form-control" style="width: auto;"
                        onchange="changePageSize(this.value)">
                        <option value="10">10 per page</option>
                        <option value="25" selected>25 per page</option>
                        <option value="50">50 per page</option>
                        <option value="100">100 per page</option>
                    </select>
                </div>
                <div class="dropdown">
                    <button class="whmcs-btn whmcs-btn-outline-secondary dropdown-toggle" type="button"
                        data-bs-toggle="dropdown">
                        <i class="fas fa-download me-2"></i>Export
                    </button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item" href="#" data-export="csv"><i
                                    class="fas fa-file-csv me-2"></i>Export as CSV</a></li>
                        <li><a class="dropdown-item" href="#" data-export="excel"><i
                                    class="fas fa-file-excel me-2"></i>Export as Excel</a></li>
                        <li><a class="dropdown-item" href="#" data-export="pdf"><i
                                    class="fas fa-file-pdf me-2"></i>Export as PDF</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="whmcs-card-body p-0">
            <div id="items-table"></div>
        </div>
    </div>


@endsection