<div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="mb-0"><i class="fas fa-clock me-2"></i><?= lang('reports.scheduled_reports') ?></h4>
    <a href="/reports/schedules/create" class="btn btn-primary btn-sm"><i class="fas fa-plus me-1"></i><?= lang('common.create') ?></a>
</div>

<div class="card">
    <div class="card-body">
        <table id="schedules-table" class="table table-striped table-hover w-100"
               data-url="/api/reports/schedules/datatable"
               data-columns='<?= e(json_encode([
                   ["data" => "id", "title" => "#"],
                   ["data" => "schedule_name", "title" => "Name"],
                   ["data" => "report_name_en", "title" => "Report"],
                   ["data" => "frequency", "title" => "Frequency"],
                   ["data" => "is_active", "title" => "Active"],
                   ["data" => "last_run_at", "title" => "Last Run"],
                   ["data" => "next_run_at", "title" => "Next Run"],
                   ["data" => "id", "title" => "Actions", "orderable" => false, "searchable" => false]
               ])) ?>'>
            <thead>
                <tr>
                    <th>#</th>
                    <th>Name</th>
                    <th>Report</th>
                    <th>Frequency</th>
                    <th>Active</th>
                    <th>Last Run</th>
                    <th>Next Run</th>
                    <th>Actions</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

<?php $__view->push('scripts') ?>
<script>
$(function() {
    var csrf = $('meta[name="csrf-token"]').attr('content');

    var table = $('#schedules-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: { url: '/api/reports/schedules/datatable', type: 'GET' },
        columns: [
            { data: 'id' },
            { data: 'schedule_name' },
            { data: 'report_name_en' },
            { data: 'frequency', render: function(d) { return '<span class="badge bg-info">'+d+'</span>'; } },
            { data: 'is_active', render: function(d,t,r) { return '<div class="form-check form-switch"><input class="form-check-input toggle-active" type="checkbox" data-id="'+r.id+'" '+(d==1?'checked':'')+'></div>'; } },
            { data: 'last_run_at', render: function(d) { return d || '<span class="text-muted">Never</span>'; } },
            { data: 'next_run_at', render: function(d) { return d || '-'; } },
            { data: 'id', orderable: false, render: function(d) {
                return '<div class="btn-group btn-group-sm">'+
                    '<a href="/reports/schedules/'+d+'/edit" class="btn btn-outline-primary" title="Edit"><i class="fas fa-edit"></i></a>'+
                    '<button class="btn btn-outline-danger btn-delete" data-id="'+d+'" title="Delete"><i class="fas fa-trash"></i></button>'+
                '</div>';
            }}
        ],
        order: [[0, 'desc']],
        pageLength: 25
    });

    $(document).on('change', '.toggle-active', function() {
        var id = $(this).data('id');
        $.ajax({ url: '/api/reports/schedules/'+id+'/toggle', type: 'POST', headers: {'X-CSRF-TOKEN': csrf, 'X-Requested-With':'XMLHttpRequest'}, success: function() { table.ajax.reload(null, false); } });
    });

    $(document).on('click', '.btn-delete', function() {
        var id = $(this).data('id');
        Swal.fire({ title: 'Delete?', text: 'This schedule will be removed', icon: 'warning', showCancelButton: true, confirmButtonColor: '#e53e3e', confirmButtonText: 'Delete' }).then(function(r) {
            if (r.isConfirmed) {
                $.ajax({ url: '/api/reports/schedules/'+id+'/delete', type: 'POST', headers: {'X-CSRF-TOKEN': csrf, 'X-Requested-With':'XMLHttpRequest'}, success: function() { table.ajax.reload(null, false); } });
            }
        });
    });
});
</script>
<?php $__view->endPush() ?>