<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;
?>
<h2>Document Designer</h2>
<?php $form = ActiveForm::begin(['id' => 'designer-form', 'action' => ['designer/save'], 'method' => 'post']); ?>
<div id="designer-app">
    <?= $form->field($model, 'layout_name')->textInput(['maxlength' => 128, 'required' => true]) ?>
    <?= $form->field($model, 'source_model')->dropDownList([
        'Order' => 'Order',
        'Invoice' => 'Invoice',
        'Product' => 'Product',
    ], ['prompt' => 'Select source']) ?>
    <?= $form->field($model, 'page_size')->dropDownList([
        'A4' => 'A4 (210mm x 297mm)',
        'Letter' => 'Letter (8.5in x 11in)',
        'Legal' => 'Legal (8.5in x 14in)',
        'A5' => 'A5 (148mm x 210mm)',
        'Custom' => 'Custom'
    ], ['id' => 'page-size']) ?>
    <span id="custom-size-fields" style="display:none;">
        <?= $form->field($model, 'custom_width')->input('number', ['id' => 'custom-width', 'min' => 1, 'max' => 1000])->label('Width (mm)') ?>
        <?= $form->field($model, 'custom_height')->input('number', ['id' => 'custom-height', 'min' => 1, 'max' => 1000])->label('Height (mm)') ?>
    </span>
    <hr>
    <div id="element-palette">
        <strong>Elements:</strong>
        <ul style="list-style:none; padding-left:0;">
            <li draggable="true">Text block</li>
            <li draggable="true">Heading (H1, H2, H3)</li>
            <li draggable="true">Image</li>
            <li draggable="true">Table</li>
            <li draggable="true">Repeating Table (with headers)</li>
            <li draggable="true">Line/Divider</li>
            <li draggable="true">Rectangle/Box</li>
            <li draggable="true">Barcode/QR code</li>
            <li draggable="true">Signature field</li>
            <li draggable="true">Date/time field</li>
            <li draggable="true">Static label</li>
            <li draggable="true">Dynamic data field</li>
            <li draggable="true">Page number</li>
            <li draggable="true">Logo</li>
            <li draggable="true">Checkbox</li>
            <li draggable="true">Radio button</li>
            <li draggable="true">Dropdown/select field</li>
            <li draggable="true">Multi-line text area</li>
            <li draggable="true">Hyperlink</li>
            <li draggable="true">List (ordered/unordered)</li>
            <li draggable="true">Signature image upload</li>
            <li draggable="true">Initials field</li>
            <li draggable="true">Static watermark/background image</li>
            <li draggable="true">Conditional visibility</li>
            <li draggable="true">Embedded SVG/vector shapes</li>
            <li draggable="true">Custom script block</li>
            <li draggable="true">Footer/header block</li>
            <li draggable="true">Repeatable section</li>
        </ul>
    </div>
    <hr>
    <!-- Drag-and-drop UI placeholder -->
    <p>Drag and drop elements to design your document layout.</p>
    <?= Html::submitButton('Save Layout', ['id' => 'save-layout', 'class' => 'btn btn-primary']) ?>
    <?= Html::button('Export to PDF', ['id' => 'export-pdf', 'class' => 'btn btn-secondary', 'type' => 'button']) ?>
</div>
<?php ActiveForm::end(); ?>
<script>
// Page size selection logic
document.getElementById('page-size').onchange = function() {
    var customFields = document.getElementById('custom-size-fields');
    if (this.value === 'Custom') {
        customFields.style.display = 'inline';
    } else {
        customFields.style.display = 'none';
    }
};
// Placeholder for drag-and-drop logic
// TODO: Implement designer UI with JS framework (Vue/React/Plain JS)
document.getElementById('save-layout').onclick = function() {
    // Save layout logic
    alert('Layout saved (stub)');
};
document.getElementById('export-pdf').onclick = function() {
    // Export PDF logic
    var pageSize = document.getElementById('page-size').value;
    var width = 210, height = 297;
    if (pageSize === 'Custom') {
        width = parseInt(document.getElementById('custom-width').value);
        height = parseInt(document.getElementById('custom-height').value);
    }
    alert('Exported to PDF (stub) with page size: ' + pageSize + ' (' + width + ' x ' + height + ')');
};
</script>
