@extends('layouts.app')
@section('title', 'WHMCS Admin - Product')
@section('page-title', 'Products')

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

@section('operation')
    <a class="whmcs-btn whmcs-btn-primary me-3" href="{{ route('product.create') }}">
        <i class="fas fa-plus me-2"></i>Add Product
    </a>
@endsection

@section('content')
    <!-- Stats Cards -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-3">
            <div class="stats-card d-flex align-items-center">
                <div class="stats-card-icon primary me-3">
                    <i class="fas fa-box"></i>
                </div>
                <div>
                    <div class="stats-card-value">{{ $totalProducts }}</div>
                    <div class="stats-card-label">Total Products</div>
                    <div class="stats-card-change {{ $totalProductsChange >= 0 ? 'positive' : 'negative' }}">
                        <i class="fas fa-arrow-{{ $totalProductsChange >= 0 ? 'up' : 'down' }}"></i>
                        {{ $totalProductsChange >= 0 ? '+' : '' }}{{ $totalProductsChange }}% from last month
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-3">
            <div class="stats-card d-flex align-items-center">
                <div class="stats-card-icon success me-3">
                    <i class="fas fa-check-circle"></i>
                </div>
                <div>
                    <div class="stats-card-value">{{ $activeProducts }}</div>
                    <div class="stats-card-label">Active Products</div>
                    <div class="stats-card-change {{ $activeProductsChange >= 0 ? 'positive' : 'negative' }}">
                        <i class="fas fa-arrow-{{ $activeProductsChange >= 0 ? 'up' : 'down' }}"></i>
                        {{ $activeProductsChange >= 0 ? '+' : '' }}{{ $activeProductsChange }}% from last month
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-3">
            <div class="stats-card d-flex align-items-center">
                <div class="stats-card-icon warning me-3">
                    <i class="fas fa-pause-circle"></i>
                </div>
                <div>
                    <div class="stats-card-value">{{ $inactiveProducts }}</div>
                    <div class="stats-card-label">Inactive Products</div>
                    <div class="stats-card-change {{ $inactiveProductsChange >= 0 ? 'positive' : 'negative' }}">
                        <i class="fas fa-arrow-{{ $inactiveProductsChange >= 0 ? 'up' : 'down' }}"></i>
                        {{ $inactiveProductsChange >= 0 ? '+' : '' }}{{ $inactiveProductsChange }}% from last month
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-3 col-md-6 mb-3">
            <div class="stats-card d-flex align-items-center">
                <div class="stats-card-icon info me-3">
                    <i class="fas fa-puzzle-piece"></i>
                </div>
                <div>
                    <div class="stats-card-value">{{ $totalAddons }}</div>
                    <div class="stats-card-label">Total Addons</div>
                    <div class="stats-card-change {{ $totalAddonsChange >= 0 ? 'positive' : 'negative' }}">
                        <i class="fas fa-arrow-{{ $totalAddonsChange >= 0 ? 'up' : 'down' }}"></i>
                        {{ $totalAddonsChange >= 0 ? '+' : '' }}{{ $totalAddonsChange }}% from last month
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters and Search -->
    <div class="whmcs-card mb-4">
        <div class="whmcs-card-header">
            <h5><i class="fas fa-filter me-2"></i>Filter Products</h5>
        </div>
        <div class="whmcs-card-body">
            <div class="row">
                <div class="col-md-3 mb-3">
                    <label class="whmcs-form-label">Search Products</label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="fas fa-search"></i></span>
                        <input type="text" class="whmcs-form-control" id="searchProducts"
                            placeholder="Name, SKU, or description...">
                    </div>
                </div>
                <div class="col-md-2 mb-3">
                    <label class="whmcs-form-label">Category</label>
                    <select class="whmcs-form-select form-control" id="filterCategory">
                        <option value="">All Categories</option>
                        <option value="hosting">Web Hosting</option>
                        <option value="domain">Domain Names</option>
                        <option value="ssl">SSL Certificates</option>
                        <option value="vps">VPS Hosting</option>
                        <option value="dedicated">Dedicated Servers</option>
                        <option value="software">Software Licenses</option>
                    </select>
                </div>
                <div class="col-md-2 mb-3">
                    <label class="whmcs-form-label">Status</label>
                    <select class="whmcs-form-select form-control" id="filterStatus">
                        <option value="">All Status</option>
                        <option value="active">Active</option>
                        <option value="inactive">Inactive</option>
                        <option value="hidden">Hidden</option>
                    </select>
                </div>
                <div class="col-md-2 mb-3">
                    <label class="whmcs-form-label">Type</label>
                    <select class="whmcs-form-select form-control" id="filterType">
                        <option value="">All Types</option>
                        <option value="hosting">Hosting</option>
                        <option value="domain">Domain</option>
                        <option value="other">Other</option>
                    </select>
                </div>
                <div class="col-md-3 mb-3">
                    <label class="whmcs-form-label">&nbsp;</label>
                    <div class="d-flex gap-2">
                        <button class="whmcs-btn whmcs-btn-primary" id="applyFilters">
                            <i class="fas fa-filter me-2"></i>Apply Filters
                        </button>
                        <button class="whmcs-btn whmcs-btn-outline-secondary" id="clearFilters">
                            <i class="fas fa-times me-2"></i>Clear
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Products Table -->
    <div class="whmcs-card">
        <div class="whmcs-card-header d-flex justify-content-between align-items-center">
            <h5><i class="fas fa-list me-2"></i>Products List</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="#" onclick="exportData('csv')"><i
                                    class="fas fa-file-csv me-2"></i>Export as CSV</a></li>
                        <li><a class="dropdown-item" href="#" onclick="exportData('excel')"><i
                                    class="fas fa-file-excel me-2"></i>Export as Excel</a></li>
                        <li><a class="dropdown-item" href="#" onclick="exportData('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

@push('scripts')
    <script>
        $(document).ready(function() {

            $('#items-table').on('click', '.pagination a', function(e) {
                e.preventDefault();
                const page = $(this).attr('href').split('page=')[1];
                loadProducts(page);
            });

            function loadProducts(page = 1) {
                $('#items-table').empty();
                $('#loading-indicator').show();

                var page_number = $("#page_number option:selected").val();
                var search = $('#searchProducts').val();
                var category = $('#filterCategory').val();
                var status = $('#filterStatus').val();
                var type = $('#filterType').val();

                $.ajax({
                    url: "{{ route('product.getdata') }}" + '?page=' + page,
                    type: 'GET',
                    dataType: 'html',
                    data: {
                        perPage: page_number,
                        search: search,
                        category: category,
                        status: status,
                        type: type
                    },
                    success: function(data) {
                        $('#loading-indicator').hide();
                        $('#items-table').html(data);
                    },
                    error: function() {
                        $('#loading-indicator').hide();
                    }
                });
            }

            $("#applyFilters").on('click', function() {
                loadProducts(1); // reload data with filters, start at page 1
            });

            $("#clearFilters").on('click', function() {
                $('#searchProducts').val('');
                $('#filterCategory').val('');
                $('#filterStatus').val('');
                $('#filterType').val('');
                loadProducts(1); // reload data with cleared filters
            });

            loadProducts(1);
            $("#page_number").on("change", function() {
                loadProducts(1);
            })

        });
    </script>
@endpush