@extends('layouts.app')

@section('content')
<div class="container py-5">
<style>
    #user-select-wrapper{
        display:none;
    }
    .end-0{
        right: 20px;
    }
    .top-0{
        top:10px;
        cursor: pointer;
    }


    #new-fields {
    border: 2px dashed #adb5bd;
    border-radius: 8px;
    padding: 20px;
    background-color: #f1f3f5;
    min-height: 250px;
    transition: background-color 0.3s ease;
}

#new-fields.is-dragover {
    background-color: #e9ecef;
}

.sortable-ghost {
    opacity: 0.4;
    background-color: #e2f2ff;
    border: 2px dashed #007bff;
    transform: scale(0.95);
    box-shadow: none;
}

#toolbox {
    display: flex; /* Make the container a flexbox */
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    gap: 10px; /* Add space between the boxes */
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px;
    background-color: #f8f9fa;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    flex-direction: row;    
}

.list-group-item {
    flex-grow: 1; /* Allow items to grow to fill space */
    flex-basis: 120px; /* Set a minimum width for each box */
    max-width: 150px; /* Set a maximum width for each box */
    text-align: center; /* Center the text inside the box */
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 6px;
    padding: 12px 16px;
    cursor: grab;
    transition: all 0.2s ease-in-out;
    font-weight: 500;
}

