@extends('layouts.app')

@section('content')
<div class="container py-5">

    <style>
        .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>Edit Form: {{ $form->form_name }}</h1>

            <form method="POST" action="{{ route('forms.update', $form->id) }}">
                @csrf

                <div class="card shadow-sm mb-4">
                    <div class="card-header">Form Details</div>
                    <div class="card-body">
                        {{-- Form Name --}}
                        <div class="mb-3">
                            <label class="form-label">Form Name</label>
                            <input type="text" name="form_name" class="form-control"
                                value="{{ old('form_name', $form->form_name) }}" required>
                        </div>

                        {{-- Webhook URL --}}
                        <div class="mb-3">
                            <label class="form-label">
                                Webhook URL
                                <input type="checkbox" name="webhook_auth"
                                    class=""
                                    id="useAuthCheckbox"
                                    value="1" {{ old('webhook_auth', $form->webhook_auth) ? 'checked' : '' }}>
                                <label class="form-check-label" for="useAuthCheckbox">Use Authentication</label>
                            </label>
                            <input type="text" name="webhook_url" class="form-control"
                                value="{{ old('webhook_url', $form->webhook_url) }}">
                        </div>

                        {{-- Authentication Fields --}}
                        <div id="webhookAuthFields" style="{{ $form->webhook_auth ? 'display:block;' : '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" {{ old('webhook_auth_type', $form->webhook_auth_type)=='bearer' ? 'selected' : '' }}>Bearer Token</option>
                                    <option value="basic" {{ old('webhook_auth_type', $form->webhook_auth_type)=='basic' ? 'selected' : '' }}>Basic Auth</option>
                                    <option value="custom" {{ old('webhook_auth_type', $form->webhook_auth_type)=='custom' ? 'selected' : '' }}>Custom Header</option>
                                    <option value="signature" {{ old('webhook_auth_type', $form->webhook_auth_type)=='signature' ? 'selected' : '' }}>Valid Signature using Secret Key</option>
                                </select>
                            </div>

                            {{-- Username / Key --}}
                            <div class="mb-3" id="authKeyGroup" style="{{ $form->webhook_auth_type=='bearer' ? 'display:none;' : 'display:block;' }}">
                                <label class="form-label">Auth Key / Username</label>
                                <input type="text" name="webhook_auth_key"
                                    value="{{ old('webhook_auth_key', $form->webhook_auth_key) }}"
                                    class="form-control">
                            </div>

                            {{-- Secret --}}
                            <div class="mb-3" id="authSecret">
                                <label class="form-label">Auth Secret / Token / Header Value</label>
                                <input type="text" name="webhook_auth_secret"
                                    value="{{ old('webhook_auth_secret', $form->webhook_auth_secret) }}"
                                    class="form-control">
                            </div>

                            {{-- Valid Signature (hidden by default) --}}
                            <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"
                                    value="{{ old('basic_password', $form->basic_password) }}">

                                <label class="form-label">Signature header name</label>
                                <input type="text" name="authentication_headertype1auth3" class="form-control"
                                    value="{{ old('authentication_headertype1auth3', $form->authentication_headertype1auth3) }}">

                                <label class="form-label">Signature prefix</label>
                                <input type="text" name="signature_prefixtype1auth3" placeholder="E.G sha256="
                                    class="form-control"
                                    value="{{ old('signature_prefixtype1auth3', $form->signature_prefixtype1auth3) }}">

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

                                <label class="form-label">Digest</label>
                                <select name="digesttype1auth3" class="form-control">
                                    <option value="0" {{ old('digesttype1auth3', $form->digesttype1auth3)=='0' ? 'selected' : '' }}>Base64</option>
                                    <option value="1" {{ old('digesttype1auth3', $form->digesttype1auth3)=='1' ? 'selected' : '' }}>Hex</option>
                                </select>

                                <label class="form-label">Request header includes in the signature</label>
                                @php
                                    $selectedValues = $form->request_signaturetype1auth3
                                        ? explode(',', $form->request_signaturetype1auth3)
                                        : [];
                                @endphp
                                <select class="form-control" name="request_signaturetype1auth3[]" multiple>
                                    <option value="host" {{ in_array('host',$selectedValues) ? 'selected' : '' }}>Host</option>
                                    <option value="content-type" {{ in_array('content-type',$selectedValues) ? 'selected' : '' }}>Content-Type</option>
                                    <option value="content-length" {{ in_array('content-length',$selectedValues) ? 'selected' : '' }}>Content-Length</option>
                                    <option value="x-halo-date" {{ in_array('x-halo-date',$selectedValues) ? 'selected' : '' }}>x-halo-date</option>
                                </select>

                                <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"
                                    value="{{ old('x_halo_date', $form->x_halo_date) }}">
                            </div>
                        </div>


                        {{-- Webhook URL 2 --}}
                        <div class="mb-3">
                            <label class="form-label">
                                Webhook URL 2
                                <input type="checkbox"
                                    name="webhook_auth_2"
                                    class=""
                                    id="useAuthCheckbox_2"
                                    value="{{ old('webhook_auth_2', $form->webhook_auth_2 ?? '') }}"
                                    {{ !empty($form->webhook_auth_2) ? 'checked' : '' }}>
                                <label class="form-check-label" for="useAuthCheckbox_2">Use Authentication</label>
                            </label>
                            <input type="text"
                                name="webhook_url_2"
                                class="form-control"
                                value="{{ old('webhook_url_2', $form->webhook_url_2 ?? '') }}">
                        </div>

                        <!-- Use Authentication 2 -->
                        <div id="webhookAuthFields_2" style="{{ !empty($form->webhook_auth_2) ? 'display:block;' : '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" {{ old('webhook_auth_type_2', $form->webhook_auth_type_2 ?? '') === 'bearer' ? 'selected' : '' }}>Bearer Token</option>
                                    <option value="basic" {{ old('webhook_auth_type_2', $form->webhook_auth_type_2 ?? '') === 'basic' ? 'selected' : '' }}>Basic Auth</option>
                                    <option value="custom" {{ old('webhook_auth_type_2', $form->webhook_auth_type_2 ?? '') === 'custom' ? 'selected' : '' }}>Custom Header</option>
                                    <option value="signature" {{ old('webhook_auth_type_2', $form->webhook_auth_type_2 ?? '') === 'signature' ? 'selected' : '' }}>Valid Signature using Secret Key</option>
                                </select>
                            </div>

                            <div class="mb-3" id="authKeyGroup_2" style="{{ old('webhook_auth_type_2', $form->webhook_auth_type_2 ?? '') === 'bearer' ? 'display:none;' : 'display:block;' }}">
                                <label class="form-label">Auth Key / Username</label>
                                <input type="text" name="webhook_auth_key_2" value="{{ old('webhook_auth_key_2', $form->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" value="{{ old('webhook_auth_secret_2', $form->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" value="{{ old('basic_password_2', $form->basic_password_2 ?? '') }}" class="form-control">
                                <br>

                                <label class="form-label">Signature header name</label>
                                <input type="text" name="authentication_headertype1auth3_2" value="{{ old('authentication_headertype1auth3_2', $form->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=" value="{{ old('signature_prefixtype1auth3_2', $form->signature_prefixtype1auth3_2 ?? '') }}" 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" {{ old('digesttype1auth3_2', $form->digesttype1auth3_2 ?? '') == '0' ? 'selected' : '' }}>Base64</option>
                                    <option value="1" {{ old('digesttype1auth3_2', $form->digesttype1auth3_2 ?? '') == '1' ? 'selected' : '' }}>Hex</option>
                                </select>
                                <br>

                                <label class="form-label">Request header includes in the signature</label>
                                @php
                                    $selectedValues_2 = old('request_signaturetype1auth3_2', isset($form->request_signaturetype1auth3_2) ? explode(',', $form->request_signaturetype1auth3_2) : []);
                                @endphp
                                <select class="form-control" name="request_signaturetype1auth3_2[]" multiple>
                                    <option value="host" {{ in_array('host', $selectedValues_2) ? 'selected' : '' }}>Host</option>
                                    <option value="content-type" {{ in_array('content-type', $selectedValues_2) ? 'selected' : '' }}>Content-Type</option>
                                    <option value="content-length" {{ in_array('content-length', $selectedValues_2) ? 'selected' : '' }}>Content-length</option>
                                    <option value="x-halo-date" {{ in_array('x-halo-date', $selectedValues_2) ? 'selected' : '' }}>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" value="{{ old('x_halo_date_2', $form->x_halo_date_2 ?? '') }}" class="form-control">
                                <br>
                            </div>
                        </div>
                        <!-- /Use Authentication 2 -->



                       

                        

                        {{-- Is Public --}}
                        <div class="form-check mb-3">
                            <input type="checkbox" name="is_public" id="is_public" class="form-check-input"
                                {{ old('is_public', $form->is_public) ? 'checked' : '' }}>
                            <label class="form-check-label" for="is_public">Make this form public</label>
                        </div>

                        {{-- Assign users --}}
                        <div id="user-select-wrapper" style="{{ $form->is_public ? 'display:none;' : 'display:block;' }}">
                            Which user do you want to assign?
                            <select class="form-control" id="selectuser" name="assigneduser[]" multiple>
                                @foreach($users as $user)
                                    <option value="{{ $user->id }}"
                                        {{ in_array($user->id, $assignedUsers ?? []) ? 'selected' : '' }}>
                                        {{ $user->fullname }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>

                {{-- Existing Fields --}}
                <div class="card shadow-sm mb-4">
                    <div class="card-header">Current Fields</div>
                    <div class="card-body" id="new-fields-container"  style="min-height:200px;">
                        <p class="text-muted">Drag fields here</p>

                        @foreach($fields as $field)
                            <div class="card mb-3 existing-field" data-field-id="{{ $field->id }}">
                                <div class="makegroup">
                                    <input type="checkbox" value="{{ $field->id }}">
                                </div>
                                <div class="card-body mt-4">
                                    <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 remove-existing-field"></i>

                                    <input type="hidden" name="fields[{{ $field->id }}][id]" value="{{ $field->id }}">
                                    <input type="hidden" name="fields[{{ $field->id }}][sort_order]" class="field-sort-order" value="0">

                                    <div class="row">
                                        <div class="col-md-3 mb-2">
                                            <label>Label</label>
                                            <input type="text" name="fields[{{ $field->id }}][label]" class="form-control field-label"
                                                value="{{ old('fields.'.$field->id.'.label', $field->label) }}">
                                        </div>
                                        <div class="col-md-3 mb-2" style="display:none;">
                                            <label>Name</label>
                                            <input type="text" name="fields[{{ $field->id }}][name]" class="form-control field-name"
                                                value="{{ old('fields.'.$field->id.'.name', $field->name) }}">
                                        </div>
                                        <div class="col-md-3 mb-2">
                                            <label>Type</label>
                                            <select name="fields[{{ $field->id }}][type]" class="form-control field-type">
                                                @php
                                                    $types = ['heading','text','email','password','textarea','select','multiselect','checkbox','date','upload','signature','image','divider','country','state','payment','company'];
                                                @endphp
                                                @foreach($types as $type)
                                                    <option value="{{ $type }}" {{ $field->field_type==$type ? 'selected' : '' }}>
                                                        {{ $type=='company' ? 'Add Autotask Company Details' : ucfirst($type) }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-5 mb-2">
                                            <label  class="seloption">Options</label>
                                            <input type="text" name="fields[{{ $field->id }}][options]" class="form-control"
                                                value="{{ old('fields.'.$field->id.'.options', $field->options) }}" placeholder="Comma separated">
                                        </div>
                                        <div class="col-md-1 text-center">
                                            <label>Required</label><br>
                                            <input type="checkbox" name="fields[{{ $field->id }}][required]" class="form-check-input mt-2"
                                                {{ $field->required ? 'checked' : '' }}>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </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>


                <input type="hidden" id="deleted-fields" name="deleted_fields" value="">

                {{-- Add new fields --}}
                <div class="card shadow-sm mb-4 mt-4">
                    <div class="card-header">Add New Fields</div>
                    <div class="card-footer">
                        <button type="button" class="btn btn-outline-primary" onclick="acreategroupField()">➕ Create Group Fields</button>
                        {{-- <button type="button" class="btn btn-outline-primary" onclick="addNewField()">➕ Add Field</button> --}}
                    </div>
                    <div class="card-footer">
                        <select id="groupidselection" class="form-control mb-2">
                            @foreach($formGroups as $group)
                                <option value="{{ $group->groupid }}">{{ $group->name }}</option>
                            @endforeach
                        </select>
                        <button type="button" class="btn btn-outline-primary" onclick="addgroupField()">➕ Add Group fields</button>
                        <button type="button" class="btn btn-outline-primary" onclick="removegroupField()">➖ Remove Group fields</button>
                    </div>
                </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" {{ (isset($form->autotaskcustomer) && $form->autotaskcustomer === 'today') ? 'selected' : '' }}>
                                    Today
                                </option>
                                <option value="allcustomer" {{ (isset($form->autotaskcustomer) && $form->autotaskcustomer === 'allcustomer') ? 'selected' : '' }}>
                                    All customer
                                </option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label>
                                <input type="checkbox" name="includeopportunity" value="1" class="mr-2"
                                    {{ !empty($form->includeopportunity) ? 'checked' : '' }}>
                                I want to include the opportunity
                            </label>
                        </div>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label">Thank You Message</label>
                    <textarea name="thankyou_message" class="form-control" rows="3">{{ old('thankyou_message', $form->thankyou_message) }}</textarea>
                    <small class="text-muted">If left empty and Redirect URL is set, user will be redirected instead.</small>
                </div>

                <div class="mb-3">
                    <label class="form-label">Redirect URL</label>
                    <input type="url" name="redirect_url" class="form-control" value="{{ old('redirect_url', $form->redirect_url) }}">
                    <small class="text-muted">If set, user will be redirected here after submission.</small>
                </div>

                <div class="mb-3">
                    <label class="form-label">Email Template for Admin after submission</label>
                    <select name="email_template_id" class="form-control">
                        <option value="">--- Select An Template ---</option>
                        @foreach($emailtemplates as $emailtemplate)
                            <option value="{{ $emailtemplate->id }}"
                                 {{ $form->email_template_id==$emailtemplate->id ? 'selected' : '' }}
                                 >{{ $emailtemplate->title }}</option>
                        @endforeach
                    </select>
                    <small class="text-muted">Select your submission email template</small>
                </div>


                {{-- Save / Cancel --}}
                <div class="d-flex justify-content-between">
                    <button type="submit" class="btn btn-success">💾 Save Changes</button>
                    <a href="{{ route('forms.index') }}" class="btn btn-secondary">Cancel</a>
                </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>

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

    function addNewField(fieldType) {
        const container = document.getElementById('new-fields-container');
        const fieldTypes = [
             'text','textarea', 'email', 'password', 
            'select', 'multiselect', 'checkbox', 'date', 'upload','signature','image','divider','country','state','payment','heading','company'
        ];

        var addstyle = '';
        if(fieldType!='select' && fieldType!='multiselect' && fieldType!='checkbox'&& fieldType!='payment'&& 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 fieldHtml = `
            <div class="card mb-3">
            <div class="card-body">
            <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-2">
                            <label>Label</label>
                            <input type="text" name="new_fields[${newFieldIndex}][label]" 
                                class="form-control field-label" >
                        </div>
                        <div class="col-md-3 mb-2" style="display:none;">
                            <label>Name</label>
                            <input type="text" name="new_fields[${newFieldIndex}][name]" 
                                class="form-control field-name" >
                        </div>
                        <div class="col-md-3 mb-2">
                            <label>Type</label>
                            <select name="new_fields[${newFieldIndex}][type]" class="form-control field-type">
                        ${fieldTypes.map(type => {
                            const label = type === 'company' 
                                ? 'Add Autotask Company Details' 
                                : type.charAt(0).toUpperCase() + type.slice(1);
                            return `<option value="${type}">${label}</option>`;
                        }).join('')}
                    </select>
                        </div>
                        <div class="col-md-5 mb-2" style="${addstyle}">
                            <label class="seloption">${optionname}</label>
                            <input type="text" name="new_fields[${newFieldIndex}][options]" 
                                class="form-control" placeholder="">
                        </div>
                        <div class="col-md-1 text-center">
                            <label>Required</label><br>
                            <input type="checkbox" name="new_fields[${newFieldIndex}][required]" 
                                class="form-check-input mt-2">
                        </div>

                    


                    </div>
                </div>
            </div>
        `;

        container.insertAdjacentHTML('beforeend', fieldHtml);
        newFieldIndex++;



        const cards = container.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;
            renderPreview();
        }
        
    }


    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-container"), {
            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);
                
                
                toggleCompanyVisibility();


                
            }
        });
    });



    document.getElementById('new-fields-container').addEventListener('click', function(e) {
        if (e.target.classList.contains('remove-field')) {
            e.target.closest('.card').remove();
            buildLivePreview();
        }
    });

    document.addEventListener('click', function (e) {
        if (e.target.classList.contains('remove-existing-field')) {
            const card = e.target.closest('.existing-field');
            const fieldId = card.getAttribute('data-field-id');
            const deletedInput = document.getElementById('deleted-fields');

            if (deletedInput) {
                let deleted = deletedInput.value ? deletedInput.value.split(',') : [];
                deleted.push(fieldId);
                deletedInput.value = deleted.join(',');
            }

            card.remove(); // Remove the field card from the DOM
            buildLivePreview();
        }
    });

    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 acreategroupField() {
            const checkedValues = [];
            document.querySelectorAll('.makegroup input[type="checkbox"]:checked').forEach(checkbox => {
                checkedValues.push(checkbox.value);
            });

            if (checkedValues.length !== 0) {
                const getname = prompt("Give a name");
                if (getname && getname.trim() !== '') {
                    // Send POST request to Laravel
                    fetch("{{ route('forms.group.store') }}", {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json",
                            "X-CSRF-TOKEN": "{{ csrf_token() }}"
                        },
                        body: JSON.stringify({
                            name: getname,
                            group: checkedValues
                        })
                    })
                    .then(response => {
                        console.log(response);
                        if (!response.ok) throw new Error("Network error");
                        return response.text();
                    })
                    .then(() => {
                        window.location.reload(); // refresh after save
                    })
                    .catch(err => alert("Error: " + err));
                }
            }
        }

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

        fetch("{{ route('forms.getFieldsgroup') }}", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: 'groupids=' + encodeURIComponent(getids)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                data.data.forEach(field => {
                    addFieldFromData(field);
                });
                buildLivePreview();
            } else {
                console.error(data.message);
            }
        })
        .catch(error => {
            console.error('Fetch error:', error);
        });
    }

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

        fetch("{{ route('forms.removeFields') }}", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: 'groupids=' + encodeURIComponent(getids)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                var select = document.getElementById('groupidselection');
                var optionToRemove = select.querySelector('option[value="' + getids + '"]');
                if (optionToRemove) {
                    optionToRemove.remove();
                }
            } else {
                console.error(data.message);
            }
        })
        .catch(error => {
            console.error('Fetch error:', error);
        });
    }

    function addFieldFromData(field) {
        const container = document.getElementById('new-fields-container');
        const fieldTypes = [
            'text', 'textarea', 'email', 'password',
            'select', 'multiselect', 'checkbox', 'date', 'upload','signature','image','divider','country','state','payment','heading'
        ];

        const selectedTypeOptions = fieldTypes.map(type =>
            `<option value="${type}" ${type === field.field_type ? 'selected' : ''}>${type.charAt(0).toUpperCase() + type.slice(1)}</option>`
        ).join('');

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


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


        const fieldHtml = `
            <div class="card mb-3">
            <div class="card-body">
            <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-2">
                    <label>Label</label>
                    <input type="text" name="new_fields[${newFieldIndex}][label]" 
                        class="form-control field-label" value="${field.label}" >
                </div>
                <div class="col-md-3 mb-2" style="display:none;">
                    <label>Name</label>
                    <input type="text" name="new_fields[${newFieldIndex}][name]" 
                        class="form-control field-name" value="${field.name}" required>
                </div>
                <div class="col-md-3 mb-2">
                    <label>Type</label>
                    <select name="new_fields[${newFieldIndex}][type]" class="form-control">
                        ${selectedTypeOptions}
                    </select>
                </div>
                <div class="col-md-5 mb-2" style="${addstyle}">
                    <label class="seloption">${optionname}</label>
                    <input type="text" name="new_fields[${newFieldIndex}][options]" 
                        class="form-control" value="${field.options || ''}" placeholder="">
                </div>
                <div class="col-md-1 text-center">
                    <label>Required</label><br>
                    <input type="checkbox" name="new_fields[${newFieldIndex}][required]" 
                        class="form-check-input mt-2" ${field.required == 1 ? 'checked' : ''}>
                </div>
            </div>
            </div>
            </div>
        `;

        container.insertAdjacentHTML('beforeend', fieldHtml);
        newFieldIndex++;
    }
