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

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

@section('operation')
    <a class="whmcs-btn whmcs-btn-primary me-3 btn_modal" href="{{ route('license.create') }}" type="button">
        <i class="fas fa-plus me-2"></i>Add License
    </a>
@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-key"></i>
                    </div>
                    <div class="flex-grow-1">
                        <div class="stats-card-value">{{ number_format($totalLicenses) }}</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">{{ number_format($activeLicenses) }}</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">{{ number_format($expiringSoon) }}</div>
                        <div class="stats-card-label">Expiring Soon</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-times-circle"></i>
                    </div>
                    <div class="flex-grow-1">
                        <div class="stats-card-value">{{ number_format($expiredLicenses) }}</div>
                        <div class="stats-card-label">Expired 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>
    <!-- License Management -->
    <div class="whmcs-card">
        <div class="whmcs-card-body">
            <!-- Filters -->
            <div class="row mb-3">
                <div class="col-md-3">
                    <div class="whmcs-form-group">
                        <label class="whmcs-form-label">Search Licenses</label>
                        <div class="input-group">
                            <input type="text" class="whmcs-form-control"
                                placeholder="License key, customer, or product..." id="searchLicenses">
                            <button class="whmcs-btn whmcs-btn-outline-secondary" type="button">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="col-md-2">
                    <div class="whmcs-form-group">
                        <label class="whmcs-form-label">Status</label>
                        <select class="whmcs-form-control whmcs-form-select" id="statusFilter">
                            <option value="">All Status</option>
                            <option value="active">Active</option>
                            <option value="suspended">Suspended</option>
                            <option value="expired">Expired</option>
                            <option value="revoked">Revoked</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="whmcs-form-group">
                        <label class="whmcs-form-label">Product</label>
                        <select class="whmcs-form-control whmcs-form-select" id="productFilter">
                            <option value="">All Products</option>
                            @foreach ($products as $product)
                                <option value="{{ $product->id }}">{{ $product->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="whmcs-form-group">
                        <label class="whmcs-form-label">Expiry</label>
                        <select class="whmcs-form-control whmcs-form-select" id="expiryFilter">
                            <option value="">All Time</option>
                            <option value="7days">Next 7 Days</option>
                            <option value="30days">Next 30 Days</option>
                            <option value="90days">Next 90 Days</option>
                            <option value="expired">Already Expired</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="whmcs-form-group">
                        <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>
    </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>License 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="#" 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

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

            $(document).on("submit", "form", function(e) {
                e.preventDefault();
                const submitBtn = $('#submitBtn');
                const originalText = submitBtn.html();
                // Disable submit button and show loading
                submitBtn.prop('disabled', true).html(
                    '<i class="fa fa-spinner fa-spin me-2"></i>Submitting...');
                var form = $(this);
                var actionUrl = form.attr('action');
                $.ajax({
                    url: actionUrl,
                    type: "POST",
                    data: $('#ajax_form').serialize(),
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(data) {
                        submitBtn.prop('disabled', false).html(originalText);
                        if (data.errors) {
                            var errors = data.errors;
                            $.each(errors, function(field, error) {
                                toastr.error(error);
                            });
                        } else if (data.success) {
                            loadItems(1);
                            toastr.success(data.success);
                       /*      showToast(data.success); */
                            document.getElementById("ajax_form").reset();
                            $('#common_modal').modal('hide');
                        }

                    },
                    error: function(response) {
                          submitBtn.prop('disabled', false).html(originalText);
                        $('#loading-indicator').hide();
                        $.each(response.responseJSON.errors, function(field_name, error) {
                            $(document)
                                .find("[name=" + field_name + "]")
                                .after('<span style="color:red">' + error + "</span>");
                            toastr.error(error);
                        });
                    },
                });
            });

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

            function loadItems(page) {
                $('#items-table').empty();
                $('#loading-indicator').show();
                const page_number = $("#page_number option:selected").val();
                const status = $('#statusFilter').val();
                const product = $('#productFilter').val();
                const expiry = $('#expiryFilter').val();
                const search = $('#searchLicenses').val();

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

            loadItems(1);
            $("#page_number").on("change", function() {
                loadItems(1);
            })
            $('#applyFilters').on('click', function() {
                loadItems(1);
            });
            $('#clearFilters').on('click', function() {
                $('#searchLicenses').val('');
                $('#statusFilter').val('');
                $('#productFilter').val('');
                $('#expiryFilter').val('');
                loadItems(1);
            });

            function exportData(type) {
                const status = $('#statusFilter').val();
                const product = $('#productFilter').val();
                const expiry = $('#expiryFilter').val();
                const search = $('#searchLicenses').val();
                // Create URL with query params
                const url = "{{ route('license.export') }}" +
                    `?type=${type}&status=${status}&product=${product}&expiry=${expiry}&search=${search}`;

                window.open(url, '_blank'); // open in new tab or trigger download
            }
            $(document).on('click', '[data-export]', function(e) {
                e.preventDefault();
                const type = $(this).data('export');
                exportData(type);
            });


        });
    </script>
@endpush