@extends('includes.layout')
@section('content')

<style>
/* General Form Container */

html, body {
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden;
}

#app, .main-content, .content-wrapper {
    height: auto !important;
    overflow: visible !important;
}
.form-container {
    max-width: 800px;
    margin: 40px auto;
    padding: 30px 25px;
    background-color: #ffffff;
    font-family: Arial, sans-serif;
}

h2 {
    font-size: 20px;
    font-weight: bold;
    color: #000000;
    margin-bottom: 25px;
    text-align: center;
}

/* Dynamic Field Row Styling */
.dynamic-field-row {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 15px;
    background-color: #f9f9f9;
}

.field-controls { flex: 1; }
.field-output { flex: 2; padding-top: 28px; }

/* Hide remove button on the first field */
.dynamic-field-row[data-id="0"] .remove-field-btn { display: none; }

/* General input styling */
label { font-weight: 600; font-size: 14px; color: #000000; margin-bottom: 6px; display: block; }
input[type="text"], select, input[type="file"] { width: 100%; padding: 10px; font-size: 14px; color: #000; background-color: #f5f5f5; border: 1px solid #ccc; border-radius: 4px; margin-bottom: 15px; box-sizing: border-box; }
input[type="file"]::file-selector-button { padding: 8px 12px; border-radius: 4px; border: 1px solid #ccc; background-color: #e9e9e9; cursor: pointer; }

/* Radio and Checkbox group styling */
.radio-group-display label, .checkbox-group-display label { font-weight: normal; margin-right: 15px; display: inline-flex; align-items: center; gap: 5px; }

/* Add and Remove Buttons */
.add-field-btn, .remove-field-btn {
    display: flex; align-items: center; justify-content: center;
    padding: 8px 12px; font-size: 18px; font-weight: bold; color: #fff;
    border: none; cursor: pointer; border-radius: 50%;
}
.add-field-btn { background-color: #007bff; width: 40px; height: 40px; margin-bottom: 20px; }
.remove-field-btn { background-color: #dc3545; width: 30px; height: 30px; margin-left: 10px; margin-top: 25px; }
.add-field-btn:hover { background-color: #0056b3; }
.remove-field-btn:hover { background-color: #c82333; }

/* Submit Button */
.submit-btn { padding: 10px 20px; font-size: 14px; font-weight: 600; color: #fff; background-color: #000; border: none; cursor: pointer; display: block; width: 100%; margin-top: 20px; transition: 0.3s; }
.submit-btn:hover { background-color: #1a1a1a; }
.hidden { display: none; }
</style>

<div class="form-container">
    <h2>Dynamic Form Builder</h2>

<form action="{{ isset($store7) ? route('store7.update', $store->dist_id) : route('store7.save') }}" 
      method="POST" enctype="multipart/form-data">
    @csrf
    @if(isset($store7)) @method('PUT') @endif

    <input type="hidden" name="store_id" value="{{  $store->index}}">
    <input type="hidden" name="dist_id" value="{{ $store->dist_id }}">

    <div id="fields-container"></div>

    <button type="button" class="add-field-btn" id="add-field-btn">+</button>
    <button type="submit" class="submit-btn">Save Changes</button>
</form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const addFieldBtn = document.getElementById('add-field-btn');
    const fieldsContainer = document.getElementById('fields-container');
    let fieldCounter = 0;

    // --- Create dynamic field row ---
    function addNewField(fieldData = null) {
        const fieldId = fieldCounter;
        const labelValue = fieldData?.label_name || '';
        const inputTypeValue = fieldData?.input_type || 'text';
        const optionsValue = fieldData?.options || '';

        const newFieldHTML = `
            <div class="dynamic-field-row" data-id="${fieldId}">
                <div class="field-controls">
                    <div>
                        <label for="label_name_${fieldId}">Label Name</label>
                        <input type="text" id="label_name_${fieldId}" name="fields[${fieldId}][label_name]" value="${labelValue}" placeholder="Enter the field label">
                    </div>
                    <div>
                        <label for="input_type_${fieldId}">Input Type</label>
                        <select class="input-type-selector" id="input_type_${fieldId}" name="fields[${fieldId}][input_type]" data-target="${fieldId}">
                            <option value="text" ${inputTypeValue=='text'?'selected':''}>Text Input</option>
                            <option value="radio" ${inputTypeValue=='radio'?'selected':''}>Radio Button</option>
                            <option value="checkbox" ${inputTypeValue=='checkbox'?'selected':''}>Checkbox</option>
                            <option value="dropdown" ${inputTypeValue=='dropdown'?'selected':''}>Dropdown</option>
                            <option value="file" ${inputTypeValue=='file'?'selected':''}>Image Upload</option>
                        </select>
                    </div>
                    <div id="options_container_${fieldId}" class="options-container ${['radio','checkbox','dropdown'].includes(inputTypeValue)?'':'hidden'}">
                        <label for="options_${fieldId}">Options (comma-separated)</label>
                        <input type="text" id="options_${fieldId}" name="fields[${fieldId}][options]" value="${optionsValue}" placeholder="e.g. Option 1,Option 2">
                    </div>
                </div>
                <div class="field-output" id="output_container_${fieldId}"></div>
                <button type="button" class="remove-field-btn" title="Remove Field">&times;</button>
            </div>
        `;
        fieldsContainer.insertAdjacentHTML('beforeend', newFieldHTML);
        updateOutput(fieldId, fieldData?.value);
        fieldCounter++;
    }

    // --- Event delegation ---
    fieldsContainer.addEventListener('change', function(e) {
        const fieldRow = e.target.closest('.dynamic-field-row');
        if(!fieldRow) return;
        const fieldId = fieldRow.dataset.id;

        if(e.target.classList.contains('input-type-selector')) {
            const optionsContainer = document.getElementById(`options_container_${fieldId}`);
            if(['radio','checkbox','dropdown'].includes(e.target.value)){
                optionsContainer.classList.remove('hidden');
            } else { optionsContainer.classList.add('hidden'); }
            updateOutput(fieldId);
        }

        if(e.target.type === 'file'){
            const file = e.target.files[0];
            if(file && file.size > 5*1024*1024){ alert('File too large!'); e.target.value=''; }
        }
    });

    fieldsContainer.addEventListener('input', function(e){
        const fieldRow = e.target.closest('.dynamic-field-row');
        if(!fieldRow) return;
        const fieldId = fieldRow.dataset.id;
        if(e.target.id.startsWith('label_name_') || e.target.id.startsWith('options_')){
            updateOutput(fieldId);
        }
    });

    fieldsContainer.addEventListener('click', function(e){
        if(e.target.classList.contains('remove-field-btn')){
            e.target.closest('.dynamic-field-row').remove();
        }
    });

    function updateOutput(fieldId, value = null){
        const labelNameInput = document.getElementById(`label_name_${fieldId}`);
        const inputType = document.getElementById(`input_type_${fieldId}`).value;
        const optionsInput = document.getElementById(`options_${fieldId}`);
        const outputContainer = document.getElementById(`output_container_${fieldId}`);

        const labelText = labelNameInput.value || "Your Label";
        let outputHTML = `<label>${labelText}</label>`;

        switch(inputType){
            case 'text':
                outputHTML += `<input type="text" name="fields[${fieldId}][value]" value="${value??''}" placeholder="Text input for ${labelText}">`;
                break;
            case 'radio':
                const radioOptions = optionsInput.value.split(',').map(o=>o.trim()).filter(Boolean);
                outputHTML += '<div class="radio-group-display">';
                if(radioOptions.length>0){
                    radioOptions.forEach(option=>{
                        const checked = value == option ? 'checked':'' ;
                        outputHTML += `<label><input type="radio" name="fields[${fieldId}][value]" value="${option}" ${checked}> ${option}</label>`;
                    });
                } else { outputHTML += '<span>Define options on the left.</span>'; }
                outputHTML += '</div>';
                break;
            case 'checkbox':
                const checkboxOptions = optionsInput.value.split(',').map(o=>o.trim()).filter(Boolean);
                const selectedValues = Array.isArray(value) ? value : [];
                outputHTML += '<div class="checkbox-group-display">';
                if(checkboxOptions.length>0){
                    checkboxOptions.forEach(option=>{
                        const checked = selectedValues.includes(option)?'checked':'';
                        outputHTML += `<label><input type="checkbox" name="fields[${fieldId}][value][]" value="${option}" ${checked}> ${option}</label>`;
                    });
                } else { outputHTML += '<span>Define options on the left.</span>'; }
                outputHTML += '</div>';
                break;
            case 'dropdown':
                const dropdownOptions = optionsInput.value.split(',').map(o=>o.trim()).filter(Boolean);
                outputHTML += `<select name="fields[${fieldId}][value]">`;
                if(dropdownOptions.length>0){
                    dropdownOptions.forEach(option=>{
                        const selected = value==option?'selected':'';
                        outputHTML += `<option value="${option}" ${selected}>${option}</option>`;
                    });
                } else { outputHTML += '<option>Define options on the left</option>'; }
                outputHTML += `</select>`;
                break;
            case 'file':
                outputHTML += `<input type="file" name="fields[${fieldId}][file]" accept="image/png, image/jpeg, image/gif">`;
                if(value){ outputHTML += `<br><small>Current file: <a href="{{ asset('storage') }}/${value}" target="_blank">View</a></small>`; }
                break;
        }

        outputContainer.innerHTML = outputHTML;
    }

   @if(!empty($fields))
    const existingFields = @json($fields);
    existingFields.forEach(field => addNewField(field));
@else
    addNewField();
@endif

    addFieldBtn.addEventListener('click', ()=>addNewField());
});
</script>

@endsection