<div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0"><i class="fas fa-calendar-alt me-2"></i><?= lang('subs.subscription_periods') ?></h4>
    <?php if (auth_can('members.create')): ?>
    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#period-modal" id="btn-add-period">
        <i class="fas fa-plus me-1"></i><?= lang('subs.add_period') ?>
    </button>
    <?php endif; ?>
</div>

<div class="card">
    <div class="card-body">
        <table id="periods-table" class="table table-striped table-hover w-100"
               data-url="/api/subscriptions/periods/datatable"
               data-columns='<?= json_encode([
                   ["data" => "period_code", "title" => "Code"],
                   ["data" => "name_en", "title" => "Name (EN)"],
                   ["data" => "name_ar", "title" => "Name (AR)"],
                   ["data" => "start_date", "title" => "Start"],
                   ["data" => "end_date", "title" => "End"],
                   ["data" => "grace_end", "title" => "Grace End"],
                   ["data" => "sub_count", "title" => "Subs"],
                   ["data" => "is_active", "title" => "Active"],
                   ["data" => "actions", "title" => "", "orderable" => false]
               ]) ?>'>
            <thead><tr><th>Code</th><th>Name (EN)</th><th>Name (AR)</th><th>Start</th><th>End</th><th>Grace End</th><th>Subs</th><th>Active</th><th></th></tr></thead>
        </table>
    </div>
</div>

<!-- Period Modal -->
<div class="modal fade" id="period-modal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header"><h5 class="modal-title" id="period-modal-title">Add Period</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
            <form id="period-form" method="POST" action="/subscriptions/periods" data-ajax="true">
                <?= csrf_field() ?>
                <div class="modal-body">
                    <div class="mb-3"><label class="form-label">Code <span class="text-danger">*</span></label><input type="text" name="period_code" class="form-control" required><div class="invalid-feedback" data-field="period_code"></div></div>
                    <div class="mb-3"><label class="form-label">Name (EN) <span class="text-danger">*</span></label><input type="text" name="name_en" class="form-control" required><div class="invalid-feedback" data-field="name_en"></div></div>
                    <div class="mb-3"><label class="form-label">Name (AR) <span class="text-danger">*</span></label><input type="text" name="name_ar" class="form-control" required dir="rtl"><div class="invalid-feedback" data-field="name_ar"></div></div>
                    <div class="row g-3">
                        <div class="col-md-6"><label class="form-label">Start Date <span class="text-danger">*</span></label><input type="text" name="start_date" class="form-control datepicker" required><div class="invalid-feedback" data-field="start_date"></div></div>
                        <div class="col-md-6"><label class="form-label">End Date <span class="text-danger">*</span></label><input type="text" name="end_date" class="form-control datepicker" required><div class="invalid-feedback" data-field="end_date"></div></div>
                    </div>
                    <div class="mb-3 mt-3"><label class="form-label">Grace End Date</label><input type="text" name="grace_end_date" class="form-control datepicker"></div>
                    <div class="form-check"><input type="checkbox" name="is_active" value="1" class="form-check-input" id="period-active" checked><label class="form-check-label" for="period-active">Active</label></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"><?= lang('common.cancel') ?></button>
                    <button type="submit" class="btn btn-primary"><i class="fas fa-save me-1"></i><?= lang('common.save') ?></button>
                </div>
            </form>
        </div>
    </div>
</div>

<?php $__view->push('scripts') ?>
<script>
$(function(){
    DataTableHelper.init('periods-table');

    $('#btn-add-period').on('click', function(){
        $('#period-modal-title').text('Add Period');
        $('#period-form')[0].reset();
        $('#period-form').attr('action', '/subscriptions/periods');
    });

    $(document).on('click', '.btn-edit-period', function(){
        var id = $(this).data('id');
        $.get('/api/subscriptions/periods/'+id, function(res){
            if(res.success){
                var d = res.data;
                $('#period-modal-title').text('Edit Period');
                $('#period-form').attr('action', '/subscriptions/periods/'+id);
                $('#period-form [name=period_code]').val(d.period_code);
                $('#period-form [name=name_en]').val(d.name_en);
                $('#period-form [name=name_ar]').val(d.name_ar);
                $('#period-form [name=start_date]').val(d.start_date);
                $('#period-form [name=end_date]').val(d.end_date);
                $('#period-form [name=grace_end_date]').val(d.grace_end_date||'');
                $('#period-active').prop('checked', d.is_active == 1);
                new bootstrap.Modal('#period-modal').show();
            }
        });
    });

    // Reload table on form success
    $(document).on('ajaxSuccess', function(e, xhr, settings){
        if(settings.url && settings.url.includes('/subscriptions/periods')){
            DataTableHelper.reload('periods-table');
            bootstrap.Modal.getInstance(document.getElementById('period-modal'))?.hide();
        }
    });
});
</script>
<?php $__view->endPush() ?>