</script>



<script>
    function renderPreview() {
        const previewContainer = document.getElementById('live-preview');
        previewContainer.innerHTML = ''; // Clear previous content

        // Combine existing fields and new fields
        const allFields = document.querySelectorAll('#new-fields-container .card');

        allFields.forEach(card => {
            const label = card.querySelector('input[name*="[label]"]')?.value || '';
            const name = card.querySelector('input[name*="[name]"]')?.value || '';
            const type = card.querySelector('select[name*="[type]"]')?.value || '';
            const optionsRaw = card.querySelector('input[name*="[options]"]')?.value || '';
            const required = card.querySelector('input[name*="[required]"]')?.checked;

            const fieldWrapper = document.createElement('div');
            fieldWrapper.className = 'mb-3';

            if (label.trim() !== '') {
                const labelEl = document.createElement('label');
                labelEl.textContent = label + (required ? ' *' : '');
                labelEl.className = 'form-label';
                fieldWrapper.appendChild(labelEl);
            }

            let inputEl;


            if (type === 'textarea') {
                inputEl = document.createElement('textarea');
                inputEl.className = 'form-control';
            }else if (type === 'heading') {
                inputEl = document.createElement('div');
                // inputEl.className = 'form-control';
            } else if (type === 'select' || type === 'multiselect') {
                inputEl = document.createElement('select');
                inputEl.className = 'form-control';
                if (type === 'multiselect') inputEl.multiple = true;

                const options = optionsRaw.split(',').map(opt => opt.trim()).filter(opt => opt);
                options.forEach(opt => {
                    const optEl = document.createElement('option');
                    optEl.textContent = opt;
                    inputEl.appendChild(optEl);
                });
            } else if (type === 'checkbox') {
                inputEl = document.createElement('input');
                inputEl.type = 'checkbox';
                inputEl.className = 'form-check-input';
                inputEl.className = 'form-check-label ms-2';
                fieldWrapper.className = 'form-check mb-3';
            }else if (type === 'signature') {
                inputEl = document.createElement('textarea');
                inputEl.className = 'form-control';
            } else if (type === 'upload') {
                inputEl = document.createElement('input');
                inputEl.type = 'file';
                inputEl.className = 'form-control';
            } else if (type === 'image') {
                inputEl = document.createElement('img');
                inputEl.src = optionsRaw; 
                inputEl.className = 'img-fluid';
            }else if (type === 'divider') {
                inputEl = document.createElement('hr');
            } else if (type === 'country') {
                inputEl = document.createElement('select');
                inputEl.className = 'form-control';
                const optEl = document.createElement('option');
                optEl.textContent = '--Select Country--';
                inputEl.appendChild(optEl);
            }else if (type === 'state') {
                inputEl = document.createElement('select');
                inputEl.className = 'form-control';
                const optEl = document.createElement('option');
                optEl.textContent = '--Select state--';
                inputEl.appendChild(optEl);
            }else if (type === 'payment') {
                inputEl = document.createElement('p');
                inputEl.innerText = 'Payment details will show here';
            }else {
                inputEl = document.createElement('input');
                inputEl.type = type || 'text';
                inputEl.className = 'form-control';
            }

            inputEl.name = name;
            inputEl.required = required;
            fieldWrapper.appendChild(inputEl);
            previewContainer.appendChild(fieldWrapper);
        });

    }

    // Attach change event listeners
    document.addEventListener('input', function (e) {
        if (
            e.target.closest('#new-fields-container') &&
            (e.target.matches('input') || e.target.matches('select') || e.target.matches('textarea'))
        ) {
            renderPreview();
        }
    });

    // Initial render
    document.addEventListener('DOMContentLoaded', renderPreview);

    // Also re-render after adding new field
    // document.querySelector('[onclick="addNewField()"]').addEventListener('click', () => {
    //     setTimeout(renderPreview, 100); // Slight delay to ensure DOM update
    // });