</style> 
     <div class="row">
        <div class="col-md-8">

            <h1>Create New Form</h1>

            <form method="post" method="POST" action="{{ route('forms.store') }}">
                 @csrf
                        <div class="mb-3">
                            <label class="form-label">Form Name</label>
                            <input type="text" name="form_name" class="form-control" required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">
                                Webhook URL (optional)
                                <input type="checkbox" name="webhook_auth" value="1" class="" id="useAuthCheckbox">
                                <label class="form-check-label" for="useAuthCheckbox">Use Authentication</label>
                            </label>
                            <input type="url" name="webhook_url" class="form-control">
                        </div>


                        <!-- Use Authentication -->
                        <div id="webhookAuthFields" style="display: none;">
                            <div class="mb-3">
                                <label class="form-label">Webhook Auth Type</label>
                                <select name="webhook_auth_type" class="form-control" id="authTypeSelect">
                                    <option value="">None</option>
                                    <option value="bearer">Bearer Token</option>
                                    <option value="basic">Basic Auth</option>
                                    <option value="custom">Custom Header</option>
                                    <option value="signature">Valid Signature using Secret Key</option>
                                </select>
                            </div>

                            <div class="mb-3" id="authKeyGroup">
                                <label class="form-label">Auth Key / Username</label>
                                <input type="text" name="webhook_auth_key" class="form-control">
                            </div>

                            <div class="mb-3" id="authSecret">
                                <label class="form-label">Auth Secret / Token / Header Value</label>
                                <input type="text" name="webhook_auth_secret" class="form-control">
                            </div>

                            <div class="mb-3" id="validSignature" style="display:none;">

                                <label class="form-label">Secret key</label>
                                <input type="password" name="basic_password" class="form-control">
                                <br>

                                <label class="form-label">Signature header name</label>
                                <input type="text" name="authentication_headertype1auth3" class="form-control">
                                <br>

                                <label class="form-label">Signature prefix</label>
                                <input type="text" name="signature_prefixtype1auth3" placeholder="E.G sha256=" class="form-control">
                                <br>

                                <label class="form-label">Signing Algorithm</label>
                                <select class="form-control" name="algorithmtype1auth3">
                                    <option value="0">SHA-256</option>
                                </select>
                                <br>

                                <label class="form-label">Digest</label>
                                <select name="digesttype1auth3" class="form-control">
                                    <option value="0" name="base64">Base64</option>
                                    <option value="1" name="hex">Hex</option>
                                </select>
                                <br>

                                <label class="form-label">Request header includes in the signature</label>
                                <select class="form-control" name="request_signaturetype1auth3[]" multiple>
                                    <option value="host">Host</option>
                                    <option value="content-type">Content-Type</option>
                                    <option value="content-length">Content-length</option>
                                    <option value="x-halo-date">x-halo-date</option>
                                </select>
                                <br>

                                <label class="form-label">Timestamp header name</label>
                                <small>RFC1123 date standard format</small>
                                <input type="text" name="x_halo_date" placeholder="x-halo-date" class="form-control">
                                <br>


                            </div>


                        </div>
                        <!-- Use Authentication -->

                        


                        <div class="mb-3">
                            <label class="form-label">
                                    Webhook URL 2 (optional)
                                    <input type="checkbox" name="webhook_auth_2" value="1" class="" id="useAuthCheckbox_2">
                                    <label class="form-check-label" for="useAuthCheckbox_2">Use Authentication</label>
                            </label>
                            <input type="url" name="webhook_url_2" class="form-control">
                        </div>

                        <!-- Use Authentication 2 -->
                        <div id="webhookAuthFields_2" style="display: none;">
                            <div class="mb-3">
                                <label class="form-label">Webhook Auth Type</label>
                                <select name="webhook_auth_type_2" class="form-control" id="authTypeSelect_2">
                                    <option value="">None</option>
                                    <option value="bearer">Bearer Token</option>
                                    <option value="basic">Basic Auth</option>
                                    <option value="custom">Custom Header</option>
                                    <option value="signature">Valid Signature using Secret Key</option>
                                </select>
                            </div>

                            <div class="mb-3" id="authKeyGroup_2">
                                <label class="form-label">Auth Key / Username</label>
                                <input type="text" name="webhook_auth_key_2" class="form-control">
                            </div>

                            <div class="mb-3" id="authSecret_2">
                                <label class="form-label">Auth Secret / Token / Header Value</label>
                                <input type="text" name="webhook_auth_secret_2" class="form-control">
                            </div>

                            <div class="mb-3" id="validSignature_2" style="display:none;">

                                <label class="form-label">Secret key</label>
                                <input type="password" name="basic_password_2" class="form-control">
                                <br>

                                <label class="form-label">Signature header name</label>
                                <input type="text" name="authentication_headertype1auth3_2" class="form-control">
                                <br>

                                <label class="form-label">Signature prefix</label>
                                <input type="text" name="signature_prefixtype1auth3_2" placeholder="E.G sha256=" class="form-control">
                                <br>

                                <label class="form-label">Signing Algorithm</label>
                                <select class="form-control" name="algorithmtype1auth3_2">
                                    <option value="0">SHA-256</option>
                                </select>
                                <br>

                                <label class="form-label">Digest</label>
                                <select name="digesttype1auth3_2" class="form-control">
                                    <option value="0" name="base64">Base64</option>
                                    <option value="1" name="hex">Hex</option>
                                </select>
                                <br>

                                <label class="form-label">Request header includes in the signature</label>
                                <select class="form-control" name="request_signaturetype1auth3_2[]" multiple>
                                    <option value="host">Host</option>
                                    <option value="content-type">Content-Type</option>
                                    <option value="content-length">Content-length</option>
                                    <option value="x-halo-date">x-halo-date</option>
                                </select>
                                <br>

                                <label class="form-label">Timestamp header name</label>
                                <small>RFC1123 date standard format</small>
                                <input type="text" name="x_halo_date_2" placeholder="x-halo-date" class="form-control">
                                <br>


                            </div>


                        </div>
                        <!-- Use Authentication 2 -->



                        <div class="form-check mb-4">
                            <input type="checkbox" name="is_public" class="form-check-input" id="is_public" checked>
                            <label class="form-check-label" for="is_public">Make this form public (no login required)</label>
                        </div>

                        <div id="user-select-wrapper">
                            Which user do you want to assign?
                            <select class="form-control" id="selectuser" name="assigneduser[]" multiple>
                                @foreach($users as $user)
                                    <option value="{{ $user->id }}">{{ $user->fullname }}</option>
                                @endforeach
                            </select>

                        </div>
                        
                        <h4 class="mt-5">Form Fields</h4>
                        <div id="new-fields" class="border p-3" style="min-height:200px;">
                            <p class="text-muted">Drag fields here</p>
                        </div>


                        <h5 class="mt-5">Field Types</h5>
                        <div id="toolbox" class="list-group">
                        <div class="list-group-item" data-type="text">
                            <i class="fas fa-font me-2"></i> Text
                        </div>
                        <div class="list-group-item" data-type="textarea">
                            <i class="fas fa-align-left me-2"></i> Textarea
                        </div>
                        <div class="list-group-item" data-type="email">
                            <i class="fas fa-envelope me-2"></i> Email
                        </div>
                        <div class="list-group-item" data-type="password">
                            <i class="fas fa-key me-2"></i> Password
                        </div>
                        <div class="list-group-item" data-type="select">
                            <i class="fas fa-caret-square-down me-2"></i> Select
                        </div>
                        <div class="list-group-item" data-type="multiselect">
                            <i class="fas fa-list-ul me-2"></i> Multi Select
                        </div>
                        <div class="list-group-item" data-type="checkbox">
                            <i class="fas fa-check-square me-2"></i> Checkbox
                        </div>
                        <div class="list-group-item" data-type="date">
                            <i class="fas fa-calendar-alt me-2"></i> Date
                        </div>
                        <div class="list-group-item" data-type="heading">
                            <i class="fas fa-heading me-2"></i> Heading
                        </div>
                        <div class="list-group-item" data-type="upload">
                            <i class="fas fa-upload me-2"></i> File Upload
                        </div>
                        <div class="list-group-item" data-type="signature">
                            <i class="fas fa-pen-fancy me-2"></i> Signature
                        </div>
                        <div class="list-group-item" data-type="image">
                            <i class="fas fa-image me-2"></i> Image
                        </div>
                        <div class="list-group-item" data-type="divider">
                            <i class="fas fa-minus me-2"></i> Divider
                        </div>
                        <div class="list-group-item" data-type="country">
                            <i class="fas fa-flag me-2"></i> Country
                        </div>
                        <div class="list-group-item" data-type="state">
                            <i class="fas fa-map-marker-alt me-2"></i> State
                        </div>
                        <div class="list-group-item" data-type="payment">
                            <i class="fas fa-credit-card me-2"></i> Payment
                        </div>
                        <div class="list-group-item" data-type="company">
                            <i class="fas fa-building me-2"></i> Company Details
                        </div>
                    </div>



                        {{-- <button type="button" class="btn btn-outline-primary mt-3" onclick="addNewField()">➕ Add Field</button> --}}

                        <div class="card-footer mt-4 mb-4">
                            <select id="groupidselection" class="form-control mb-2">
                                @foreach ($form_groups as $value)
                                    <option value="{{ $value->groupid }}">{{ $value->name }}</option>
                                @endforeach
                                                        
                                
                            </select>
                            <button type="button" class="btn btn-outline-primary" onclick="addgroupField()">
                                ➕ Add Group fields
                            </button>
                        </div>


                        <div class="card shadow-sm mb-4" id="showonlyautoselect" style="display:none;">

                            <div class="card-header">Autotask Fields options</div>
                            <div class="card-footer">
                                <div class="mb-3">
                                    <label class="form-label">Customers</label>
                                    <select name="autotaskcustomer" class="form-control">
                                        <option value="today" >Today</option>
                                        <option value="allcustomer" >All customer</option>
                                    </select>
                                </div>

                                <div class="mb-3">
                                    <label>
                                        <input type="checkbox" name="includeopportunity" value="1" class="mr-2">
                                        I want to include the opportunity
                                    </label>
                                </div>
                            </div>

                        </div>
                        

                        <div class="text-end mt-5">
                            <button type="submit" class="btn btn-success btn-lg">Save Form</button>
                        </div>
            </form>

        </div>
        <div class="col-md-4">
            <h4 class="mt-4">Live Preview</h4>
            <div id="live-preview" class="border p-3 bg-light"></div>
        </div>
    </div>
