<div>
    <section class="mt-10">
        <div class="card">
            <div class="card-header d-flex justify-content-between">
                <span class="text-primary">
                    <?php echo e($form->name ?? 'Header'); ?>

                </span>
                <!--[if BLOCK]><![endif]--><?php if(!empty($redirectId)): ?>
                <span class="align-self-center">
                    <a href="<?php echo e(route('openForm', ['id' => $formId, 'from' => $redirectId])); ?>" class="btn btn-sm btn-primary rounded-pill fw-bold" wire:navigate><?php echo e(__('Data Entry')); ?></a>
                </span>
                <?php endif; ?><!--[if ENDBLOCK]><![endif]-->
            </div>
            <!-- Start coding here -->
            <div class="card-body overflow-hidden">
                <div class="d-flex justify-content-between align-items-center p-4">
                    <div class="d-flex">
                        <form class="d-none d-md-inline-block form-inline ms-auto me-0 me-md-3 my-2 my-md-0">
                            <div class="input-group">
                                <input class="form-control" type="text" placeholder="Search..." wire:model.live.debounce.300ms="search" required="" />
                                <!-- <button class="btn btn-outline-secondary" type="button"><i class="fas fa-search"></i></button> -->
                            </div>
                        </form>
                    </div>
                    <div class="d-flex space-x-3">
                        <div class="flex space-x-3 items-center">
                            <label class="w-40 text-sm font-medium text-gray-900">User Type :</label>
                            <select wire:model.live="admin"
                                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 ">
                                <option value="">All</option>
                                <!-- <option value="0">User</option>
                                <option value="1">Admin</option> -->
                            </select>
                        </div>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                            <tr>
                                <th scope="col">#</th>
                                <th>Option</th>
                                <!--[if BLOCK]><![endif]--><?php if(!empty($name_label)): ?>
                                    <!--[if BLOCK]><![endif]--><?php $__currentLoopData = $name_label; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <th><?php echo e(strip_tags($item)); ?></th>
                                    <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><!--[if ENDBLOCK]><![endif]-->
                                <?php endif; ?><!--[if ENDBLOCK]><![endif]-->
                                <th>Created</th>
                                <th>User</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!--[if BLOCK]><![endif]--><?php if($tables->count() > 0): ?>
                            <?php $sl = 1 ?>
                                <!--[if BLOCK]><![endif]--><?php $__currentLoopData = $tables; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $table): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                    <tr wire:key="<?php echo e($table->id); ?>" class="border-b dark:border-gray-700">
                                        <td scope="col" class="whitespace-nowrap">
                                            <?php echo e($sl++); ?>

                                        </td>
                                        <td>
                                            <div class="btn-group" role="group">
                                                <!--[if BLOCK]><![endif]--><?php if(auth()->user()->role=='Super Admin'): ?>
                                                <button
                                                onclick="confirm('Are you sure you want to delete <?php echo e($table->name); ?> ?') || event.stopImmediatePropagation()"
                                                wire:click="delete(<?php echo e($table->id); ?>)"
                                                class="btn btn-sm text-danger rounded"><i class="fas fa-trash"></i></button>

                                                <a href="<?php echo e(route('openForm', ['id' => $formId, 'from' => $redirectId, 'editId' => $table->id])); ?>" class="btn btn-sm text-primary rounded" wire:navigate><i class="fa-solid fa-pen-to-square"></i></a>
                                                <?php endif; ?><!--[if ENDBLOCK]><![endif]-->
                                                <!-- wire:click="show(<?php echo e($table->id); ?>)" -->
                                                <button
                                                onclick="showData(<?php echo e($table->id); ?>)"
                                                class="btn btn-sm text-warning rounded"><i class="fas fa-eye"></i></button>
                                            </div>
                                        </td>
                                        <!--[if BLOCK]><![endif]--><?php $__currentLoopData = $name_label; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $key => $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                                        <?php
                                            $key = strip_tags($key);
                                        ?>
                                        <td> <?php echo e(!empty($table->form_content[$key][0]) ? $table->form_content[$key] : ''); ?></td>
                                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><!--[if ENDBLOCK]><![endif]-->
                                        <!-- <td class="px-4 py-3 <?php echo e(false ? 'text-green-500' : 'text-blue-500'); ?>">
                                            <?php echo e(false ? 'Admin' : 'Member'); ?></td> -->
                                        <td><?php echo e($table->created_at); ?></td>
                                        <td><?php echo e($table->name); ?></td>
                                        <!-- <td class="px-4 py-3 flex items-center justify-end">
                                            <button
                                                onclick="confirm('Are you sure you want to delete <?php echo e($table->name); ?> ?') || event.stopImmediatePropagation()"
                                                wire:click="delete(<?php echo e($table->id); ?>)"
                                                class="px-3 py-1 bg-red-500 text-white rounded">X</button>
                                        </td> -->
                                    </tr>
                                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?><!--[if ENDBLOCK]><![endif]-->
                            <?php else: ?>
                                <tr>
                                    <td colspan="4" class="text-center">No results found.</td>
                                </tr>
                            <?php endif; ?><!--[if ENDBLOCK]><![endif]-->
                        </tbody>
                    </table>
                </div>

                <div class="py-4 px-3">
                    <div class="flex ">
                        <div class="flex space-x-4 items-center mb-3">
                            <label class="w-32 text-sm font-medium text-gray-900">Per Page</label>
                            <select wire:model.live='perPage'
                                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 ">
                                <option value="5">5</option>
                                <option value="10" seleted>10</option>
                                <option value="20">20</option>
                                <option value="50">50</option>
                                <option value="100">100</option>
                            </select>
                        </div>
                    </div>
                    <div >
                        <?php echo e($tables->links()); ?>

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

    <div class="modal fade" id="dataModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Form Data</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body contentBody">
            </div>
            </div>
        </div>
    </div>

    <script>

        function showData(id) {
        // alert(id);
            // Send Ajax request
            $.ajax({
                url: '<?php echo e(URL('view-table-data')); ?>',
                type: "GET",
                data:  {data_id: id},
                beforeSend:function(){					

                },
                success: function (response) {
                    if (response.success) {
                        $("#dataModal").modal('show');
                        $(".contentBody").html(response.html);
                    }
                },
                error: function (error) {
                    console.error('Error submitting form:', error);
                }
            });
        }

        // async function showData(id) {
        //     const url = '<?php echo e(URL('view-table-data')); ?>';
        //     const data = { data_id: id };
        //     try {
        //         const response = await fetch(url, {
        //         method: 'POST',
        //         headers: {
        //             'Content-Type': 'application/json'
        //         },
        //         body: JSON.stringify(data)
        //         });
        //         const responseData = await response.json();
        //         console.log('Data sent successfully:', responseData);
        //     } catch (error) {
        //         console.error('Error sending data:', error);
        //     }
        // }
    </script>
</div>



<?php /**PATH C:\laragon\www\marketing_data_analysis\resources\views/livewire/form-builder/content-table.blade.php ENDPATH**/ ?>