<?php

declare(strict_types=1);

?>
<div class="modal fade" id="addSectionModal" tabindex="-1" aria-hidden="true"><div class="modal-dialog modal-lg modal-dialog-centered"><div class="modal-content">
<form method="POST" action="/public/dynamic-forms/sections/create"><input type="hidden" name="form_id" value="<?= $formId ?>">
<div class="modal-header"><div><h5 class="modal-title">Add Form Section</h5><div class="small text-muted">Group related form fields into a section.</div></div><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
<div class="modal-body"><div class="mb-3"><label class="form-label">Section Title <span class="text-danger">*</span></label><input type="text" name="section_title" class="form-control" required></div>
<label class="form-label">Description</label><textarea name="section_description" class="form-control" rows="4"></textarea></div>
<div class="modal-footer"><button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button><button type="submit" class="btn btn-primary">Add Section</button></div>
</form></div></div></div>

<div class="modal fade" id="editSectionModal" tabindex="-1" aria-hidden="true"><div class="modal-dialog modal-lg modal-dialog-centered"><div class="modal-content">
<form method="POST" action="/public/dynamic-forms/sections/update"><input type="hidden" name="id" id="editSectionId"><input type="hidden" name="form_id" value="<?= $formId ?>">
<div class="modal-header"><h5 class="modal-title">Edit Form Section</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
<div class="modal-body"><div class="mb-3"><label class="form-label">Section Title</label><input type="text" name="section_title" id="editSectionTitle" class="form-control" required></div>
<label class="form-label">Description</label><textarea name="section_description" id="editSectionDescription" class="form-control" rows="4"></textarea></div>
<div class="modal-footer"><button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button><button type="submit" class="btn btn-primary">Update Section</button></div>
</form></div></div></div>

<!-- FIELD MODALS -->
<div class="modal fade" id="addFieldModal" tabindex="-1" aria-hidden="true"><div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable"><div class="modal-content">
<form method="POST" action="/public/dynamic-forms/fields/create"><input type="hidden" name="form_id" value="<?= $formId ?>"><input type="hidden" name="field_type" id="addFieldType">
<div class="modal-header"><div><h5 class="modal-title">Add <span id="addFieldTypeLabel">Field</span></h5><div class="small text-muted">Configure the new form field.</div></div><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
<div class="modal-body"><div class="row g-3">
<div class="col-md-6"><label class="form-label">Target Section <span class="text-danger">*</span></label><select name="section_id" class="form-select" required><option value="">Select section</option><?php foreach($sections as $section): ?><option value="<?= (int)$section['id'] ?>"><?= htmlspecialchars((string)($section['section_title']??''),ENT_QUOTES,'UTF-8') ?></option><?php endforeach; ?></select></div>
<div class="col-md-6"><label class="form-label">Field Label <span class="text-danger">*</span></label><input type="text" name="field_label" class="form-control" required></div>
<div class="col-md-6"><label class="form-label">Placeholder</label><input type="text" name="placeholder" class="form-control"></div>
<div class="col-md-6"><label class="form-label">Column Width</label><select name="column_width" class="form-select"><option value="12">Full Width</option><option value="9">Three Quarters</option><option value="8">Two Thirds</option><option value="6">Half Width</option><option value="4">One Third</option><option value="3">One Quarter</option></select></div>
<div class="col-md-6"><label class="form-label">Default Value</label><input type="text" name="default_value" class="form-control"></div>
<div
    id="numberSettings"
    class="d-none">

    <hr>

    <h6 class="text-primary">
        Number Settings
    </h6>

    <div class="row">

        <div class="col-md-4">

            <label class="form-label">
                Minimum
            </label>

            <input
                type="number"
                name="number_min"
                class="form-control">

        </div>

        <div class="col-md-4">

            <label class="form-label">
                Maximum
            </label>

            <input
                type="number"
                name="number_max"
                class="form-control">

        </div>

        <div class="col-md-4">

            <label class="form-label">
                Step
            </label>

            <input
                type="number"
                value="1"
                name="number_step"
                class="form-control">

        </div>

    </div>

</div>
<div
    id="dateSettings"
    class="d-none">

    <hr>

    <h6 class="text-primary">
        Date Settings
    </h6>

    <div class="row">

        <div class="col-md-6">

            <label class="form-label">
                Minimum Date
            </label>

            <input
                type="date"
                name="date_min"
                class="form-control">

        </div>

        <div class="col-md-6">

            <label class="form-label">
                Maximum Date
            </label>

            <input
                type="date"
                name="date_max"
                class="form-control">

        </div>

    </div>

