<div class="d-flex justify-content-between align-items-center mb-4">
    <h4 class="mb-0"><i class="fas fa-file-export me-2"></i><?= lang('comm.generate_document') ?></h4>
</div>

<div class="row">
    <div class="col-lg-5">
        <div class="card">
            <div class="card-header"><h6 class="mb-0">Generate</h6></div>
            <div class="card-body">
                <form id="generate-form">
                    <?= csrf_field() ?>
                    <div class="mb-3">
                        <label class="form-label">Template <span class="text-danger">*</span></label>
                        <select name="template_id" id="gen-template" class="form-select select2" required>
                            <option value="">-- Select Template --</option>
                            <?php foreach ($templates as $t): ?>
                            <option value="<?= $t['id'] ?>"><?= e($t['name_en']) ?> (<?= e($t['template_type']) ?>)</option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Member (optional)</label>
                        <select name="member_id" id="gen-member" class="form-select select2" data-url="/api/members/search">
                            <option value="">-- No Member --</option>
                        </select>
                        <small class="text-muted">Search by name, number, or phone</small>
                    </div>
                    <div class="d-flex gap-2">
                        <button type="button" class="btn btn-outline-primary" onclick="previewDoc()"><i class="fas fa-eye me-1"></i>Preview</button>
                        <button type="button" class="btn btn-primary" onclick="generateDoc()"><i class="fas fa-file-export me-1"></i>Generate</button>
                    </div>
                </form>
            </div>
        </div>

        <div class="card mt-4">
            <div class="card-header"><h6 class="mb-0">Recently Generated</h6></div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-sm mb-0">
                        <thead><tr><th>Template</th><th>Member</th><th>Date</th></tr></thead>
                        <tbody>
                        <?php foreach ($recentDocs as $doc): ?>
                        <tr>
                            <td><?= e($doc['template_name'] ?? '-') ?></td>
                            <td><?= e($doc['member_name'] ?? '-') ?></td>
                            <td><?= format_datetime($doc['generated_at']) ?></td>
                        </tr>
                        <?php endforeach; ?>
                        <?php if (empty($recentDocs)): ?>
                        <tr><td colspan="3" class="text-muted text-center py-3">No documents generated yet</td></tr>
                        <?php endif; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-7">
        <div class="card">
            <div class="card-header"><h6 class="mb-0">Preview</h6></div>
            <div class="card-body">
                <div id="doc-preview" class="border rounded p-3 bg-white" style="min-height:400px">
                    <div class="text-center text-muted py-5"><i class="fas fa-file fa-3x mb-3"></i><p>Select a template and click Preview</p></div>
                </div>
            </div>
        </div>
    </div>
</div>

<?php $__view->push('scripts') ?>
<script>
$('#gen-member').select2({
    theme: 'bootstrap-5', width: '100%', allowClear: true, placeholder: '-- No Member --',
    ajax: {
        url: '/api/members/search', dataType: 'json', delay: 300,
        data: function(p){ return {q: p.term}; },
        processResults: function(d){ return {results: d.data || d}; }
    }, minimumInputLength: 2
});

function previewDoc(){
    var tid = $('#gen-template').val();
    if(!tid){FormHelper.showToast('error','Select a template');return;}
    $.post('/communications/documents/preview',{_token:'<?= csrf_token() ?>',template_id:tid,member_id:$('#gen-member').val()||0},function(r){
        if(r.success) $('#doc-preview').html(r.html);
        else FormHelper.showToast('error',r.message);
    });
}
function generateDoc(){
    var tid = $('#gen-template').val();
    if(!tid){FormHelper.showToast('error','Select a template');return;}
    $.post('/communications/documents/generate',{_token:'<?= csrf_token() ?>',template_id:tid,member_id:$('#gen-member').val()||0},function(r){
        if(r.success){
            FormHelper.showToast('success',r.message);
            var win = window.open('','_blank');
            win.document.write(r.html);
            win.document.close();
        } else FormHelper.showToast('error',r.message);
    });
}
</script>
<?php $__view->endPush() ?>