@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: -15px 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: #000; /* Black background */
    color: #fff;            /* White text */
    width: auto;
    height: 40px;
    padding: 0 15px;
    margin-bottom: 20px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
}

.add-field-btn:hover {
    background-color: #333; /* Slightly lighter black on hover */
}
.remove-field-btn { background-color: #000; /* Black */
    color: #fff;            /* White × symbol */ width: 30px; height: 30px; margin-left: 10px; margin-top: 25px; }
.remove-field-btn:hover { background-color: #333; /* Dark gray on hover */; }

/* 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="p2" style="padding: 24px;">
    <nav aria-label="breadcrumb" class="" style="margin: inherit">
    <ol class="flex flex-wrap items-center w-full px-4 py-2 rounded-md bg-blue-gray-50 bg-opacity-60">
        <li
        class="flex items-center font-sans text-sm antialiased font-normal leading-normal transition-colors duration-300 cursor-pointer text-blue-gray-900 hover:text-light-blue-500">
        <a href="/settings" class="opacity-60">
        <svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 text-gray-500 transition duration-75  text-white" width="20" height="20" viewBox="0 0 24 24" fill="#00000">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path d="M14.647 4.081a.724 .724 0 0 0 1.08 .448c2.439 -1.485 5.23 1.305 3.745 3.744a.724 .724 0 0 0 .447 1.08c2.775 .673 2.775 4.62 0 5.294a.724 .724 0 0 0 -.448 1.08c1.485 2.439 -1.305 5.23 -3.744 3.745a.724 .724 0 0 0 -1.08 .447c-.673 2.775 -4.62 2.775 -5.294 0a.724 .724 0 0 0 -1.08 -.448c-2.439 1.485 -5.23 -1.305 -3.745 -3.744a.724 .724 0 0 0 -.447 -1.08c-2.775 -.673 -2.775 -4.62 0 -5.294a.724 .724 0 0 0 .448 -1.08c-1.485 -2.439 1.305 -5.23 3.744 -3.745a.722 .722 0 0 0 1.08 -.447c.673 -2.775 4.62 -2.775 5.294 0zm-2.647 4.919a3 3 0 1 0 0 6a3 3 0 0 0 0 -6z"></path>
                        </svg>
        </a>
        <span
            class="mx-2 font-sans text-sm antialiased font-normal leading-normal pointer-events-none select-none text-blue-gray-500">
            /
        </span>
        </li>
        <li
        class="flex items-center font-sans text-sm antialiased font-normal leading-normal transition-colors duration-300 cursor-pointer text-blue-gray-900 hover:text-light-blue-500">
        <a href="/mailmodify" class="opacity-60">
            <span>
Manage storelist
            </span>

        </a>
        </li>
 <li
        class="flex items-center font-sans text-sm antialiased font-normal leading-normal transition-colors duration-300 cursor-pointer text-blue-gray-900 hover:text-light-blue-500">
        
        <span
            class="mx-2 font-sans text-sm antialiased font-normal leading-normal pointer-events-none select-none text-blue-gray-500">
            /
        </span>
        </li>
        <li
        class="flex items-center font-sans text-sm antialiased font-normal leading-normal transition-colors duration-300 cursor-pointer text-blue-gray-900 hover:text-light-blue-500">
        <a  class="opacity-60">
            <span>
Store Fields
            </span>

        </a>
        </li>
    </ol>
    </nav>
  <div class="p2" style="padding:15px;">
    <h1 class="text-2xl font-sans font-bold flex items-center" style= "gap: 51rem;">
        <span>Store Fields</span>

     @if(session('success'))
    <span id="hideshow"
          style="color:green; font-size:19px; font-weight:bold;">
        {{ session('success') }}
    </span>

     @php
        session()->forget('success');
    @endphp

    <script>
        setTimeout(function () {
            $('#hideshow').fadeOut();
        }, 1000);
    </script> 
@endif
    </h1>
</div>
          
</div>
<div class="form-container">
       
 

<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">
    <span style="font-size:31px; margin-top:-7px;font-weight:bold;">+</span>
    <span>Add Field</span>
</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 placeholderValue = fieldData?.placeholder || '';

        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="placeholder_${fieldId}">Placeholder</label>
                        <input type="text"id="placeholder_${fieldId}"name="fields[${fieldId}][placeholder]"value="${placeholderValue}"placeholder="Enter the placeholder">                    </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="textarea" ${inputTypeValue=='textarea'?'selected':''}>Text Area</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}" style="display:none"></div>
             <button type="button" class="remove-field-btn" title="Remove Field">
    <span style="font-size:31px;margin-top:-5px;font-weight:bold;">&times;</span>
</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