</div>

<meta name="csrf-token" content="{{ csrf_token() }}">

<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script>

    let fieldIndex = 0;
    function addNewField(fieldType) {
        const wrapper = document.getElementById('new-fields');
        const index = fieldIndex++;

        var addstyle = '';
        if(fieldType!='select' && fieldType!='multiselect' && fieldType!='checkbox' && fieldType!='image'){
            addstyle = `display:none`;
        }

        var optionname = 'Options (comma separated)';
        if(fieldType=='image'){
            optionname = 'Image Link';        
        }else if(fieldType=='payment'){
            optionname = 'Amount';        
        }else{
            optionname = 'Options (comma separated)';
        }

        const template = `
        <div class="card p-3 mb-3 position-relative" data-index="${index}">

            <div class="drag-handle position-absolute top-0 start-0 m-2" title="Drag" style="cursor: grab;">☰</div>

            <i class="fa fa-times position-absolute top-0 end-0 remove-field"></i>
            <div class="row mt-4">
                <div class="col-md-3 mb-3">
                    <label>Type</label>
                    <select name="new_fields[${index}][type]" class="form-control field-type" data-index="${index}">
                        <option value="text">Text</option>
                        <option value="textarea">Textarea</option>
                        <option value="email">Email</option>
                        <option value="password">Password</option>
                        <option value="select">Select</option>
                        <option value="multiselect">Multi Select</option>
                        <option value="checkbox">Checkbox</option>
                        <option value="date">Date</option>
                        <option value="heading">Heading</option>
                        <option value="upload">File Upload</option>
                        <option value="signature">Signature</option>
                        <option value="image">Image</option>
                        <option value="divider">Divider</option>
                        <option value="country">Country</option>
                        <option value="state">State</option>
                        <option value="payment">Payment</option>
                        <option value="company">Add Autotask Company Details</option>
                    </select>
                </div>
                <div class="col-md-3 mb-3">
                    <label>Label</label>
                    <input type="text" class="form-control field-label" name="new_fields[${index}][label]" data-index="${index}">
                </div>
                <div class="col-md-3 mb-3" style="display:none;">
                    <label>Name</label>
                    <input type="text" class="form-control field-name" name="new_fields[${index}][name]" data-index="${index}">
                </div>
                <div class="col-md-4 mb-3" style="${addstyle}">
                <label class="seloption">${optionname}</label>
                <input type="text" class="form-control field-options" name="new_fields[${index}][options]" data-index="${index}">
                </div>
                <div class="col-md-1 text-center">
                    <label>Required</label><br>
                    <input type="checkbox" class="form-check-input mt-2 field-required" name="new_fields[${index}][required]" data-index="${index}">
                </div>
            </div>
        </div>
        `;
        wrapper.insertAdjacentHTML('beforeend', template);
        bindPreviewEvents(index);

        
        
        const cards = wrapper.querySelectorAll('.card');
        const latestCard = cards[cards.length - 1];

        const labelInput = latestCard.querySelector('.field-label');
        const nameInput = latestCard.querySelector('.field-name');


       

        labelInput.addEventListener('input', () => {
            // Convert label to a slug for the name
            let slug = labelInput.value;
            nameInput.value = slug;
        });


          if (fieldType) {
            latestCard.querySelector('.field-type').value = fieldType;
                bindPreviewEvents(index);
            }

    }

    document.addEventListener('DOMContentLoaded', (event) => {
        // Toolbox (only clone, don’t move)
        new Sortable(document.getElementById("toolbox"), {
            group: { name: "shared", pull: "clone", put: false },
            sort: false
        });

        // Drop Area
        new Sortable(document.getElementById("new-fields"), {
            group: { name: "shared", pull: false, put: true },
            animation: 150,
            handle: '.drag-handle', // Specify drag handle for reordering
            onAdd: function (evt) {
                // Get the dragged type from the original item's data attribute
                const type = evt.item.dataset.type;
                
                // Remove the temporary cloned element Sortable inserted
                evt.item.parentNode.removeChild(evt.item);

                // Call your existing addNewField() with the correct type
                addNewField(type);
                
            }
        });
    });

    function bindPreviewEvents(index) {
        const type = document.querySelector(`.field-type[data-index="${index}"]`);
        const label = document.querySelector(`.field-label[data-index="${index}"]`);
        const name = document.querySelector(`.field-name[data-index="${index}"]`);
        const options = document.querySelector(`.field-options[data-index="${index}"]`);
        const required = document.querySelector(`.field-required[data-index="${index}"]`);

        const optionsWrapper = options.closest('.col-md-4');

         let selects = document.querySelectorAll('.field-type');

        const updatePreview = () => {
            const typeVal = type.value;
            const labelVal = label.value || '';
            const nameVal = name.value || `field_${index}`;
            const requiredAttr = required.checked ? 'required' : '';
            const optionsVal = options.value.split(',').map(opt => opt.trim());

            if (
                typeVal != 'select' && 
                typeVal != 'multiselect' && 
                typeVal != 'checkbox'   && 
                typeVal != 'payment' &&
                 typeVal != 'image'  
            ) {
                optionsWrapper.style.display = 'none';
            } else {
                optionsWrapper.style.display = '';
            }





            selects.forEach(select => {
               
                var parentRow = select.closest('.row');

                if(select.value=='divider'){
                       var colsmd3 = parentRow.querySelectorAll('.col-md-3');
                        if (colsmd3.length) {
                        colsmd3[0].style.display = (select.value === 'divider') ? 'none' : 'block';
                        colsmd3[1].style.display = (select.value === 'divider') ? 'none' : 'block';
                        colsmd3[2].style.display = (select.value === 'divider') ? 'none' : 'block';
                    }
                    
                    var colsmd4 = parentRow.querySelectorAll('.col-md-1');
                    if (colsmd4.length) {
                        colsmd4[0].style.display = (select.value === 'divider') ? 'none' : 'block';
                    }
                }

              

            });










            let fieldHTML = `<label>${labelVal}</label><br>`;

            switch (typeVal) {

                case 'heading':
                    fieldHTML += ``;
                break;
                case 'text':
                case 'email':
                case 'password':
                case 'date':
                    fieldHTML += `<input type="${typeVal}" name="${nameVal}" ${requiredAttr} class="form-control mb-2">`;
                    break;
                case 'textarea':
                    fieldHTML += `<textarea name="${nameVal}" ${requiredAttr} class="form-control mb-2"></textarea>`;
                    break;
                case 'select':
                    fieldHTML += `<select name="${nameVal}" ${requiredAttr} class="form-control mb-2">` +
                                optionsVal.map(opt => `<option>${opt}</option>`).join('') +
                                `</select>`;
                    break;
                case 'multiselect':
                    fieldHTML += `<select name="${nameVal}[]" multiple ${requiredAttr} class="form-control mb-2">` +
                                optionsVal.map(opt => `<option>${opt}</option>`).join('') +
                                `</select>`;
                    break;
                case 'checkbox':
                    fieldHTML += optionsVal.map(opt => `
                        <div class="form-check">
                            <input type="checkbox" name="${nameVal}[]" class="form-check-input" ${requiredAttr}>
                            <label class="form-check-label">${opt}</label>
                        </div>`).join('');
                    break;
                case 'signature':
                    fieldHTML += `<textarea readonly class="form-control mb-2"></textarea>`;
                    break;
                case 'upload':
                    fieldHTML += `<input type="file" name="${nameVal}" ${requiredAttr} class="form-control mb-2">`;
                    break;
                case 'image':
                    fieldHTML += `<img src="${optionsVal}" class="img-fluid">`;
                    break;
                case 'divider':
                    fieldHTML += `<hr>`;
                    break;
                case 'country':
                    fieldHTML += `<select name="${nameVal}[]" ${requiredAttr} class="form-control mb-2"><option>--Select Country--</option></select>`;
                    break;
                case 'state':
                    fieldHTML += `<select name="${nameVal}[]" ${requiredAttr} class="form-control mb-2"><option>--Select State--</option></select>`;
                    break;
                case 'payment':
                    fieldHTML += `<div>Payment details will show here<div>`;
                    break;
                default:
                    fieldHTML += `<input type="text" name="${nameVal}" ${requiredAttr} class="form-control mb-2">`;
            }

            const previewContainer = document.getElementById('live-preview');
            let existing = previewContainer.querySelector(`[data-preview-index="${index}"]`);
            if (!existing) {
                existing = document.createElement('div');
                existing.setAttribute('data-preview-index', index);
                previewContainer.appendChild(existing);
            }
            existing.innerHTML = fieldHTML;
        };

        [type, label, name, options, required].forEach(el => {
            el.addEventListener('input', updatePreview);
            el.addEventListener('change', updatePreview);
        });

        // Trigger initial render
        updatePreview();
    }

    document.getElementById('new-fields').addEventListener('click', function(e) {
        if (e.target.classList.contains('remove-field')) {
            const card = e.target.closest('.card');
            const index = card.getAttribute('data-index');
            card.remove();

            // Also remove the preview element
            const previewItem = document.querySelector(`#live-preview [data-preview-index="${index}"]`);
            if (previewItem) {
                previewItem.remove();
            }
        }
    });

    const checkbox = document.getElementById('is_public');
    const userSelectWrapper = document.getElementById('user-select-wrapper');

    checkbox.addEventListener('change', function () {
        userSelectWrapper.style.display = this.checked ? 'none' : 'block';
    });

    function addgroupField() {
        var getids = document.getElementById('groupidselection').value;

        fetch("{{ route('get.fields') }}", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({ groupids: getids })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                data.data.forEach(field => {
                    addFieldFromData(field); // ✅ keep your existing function
                });
            } else {
                console.error(data.message);
            }
        })
        .catch(error => {
            console.error('Fetch error:', error);
        });
    }


    function addFieldFromData(field) {
        const wrapper = document.getElementById('new-fields');
        const index = fieldIndex++;
        const isRequired = field.required ? 'checked' : '';
        const optionsValue = field.options || '';

        var optionname = 'Options (comma separated)';
        if(field.field_type=='image'){
            optionname = 'Image Link';        
        }else if(field.field_type=='payment'){
            optionname = 'Amount';        
        }

        const template = `
        <div class="card p-3 mb-3 position-relative" data-index="${index}">

            <div class="drag-handle position-absolute top-0 start-0 m-2" title="Drag" style="cursor: grab;">☰</div>

            <i class="fa fa-times position-absolute top-0 end-0 remove-field"></i>
            <div class="row mt-4">
                <div class="col-md-3 mb-3">
                    <label>Type</label>
                    <select name="new_fields[${index}][type]" class="form-control field-type" data-index="${index}">
                        <option value="text">Text</option>
                        <option value="textarea">Textarea</option>
                        <option value="email">Email</option>
                        <option value="password">Password</option>
                        <option value="select">Select</option>
                        <option value="multiselect">Multi Select</option>
                        <option value="checkbox">Checkbox</option>
                        <option value="date">Date</option>
                        <option value="heading">Heading</option>
                        <option value="upload">File Upload</option>
                        <option value="signature">Signature</option>
                        <option value="image">Image</option>
                        <option value="divider">Divider</option>
                        <option value="country">Country</option>
                        <option value="state">State</option>
                        <option value="payment">Payment</option>
                        <option value="company">Add Autotask Company Details</option>
                    </select>
                </div>
                <div class="col-md-3 mb-3">
                    <label>Label</label>
                    <input type="text" class="form-control field-label" name="new_fields[${index}][label]" value="${field.label}" data-index="${index}">
                </div>
                <div class="col-md-3 mb-3" style="display:none;">
                    <label>Name</label>
                    <input type="text" class="form-control field-name" name="new_fields[${index}][name]" value="${field.name}" data-index="${index}">
                </div>
                <div class="col-md-4 mb-3">
                    <label class="seloption">${optionname}</label>
                    <input type="text" class="form-control field-options" name="new_fields[${index}][options]" value="${optionsValue}" data-index="${index}">
                </div>
                <div class="col-md-1 text-center">
                    <label>Required</label><br>
                    <input type="checkbox" class="form-check-input mt-2 field-required" name="new_fields[${index}][required]" ${isRequired} data-index="${index}">
                </div>
            </div>
        </div>
        `;

        wrapper.insertAdjacentHTML('beforeend', template);
        bindPreviewEvents(index);

        const latestCard = wrapper.querySelector(`.card[data-index="${index}"]`);
        const typeSelect = latestCard.querySelector('.field-type');
        if (typeSelect) {
            typeSelect.value = field.field_type || 'text';
        }

        const labelInput = latestCard.querySelector('.field-label');
        const nameInput = latestCard.querySelector('.field-name');

        labelInput.addEventListener('input', () => {
            let slug = labelInput.value;
            nameInput.value = slug;
        });
    }