</script>



<script>
    function buildLivePreview() {
        const preview = document.getElementById('live-preview');
        preview.innerHTML = ''; // Clear existing

        const fields = document.querySelectorAll('#new-fields-container .card');

        fields.forEach(field => {
            const label = field.querySelector('[name*="[label]"]')?.value || '';
            const name = field.querySelector('[name*="[name]"]')?.value || 'name';
            const type = field.querySelector('[name*="[type]"]')?.value || 'text';
            const required = field.querySelector('[name*="[required]"]')?.checked;
            const options = field.querySelector('[name*="[options]"]')?.value || '';

            const formGroup = document.createElement('div');
            formGroup.classList.add('mb-3');

            if (label.trim() !== '') {
                const labelEl = document.createElement('label');
                labelEl.classList.add('form-label');
                labelEl.innerText = label + (required ? ' *' : '');
                formGroup.appendChild(labelEl);
            }

       

            //console.log(type);
            if (['text', 'email', 'password', 'date'].includes(type)) {
                const input = document.createElement('input');
                input.type = type;
                input.className = 'form-control';
                input.name = name;
                if (required) input.required = true;
                formGroup.appendChild(input);
            }else if (type === 'heading') {
                //  const input = document.createElement('input');
                // input.type = type;
                // input.className = 'form-control';
                // input.name = name;
                // if (required) input.required = true;
                // formGroup.appendChild(input);
            } else if (type === 'textarea') {
                const textarea = document.createElement('textarea');
                textarea.className = 'form-control';
                textarea.name = name;
                if (required) textarea.required = true;
                formGroup.appendChild(textarea);
            } else if (['select', 'multiselect'].includes(type)) {
                const select = document.createElement('select');
                select.className = 'form-control';
                select.name = name + (type === 'multiselect' ? '[]' : '');
                if (type === 'multiselect') select.multiple = true;

                const opts = options.split(',').map(opt => opt.trim());
                opts.forEach(opt => {
                    const option = document.createElement('option');
                    option.value = opt;
                    option.innerText = opt;
                    select.appendChild(option);
                });
                formGroup.appendChild(select);
            } else if (type === 'checkbox') {
                const checkbox = document.createElement('input');
                checkbox.type = 'checkbox';
                checkbox.className = 'form-check-input';
                checkbox.name = name;
                formGroup.appendChild(checkbox);
            }else if (type === 'signature') {
                const textarea = document.createElement('textarea');
                textarea.className = 'form-control';
                formGroup.appendChild(textarea);
            }  else if (type === 'upload') {
                const input = document.createElement('input');
                input.type = 'file';
                input.className = 'form-control';
                input.name = name;
                formGroup.appendChild(input);
            }else if (type === 'image') {
                var inputim = document.createElement('img');
                inputim.src = options; 
                inputim.className = 'img-fluid';
                formGroup.appendChild(inputim);
            }else if (type === 'divider') {
                var inputim = document.createElement('hr');
                formGroup.appendChild(inputim);
            }else if (type === 'country') {
                const select = document.createElement('select');
                select.className = 'form-control';
                select.name = "--Select Country--";
                formGroup.appendChild(select);
            }else if (type === 'state') {
                const select = document.createElement('select');
                select.className = 'form-control';
                select.name = "--Select State--";
                formGroup.appendChild(select);
            }else if (type === 'payment') {
                 var inputEl = document.createElement('p');
                 inputEl.innerText = 'Payment details will show here';
                formGroup.appendChild(inputEl);
            }
            // else if (type === 'company') {
            //     const div = document.createElement('div');
            //     div.className = 'alert alert-info';
            //     div.textContent = 'Autotask Company Details will be shown here.';
            //     formGroup.appendChild(div);
            // }

            preview.appendChild(formGroup);
        });
    }

    // Update preview whenever a field changes
    document.getElementById('new-fields-container').addEventListener('input', buildLivePreview);
    document.getElementById('new-fields-container').addEventListener('change', buildLivePreview);
