@extends ('../welcome')
@section('content')
    <style>
        .pagination nav .relative.z-0.inline-flex {
            display: inline-flex;
        }

        .pagination nav .hidden {
            display: unset !important;
        }

        .pagination nav .flex-1.justify-between {
            padding: 15px 0
        }

        .pagination nav .flex.justify-between.flex-1 {
            display: none
        }

        #loading {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 9999;
        }

        #loading::after {
            content: '';
            display: block;
            width: 50px;
            height: 50px;
            border: 6px solid #ccc;
            border-radius: 50%;
            border-top-color: #3498db;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>

    <!-- Filters -->
    <form id="filterForm">
        <div class="card card-info  collapsed-card">
            <div class="card-header" class="btn btn-tool" data-card-widget="collapse">
                <div class="card-title">
                    Filter
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div id="left side" class="col-6">
                        <table id="phone&name">
                            <tr colispan>
                                <th style="text-align:center">Name</th>
                                <th style="text-align:center">Phone</th>
                                <th style="text-align:center">Country: </th>
                            </tr>
                            <tr>
                                <td class="form-group col-3">
                                    <input name="name" class="form-control" type="text" placeholder="name..."
                                        value="{{ request()->get('name', old('name')) }}">
                                </td>
                                <td class="form-group col-3">
                                    <input name="phone" class="form-control" type="number" placeholder="phone..."
                                        value="{{ request()->get('phone', old('phone')) }}">
                                </td>
                                <td class="form-group col-3">
                                    <select name="country_id[]" class="select2 custom-select form-control-border" multiple>
                                        @foreach ($countries as $country)
                                            <option value="{{ $country->id }}"
                                                {{ in_array($country->id, request()->get('country_id', [])) ? 'selected' : '' }}>
                                                {{ $country->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </td>
                            </tr>
                        </table>
                        <hr>
                        <br>

                        <table id="Other filters" style="width:85%">
                            <tr>
                                <th style="width:25%">Assign To </th>
                                <td class="form-group">
                                    <select name="user_id[]" class="select2 custom-select form-control-border col-8"
                                        multiple>
                                        @foreach ($users as $user)
                                            <option value="{{ $user->id }}"
                                                {{ in_array($user->id, request()->get('user_id', [])) ? 'selected' : '' }}>
                                                {{ $user->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <th style="width:25%">Creator: </th>
                                <td class="form-group">
                                    <select name="creator_id[]" class="select2 custom-select form-control-border col-8"
                                        multiple>
                                        @foreach ($creators as $creator)
                                            <option value="{{ $creator->id }}"
                                                {{ in_array($creator->id, request()->get('creator_id', [])) ? 'selected' : '' }}>
                                                {{ $creator->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <th style="width:25%">Campaigns: </th>
                                <td class="form-group">
                                    <select name="campaign_id[]" class="select2 custom-select form-control-border col-8"
                                        multiple>
                                        @foreach ($campaigns as $campaign)
                                            <option value="{{ $campaign->id }}"
                                                {{ in_array($campaign->id, request()->get('campaign_id', [])) ? 'selected' : '' }}>
                                                {{ $campaign->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <th style="width:25%">Projects: </th>
                                <td class="form-group">
                                    <select name="project_id[]" class="select2 custom-select form-control-border col-8"
                                        multiple>
                                        @foreach ($projects as $project)
                                            <option value="{{ $project->id }}"
                                                {{ in_array($project->id, request()->get('project_id', [])) ? 'selected' : '' }}>
                                                {{ $project->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <th style="width:25%" title="Source">Lead Target: </th>
                                <td class="form-group">
                                    <select name="source_id[]" class="select2 custom-select form-control-border col-8"
                                        multiple>
                                        @foreach ($sources as $source)
                                            <option value="{{ $source->id }}"
                                                {{ in_array($source->id, request()->get('source_id', [])) ? 'selected' : '' }}>
                                                {{ $source->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <th style="width:25%" title="Assigned User">Status Type: </th>
                                <td class="form-group">
                                    <select name="statusTypes[]" class="select2 custom-select form-control-border col-8"
                                        multiple>
                                        @foreach ($statusTypes as $status)
                                            @if ($status == 'type')
                                                @continue
                                            @else
                                                <option value="{{ $status }}"
                                                    {{ in_array($status, request()->get('statusTypes', [])) ? 'selected' : '' }}>
                                                    {{ $status }}
                                                </option>
                                            @endif
                                        @endforeach
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <th style="width:25%" title="Assigned User">Status : </th>
                                <td class="form-group">
                                    <select name="status_id[]" class="select2 custom-select form-control-border col-8"
                                        multiple>
                                        @foreach ($statuses as $status)
                                            <option value="{{ $status->id }}"
                                                {{ in_array($status->id, request()->get('status_id', [])) ? 'selected' : '' }}>
                                                {{ $status->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <th style="width:25%" title="Assigned User">Tags : </th>
                                <td class="form-group">
                                    <select name="tag[]" class="select2 custom-select form-control-border col-8" multiple>
                                        <option value="VIP"
                                            {{ in_array('VIP', request()->get('tag', [])) ? 'selected' : '' }}>VIP</option>
                                        <option value="urgent"
                                            {{ in_array('urgent', request()->get('tag', [])) ? 'selected' : '' }}>urgent
                                        </option>
                                        <option value="potential-client"
                                            {{ in_array('potential-client', request()->get('tag', [])) ? 'selected' : '' }}>
                                            potential-client</option>
                                        <option value="reassign"
                                            {{ in_array('reassign', request()->get('tag', [])) ? 'selected' : '' }}>
                                            reassign
                                        </option>
                                        <option value="none"
                                            {{ in_array('none', request()->get('tag', [])) ? 'selected' : '' }}>none
                                        </option>
                                    </select>
                                </td>
                            </tr>
                        </table>
                    </div>

                    <div id="right side" class="col-6">
                        <table id="Confirm_Date">
                            <tr colispan>
                                <th colspan="4" style="text-align:center">Confirm Date</th>
                            </tr>
                            <tr>
                                <th>From</th>
                                <td class="form-group" style="width:215px">
                                    <input type="date" name="start_date" class="form-control"
                                        value="{{ request()->get('start_date', old('start_date')) }}">
                                </td>
                                <th>To</th>
                                <td class="form-group" style="width:215px">
                                    <input type="date" name="end_date" class="form-control"
                                        value="{{ request()->get('end_date', old('end_date')) }}">
                                </td>
                            </tr>
                        </table>
                        <hr>
                        <br>
                        <table id="created_at">
                            <tr colispan>
                                <th colspan="4" style="text-align:center">Creation at</th>
                            </tr>
                            <tr>
                                <th>From</th>
                                <td class="form-group" style="width:225px">
                                    <input type="date" name="date1" class="form-control"
                                        value="{{ request()->get('date1', old('date1')) }}">
                                </td>
                                <td class="form-group" style="width:225px">
                                    <input type="time" name="time1"
                                        value="{{ request()->get('time1', old('time1')) }}" class="form-control">
                                </td>
                            </tr>
                            <tr>
                                <th>To</th>
                                <td class="form-group" style="width:225px">
                                    <input type="date" name="date2" class="form-control"
                                        value="{{ request()->get('date2', old('date2')) }}">
                                </td>
                                <td class="form-group" style="width:225px">
                                    <input type="time" name="time2"
                                        value="{{ request()->get('time2', old('time2')) }}" class="form-control">
                                </td>
                            </tr>
                        </table>
                        <hr>
                        <br>
                        <table id="created_at">
                            <tr colispan>
                                <th colspan="4" style="text-align:center">Last Action</th>
                            </tr>
                            <tr>
                                <th>From</th>
                                <td class="form-group">
                                    <input type="date" name="lastActio_start_date" class="form-control"
                                        value="{{ request()->get('lastActio_start_date', old('lastActio_start_date')) }}"
                                        style="width:215px">
                                </td>
                                <th>To</th>
                                <td class="form-group">
                                    <input type="date" name="lastActio_end_date" class="form-control"
                                        value="{{ request()->get('lastActio_end_date', old('lastActio_end_date')) }}"
                                        style="width:215px">
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <div class="card-footer" style="text-align:right">
                <button type="button" id="applyFilters" class="btn btn-info">Filter</button>
                <button type="button" id="clearFilters" class="btn btn-warning">Clear Filters</button>
                <a href="{{ url()->previous() }}" class="btn btn-default">Back</a>
            </div>
        </div>
    </form>

    <!-- </div> -->
    <!-- End filters -->

    <div id="loading"></div>

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4>Leads</h4>
                    <p>Total: {{ $leads->total() }}</p>
                    <br>
                    @if (auth()->user()->type == 'admin' || auth()->user()->role->hasPermission('leads-create'))
                        <a href="{{ route('leads.create') }}">
                            <button class="btn btn-square btn-light active" title="create lead" type="button">
                                <i class="fas fa-user-plus"></i>
                            </button>
                        </a>
                    @endif
                    @if (auth()->user()->type == 'admin' || auth()->user()->role->name == 'Marketing Team Leader')
                        <a href="{{ route('leads.importView') }}">
                            <button class="btn btn-square btn-dark" title="Import Leads" type="button">
                                <i class="fas fa-file-import"></i>
                            </button>
                        </a>
                    @endif

                    <div class="btn-group">
                        <!-- <button type="button" class="btn btn-default">Action</button> -->
                        <button type="button" title="bulk action"
                            class="btn btn-light active dropdown-toggle dropdown-icon" data-toggle="dropdown">
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <div class="dropdown-menu" role="menu">
                            @if (auth()->user()->type == 'admin' || auth()->user()->role->hasPermission('leads-assignUsers'))
                                <a class="dropdown-item" data-toggle="modal" onClick="clickbutton(this)"
                                    data-target='#assignedUserModal' href="#">Assigned User</a>

                            @endif
                        </div>
                    </div>

                    <div style="float:right">
                        @php
                            $status = null;
                            if (preg_match('/^allLeads\/([^\/]+)/', request()->path(), $matches)) {
                                $status = $matches[1];
                            }
                            $exportUrl = $status
                                ? route('leads.export', ['status' => $status])
                                : route('leads.export.all');
                            $exportUrl .= request()->getQueryString() ? '?' . request()->getQueryString() : '';
                        @endphp
                        <a href="{{ $exportUrl }}" id="exportButton" style="float:right; margin-right: 10px;">
                            <button class="btn btn-outline-primary" title="Export" type="button"><i
                                    class="fas fa-download"></i> Export</button>
                        </a>
                        @if (auth()->user()->type == 'admin' || auth()->user()->role->hasPermission('leads-delayLeads'))
                            <a href="{{ route('delayLeads') }}">
                                <button class="btn btn-square btn-outline-warning" title="Delayed Leads" type="button">
                                    <i class="fas fa-user-clock"></i>
                                </button>
                            </a>
                        @endif
                        @if (auth()->user()->type == 'admin' || auth()->user()->role->hasPermission('leads-createStatus'))
                            <a href="{{ route('statuses.create') }}">
                                <button title="Manage Status" class="btn btn-square btn-outline-dark" type="button">
                                    <i class="fa fa-cog"></i>
                                </button>
                            </a>
                        @endif
                        @if (auth()->user()->type == 'admin' || auth()->user()->role->hasPermission('leads-archive'))
                            <a href="{{ route('leads.archive') }}" style="float:right">
                                <button class="btn btn-outline-success mx-1" title="Archive" type="button"><i
                                        class="fas fa-archive"></i></button>
                            </a>
                        @endif

                    </div>
                </div>
                <div class="card-body">
                    <div id="leadsTable">
                        @include('leads.partials.leads_table', ['leads' => $leads])
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modals -->
    <!-- Assign User Model -->
    <div id="assignedUserModal" class="modal fade">
        <div class="modal-dialog">
            <form id="leadData1">
                <div class="modal-content">
                    <div class="modal-body">
                        <select name="user_id" class="select2 custom-select form-control-border" id="user_id">
                            @if (auth()->user()->type == 'admin')
                                @forelse ($UserChildren as $user)
                                    <option value="{{ $user->id }}">
                                        {{ $user->name }}
                                    </option>
                                @empty
                                @endforelse
                            @else
                                @for ($i = 0; $i < count($UserChildren); $i++)
                                    <option value="{{ $UserChildren[$i]['id'] }}">
                                        {{ $UserChildren[$i]['name'] }}
                                    </option>
                                @endfor
                            @endif
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary yes" type="button">Submit</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Change Status Modal -->
    <div id="statusModal" class="modal fade">
        <div class="modal-dialog">
            <form id="leadData">
                <div class="modal-content">
                    <div class="modal-body">
                        <select name="status_id" class="custom-select form-control-border">
                            @forelse($statuses as $status)
                                <option class="text-{{ $status->color }}" value="{{ $status->id }}">
                                    {{ $status->name }}</option>
                            @empty
                            @endforelse
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary yes" type="button">Submit</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Archive Lead Modal -->
    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenter"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Archive Record</h5>
                    <button class="btn-close" type="button" data-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Are you sure to Archive this Lead ?</p>
                </div>
                <form class="modal-footer" method="post">
                    @csrf
                    @method('DELETE')
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary yes" type="button">Yes</button>
                </form>
            </div>
        </div>
    </div>


    <script>
        clickbutton = (e) => {
            var leadIds = $('.sub_chk:checkbox:checked').map(function() {
                return $(this).data('id')
            }).get();
            console.log(leadIds);
            var route = "{{ route('leads.bulkAction', ':id') }}";
            route = route.replace(':id', leadIds);
            $('#assignedUserModal').find($('form')).attr('action', route);
        }

        changeStatus = (e) => {
            var leadIds = $('.sub_chk:checkbox:checked').map(function() {
                return $(this).data('id')
            }).get();
            var route = "{{ route('leads.bulkAction', ':id') }}";
            route = route.replace(':id', leadIds);
            $('#statusModal').find($('form')).attr('action', route);
        }
        clickDeletebutton = (e) => {
            const modelId = e.getAttribute("data-id");
            var route = "{{ route('leads.destroy', ':id') }}";
            route = route.replace(':id', modelId);
            $('#exampleModalCenter').find($('form')).attr('action', route);
        }

    </script>

    <script>
        let currentParams = new URLSearchParams(window.location.search); // Initialize with current URL parameters

        document.getElementById('applyFilters').addEventListener('click', function() {
            const formData = new FormData(document.getElementById('filterForm'));
            currentParams = new URLSearchParams(); // Reset currentParams

            // Add form data to currentParams
            for (let [key, value] of formData.entries()) {
                if (value) {
                    currentParams.append(key, value);
                }
            }

            // Update browser URL with filter parameters
            const newUrl = '{{ route('leads.index') }}?' + currentParams.toString();
            window.history.pushState({}, '', newUrl);

            document.getElementById('loading').style.display = 'block';

            fetch('{{ route('leads.index') }}?' + currentParams.toString(), {
                    method: 'GET',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    document.getElementById('loading').style.display = 'none';
                    document.getElementById('leadsTable').innerHTML = data.html; // Update table
                    document.querySelector('.card-header p').textContent =
                        `Total: ${data.total}`; // Update total

                    initializeDataTable();
                    // Update export button URL with current filters and status
                    const exportButton = document.getElementById('exportButton');
                    if (exportButton) {
                        const currentUrl = window.location.pathname;
                        const statusMatch = currentUrl.match(/^\/allLeads\/([^\/]+)/);
                        const status = statusMatch ? statusMatch[1] : null;

                        let exportUrl = status ? '{{ url('allLeads') }}/' + status + '/export' :
                            '{{ url('allLeads/export') }}';
                        exportUrl += '?' + currentParams.toString();
                        exportButton.href = exportUrl;
                    }
                })
                .catch(error => {
                    document.getElementById('loading').style.display = 'none';
                    console.error('Error:', error);
                });
        });

        // Clear Filters functionality
        document.getElementById('clearFilters').addEventListener('click', function() {
            // Clear all form inputs
            document.getElementById('filterForm').reset();

            // Clear currentParams
            currentParams = new URLSearchParams();

            // Update browser URL to remove filter parameters
            const newUrl = '{{ route('leads.index') }}';
            window.history.pushState({}, '', newUrl);

            document.getElementById('loading').style.display = 'block';

            fetch('{{ route('leads.index') }}', {
                    method: 'GET',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    document.getElementById('loading').style.display = 'none';
                    document.getElementById('leadsTable').innerHTML = data.html; // Update table
                    document.querySelector('.card-header p').textContent =
                        `Total: ${data.total}`; // Update total

                    initializeDataTable();
                })
                .catch(error => {
                    document.getElementById('loading').style.display = 'none';
                    console.error('Error:', error);
                });
        });

        // Handle Pagination Clicks
        document.addEventListener('click', function(event) {
            if (event.target.matches('.pagination a')) {
                event.preventDefault(); // Prevent default navigation

                // Get the URL of the clicked pagination link
                const url = new URL(event.target.href);
                const params = new URLSearchParams(currentParams); // Use the currentParams for filters

                // Merge pagination parameters with filters
                url.searchParams.forEach((value, key) => {
                    params.set(key, value); // Add pagination params
                });

                // Update browser URL with pagination and filter parameters
                const newUrl = `${url.origin}${url.pathname}?${params.toString()}`;
                window.history.pushState({}, '', newUrl);

                document.getElementById('loading').style.display = 'block';

                // Fetch the filtered paginated data
                fetch(`${url.origin}${url.pathname}?${params.toString()}`, {
                        method: 'GET',
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                    })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error(`HTTP error! status: ${response.status}`);
                        }
                        return response.json();
                    })
                    .then(data => {
                        document.getElementById('leadsTable').innerHTML = data.html; // Update table
                        document.querySelector('.card-header p').textContent =
                            `Total: ${data.total}`; // Update total

                        initializeDataTable();
                        document.getElementById('loading').style.display = 'none';

                    })
                    .catch(error => {
                        document.getElementById('loading').style.display = 'none';
                        console.error('Error:', error);
                    });
            }
        });

        // Handle browser back/forward buttons
        window.addEventListener('popstate', function() {
            // Update currentParams with new URL parameters
            currentParams = new URLSearchParams(window.location.search);

            // Update form fields with URL parameters
            const urlParams = new URLSearchParams(window.location.search);

            // Update text inputs
            urlParams.forEach((value, key) => {
                const input = document.querySelector(`[name="${key}"]`);
                if (input && input.type !== 'select-multiple') {
                    input.value = value;
                }
            });

            // Update select elements (handle multiple selects)
            document.querySelectorAll('select[multiple]').forEach(select => {
                const paramName = select.name;
                const values = urlParams.getAll(paramName);
                if (values.length > 0) {
                    Array.from(select.options).forEach(option => {
                        option.selected = values.includes(option.value);
                    });
                }
            });

            // Reload data with current URL parameters
            document.getElementById('loading').style.display = 'block';

            fetch(window.location.href, {
                    method: 'GET',
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    document.getElementById('loading').style.display = 'none';
                    document.getElementById('leadsTable').innerHTML = data.html;
                    document.querySelector('.card-header p').textContent = `Total: ${data.total}`;
                    initializeDataTable();
                })
                .catch(error => {
                    document.getElementById('loading').style.display = 'none';
                    console.error('Error:', error);
                });
        });

        // Initialize DataTable
        function initializeDataTable() {
            // Initialize DataTable with server-side processing
            $('#original').DataTable({
                dom: 'Bfrtip',
                buttons: [{
                        text: 'Export Filtered Leads',
                        action: function() {
                            const currentUrl = window.location.pathname;
                            const statusMatch = currentUrl.match(/^\/allLeads\/([^\/]+)/);
                            const status = statusMatch ? statusMatch[1] : null;

                            let exportUrl = status ? '{{ url('allLeads') }}/' + status + '/export' :
                                '{{ url('allLeads/export') }}';
                            exportUrl += '?' + currentParams.toString();
                            window.location.href = exportUrl;
                        }
                    },
                    {
                        extend: 'excelHtml5',
                        title: 'Filtered Leads Export',

                    },
                    {
                        extend: 'pdfHtml5',
                        title: 'Filtered Leads Export',

                    },
                    {
                        extend: 'csvHtml5',
                        title: 'Filtered Leads Export',

                    },
                    {
                        extend: 'print',
                        title: 'Filtered Leads Export',
                    }
                ],
                serverSide: false, // Enable server-side processing
                paging: false, // Enable pagination
                orderCellsTop: true,

                scrollX: true,
                autoWidth: false,
                lengthChange: false,
                fixedHeader: false,
                columnDefs: [{
                    maxWidth: '20px',
                    targets: 0
                }],
                initComplete: function() {
                    initializeSelectAllCheckbox(); // Reinitialize "Select All" functionality
                }
            });

            $('#original-nonExport').DataTable({
                dom: 'Bfrtip',
                buttons: [{
                        text: 'Export Filtered Leads',
                        action: function() {
                            const currentUrl = window.location.pathname;
                            const statusMatch = currentUrl.match(/^\/allLeads\/([^\/]+)/);
                            const status = statusMatch ? statusMatch[1] : null;

                            let exportUrl = status ? '{{ url('allLeads') }}/' + status + '/export' :
                                '{{ url('allLeads/export') }}';
                            exportUrl += '?' + currentParams.toString();
                            window.location.href = exportUrl;
                        },
                    },
                    {
                        extend: 'excelHtml5',
                        title: 'Filtered Leads Export',

                    },
                    {
                        extend: 'pdfHtml5',
                        title: 'Filtered Leads Export',

                    },
                    {
                        extend: 'csvHtml5',
                        title: 'Filtered Leads Export',

                    },
                    {
                        extend: 'print',
                        title: 'Filtered Leads Export',
                    }
                ],
                serverSide: false, // Enable server-side processing
                paging: false, // Enable pagination

                scrollX: true,
                autoWidth: false,
                lengthChange: false,
                fixedHeader: false,
                columnDefs: [{
                    maxWidth: '20px',
                    targets: 0
                }],
                initComplete: function() {
                    initializeSelectAllCheckbox(); // Reinitialize "Select All" functionality
                }
            });
        }

        function initializeSelectAllCheckbox() {
            // Add event listener for "Select All" checkbox
            $('#selectAll').off('click').on('click', function() {
                const isChecked = $(this).is(':checked');
                $('.checkboxAll').prop('checked', isChecked); // Check/uncheck all rows
            });

            // Sync "Select All" checkbox with individual checkboxes
            $('.checkboxAll').off('click').on('click', function() {
                const allChecked = $('.checkboxAll:checked').length === $('.checkboxAll').length;
                $('#selectAll').prop('checked', allChecked); // Update "Select All" based on individual checkboxes
            });
        }

        // Remove leading zeros from phone number input
        $(document).ready(function() {
            $('input[name="phone"]').on('input', function() {
                var phoneNumber = $(this).val();

                // Remove leading zeros but keep the value if it's just "0"
                if (phoneNumber.length > 1 && phoneNumber.startsWith('0')) {
                    $(this).val(phoneNumber.replace(/^0+/, ''));
                }
            });

            // Also handle on blur (when user leaves the field)
            $('input[name="phone"]').on('blur', function() {
                var phoneNumber = $(this).val();
                if (phoneNumber.length > 1 && phoneNumber.startsWith('0')) {
                    $(this).val(phoneNumber.replace(/^0+/, ''));
                }
            });
        });
    </script>
@endsection