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

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

@section('operation')
    <a class="whmcs-btn whmcs-btn-primary me-3 btn_modal" href="{{ route('support.create') }}" type="button">
        <i class="fas fa-plus me-2"></i>Create Ticket
    </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-ticket-alt"></i>
                    </div>
                    <div class="flex-grow-1">
                        <div class="stats-card-value">{{ number_format($totalTickets) }}</div>
                        <div class="stats-card-label">Total Tickets</div>
                        <div class="stats-card-change {{ $totalTicketsChange >= 0 ? 'positive' : 'text-danger' }}">
                            <i class="fas fa-arrow-{{ $totalTicketsChange >= 0 ? 'up' : 'down' }}"></i>
                            {{ abs($totalTicketsChange) }}% 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($openTickets) }}</div>
                        <div class="stats-card-label">Open Tickets</div>
                        <div class="stats-card-change {{ $openTicketsChange >= 0 ? 'positive' : 'text-danger' }}">
                            <i class="fas fa-arrow-{{ $openTicketsChange >= 0 ? 'up' : 'down' }}"></i>
                            {{ abs($openTicketsChange) }}% 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($resolvedTickets) }}</div>
                        <div class="stats-card-label">Resolved</div>
                        <div class="stats-card-change {{ $resolvedTicketsChange >= 0 ? 'text-warning' : 'text-danger' }}">
                            <i class="fas fa-arrow-{{ $resolvedTicketsChange >= 0 ? 'up' : 'down' }}"></i>
                            {{ abs($resolvedTicketsChange) }}% 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-stopwatch"></i>
                    </div>
                    <div class="flex-grow-1">
                        <div class="stats-card-value">{{ $avgResponseTime }}</div>
                        <div class="stats-card-label">Avg Response</div>
                        <div class="stats-card-change {{ $avgResponseChange >= 0 ? 'text-danger' : 'positive' }}">
                            <i class="fas fa-arrow-{{ $avgResponseChange >= 0 ? 'down' : 'up' }}"></i>
                            {{ abs($avgResponseChange) }}% from last month
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters UI -->
    <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 Tickets</label>
                            <div class="input-group">
                                <input type="text" class="whmcs-form-control"
                                    placeholder="Ticket #, subject, customer..." id="searchTickets">
                                <button class="whmcs-btn whmcs-btn-outline-secondary" id="btnSearch" 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" id="filterStatus">
                                <option value="">All Status</option>
                                <option value="open">Open</option>
                                <option value="in_progress">In Progress</option>
                                <option value="resolved">Resolved</option>
                                <option value="closed">Closed</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="whmcs-form-label">Priority</label>
                            <select class="whmcs-form-control whmcs-form-select" id="filterPriority">
                                <option value="">All Priorities</option>
                                <option value="low">Low</option>
                                <option value="medium">Medium</option>
                                <option value="high">High</option>
                                <option value="urgent">Urgent</option>
                            </select>
                        </div>
                        <div class="col-md-2">
                            <label class="whmcs-form-label">Department</label>
                            <select class="whmcs-form-control whmcs-form-select" id="filterDepartment">
                                <option value="">All Departments</option>
                                <option value="technical_support">Technical Support</option>
                                <option value="billing">Billing</option>
                                <option value="sales">Sales</option>
                                <option value="general">General</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" id="btnApplyFilters">Apply Filters</button>
                                <button class="whmcs-btn whmcs-btn-outline-secondary" id="btnClearFilters">Clear</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Tickets List -->
    <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>Support Tickets</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;" id="pageSizeSelect">
                        <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" id="items-table">
            {{-- AJAX loaded tickets list will appear here --}}
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {
            // Initialize params for filters and pagination
            let currentPage = 1;

            $(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);
                        });
                    },
                });
            });



            function loadTickets(page = 1) {
                var page_number = $("#page_number option:selected").val();
                let filters = {
                    search: $('#searchTickets').val(),
                    status: $('#filterStatus').val(),
                    priority: $('#filterPriority').val(),
                    department: $('#filterDepartment').val(),
                    perPage: page_number
                };

                $.ajax({
                    url: "{{ route('support.getdata') }}" + '?page=' + page,
                    type: 'GET',
                    data: filters,
                    beforeSend: function() {
                        $('#items-table').html('<div class="p-3 text-center">Loading...</div>');
                    },
                    success: function(data) {
                        $('#items-table').html(data);
                    },
                    error: function() {
                        $('#items-table').html(
                            '<div class="p-3 text-danger text-center">Failed to load tickets.</div>'
                        );
                    }
                });
            }

            // Initial load
            loadTickets();
            // Pagination click (delegated event)
            $('#items-table').on('click', '.pagination a', function(e) {
                e.preventDefault();
                let page = $(this).attr('href').split('page=')[1];
                loadTickets(page);
            });

            // Change page size
            $('#pageSizeSelect').on('change', function() {
                pageSize = $(this).val();
                loadTickets(1);
            });

            // Apply filters button
            $('#btnApplyFilters').on('click', function(e) {
                e.preventDefault();
                loadTickets(1);
            });

            // Clear filters button
            $('#btnClearFilters').on('click', function(e) {
                e.preventDefault();
                $('#searchTickets').val('');
                $('#filterStatus').val('');
                $('#filterPriority').val('');
                $('#filterDepartment').val('');
                loadTickets(1);
            });

            // Search button click
            $('#btnSearch').on('click', function() {
                loadTickets(1);
            });

            // Enter key triggers search
            $('#searchTickets').on('keypress', function(e) {
                if (e.which === 13) {
                    e.preventDefault();
                    loadTickets(1);
                }
            });
        });
    </script>
@endpush