</div>
<div
    id="timeSettings"
    class="d-none">

    <hr>

    <h6 class="text-primary">
        Time Settings
    </h6>

    <div class="row">

        <div class="col-md-6">

            <label class="form-label">
                Minimum Time
            </label>

            <input
                type="time"
                name="time_min"
                class="form-control">

        </div>

        <div class="col-md-6">

            <label class="form-label">
                Maximum Time
            </label>

            <input
                type="time"
                name="time_max"
                class="form-control">

        </div>

    </div>

</div>
<div
    id="fileSettings"
    class="d-none">

    <hr>

    <h6 class="text-primary">

        File Upload Settings

    </h6>

    <div class="mb-3">

        <label class="form-label">

            Allowed Extensions

        </label>

        <select
            multiple
            name="allowed_extensions[]"
            class="form-select">

            <option value="pdf">PDF</option>

            <option value="doc">DOC</option>

            <option value="docx">DOCX</option>

            <option value="jpg">JPG</option>

            <option value="jpeg">JPEG</option>

            <option value="png">PNG</option>

            <option value="xlsx">XLSX</option>

        </select>

    </div>

    <div class="row">

        <div class="col-md-6">

            <label class="form-label">

                Maximum Size (MB)

            </label>

            <input
                type="number"
                value="5"
                name="max_file_size"
                class="form-control">

        </div>

        <div class="col-md-6 d-flex align-items-end">

            <div class="form-check">

                <input
                    type="checkbox"
                    name="multiple_upload"
                    class="form-check-input"
                    value="1">

                <label
                    class="form-check-label">

                    Multiple Upload

                </label>

            </div>

        </div>

    </div>

</div>


<div class="col-12"><label class="form-label">Help Text</label><textarea name="help_text" class="form-control" rows="3"></textarea></div>
<div
    class="col-12 d-none"
    id="addChoiceOptions">

    <div class="border rounded-3 p-3 bg-light">

        <div
            class="d-flex justify-content-between
                   align-items-center mb-3">

            <div>
                <div class="fw-semibold">
                    Choice Options
                </div>

                <div class="small text-muted">
                    Add options for this field.
                </div>
            </div>

            <button
                type="button"
                class="btn btn-sm btn-outline-primary"
                id="addOptionRow">

                <i class="bi bi-plus-lg me-1"></i>
                Add Option

            </button>

        </div>


        <div id="optionRows">

            <div
                class="input-group mb-2 option-row">

                <span class="input-group-text">
                    1
                </span>

                <input
                    type="text"
                    name="options[]"
                    class="form-control"
                    placeholder="Option label">

                <button
                    type="button"
                    class="btn btn-outline-danger remove-option">

                    <i class="bi bi-trash"></i>

                </button>

            </div>


            <div
                class="input-group mb-2 option-row">

                <span class="input-group-text">
                    2
                </span>

                <input
                    type="text"
                    name="options[]"
                    class="form-control"
                    placeholder="Option label">

                <button
                    type="button"
                    class="btn btn-outline-danger remove-option">

                    <i class="bi bi-trash"></i>

                </button>

            </div>

        </div>

    </div>

</div>


<div class="col-12"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" name="is_required" value="1" id="addFieldRequired"><label class="form-check-label" for="addFieldRequired">Required field</label></div></div>
</div></div>
<div class="modal-footer"><button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button><button type="submit" class="btn btn-primary">Add Field</button></div>
</form></div></div></div>

<div class="modal fade" id="editFieldModal" tabindex="-1" aria-hidden="true"><div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable"><div class="modal-content">
    
    
<form method="POST" action="/public/dynamic-forms/fields/update"><input type="hidden" name="form_id" value="<?= $formId ?>"><input type="hidden" name="id" id="editFieldId">
<div class="modal-header"><h5 class="modal-title">Edit Field</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
<div class="modal-body"><div class="row g-3">
<div class="col-md-8"><label class="form-label">Field Label</label><input type="text" name="field_label" id="editFieldLabel" class="form-control" required></div>
<div class="col-md-4"><label class="form-label">Column Width</label><select name="column_width" id="editFieldColumnWidth" class="form-select"><option value="12">Full Width</option><option value="9">Three Quarters</option><option value="8">Two Thirds</option><option value="6">Half Width</option><option value="4">One Third</option><option value="3">One Quarter</option></select></div>
<div class="col-md-6"><label class="form-label">Placeholder</label><input type="text" name="placeholder" id="editFieldPlaceholder" class="form-control"></div>
<div class="col-md-6"><label class="form-label">Default Value</label><input type="text" name="default_value" id="editFieldDefaultValue" class="form-control"></div>