</script>

<script>
    new Sortable(document.getElementById('new-fields-container'), {
        handle: '.drag-handle',
        animation: 150,
        onEnd: () => {
            buildLivePreview();
            updateFieldOrder();

        }
    });
    function updateFieldOrder() {
        const cards = document.querySelectorAll('#new-fields-container .card');
        cards.forEach((card, index) => {
            const sortInput = card.querySelector('.field-sort-order');
            if (sortInput) {
                sortInput.value = index;
            }
        });
    }
</script>

<script>
    function attachLabelToNameListeners() {
        const cards = document.querySelectorAll('#new-fields-container .card');

        cards.forEach(card => {
            const labelInput = card.querySelector('.field-label');
            const nameInput = card.querySelector('.field-name');

            if (labelInput && nameInput && !labelInput.dataset.listenerAttached) {
                labelInput.addEventListener('input', () => {
                    let slug = labelInput.value;
                    nameInput.value = slug;
                });
                // Prevent double-binding
                labelInput.dataset.listenerAttached = 'true';
            }
        });
    }

    // Call once for existing fields
    attachLabelToNameListeners();

    // Call again after adding a new field dynamically
    document.getElementById('add-field-btn')?.addEventListener('click', () => {
        setTimeout(() => {
            attachLabelToNameListeners();
            buildLivePreview();
        }, 100); // slight delay to ensure new card is added
    });
