@extends('layouts.app')

@section('content')
<div class="container-fluid mt-4">
    <div class="card my-custom-margin">
        <div class="card-header">
            <div class="row g-2 justify-content-between align-items-center">
                <div class="col-12 col-md-auto">
                    <div class="d-flex flex-wrap gap-2">
                        <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#formModal">
                            <i class="bi bi-plus-lg me-1"></i> New Form
                        </button>
                          <div class="dropdown">
                <button class="btn btn-sm btn-secondary dropdown-toggle" type="button" id="exportDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi bi-upload me-1"></i> Export
                </button>
                <ul class="dropdown-menu" aria-labelledby="exportDropdown">
                    <li><button class="dropdown-item" id="exportExcel">Excel</button></li>
                    <li><button class="dropdown-item" id="exportCSV">CSV</button></li>
                    <li><button class="dropdown-item" id="exportPDF">PDF</button></li>
                    <li><button class="dropdown-item" id="exportPrint">Print</button></li>
                </ul>
            </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card-body">
            <!-- Table controls -->
            <div class="row mb-3 g-2 align-items-center">
                <div class="col-md-6 d-flex flex-wrap align-items-center gap-2">
                    <label for="entries" class="show" style="margin-left: 24px;">Show</label>
                    <select id="entries" class="form-select form-select-sm" style="max-width: 100px;">
                        <option value="10">10</option>
                        <option value="25">25</option>
                        <option value="50">50</option>
                        <option value="-1">All</option>
                    </select>
                    <span class="mb-0">entries</span>
                </div>
                <div class="col-md-6 d-flex flex-wrap justify-content-md-end align-items-center gap-2">
                    <label for="search" class="form-label mb-0">Search:</label>
                    <input type="text" id="search" class="form-control form-control-sm" style="max-width: 189px; margin-right: 22px;">
                </div>
            </div>

            <!-- Table -->
             <div class="table-responsive"><div class="custom-scroll-container">
                <table class="table table-bordered w-100" id="web-to-leadTable">
                    <thead>
                        <tr>
                            <th class="no-sort"><input type="checkbox" id="selectAll"></th> <!-- This is your Select All checkbox -->
                            <th>Form Name</th>
                            <th>Total Submissions</th>
                            <th>Created</th>
                        </tr>
                    </thead>
                <tbody>
                             @foreach ($forms as $form)
                            <tr class="form-row">
                                <td>
                                   <input type="checkbox" name="form_ids[]" value="{{ $form->id }}" class="row-checkbox">

                                </td>
                                <td>
                                    <div>{{ $form->form_name }}</div>
                                    <div class="action-links mt-1">
                                        <a href="#" 
                                   class="text-primary open-builder-modal" 
                                   data-id="{{ $form->id }}" 
                                   data-name="{{ $form->form_name }}" 
                                   data-bs-toggle="modal" 
                                   data-bs-target="#builderModal">
                                   Form Builder
                                </a>
                                |
                               <a href="#" class="text-primary edit-form" data-id="{{ $form->id }}">Edit</a>
                                 |
                                <a href="#" class="text-danger delete-form" data-id="{{ $form->id }}">Delete</a>
                            </div>
                            
                                    <form id="delete-form-{{ $form->id }}" action="{{ route('forms.destroy', $form->id) }}" method="POST" style="display: none;">
                                @csrf
                                @method('DELETE')
                            </form>
                            </td>
                              <td>
                                <strong>Total: {{ $form->submission_count }}</strong><br>
                                @if($form->submission_count > 0)
                                    {{ $form->submission_count }} submissions
                                @else
                                    No submissions yet
                                @endif
                            </td>
                                <td>{{ $form->created_at->diffForHumans() }}</td>
                            </tr>
                            @endforeach
                   </tbody>
                 </table>
                </div>
                </div>
                </div>

