<?php $__view->push('styles') ?>
<link href="/modules/applications/css/applications.css" rel="stylesheet">
<?php $__view->endPush() ?>

<div class="container-fluid fade-in">
    <!-- Stats Cards -->
    <div class="row g-3 mb-4" id="stats-cards">
        <div class="col-md-2"><div class="card border-warning h-100"><div class="card-body py-2"><h6 class="text-muted mb-1 small"><?= lang('applications.submitted') ?></h6><h3 class="mb-0" id="stat-submitted">-</h3></div></div></div>
        <div class="col-md-2"><div class="card border-info h-100"><div class="card-body py-2"><h6 class="text-muted mb-1 small"><?= lang('applications.under_review') ?></h6><h3 class="mb-0" id="stat-under_review">-</h3></div></div></div>
        <div class="col-md-2"><div class="card border-primary h-100"><div class="card-body py-2"><h6 class="text-muted mb-1 small"><?= lang('applications.board_pending') ?></h6><h3 class="mb-0" id="stat-board_pending">-</h3></div></div></div>
        <div class="col-md-2"><div class="card border-success h-100"><div class="card-body py-2"><h6 class="text-muted mb-1 small"><?= lang('applications.approved') ?></h6><h3 class="mb-0" id="stat-approved">-</h3></div></div></div>
        <div class="col-md-2"><div class="card border-danger h-100"><div class="card-body py-2"><h6 class="text-muted mb-1 small"><?= lang('applications.rejected') ?></h6><h3 class="mb-0" id="stat-rejected">-</h3></div></div></div>
        <div class="col-md-2"><div class="card border-secondary h-100"><div class="card-body py-2"><h6 class="text-muted mb-1 small"><?= lang('applications.documents_pending') ?></h6><h3 class="mb-0" id="stat-documents_pending">-</h3></div></div></div>
    </div>

    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h4 class="mb-0"><?= lang('applications.title') ?></h4>
        <div class="d-flex gap-2">
            <?php if (Gate::can('applications.create')): ?>
            <a href="/applications/create" class="btn btn-primary"><i class="fas fa-plus me-1"></i><?= lang('applications.create') ?></a>
            <?php endif; ?>
            <div class="dropdown">
                <button class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown"><i class="fas fa-download me-1"></i><?= lang('common.export_csv') ?></button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="/api/applications/export?format=csv"><i class="fas fa-file-csv me-2"></i>CSV</a></li>
                    <li><a class="dropdown-item" href="/api/applications/export?format=excel"><i class="fas fa-file-excel me-2"></i>Excel</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="card mb-3">
        <div class="card-body py-2">
            <form id="filter-form" class="row g-2 align-items-end" data-filter-table="applications-table">
                <div class="col-md-2">
                    <label class="form-label small"><?= lang('common.status') ?></label>
                    <select name="status" class="form-select form-select-sm">
                        <option value=""><?= lang('common.all') ?></option>
                        <option value="draft">Draft</option>
                        <option value="submitted">Submitted</option>
                        <option value="under_review">Under Review</option>
                        <option value="documents_pending">Documents Pending</option>
                        <option value="interview_scheduled">Interview Scheduled</option>
                        <option value="board_pending">Board Pending</option>
                        <option value="approved">Approved</option>
                        <option value="rejected">Rejected</option>
                        <option value="waitlisted">Waitlisted</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label small"><?= lang('applications.membership_type') ?></label>
                    <select name="membership_type_id" class="form-select form-select-sm">
                        <option value=""><?= lang('common.all') ?></option>
                        <?php foreach ($membershipTypes as $t): ?>
                        <option value="<?= $t['id'] ?>"><?= e(current_lang() === 'ar' ? $t['name_ar'] : $t['name_en']) ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label small"><?= lang('applications.priority') ?></label>
                    <select name="priority" class="form-select form-select-sm">
                        <option value=""><?= lang('common.all') ?></option>
                        <option value="normal">Normal</option>
                        <option value="high">High</option>
                        <option value="vip">VIP</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label small"><?= lang('applications.date_from') ?></label>
                    <input type="date" name="date_from" class="form-control form-control-sm datepicker">
                </div>
                <div class="col-md-2">
                    <label class="form-label small"><?= lang('applications.date_to') ?></label>
                    <input type="date" name="date_to" class="form-control form-control-sm datepicker">
                </div>
                <div class="col-md-2">
                    <button type="button" class="btn btn-sm btn-primary w-100" onclick="reloadTable()"><i class="fas fa-search me-1"></i><?= lang('common.search') ?></button>
                </div>
            </form>
        </div>
    </div>

    <!-- DataTable -->
    <div class="card">
        <div class="card-body">
            <table id="applications-table" class="table table-striped table-hover w-100">
                <thead>
                    <tr>
                        <th>#</th>
                        <th><?= lang('applications.app_number') ?></th>
                        <th><?= lang('applications.applicant_name') ?></th>
                        <th><?= lang('applications.phone') ?></th>
                        <th><?= lang('applications.type') ?></th>
                        <th><?= lang('common.status') ?></th>
                        <th><?= lang('applications.priority') ?></th>
                        <th><?= lang('applications.submission_date') ?></th>
                        <th><?= lang('applications.assigned_to') ?></th>
                        <th><?= lang('common.actions') ?></th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

<?php $__view->push('scripts') ?>
<script>
let appTable;

$(document).ready(function() {
    loadStats();

    appTable = $('#applications-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: '/api/applications/datatable',
            type: 'GET',
            data: function(d) {
                const form = document.getElementById('filter-form');
                if (form) {
                    const fd = new FormData(form);
                    for (const [key, value] of fd.entries()) {
                        if (value) d[key] = value;
                    }
                }
                return d;
            }
        },
        columns: [
            { data: 'id', orderable: true },
            { data: 'application_number', orderable: true },
            { data: 'full_name', orderable: true },
            { data: 'phone', orderable: false },
            { data: 'type', orderable: true },
            { data: 'status', orderable: true },
            { data: 'priority', orderable: true },
            { data: 'submission_date', orderable: true },
            { data: 'assigned_to', orderable: true },
            { data: 'actions', orderable: false, searchable: false },
        ],
        order: [[0, 'desc']],
        pageLength: 25,
        responsive: true,
        language: {
            processing: '<div class="spinner-border spinner-border-sm text-primary"></div>',
            emptyTable: '<?= lang('common.no_data') ?>',
        }
    });
});

function reloadTable() {
    appTable.ajax.reload(null, false);
    loadStats();
}

function loadStats() {
    $.get('/api/applications/stats', function(res) {
        if (res.success && res.data) {
            const d = res.data;
            $('#stat-submitted').text(d.submitted || 0);
            $('#stat-under_review').text(d.under_review || 0);
            $('#stat-board_pending').text(d.board_pending || 0);
            $('#stat-approved').text(d.approved || 0);
            $('#stat-rejected').text(d.rejected || 0);
            $('#stat-documents_pending').text(d.documents_pending || 0);
        }
    });
}
</script>
<?php $__view->endPush() ?>