<div class="row g-3 mb-4">
    <div class="col-md-3"><div class="card border-warning h-100"><div class="card-body"><div class="d-flex justify-content-between"><div><h6 class="text-muted mb-1">Pending</h6><h3 class="mb-0"><?= $totalPending ?></h3></div><div class="align-self-center"><i class="fas fa-hourglass-half fa-2x text-warning opacity-50"></i></div></div></div></div></div>
    <div class="col-md-3"><div class="card border-info h-100"><div class="card-body"><div class="d-flex justify-content-between"><div><h6 class="text-muted mb-1">Approved</h6><h3 class="mb-0"><?= $totalApproved ?></h3></div><div class="align-self-center"><i class="fas fa-check fa-2x text-info opacity-50"></i></div></div></div></div></div>
    <div class="col-md-3"><div class="card border-primary h-100"><div class="card-body"><div class="d-flex justify-content-between"><div><h6 class="text-muted mb-1">Active</h6><h3 class="mb-0"><?= $totalActive ?></h3></div><div class="align-self-center"><i class="fas fa-snowflake fa-2x text-primary opacity-50"></i></div></div></div></div></div>
    <div class="col-md-3"><div class="card border-secondary h-100"><div class="card-body"><div class="d-flex justify-content-between"><div><h6 class="text-muted mb-1">Ended</h6><h3 class="mb-0"><?= $totalEnded ?></h3></div><div class="align-self-center"><i class="fas fa-stop-circle fa-2x text-secondary opacity-50"></i></div></div></div></div></div>
</div>

<div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0"><i class="fas fa-snowflake me-2"></i><?= lang('subs.freezes') ?></h4>
    <?php if (auth_can('freezes.create')): ?>
    <a href="/freezes/create" class="btn btn-primary"><i class="fas fa-plus me-1"></i><?= lang('subs.create_freeze') ?></a>
    <?php endif; ?>
</div>

<div class="card mb-3">
    <div class="card-body py-2">
        <form class="row g-2 align-items-end" id="freeze-filters" data-filter-table="freezes-table">
            <div class="col-md-3">
                <select name="status" class="form-select form-select-sm">
                    <option value="">All Statuses</option>
                    <option value="pending">Pending</option><option value="approved">Approved</option>
                    <option value="active">Active</option><option value="ended">Ended</option>
                    <option value="cancelled">Cancelled</option><option value="rejected">Rejected</option>
                </select>
            </div>
            <div class="col-md-2">
                <button type="button" class="btn btn-sm btn-outline-primary" id="btn-filter-freeze"><i class="fas fa-filter"></i></button>
                <button type="button" class="btn btn-sm btn-outline-secondary" id="btn-clear-freeze"><i class="fas fa-times"></i></button>
            </div>
        </form>
    </div>
</div>

<div class="card">
    <div class="card-body">
        <table id="freezes-table" class="table table-striped table-hover w-100"
               data-url="/api/freezes/datatable"
               data-columns='<?= json_encode([
                   ["data" => "freeze_number", "title" => "Freeze #"],
                   ["data" => "membership_number", "title" => "Member #"],
                   ["data" => "member_name", "title" => "Name"],
                   ["data" => "reason", "title" => "Reason"],
                   ["data" => "start_date", "title" => "Start"],
                   ["data" => "end_date", "title" => "End"],
                   ["data" => "duration", "title" => "Duration"],
                   ["data" => "fee", "title" => "Fee"],
                   ["data" => "status", "title" => "Status"],
                   ["data" => "actions", "title" => "", "orderable" => false, "searchable" => false]
               ]) ?>'>
            <thead><tr><th>Freeze #</th><th>Member #</th><th>Name</th><th>Reason</th><th>Start</th><th>End</th><th>Duration</th><th>Fee</th><th>Status</th><th></th></tr></thead>
        </table>
    </div>
</div>

<?php $__view->push('scripts') ?>
<script>
$(function(){
    DataTableHelper.init('freezes-table');
    $('#btn-filter-freeze').on('click', function(){ DataTableHelper.reload('freezes-table'); });
    $('#btn-clear-freeze').on('click', function(){ $('#freeze-filters select').val(''); DataTableHelper.reload('freezes-table'); });

    // Approve
    $(document).on('click', '.btn-approve-freeze', function(){
        var id = $(this).data('id');
        Swal.fire({ title:'Approve Freeze?', icon:'question', showCancelButton:true, confirmButtonText:'Approve', confirmButtonColor:'#28a745' }).then(function(r){
            if(r.isConfirmed){
                $.post('/api/freezes/'+id+'/approve', {_token: $('meta[name="csrf-token"]').attr('content')}, function(res){
                    if(res.success){ FormHelper.showToast('success', res.message); DataTableHelper.reload('freezes-table'); }
                    else { FormHelper.showToast('error', res.message); }
                });
            }
        });
    });

    // Reject
    $(document).on('click', '.btn-reject-freeze', function(){
        var id = $(this).data('id');
        Swal.fire({ title:'Reject Freeze?', input:'textarea', inputPlaceholder:'Rejection reason...', icon:'warning', showCancelButton:true, confirmButtonText:'Reject', confirmButtonColor:'#dc3545' }).then(function(r){
            if(r.isConfirmed){
                $.post('/api/freezes/'+id+'/reject', {_token: $('meta[name="csrf-token"]').attr('content'), rejection_reason: r.value}, function(res){
                    if(res.success){ FormHelper.showToast('success', res.message); DataTableHelper.reload('freezes-table'); }
                    else { FormHelper.showToast('error', res.message); }
                });
            }
        });
    });
});
</script>
<?php $__view->endPush() ?>