<!-- Modal Form -->
<div class="modal fade" id="formModal" tabindex="-1" aria-labelledby="formModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-body">
                <div class="alert alert-primary d-flex align-items-center" role="alert" style="background-color: #f0f8ff; color: #0d6efd; border-left: 4px solid #0d6efd;">
                    <i class="bi bi-info-circle-fill me-2"></i>
                    Create form first to be able to use the form builder.
                </div>

                <h5 class="mt-3 mb-3">New Form</h5>

                <ul class="nav nav-tabs mb-3" id="formTab" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="general-tab" data-bs-toggle="tab" href="#general" role="tab">General</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="submission-tab" data-bs-toggle="tab" href="#submission" role="tab">Submission</a>
                    </li>
                </ul>

                <div class="tab-content" id="formTabContent">
                    <!-- General Tab -->
                    <div class="tab-pane fade show active" id="general" role="tabpanel">
                        <form>
                            <div class="mb-3">
                                <label for="formName" class="form-label">* Form Name</label>
                                <input type="text" class="form-control" id="formName" placeholder="Enter form name">
                            </div>

                            <div class="mb-3">
                                <label for="language" class="form-label">* Language</label>
                                <select class="form-select" id="language">
                                    <option selected>English</option>
                                    <option>Hindi</option>
                                    <option>Marathi</option>
                                    <!-- Add more if needed -->
                                </select>
                                <div class="form-text">For validation messages</div>
                            </div>

                            <div class="mb-3">
                                <label for="leadPrefix" class="form-label">Lead title prefix</label>
                                <input type="text" class="form-control" id="leadPrefix" placeholder="Enter prefix">
                                <div class="form-text">This will be prefixed to lead name for easier recognition</div>
                            </div>

                            <div class="mb-3">
                                <label for="source" class="form-label">* Source</label>
                                <select class="form-select" id="source">
                                    <option selected>Scheduled A Visit</option>
                                    <option>Enquiry Form</option>
                                    <option>Pricing Form</option>
                                </select>
                            </div>

                            <div class="mb-3">
                                <label for="status" class="form-label">* Status</label>
                                <select class="form-select" id="status">
                                    <option selected>New</option>
                                    <option>Follow Up</option>
                                    <option>Completed</option>
                                    <option>Postponed</option>
                                    <option>Job Related</option>
                                </select>
                            </div>

                            <div class="mb-3">
                                <label for="assignee" class="form-label">* Responsible (Assignee)</label>
                                <select class="form-select" id="assignee">
                                    <option selected disabled>Nothing selected</option>
                                    <option>Priyanka Chorat</option>
                                    <option>Sakshi Pisal</option>
                                    <option>Sumit Mandal</option>
                                    <option>Shaheen Khan</option>
                                    <option>Komal Borse</option>
                                    <option>Wasim Sayyed</option>
                                </select>
                            </div>
                        </form>
                    </div>

                    <!-- Submission Tab -->
                    <div class="tab-pane fade" id="submission" role="tabpanel">
                        <form id="formCreate">                                                                                                                  
                            <div class="mb-3">
                                <label class="form-label">Thank You Message</label>
                                <textarea class="form-control" rows="3" placeholder="Thank you for your submission!"></textarea>
                            </div>
                            <!--<div class="mb-3">-->
                            <!--    <label class="form-label">Redirect URL</label>-->
                            <!--    <input type="url" class="form-control" placeholder="https://example.com/thank-you">-->
                            <!--</div>-->
                        </form>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
              <button type="button" class="btn btn-primary" id="saveForm">Save Form</button>


            </div>
        </div>
    </div>
</div>