</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";

            if (type === "basic" || type === "custom") {
                authKeyGroup.style.display = "block";
            }else if(type==="signature"){
                authSecret.style.display = "none";
                authKeyGroup.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";
                authKeyGroup_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 () {
        
        // Run on page load
        toggleCompanyVisibility();
        
        // Run on select change
        document.addEventListener('change', function (e) {
            if (e.target.classList.contains('field-type')) {
                toggleCompanyVisibility();
            }
        });
        
        
    });
    
    const showElement = document.getElementById('showonlyautoselect');
       function toggleCompanyVisibility() {
            const selects = document.querySelectorAll('.field-type');
            let shouldShow = false;
            selects.forEach(select => {
                if (select.value === 'company') {
                    shouldShow = true;
                }

                var parentRow = select.closest('.row');
                var cols = parentRow.querySelectorAll('.col-md-5'); 
                if(cols){
                    if (
                        select.value != 'select' && 
                        select.value != 'multiselect' && 
                        select.value != 'checkbox'  && 
                        select.value != 'payment'  &&
                        select.value != 'image'  
                    ) {
                        cols[0].style.display = 'none';
                    } else {
                        cols[0].style.display = '';
                    }
                }

                if(select.value=='divider'){
                       var colsmd3 = parentRow.querySelectorAll('.col-md-3');
                        if (colsmd3.length) {
                        colsmd3[0].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';
                    }
                }



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


                if (parentRow) {
                    const selOptionLabel = parentRow.querySelector('.seloption');
                    if (selOptionLabel) {
                        selOptionLabel.innerText = optionname;
                    }
                }

              

            });

            showElement.style.display = shouldShow ? 'block' : 'none';
        }
</script>


</div>
@endsection