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

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

@section('operation')
    <a class="whmcs-btn whmcs-btn-primary me-3 btn_modal" href="{{ route('order.create') }}" type="button">
        <i class="fas fa-plus me-2"></i>New Order
    </a>
@endsection

@section('content')
    <!-- Stats Cards -->
<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-shopping-cart"></i>
                </div>
                <div class="flex-grow-1">
                    <div class="stats-card-value">{{ $totalOrders }}</div>
                    <div class="stats-card-label">Total Orders</div>
                    <div class="stats-card-change {{ $changeTotal >= 0 ? 'positive' : 'text-danger' }}">
                        <i class="fas fa-arrow-{{ $changeTotal >= 0 ? 'up' : 'down' }}"></i>
                        {{ round($changeTotal, 1) }}% 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">{{ $completedOrders }}</div>
                    <div class="stats-card-label">Completed</div>
                    <div class="stats-card-change {{ $changeCompleted >= 0 ? 'positive' : 'text-danger' }}">
                        <i class="fas fa-arrow-{{ $changeCompleted >= 0 ? 'up' : 'down' }}"></i>
                        {{ round($changeCompleted, 1) }}% 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">{{ $pendingOrders }}</div>
                    <div class="stats-card-label">Pending</div>
                    <div class="stats-card-change {{ $changePending >= 0 ? 'text-warning' : 'text-danger' }}">
                        <i class="fas fa-arrow-{{ $changePending >= 0 ? 'up' : 'down' }}"></i>
                        {{ round($changePending, 1) }}% 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">{{ $cancelledOrders }}</div>
                    <div class="stats-card-label">Cancelled</div>
                    <div class="stats-card-change {{ $changeCancelled >= 0 ? 'text-warning' : 'text-danger' }}">
                        <i class="fas fa-arrow-{{ $changeCancelled >= 0 ? 'up' : 'down' }}"></i>
                        {{ round($changeCancelled, 1) }}% from last month
                    </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">
                        <!-- Search Orders -->
                        <div class="col-md-3">
                            <label class="whmcs-form-label">Search Orders</label>
                            <div class="input-group">
                                <input type="text" class="whmcs-form-control" placeholder="Order #, customer, product..."
                                    id="searchOrders">
                                <button class="whmcs-btn whmcs-btn-outline-secondary" type="button">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </div>

                        <!-- Status Filter -->
                        <div class="col-md-2">
                            <label class="whmcs-form-label">Status</label>
                            <select class="whmcs-form-control whmcs-form-select" id="filterStatus">
                                <option>All Status</option>
                                <option>Pending</option>
                                <option>Active</option>
                                <option>Completed</option>
                                <option>Cancelled</option>
                                <option>Fraud</option>
                            </select>
                        </div>

                        <!-- Product Filter -->
                        <div class="col-md-2">
                            <label class="whmcs-form-label">Product</label>
                            <select class="whmcs-form-control whmcs-form-select" id="filterProduct">
                                <option>All Products</option>
                                @foreach ($products as $product)
                                    <option value="{{ $product->id }}">{{ $product->name }}</option>
                                @endforeach
                            </select>
                        </div>

                        <!-- Date Range Filter -->
                        <div class="col-md-2">
                            <label class="whmcs-form-label">Date Range</label>
                            <select class="whmcs-form-control whmcs-form-select" id="filterDateRange">
                                <option>All Time</option>
                                <option>Today</option>
                                <option>This Week</option>
                                <option>This Month</option>
                                <option>This Year</option>
                            </select>
                        </div>

                        <!-- Filter Buttons -->
                        <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" type="button" id="applyFilters">Apply
                                    Filters</button>
                                <button class="whmcs-btn whmcs-btn-outline-secondary" type="button"
                                    id="clearFilters">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>Order 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) {
                            loadOrders(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 loadOrders(page = 1) {
                $('#items-table').empty();
                $('#loading-indicator').show();

                const perPage = $("#page_number option:selected").val();
                const status = $('#statusFilter').val();
                const product = $('#productFilter').val();
                const dateRange = $('#dateRangeFilter').val();
                const search = $('#searchOrders').val();

                $.ajax({
                    url: "{{ route('order.getdata') }}" + '?page=' + page,
                    type: 'get',
                    dataType: 'html',
                    data: {
                        perPage: perPage,
                        status: status,
                        product: product,
                        dateRange: dateRange,
                        search: search
                    },
                    success: function(data) {
                        $('#loading-indicator').hide();
                        $('#items-table').html(data);
                    },
                    error: function(data) {
                        $('#loading-indicator').hide();
                        /* alert("Something went wrong while loading orders."); */
                    }
                });
            }

            // Initial load
            loadOrders(1);

            // Pagination change
            $("#page_number").on("change", function() {
                loadOrders(1);
            });

            // Apply filters
            $('#applyFilters').on('click', function() {
                loadOrders(1);
            });

            // Clear filters
            $('#clearFilters').on('click', function() {
                $('#searchOrders').val('');
                $('#statusFilter').val('');
                $('#productFilter').val('');
                $('#dateRangeFilter').val('');
                loadOrders(1);
            });


            function exportOrders(type) {
                const status = $('#statusFilter').val();
                const product = $('#productFilter').val();
                const dateRange = $('#dateRangeFilter').val();
                const search = $('#searchOrders').val();

                const url = "{{ route('order.export') }}" +
                    `?type=${type}&status=${status}&product=${product}&dateRange=${dateRange}&search=${search}`;

                window.open(url, '_blank');
            }

            $(document).on('click', '[data-export]', function(e) {
                e.preventDefault();
                const type = $(this).data('export');
                exportOrders(type);
            });



        });
    </script>
@endpush