<!-- Form Builder Modal -->
<div class="modal fade" id="builderModal" tabindex="-1" aria-labelledby="builderModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Create Form - <span id="modalFormName"></span></h5>
               <button type="button" class="custom-close" data-bs-dismiss="modal" aria-label="Close">×</button>
            </div>

            <div class="modal-body">
                 <!-- Hidden input to store form ID -->
    <input type="hidden" id="currentFormId">
                <ul class="nav nav-tabs" id="builderTab" role="tablist">
                    <li class="nav-item">
                        <button class="nav-link active" id="form-builder-tab" data-bs-toggle="tab" data-bs-target="#formBuilderTabContent" type="button" role="tab">Form Builder</button>
                    </li>
                    <li class="nav-item">
                        <button class="nav-link" id="integration-code-tab" data-bs-toggle="tab" data-bs-target="#integrationCodeTabContent" type="button" role="tab">Integration Code</button>
                    </li>
                </ul>

                <div class="tab-content mt-3">
                    <!-- Form Builder Content -->
                    <div class="tab-pane fade show active" id="formBuilderTabContent" role="tabpanel">
                        <div class="row">
                            <!-- Draggable Fields -->
                            <div class="col-md-4">
                                <h6 class="mb-3">Form Fields</h6>
                                <ul class="list-group" id="fieldList">
                                    @php
                                        $fields = [
                                            'Header', 'Paragraph', 'File Upload', 'Name', 'Position',
                                            'Email Address', 'Phone', 'Lead Value', 'Company',
                                            'Address', 'City', 'State', 'Country', 'Zip Code',
                                            'Description', 'Project Name'
                                        ];
                                    @endphp
                                    @foreach ($fields as $field)
                                        <li class="list-group-item draggable-field" draggable="true" data-field="{{ $field }}">
                                            {{ $field }}
                                        </li>
                                    @endforeach
                                </ul>
                            </div>

                            <!-- Form Canvas Area -->
                            <div class="col-md-8">
                                <h4 class="mb-3 text-primary">Let's Connect</h4>
                                <div id="formCanvas" class="border p-3" style="min-height: 300px; min-width: 100%;">
                                    <input type="hidden" id="form_id_hidden" value="">
                                    <p class="text-muted">Drag and drop fields here</p>
                                </div>
                            </div>
                        </div>
                    </div>

                           <!-- Integration Code Content -->
                    <div class="tab-pane fade" id="integrationCodeTabContent" role="tabpanel">
                        <div class="form-group">
                            <label for="embedCode">Copy and paste this code into your website to embed the form:</label>
                            @if(!empty($form) && !empty($form->integration_code))
                                <textarea id="embedCode" class="form-control" rows="4" readonly onfocus="this.select()">
                                    <iframe src="{{ route('form.embed_code', $form->integration_code) }}" width="100%" height="600" frameborder="0"></iframe>
                                </textarea>
                                <div class="mt-3 border p-3">
                                    <strong>Live Preview:</strong>
                                   <iframe src="{{ route('form.embed_code', $form->integration_code) }}" width="100%" height="600" frameborder="0"></iframe>
                                </div>
                            @else
                                <p class="text-danger">Please save the form layout first to generate integration code.</p>
                            @endif
                        </div>
                    </div>


                </div>
            </div>

            <div class="modal-footer">
                <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button class="btn btn-primary" id="saveFormBuilder">Save Form Layout</button>
            </div>
        </div>
    </div>
</div>



<!-- Edit Form Name Modal -->
<div class="modal fade" id="editFormModal" tabindex="-1" aria-labelledby="editFormModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <form id="editFormNameForm">
        @csrf
        @method('PUT')
        <div class="modal-header">
          <h5 class="modal-title" id="editFormModalLabel">Edit Form Name</h5>
          <button type="button" class="custom-close" data-bs-dismiss="modal" aria-label="Close">×</button>
        </div>
        <div class="modal-body">
          <input type="hidden" id="editFormId">
          <div class="mb-3">
            <label for="editFormName" class="form-label">Form Name</label>
            <input type="text" class="form-control" id="editFormName" required>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary">Update</button>
        </div>
      </form>
    </div>
  </div>
</div>





@endsection

@section('scripts')
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.4.1/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.min.css">
<!-- CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/formBuilder/3.6.1/form-builder.min.css" />

<!-- JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/formBuilder/3.6.1/form-builder.min.js"></script>

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>

<!-- Bootstrap -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<!-- DataTables Core -->
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>

<!-- JSZip for Excel export -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>

<!-- pdfmake for PDF export -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>

<!-- DataTables Buttons Extension -->
<script src="https://cdn.datatables.net/buttons/2.4.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.1/js/buttons.print.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>

<!-- jQuery and FormBuilder CSS/JS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/formBuilder/3.6.1/form-builder.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/formBuilder/3.6.1/form-builder.min.js"></script>


<!-- Optional HTML2PDF (if you use it somewhere else) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>

