@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">
                                   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>
                                    @php $total = $formSubmissions[$form->id] ?? 0; @endphp
                                    <strong>Total: {{ $total }}</strong><br>
                                    @if (!empty($sourceCounts[$form->id]) && $total > 0)
                                        @foreach ($sourceCounts[$form->id] as $source => $count)
                                            <div><small>{{ $source }}: {{ $count }}</small></div>
                                        @endforeach
                                    @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">Edit Form - <span id="modalFormName"></span></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <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', 'Website'
                                        ];
                                    @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%;">
                                    <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="alert alert-light border" style="font-family: monospace;">
                            <p>Copy and paste this code into your website to embed the form:</p>
                           <pre><code>&lt;iframe src="{{ route('form.embed', $form->id) }}" width="100%" height="600" frameborder="0"&gt;&lt;/iframe&gt;</code></pre>
                        </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>


@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: [],
        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 "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.addEventListener('DOMContentLoaded', function () {
    const builderModal = new bootstrap.Modal(document.getElementById('builderModal'));

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

            // Set modal title and content
            document.getElementById('formModalTitle').textContent = formName;
            document.getElementById('formIdDisplay').textContent = formId;

            const integrationCode = `<iframe src="https://yourdomain.com/embed/${formId}" width="100%" height="500" frameborder="0"></iframe>`;
            document.getElementById('integrationCode').textContent = integrationCode;

            // TODO: Load form builder if you're using a builder library like formBuilder.js

            builderModal.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 with remove button
        const wrapper = document.createElement('div');
        wrapper.classList.add('position-relative', 'mb-3', 'dropped-field');

        // Create close button
        const closeBtn = document.createElement('button');
        closeBtn.innerHTML = '&times;';
        closeBtn.classList.add('btn', 'btn-sm', 'btn-danger', 'position-absolute');
        closeBtn.style.top = '0';
        closeBtn.style.right = '0';
        closeBtn.style.zIndex = '10';

        closeBtn.addEventListener('click', function () {
            wrapper.remove();
        });

        // Create input based on field type
        let fieldHTML = '';
        switch (fieldType) {
            case 'Header':
                fieldHTML = `<h4 class="mt-2">Sample Header</h4>`;
                break;
            case 'Paragraph':
                fieldHTML = `<p>Sample paragraph text...</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;
        wrapper.appendChild(closeBtn);
        formCanvas.appendChild(wrapper);
    });
    
    
    
    document.querySelectorAll('.open-builder-modal').forEach(function (button) {
    button.addEventListener('click', function () {
        const formId = this.getAttribute('data-id');
        const formName = this.getAttribute('data-name');

        // Set modal values
        document.getElementById('modalFormName').innerText = formName;
        document.getElementById('form-id-code').innerText = formId;
    });
});

const integrationCode = `<iframe src="${window.location.origin}/form/embed/${formId}" width="100%" height="600" frameborder="0"></iframe>`;
document.getElementById('integrationCodeDisplay').innerText = integrationCode;


const layout = getFormLayout(); // custom function that gets dragged layout as array

fetch('/save-form-layout', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
  },
  body: JSON.stringify({ layout: layout }),
})
.then(res => res.json())
.then(data => {
  if (data.success) {
    alert("Form saved! Integration Code: " + data.integration_code);
  }
});


    
});
</script>
@endsection