<div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="mb-0"><i class="fas fa-th-large me-2"></i><?= lang('reports.dashboard_config') ?></h4>
    <button class="btn btn-primary btn-sm" id="btn-save-layout"><i class="fas fa-save me-1"></i>Save Layout</button>
</div>

<div class="row g-3">
    <div class="col-md-4">
        <div class="card">
            <div class="card-header"><h6 class="mb-0">Available Widgets</h6></div>
            <div class="card-body" id="available-widgets">
                <?php foreach ($allWidgets as $w): ?>
                <div class="form-check mb-2">
                    <input class="form-check-input widget-toggle" type="checkbox" value="<?= e($w['widget_code']) ?>" id="w-<?= e($w['widget_code']) ?>"
                        <?php
                        $activeWidgets = $userLayout ? json_decode($userLayout['widgets'] ?? '[]', true) : [];
                        if (empty($activeWidgets) || in_array($w['widget_code'], array_column($activeWidgets, 'code'))) echo 'checked';
                        ?>>
                    <label class="form-check-label" for="w-<?= e($w['widget_code']) ?>">
                        <?= e($w['widget_name_en']) ?>
                        <small class="text-muted d-block"><?= e($w['widget_name_ar'] ?? '') ?></small>
                    </label>
                </div>
                <?php endforeach; ?>
                <?php if (empty($allWidgets)): ?>
                <p class="text-muted">No system widgets registered yet. Module widgets will appear as they are installed.</p>
                <?php endif; ?>
            </div>
        </div>
    </div>
    <div class="col-md-8">
        <div class="card">
            <div class="card-header"><h6 class="mb-0">Current Layout Preview</h6></div>
            <div class="card-body">
                <p class="text-muted">Toggle widgets on the left panel and save your preferred dashboard layout. Changes take effect on the main dashboard after saving.</p>
                <div id="layout-preview" class="border rounded p-3 bg-light" style="min-height:200px">
                    <div class="row g-2" id="preview-grid"></div>
                </div>
            </div>
        </div>
    </div>
</div>

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

    function updatePreview() {
        var grid = $('#preview-grid');
        grid.empty();
        $('.widget-toggle:checked').each(function() {
            var code = $(this).val();
            var label = $(this).next('label').text().trim().split('\n')[0];
            grid.append('<div class="col-md-4"><div class="card"><div class="card-body py-2 text-center"><small>'+label+'</small></div></div></div>');
        });
        if (!grid.children().length) {
            grid.html('<p class="text-muted text-center py-4">No widgets selected</p>');
        }
    }

    $('.widget-toggle').on('change', updatePreview);
    updatePreview();

    $('#btn-save-layout').on('click', function() {
        var widgets = [];
        $('.widget-toggle:checked').each(function() {
            widgets.push({ code: $(this).val(), order: widgets.length });
        });
        $.ajax({
            url: '/api/reports/dashboard-config',
            type: 'POST',
            data: { widgets: JSON.stringify(widgets) },
            headers: { 'X-CSRF-TOKEN': csrf, 'X-Requested-With': 'XMLHttpRequest' },
            success: function(res) {
                if (res.success) {
                    Swal.fire({icon:'success',title:'Saved!',timer:1500,showConfirmButton:false,toast:true,position:'top-end'});
                }
            }
        });
    });
});
</script>
<?php $__view->endPush() ?>