<script>
$(document).ready(function () {
    const table = $('#web-to-leadTable').DataTable({
        scrollX: true,
        order: [[2, 'desc']], 
        dom: 'Brtip',
        buttons: [
            {
                extend: 'excelHtml5',
                title: 'Web-to-lead',
                className: 'd-none',
                exportOptions: { columns: ':not(.no-export)' }
            },
            {
                extend: 'csvHtml5',
                title: 'Web-to-lead',
                className: 'd-none',
                exportOptions: { columns: ':not(.no-export)' }
            },
            {
                extend: 'pdfHtml5',
                title: 'Web-to-lead',
                className: 'd-none',
                exportOptions: { columns: ':not(.no-export)' }
            },
            {
                extend: 'print',
                title: 'Web-to-lead',
                className: 'd-none',
                exportOptions: { columns: ':not(.no-export)' }
            },
        ],
        pagingType: 'simple_numbers',
        pageLength: 10,
        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
        language: {
            search: "_INPUT_",
            searchPlaceholder: "Search Sources...",
            lengthMenu: "_MENU_",
            paginate: {
                first: "First",
                last: "Last",
                next: "Next",
                previous: "Previous"
            },
            info: "Showing _START_ to _END_ of _TOTAL_ entries",
        },
        columnDefs: [
            {
                targets: 0,
                orderable: false,
                searchable: false,
                className: 'no-sort'
            }
        ]
    });

    // Show entries custom dropdown
    $('#entries').on('change', function () {
        const length = parseInt($(this).val(), 10);
        table.page.len(length).draw();
    });

    // Custom search box
    $('#search').on('keyup', function () {
        table.search(this.value).draw();
    });
    
    
  function exportWithSelection(url) {
    var ids = [];
    // Use checkbox with name form_ids[] as per your table
    $('input[name="form_ids[]"]:checked').each(function() {
        ids.push($(this).val());
    });

    var form = $('<form>', {
        method: 'POST',
        action: url,
        target: '_blank'
    });

    // Add CSRF token
    form.append($('<input>', {
        type: 'hidden',
        name: '_token',
        value: '{{ csrf_token() }}'
    }));

    // Add selected IDs
    ids.forEach(function(id) {
        form.append($('<input>', {
            type: 'hidden',
            name: 'ids[]',
            value: id
        }));
    });

    $('body').append(form);
    form.submit();
    form.remove();
}

$('#exportPDF').on('click', function () {
    exportWithSelection('{{ route("web-to-lead.export.pdf") }}');
});

     // Handle "Select All" checkbox
    $('#selectAll').on('change', function () {
        const isChecked = $(this).prop('checked');
        $('#web-to-leadTable .row-checkbox').prop('checked', isChecked);
        if (isChecked) {
            table.rows().select();
        } else {
            table.rows().deselect();
        }
    });


    // Handle individual row checkbox change
    $('#web-to-leadTable tbody').on('change', '.row-checkbox', function () {
        const $row = $(this).closest('tr');
        const rowIndex = table.row($row).index();
        if (this.checked) {
            table.row(rowIndex).select();
        } else {
            table.row(rowIndex).deselect();
        }

        // Update "Select All" checkbox state
        const allChecked = $('#web-to-leadTable .row-checkbox').length === $('#web-to-leadTable .row-checkbox:checked').length;
        $('#selectAll').prop('checked', allChecked);
    });


    // Export buttons
    $('#exportExcel').on('click', function () {
        table.button('.buttons-excel').trigger();
    });

    $('#exportCSV').on('click', function () {
        table.button('.buttons-csv').trigger();
    });

    $('#exportPDF').on('click', function () {
        table.button('.buttons-pdf').trigger();
    });

    $('#exportPrint').on('click', function () {
        table.button('.buttons-print').trigger();
    });

    
    
       $('#saveForm').click(function () {
        let formName = $('#formName').val();

        $.ajax({
            url: "{{ route('forms.store') }}",
            type: "POST",
            data: {
                _token: '{{ csrf_token() }}',
                form_name: formName
            },
            success: function (response) {
                alert('Form saved successfully!');
                location.reload(); // or update table dynamically
            },
            error: function (xhr) {
                alert('Error: ' + xhr.responseJSON.message || 'Something went wrong!');
            }
        });
    });
    
    
    // Attach click event for all delete links with class .delete-form
    $('a.delete-form').on('click', function(e) {
        e.preventDefault();
        const id = $(this).data('id');
        if (confirm('Are you sure you want to delete this form?')) {
            $('#delete-form-' + id).submit();
        }
    });


document.querySelectorAll('.open-builder-modal').forEach(btn => {
    btn.addEventListener('click', function (e) {
        const formId = this.dataset.id;
        const formName = this.dataset.name;

        // Store form ID in the hidden input
        document.getElementById('currentFormId').value = formId;
        document.getElementById('modalFormName').textContent = formName;

        // Reset formCanvas, etc.
        document.getElementById('formCanvas').innerHTML = '<p class="text-muted">Drag and drop fields here</p>';
        $('#builderModal').modal('show');
    });
});



const fieldList = document.getElementById('fieldList');
    const formCanvas = document.getElementById('formCanvas');

    // Drag start
    fieldList.addEventListener('dragstart', function (e) {
        if (e.target.classList.contains('draggable-field')) {
            e.dataTransfer.setData('text/plain', e.target.dataset.field);
        }
    });

    // Allow drop
    formCanvas.addEventListener('dragover', function (e) {
        e.preventDefault();
    });

    // Drop
formCanvas.addEventListener('drop', function (e) {
    e.preventDefault();
    const fieldType = e.dataTransfer.getData('text/plain');

    // Create wrapper div for each dropped field
    const wrapper = document.createElement('div');
    wrapper.className = 'border p-2 mb-2 dropped-field position-relative'; // Add position-relative for absolute positioning of close button

    // Create close icon button
    const closeBtn = document.createElement('button');
    closeBtn.type = 'button';
    closeBtn.className = 'btn-close position-absolute top-0 end-0 m-2';
    closeBtn.setAttribute('aria-label', 'Close');

    // Close button event to remove the wrapper
    closeBtn.addEventListener('click', function () {
        wrapper.remove();
    });

    // Add field HTML depending on fieldType
    let fieldHTML = '';
    switch (fieldType) {
        case 'Header':
            fieldHTML = `<h4 class="mt-2">${fieldType} Title</h4>`;
            break;
        case 'Paragraph':
            fieldHTML = `<p class="mb-0">This is a paragraph text area.</p>`;
            break;
        case 'File Upload':
            fieldHTML = `<label>${fieldType}</label><input type="file" class="form-control">`;
            break;
        case 'Description':
            fieldHTML = `<label>${fieldType}</label><textarea class="form-control"></textarea>`;
            break;
        default:
            fieldHTML = `<label>${fieldType}</label><input type="text" class="form-control">`;
    }

    wrapper.innerHTML = fieldHTML;

    // Append close button to wrapper
    wrapper.appendChild(closeBtn);

    // Append the wrapper to formCanvas
    formCanvas.appendChild(wrapper);
});






$('#saveFormBuilder').on('click', function () {
    const formId = $('#currentFormId').val();
    const droppedFields = [];

    $('#formCanvas .dropped-field').each(function () {
        droppedFields.push($(this).text().trim());
    });

    if (droppedFields.length === 0) {
        alert('Please drag and drop at least one field.');
        return;
    }

    $.ajax({
        url: "{{ route('form.layout.save') }}",
        method: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            form_id: formId,
            fields: droppedFields
        },
        success: function (response) {
    alert('Form layout saved successfully!');

    if (response.integration_code) {
       const embedCode = `<iframe src="/embed-form/${response.integration_code}" width="100%" height="600" frameborder="0"></iframe>`;


        $('#integrationCodeTabContent').html(`
            <label>Copy and paste this code into your website to embed the form:</label>
            <textarea class="form-control" rows="4" readonly onfocus="this.select()">${embedCode}</textarea>

            <div class="mt-3 border p-3">
                <strong>Live Preview:</strong>
                ${embedCode}
            </div>
        `);

        $('#integration-code-tab').tab('show'); // show Integration Code tab
    }
},

        error: function (xhr) {
            console.error(xhr.responseText);
            alert('Failed to save layout.');
        }
    });
});

    // Set form ID on modal open
$(document).on('click', '.open-builder-modal', function () {
    const formId = $(this).data('id');
    const formName = $(this).data('name');

    $('#currentFormId').val(formId);
    $('#modalFormName').text(formName);

    // Clear formCanvas
    $('#formCanvas').html('<p class="text-muted">Drag and drop fields here</p>');

    // Load saved fields via AJAX
    $.ajax({
        url: `/form/layout/${formId}`, // You’ll create this route/controller
        method: 'GET',
   success: function (response) {
    $('#formCanvas').empty();

    if (response.fields.length > 0) {
        response.fields.forEach(field => {
            let inputHtml = '';

            switch (field) {
                case 'Header':
                    inputHtml = '<h4 contenteditable="true" class="editable-header">Header Text</h4>';
                    break;
                case 'Paragraph':
                    inputHtml = '<p contenteditable="true" class="editable-paragraph">Paragraph text goes here.</p>';
                    break;
                case 'File Upload':
                    inputHtml = '<div><label>Upload File</label><input type="file" class="form-control"></div>';
                    break;
                case 'Name':
                    inputHtml = '<div><label>Name</label><input type="text" class="form-control" placeholder="Enter your name"></div>';
                    break;
                case 'Position':
                    inputHtml = '<div><label>Position</label><input type="text" class="form-control" placeholder="Enter your position"></div>';
                    break;
                case 'Email Address':
                    inputHtml = '<div><label>Email</label><input type="email" class="form-control" placeholder="Enter your email"></div>';
                    break;
                case 'Phone':
                    inputHtml = '<div><label>Phone</label><input type="tel" class="form-control" placeholder="Enter your phone number"></div>';
                    break;
                case 'Lead Value':
                    inputHtml = '<div><label>Lead Value</label><input type="number" class="form-control" placeholder="Enter lead value"></div>';
                    break;
                case 'Company':
                    inputHtml = '<div><label>Company</label><input type="text" class="form-control" placeholder="Enter company name"></div>';
                    break;
                case 'Address':
                    inputHtml = '<div><label>Address</label><input type="text" class="form-control" placeholder="Enter address"></div>';
                    break;
                case 'City':
                    inputHtml = '<div><label>City</label><input type="text" class="form-control" placeholder="Enter city"></div>';
                    break;
                case 'State':
                    inputHtml = '<div><label>State</label><input type="text" class="form-control" placeholder="Enter state"></div>';
                    break;
                case 'Country':
                    inputHtml = '<div><label>Country</label><input type="text" class="form-control" placeholder="Enter country"></div>';
                    break;
                case 'Zip Code':
                    inputHtml = '<div><label>Zip Code</label><input type="text" class="form-control" placeholder="Enter zip code"></div>';
                    break;
                case 'Description':
                    inputHtml = '<div><label>Description</label><textarea class="form-control" rows="3" placeholder="Enter description"></textarea></div>';
                    break;
                case 'Website':
                    inputHtml = '<div><label>Website</label><input type="url" class="form-control" placeholder="https://example.com"></div>';
                    break;
                default:
                    inputHtml = `<div>${field}</div>`;
                    break;
            }

            const fieldWithClose = `
                <div class="dropped-field position-relative border p-2 mb-2">
                    <button type="button" class="btn-close position-absolute top-0 end-0 m-1 remove-field" aria-label="Close"></button>
                    ${inputHtml}
                </div>`;

            $('#formCanvas').append(fieldWithClose);
        });
    } else {
        $('#formCanvas').html('<p class="text-muted">Drag and drop fields here</p>');
    }

            // Update Integration Code tab
            if (response.integration_code) {
                const embedCode = `<iframe src="/embed-form/${response.integration_code}" width="100%" height="600" frameborder="0"></iframe>`;
                $('#integrationCodeTabContent').html(`
                    <label>Copy and paste this code into your website to embed the form:</label>
                    <textarea class="form-control" rows="4" readonly onfocus="this.select()">${embedCode}</textarea>

                    <div class="mt-3 border p-3">
                        <strong>Live Preview:</strong>
                        ${embedCode}
                    </div>
                `);
            } else {
                $('#integrationCodeTabContent').html('<p class="text-danger">Please save the form layout first to generate integration code.</p>');
            }
        },
        error: function () {
            alert('Failed to load saved form layout.');
        }
    });
});

$(document).on('click', '.remove-field', function () {
    $(this).closest('.dropped-field').remove();
});



// Open edit modal with current form name
$(document).on('click', '.edit-form', function (e) {
    e.preventDefault();
    const formId = $(this).data('id');
    const formName = $(this).closest('td').find('div:first').text().trim();

    $('#editFormId').val(formId);
    $('#editFormName').val(formName);
    $('#editFormModal').modal('show');
});

// Submit updated form name
$('#editFormNameForm').submit(function (e) {
    e.preventDefault();
    const formId = $('#editFormId').val();
    const formName = $('#editFormName').val();

    $.ajax({
        url: `/forms/${formId}`, // Assuming resourceful route
        type: 'POST',
        data: {
            _method: 'PUT',
            _token: '{{ csrf_token() }}',
            form_name: formName
        },
        success: function (response) {
            $('#editFormModal').modal('hide');
            alert('Form name updated successfully!');
            location.reload(); // Optionally, update the row dynamically instead
        },
        error: function (xhr) {
            alert('Error updating form name: ' + (xhr.responseJSON?.message || 'Unknown error'));
        }
    });
});


    
    
    
});
</script>
@endsection