</script>


<script>
    Sortable.create(document.getElementById('new-fields'), {
    animation: 150,
    handle: '.drag-handle', 
        onEnd: function () {
            syncPreviewOrder();
        }
    });

    function syncPreviewOrder() {
        const fieldCards = document.querySelectorAll('#new-fields .card');
        const previewContainer = document.getElementById('live-preview');
        const newPreviewOrder = [];

        fieldCards.forEach(card => {
            const index = card.getAttribute('data-index');
            const preview = previewContainer.querySelector(`[data-preview-index="${index}"]`);
            if (preview) {
                newPreviewOrder.push(preview);
            }
        });

        // Re-append in new order
        previewContainer.innerHTML = '';
        newPreviewOrder.forEach(preview => previewContainer.appendChild(preview));
    }

</script>

<script>
    document.addEventListener("DOMContentLoaded", function () {
        const checkbox = document.getElementById("useAuthCheckbox");
        const authFields = document.getElementById("webhookAuthFields");
        const authTypeSelect = document.getElementById("authTypeSelect");
        const authKeyGroup = document.getElementById("authKeyGroup");
        const authSecret = document.getElementById("authSecret");
        
        const validSignature = document.getElementById("validSignature");


        function toggleAuthFields() {
            authFields.style.display = checkbox.checked ? "block" : "none";
        }

        function toggleAuthKey() {
            const type = authTypeSelect.value;
            authSecret.style.display = "block";
            validSignature.style.display = "none";

            if (type === "basic" || type === "custom") {
                authKeyGroup.style.display = "block";
            }else if(type==="signature"){
                authSecret.style.display = "none";
                validSignature.style.display = "block";
            }else if(type === ""){
                authSecret.style.display = "none";
                authKeyGroup.style.display = "none";
            } else {
                authKeyGroup.style.display = "none";
            }
        }

        checkbox.addEventListener("change", toggleAuthFields);
        authTypeSelect.addEventListener("change", toggleAuthKey);

        // Initialize visibility on load
        toggleAuthFields();
        toggleAuthKey();



        // url 2

        const checkbox_2 = document.getElementById("useAuthCheckbox_2");
        const authFields_2 = document.getElementById("webhookAuthFields_2");
        const authTypeSelect_2 = document.getElementById("authTypeSelect_2");
        const authKeyGroup_2 = document.getElementById("authKeyGroup_2");
        const authSecret_2 = document.getElementById("authSecret_2");
        
        const validSignature_2 = document.getElementById("validSignature_2");

        function toggleAuthFields_2() {
            authFields_2.style.display = checkbox_2.checked ? "block" : "none";
        }

        function toggleAuthKey_2() {
            const type_2 = authTypeSelect_2.value;
            authSecret_2.style.display = "block";

            if (type_2 === "basic" || type_2 === "custom") {
                authKeyGroup_2.style.display = "block";
            }else if(type_2==="signature"){
                authSecret_2.style.display = "none";
                validSignature_2.style.display = "block";
            }else if(type_2 === ""){
                authSecret_2.style.display = "none";
                authKeyGroup_2.style.display = "none";
            } else {
                authKeyGroup_2.style.display = "none";
            }
        }

        checkbox_2.addEventListener("change", toggleAuthFields_2);
        authTypeSelect_2.addEventListener("change", toggleAuthKey_2);

        // Initialize visibility on load
        toggleAuthFields_2();
        toggleAuthKey_2();

    });
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    document.addEventListener('change', function (e) {
        if (e.target.classList.contains('field-type')) {
            const selectedValue = e.target.value;
            const showElement = document.getElementById('showonlyautoselect');
            console.log(selectedValue);
            if (selectedValue === 'company') {
                showElement.style.display = 'block';
            } else {
                showElement.style.display = 'none';
            }


            var optionname = 'Options (comma separated)';
            if(selectedValue=='image'){
                optionname = 'Image Link';  
            }else if(selectedValue=='payment'){
                optionname = 'Amount';  
            }


            const row = e.target.closest('.row');
            if (row) {
                const selOptionLabel = row.querySelector('.seloption');
                if (selOptionLabel) {
                    selOptionLabel.innerText = optionname;
                }
            }




        }
    });
});
</script>
@endsection