<div id="editNumberSettings" class="d-none">

    <hr>

    <h6 class="text-primary">
        Number Settings
    </h6>

    <div class="row">

        <div class="col-md-4">

            <label class="form-label">
                Minimum
            </label>

            <input
                id="editNumberMin"
                type="number"
                name="number_min"
                class="form-control">

        </div>

        <div class="col-md-4">

            <label class="form-label">
                Maximum
            </label>

            <input
                id="editNumberMax"
                type="number"
                name="number_max"
                class="form-control">

        </div>

        <div class="col-md-4">

            <label class="form-label">
                Step
            </label>

            <input
                id="editNumberStep"
                type="number"
                name="number_step"
                class="form-control">

        </div>

    </div>

</div>
<div id="editDateSettings" class="d-none">

    <hr>

    <h6 class="text-primary">
        Date Settings
    </h6>

    <div class="row">

        <div class="col-md-6">

            <label class="form-label">
                Minimum Date
            </label>

            <input
                id="editDateMin"
                type="date"
                name="date_min"
                class="form-control">

        </div>

        <div class="col-md-6">

            <label class="form-label">
                Maximum Date
            </label>

            <input
                id="editDateMax"
                type="date"
                name="date_max"
                class="form-control">

        </div>

    </div>

</div>

<div id="editTimeSettings" class="d-none">

    <hr>

    <h6 class="text-primary">
        Time Settings
    </h6>

    <div class="row">

        <div class="col-md-6">

            <label class="form-label">
                Minimum Time
            </label>

            <input
                id="editTimeMin"
                type="time"
                name="time_min"
                class="form-control">

        </div>

        <div class="col-md-6">

            <label class="form-label">
                Maximum Time
            </label>

            <input
                id="editTimeMax"
                type="time"
                name="time_max"
                class="form-control">

        </div>

    </div>

</div>

<div id="editFileSettings" class="d-none">

    <hr>

    <h6 class="text-primary">
        File Upload Settings
    </h6>

    <div class="mb-3">

        <label class="form-label">
            Allowed Extensions
        </label>

        <select
            id="editAllowedExtensions"
            name="allowed_extensions[]"
            multiple
            class="form-select">

            <option value="pdf">PDF</option>
            <option value="doc">DOC</option>
            <option value="docx">DOCX</option>
            <option value="jpg">JPG</option>
            <option value="jpeg">JPEG</option>
            <option value="png">PNG</option>
            <option value="xlsx">XLSX</option>

        </select>

    </div>

    <div class="row">

        <div class="col-md-6">

            <label class="form-label">
                Maximum Size (MB)
            </label>

            <input
                id="editMaxFileSize"
                type="number"
                name="max_file_size"
                class="form-control">

        </div>

        <div class="col-md-6 d-flex align-items-end">

            <div class="form-check">

                <input
                    id="editMultipleUpload"
                    type="checkbox"
                    name="multiple_upload"
                    class="form-check-input"
                    value="1">

                <label class="form-check-label">
                    Multiple Upload
                </label>

            </div>

        </div>

    </div>

</div>





<div class="col-12"><label class="form-label">Help Text</label><textarea name="help_text" id="editFieldHelpText" class="form-control" rows="3"></textarea></div>

<div class="col-12 d-none" id="editChoiceOptions">
    <div class="border rounded-3 p-3 bg-light">
<div class="d-flex justify-content-between align-items-center mb-3">

    <div>
        <div class="fw-semibold">
            Choice Options
        </div>

        <div class="small text-muted">
            Edit, remove, or add choices for this field.
        </div>
    </div>

    <button
        type="button"
        class="btn btn-sm btn-outline-primary"
        id="editAddOptionRow">

        <i class="bi bi-plus-lg me-1"></i>
        Add Option

    </button>

</div>
        <div id="editOptionRows"></div>
    </div>
</div>
<div class="col-12"><div class="form-check form-switch"><input class="form-check-input" type="checkbox" name="is_required" value="1" id="editFieldRequired"><label class="form-check-label" for="editFieldRequired">Required field</label></div></div>
</div></div>
<div class="modal-footer"><button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button><button type="submit" class="btn btn-primary">Update Field</button></div>
</form></div></div></div>