@extends('web.layouts.app')

@section('content')
    <div class="main-chat-container w-100 ml-md-5 overflow-hidden">
        <div class="p-3 p-lg-4 border-top mb-0 main-chat-container-in">
            @if (env('APP_PROJECT') != 'Rouaa' && env('APP_PROJECT') != 'Mora')
                @include('web.settings_menu')
            @endif
            <!-- Navigation tabs -->
            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <a class="nav-link {{ request()->input('status') == 0 && request()->has('status') ? '' : 'active' }}"
                        data-bs-toggle="tab" href="#contacts" onclick="setStatus(1)">@lang('user.contacts')</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {{ request()->input('status') == 0 && request()->has('status') ? 'active' : '' }}"
                        data-bs-toggle="tab" href="#archive" onclick="setStatus(0)">@lang('user.archive')</a>
                </li>
            </ul>
            <div class="tab-content">
                <div class="form-group row mt-3 mb-3">
                    <form class="d-flex" method="get" action="">
                        @csrf
                        <input id="status" type="hidden" name="status" value="1">
                        <div class="input-group me-2">
                            <input type="text" class="form-control" name="keyword"
                                value="{{ request()->input('keyword') }}" placeholder="@lang('user.search')...">
                        </div>
                        <div class="input-group me-2">
                            <input type="text" class="form-control" id="date-range" name="date_range"
                                value="{{ request()->input('date_range') }}"readonly>
                            <button type="button" class="btn btn-secondary"
                                onclick="clearDateRange()">@lang('admin.clear')</button>

                        </div>
                        <div class="input-group me-2">
                            <select name="channel" class="form-control channel-filter" data-table-id="contacts-table">
                                <option value="">@lang('user.channels')</option>
                                <option value="1" {{ request()->input('channel') == 1 ? 'selected' : '' }}>WhatsApp
                                </option>
                                <option value="2" {{ request()->input('channel') == 2 ? 'selected' : '' }}>Messenger
                                </option>
                                <option value="3" {{ request()->input('channel') == 3 ? 'selected' : '' }}>Instagram
                                </option>
                            </select>
                        </div>
                        <div class="input-group me-2">
                            {!! Form::select('tags[]', $tags, request()->input('tags'), ['class' => 'form-control ' . ($tagsCount > 100 ? 'tagsFilter' : 'select2'), 'data-placeholder' => __('user.tags'), 'multiple']) !!}
                        </div>
                        <div class="input-group me-2">
                            <button type="submit" class="btn btn-primary">@lang('admin.filter')</button>
                        </div>
                    </form>
                </div>

                <div class="tab-pane {{ request()->input('status') == 0 && request()->has('status') ? '' : 'active' }}"
                    id="contacts">
                    <div class="row">
                        <div class="col-xl-12 col-lg-12">
                            <div class="card">
                                <div class="card-header">
                                    @can('contacts-create')
                                        <button type="button" style="float: right; " data-bs-toggle="modal"
                                            data-bs-target="#createModal"
                                            class="btn btn-primary shadow btn-xs sharp me-1">@lang('user.add') <i
                                                class="fa fa-plus"></i>
                                        </button>
                                        @include('web.contacts.create')
                                    @endcan
                                </div>
                                <div class="card-body">
                                    @if (session('success'))
                                        <div class="alert alert-success">
                                            {{ session('success') }}
                                        </div>
                                    @endif
                                    @if ($errors->any())
                                        <div class="alert alert-danger pb-0">
                                            <ul>
                                                @foreach ($errors->all() as $error)
                                                    <li>{{ $error }}</li>
                                                @endforeach
                                            </ul>
                                        </div>
                                    @endif
                                    <div class="table-responsive">
                                        <table id="contacts-table" class="table table-striped table-responsive-md ">
                                            <thead>
                                                <tr>
                                                    <th>@lang('user.first_name')</th>
                                                    <th>@lang('user.last_name')</th>
                                                    <th>@lang('user.email')</th>
                                                    <th>@lang('user.mobile')</th>
                                                    <th>@lang('user.tags')</th>
                                                    <th>@lang('user.channel')</th>
                                                    <th>@lang('user.created_at')</th>
                                                    <th>@lang('user.actions')</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($contacts as $contact)
                                                    <tr>
                                                        <td>{{ $contact->first_name }}</td>
                                                        <td>{{ $contact->last_name }}</td>
                                                        <td>{{ $contact->email }}</td>
                                                        <td>{{ $contact->mobile }}</td>
                                                        <td>
                                                            @if ($contact->tags)
                                                                @foreach ($contact->tags as $i => $tag)
                                                                    @if($i!=0),@endif
                                                                    {{ $tag->name }}
                                                                @endforeach
                                                            @endif
                                                        </td>
                                                        <td>
                                                            @if ($contact->channel == 1)
                                                                WhatsApp
                                                            @elseif($contact->channel == 2)
                                                                Messenger
                                                            @else
                                                                Instagram
                                                            @endif
                                                        </td>
                                                        <td>{{ $contact->created_at }}</td>
                                                        <td>
                                                            <div class="d-flex">
                                                                @can('contacts-edit')
                                                                    <button type="button" data-bs-toggle="modal"
                                                                        data-bs-target="#editModal_{{ $contact->id }}"
                                                                        class="btn btn-primary shadow btn-xs sharp me-1"><i
                                                                            class="fa fa-pencil"></i></button>
                                                                @endcan
                                                                @if ($contact->channel == 1)
                                                                    <button type="button"
                                                                        onclick="location.href='{{ route('web.conversations.new', $contact->id) }}';"
                                                                        class="btn btn-success shadow btn-xs sharp me-1"><i
                                                                            class="fa fa-message"></i></button>
                                                                @endif
                                                                @can('contacts-delete')
                                                                    <button type="button" data-bs-toggle="modal"
                                                                        data-bs-target="#archiveModal_{{ $contact->id }}"
                                                                        class="btn btn-danger shadow btn-xs sharp"><i
                                                                            class="fa fa-trash"></i></button>
                                                                @endcan
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    @can('contacts-edit')
                                                        @include('web.contacts.edit')
                                                    @endcan
                                                    @can('contacts-delete')
                                                        @include('web.contacts.archive')
                                                    @endcan
                                                @endforeach
                                            </tbody>
                                        </table>
                                        {{ $contacts->links('vendor.pagination.custom') }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane {{ request()->input('status') == 0 && request()->has('status') ? 'active' : '' }}"
                    id="archive">
                    <div class="row">
                        <div class="col-xl-12 col-lg-12">
                            <div class="card">
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table id="archive-table" class="table table-striped table-responsive-md ">
                                            <thead>
                                                <tr>
                                                    <th>@lang('user.first_name')</th>
                                                    <th>@lang('user.last_name')</th>
                                                    <th>@lang('user.email')</th>
                                                    <th>@lang('user.mobile')</th>
                                                    <th>@lang('user.tags')</th>
                                                    <th>@lang('user.channel')</th>
                                                    <th>@lang('user.created_at')</th>
                                                    <th>@lang('user.actions')</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($archiveContacts as $contact)
                                                    <tr>
                                                        <td>{{ $contact->first_name }}</td>
                                                        <td>{{ $contact->last_name }}</td>
                                                        <td>{{ $contact->email }}</td>
                                                        <td>{{ $contact->mobile }}</td>
                                                        <td>
                                                            @if ($contact->tags)
                                                                @foreach ($contact->tags as $i => $tag)
                                                                    @if($i!=0),@endif
                                                                    {{ $tag->name }}
                                                                @endforeach
                                                            @endif
                                                        </td>
                                                        <td>
                                                            @if ($contact->channel == 1)
                                                                WhatsApp
                                                            @elseif($contact->channel == 2)
                                                                Messenger
                                                            @else
                                                                Instagram
                                                            @endif
                                                        </td>
                                                        <td>{{ $contact->created_at }}</td>
                                                        <td>
                                                            <div class="d-flex">
                                                                <button type="button" data-bs-toggle="modal"
                                                                    data-bs-target="#editModal_{{ $contact->id }}"
                                                                    class="btn btn-primary shadow btn-xs sharp me-1"><i
                                                                        class="fa fa-pencil"></i></button>
                                                                <button type="button"
                                                                    onclick="location.href='{{ route('web.conversations.new', $contact->id) }}';"
                                                                    class="btn btn-success shadow btn-xs sharp me-1"><i
                                                                        class="fa fa-message"></i></button>
                                                                <button type="button" data-bs-toggle="modal"
                                                                    data-bs-target="#unArchiveModal_{{ $contact->id }}"
                                                                    class="btn btn-warning shadow btn-xs sharp"><i
                                                                        class="fa fa-trash-restore"></i></button>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    @include('web.contacts.edit')
                                                    @include('web.contacts.unArchive')
                                                @endforeach
                                            </tbody>
                                        </table>
                                        {{ $archiveContacts->links('vendor.pagination.custom') }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="tab-form-pane main-chat-note fade show active" id="pills-note" role="tabpanel"
        aria-labelledby="pills-note-tab">
        <div class="px-4 ">
            <div class="note-sidebar">
                <div class="note-title">
                    <h4>@lang('user.note')</h4>
                </div>
                <div class="note-content">
                    <p>
                        @lang('notes.contacts_note')
                    </p>
                </div>
            </div>
        </div>
    </div>
    <style>
        .select2-container--open .select2-dropdown--below {
            position: fixed !important;
            left: auto !important;
            right: auto !important;
            z-index: 1 !important;
            /* Set right to auto */
        }

        .select2-container--open .select2-dropdown--above {
            position: fixed !important;
            left: auto !important;
            right: auto !important;
            /* Set right to auto */
        }

        [dir="rtl"] .select2-container--open .select2-dropdown--below,
        [dir="rtl"] .select2-container--open .select2-dropdown--above {
            left: auto !important;
            right: 518px !important;
        }
    </style>
    <!-- end  layout wrapper -->
@endsection
@push('scripts')
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/npm/daterangepicker@3.1.0/daterangepicker.css" />
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker@3.1.0/daterangepicker.min.js"></script>
    <script>
        $(document).ready(function() {
            @if ($tagsCount > 100)
                $('.tagsFilter').select2({
                    allowClear: true,
                    delay: 250,
                    minimumInputLength: 3,
                    ajax: {
                        url: "{{ url('api/search-tags-dropdown') }}",
                        data: function (params) {
                            var query = {
                                keyword: params.term,
                                business_id: "{{ $business->id }}"
                            }

                            return query;
                        },
                        processResults: function (data) {
                            return {
                                results: data
                            };
                        }
                    }
                });
            @else
                $('.select2').select2({allowClear: true});
            @endif

            $('#createModal').on('shown.bs.modal', function() {
                var modal = $(this);
                var contactId = modal.data('contact-id');

                // Fetch existing selected tags
                $.ajax({
                    url: "{{ route('web.fetchSelectedTags') }}",
                    type: 'GET',
                    data: {
                        contactId: contactId
                    },
                    success: function(response) {
                        var selectedTags = response.tags;
                        if (selectedTags) {
                            selectedTags.forEach(function(tag) {
                                var option = new Option(tag.name, tag.id, true, true);
                                modal.find('.select2-tag').append(option).trigger(
                                    'change');
                                modal.find('.select2-tag2').append(option).trigger(
                                    'change');
                            });
                        }
                    },
                    error: function(xhr, status, error) {
                        // Handle errors
                    }
                });

                // Initialize Select2 with tag creation enabled
                $(this).find('.select2-tag').select2({
                    allowClear: true,
                    delay: 250,
                    dropdownParent: $(this),
                    width: '100%',
                    placeholder: "@lang('user.tags')",
                    tags: true, // Allow the creation of new tags
                    createTag: function(params) {
                        // Define the new tag with the entered text
                        return {
                            id: params.term,
                            text: params.term,
                            newTag: true
                        };
                    },
                    ajax: {
                        url: "{{ url('api/search-tags-dropdown') }}",
                        data: function (params) {
                            var query = {
                                keyword: params.term,
                                business_id: "{{ $business->id }}"
                            }

                            return query;
                        },
                        processResults: function (data) {
                            return {
                                results: data
                            };
                        }
                    }
                }).on('select2:select', function(e) {
                    var data = e.params.data;
                    if (data.newTag) {
                        // If the tag is new, send it to the server to be saved
                        $.ajax({
                            url: "{{ route('web.addNewTag') }}",
                            type: 'POST',
                            data: {
                                _token: "{{ csrf_token() }}", // Add CSRF token for security
                                name: data.text,
                                contact_id: contactId
                            },
                            success: function(response) {

                                var newOption = new Option(response.name, response.id,
                                    true, true);
                                console.log(ewOption);
                                modal.find('#select2-tag').append(newOption).trigger(
                                    'change');
                            },
                            error: function(xhr, status, error) {
                                // Handle errors when adding a tag
                            }
                        });
                    }
                });

                $(this).find('.select2-tag2').select2({
                    allowClear: true,
                    delay: 250,
                    dropdownParent: $(this),
                    width: '100%',
                    placeholder: "@lang('user.tags')",
                    tags: true, // Allow the creation of new tags
                    createTag: function(params) {
                        // Define the new tag with the entered text
                        return {
                            id: params.term,
                            text: params.term,
                            newTag: true
                        };
                    },
                    ajax: {
                        url: "{{ url('api/search-tags-dropdown') }}",
                        data: function (params) {
                            var query = {
                                keyword: params.term,
                                business_id: "{{ $business->id }}"
                            }

                            return query;
                        },
                        processResults: function (data) {
                            return {
                                results: data
                            };
                        }
                    }
                }).on('select2:select', function(e) {
                    var data = e.params.data;
                    if (data.newTag) {
                        // If the tag is new, send it to the server to be saved
                        $.ajax({
                            url: "{{ route('web.addNewTag') }}",
                            type: 'POST',
                            data: {
                                _token: "{{ csrf_token() }}", // Add CSRF token for security
                                name: data.text,
                                contact_id: contactId
                            },
                            success: function(response) {

                                var newOption = new Option(response.name, response.id,
                                    true, true);
                                console.log(ewOption);
                                modal.find('#select2-tag2').append(newOption).trigger(
                                    'change');
                            },
                            error: function(xhr, status, error) {
                                // Handle errors when adding a tag
                            }
                        });
                    }
                });
            });

            $('div[id^="editModal_"]').on('shown.bs.modal', function() {
                var modal = $(this);
                var contactId = modal.data('contact-id');

                // Fetch existing selected tags
                $.ajax({
                    url: "{{ route('web.fetchSelectedTags') }}",
                    type: 'GET',
                    data: {
                        contactId: contactId
                    },
                    success: function(response) {
                        var selectedTags = response.tags;
                        $('.select2-tag').val(null);
                        selectedTags.forEach(function(tag) {
                            var option = new Option(tag.name, tag.id, true, true);
                            modal.find('.select2-tag').append(option).trigger('change');
                        });
                    },
                    error: function(xhr, status, error) {
                        // Handle errors
                    }
                });

                // Initialize Select2 with tag creation enabled
                $(this).find('.select2-tag').select2({
                    allowClear: true,
                    delay: 250,
                    dropdownParent: $(this),
                    width: '100%',
                    placeholder: "@lang('user.tags')",
                    tags: true, // Allow the creation of new tags
                    createTag: function(params) {
                        // Define the new tag with the entered text
                        return {
                            id: params.term,
                            text: params.term,
                            newTag: true
                        };
                    },
                    ajax: {
                        url: "{{ url('api/search-tags-dropdown') }}",
                        data: function (params) {
                            var query = {
                                keyword: params.term,
                                business_id: "{{ $business->id }}"
                            }

                            return query;
                        },
                        processResults: function (data) {
                            return {
                                results: data
                            };
                        }
                    }
                }).on('select2:select', function(e) {
                    var data = e.params.data;
                    if (data.newTag) {
                        // If the tag is new, send it to the server to be saved
                        $.ajax({
                            url: "{{ route('web.addNewTag') }}",
                            type: 'POST',
                            data: {
                                _token: "{{ csrf_token() }}", // Add CSRF token for security
                                name: data.text,
                                contact_id: contactId
                            },
                            success: function(response) {
                                // Use the new tag ID from the response to replace the temporary tag
                                var newOption = new Option(response.name, response.id,
                                    false, false);
                                modal.find('.select2-tag').append(newOption).trigger(
                                    'change');
                            },
                            error: function(xhr, status, error) {
                                // Handle errors when adding a tag
                            }
                        });
                    }
                });


                // Example number from database
                var numberFromDatabase =  modal.data('mobile');

                // Update fields with the example number
                updateFields(numberFromDatabase,contactId);
            });

            $('#date-range').daterangepicker({
                autoUpdateInput: false,
                timePicker: true,
                locale: {
                    format: 'DD/MM/YYYY h:mm A'
                },
                timePickerIncrement: 30,
                showDropdowns: true
            });

            $('#date-range').on('apply.daterangepicker', function(ev, picker) {
                $(this).val(picker.startDate.format('DD/MM/YYYY h:mm A') + ' - ' + picker.endDate.format(
                    'DD/MM/YYYY h:mm A'));
            });

            $('.edit-image').change(function() {
                let reader = new FileReader();
                let contactId = $(this).data('contact-id');

                reader.onload = function(e) {
                    $('#edit-preview-image-before-upload' + contactId).attr('src', e.target.result);
                };

                reader.readAsDataURL(this.files[0]);
            });



            $('form[id^="contactEditForm_"]').on('submit', function(e) {
                e.preventDefault();

                var formId = $(this).attr('id');
                var contactId = formId.split('_')[1];

                $(this).find(':submit').attr('disabled', true);

                // Show loader
                document.querySelector('.loader').style.display = 'inline-block';
                document.querySelector('#loader-overlay').style.display = 'block';

                // Clear previous errors
                $('#' + formId + ' .form-control').removeClass('is-invalid');
                $('#' + formId + ' .text-danger').text('');

                // Get country code
                var countryCode = $('#countryCode_' + contactId).val();
                var mobileNumber = $('#mobile_' + contactId).val();
                // Check if mobileNumber is not empty or undefined
                if (mobileNumber) {
                    mobileNumber = mobileNumber.trim();
                }
                // Concatenate country code and mobile number
                var fullMobileNumber = countryCode.replace('+', '') + mobileNumber;
                // Validate mobile number format
                var phoneRegex = /^[+]?[1-9]\d{0,9}$/;
                if (!phoneRegex.test(mobileNumber)) {
                    // Invalid phone number format
                    $('#mobile_' + contactId).addClass('is-invalid');
                    $('#' + contactId + '_error-mobile').text(
                        'Please enter a valid phone number without leading zero or country code');
                    document.querySelector('.loader').style.display = 'none';
                    document.querySelector('#loader-overlay').style.display = 'none';
                    return; // Stop further processing
                }

                var phoneRegex = /^[+]?[1-9]\d{2}\d{9,12}$/;
                if (!phoneRegex.test(fullMobileNumber)) {
                    // Invalid phone number format
                    $('#mobile_' + contactId).addClass('is-invalid');
                    $('#' + contactId + '_error-mobile').text(
                        'Please enter a valid phone number with country code');
                    document.querySelector('.loader').style.display = 'none';
                    document.querySelector('#loader-overlay').style.display = 'none';
                    return; // Stop further processing
                }

                // Update mobile number input value
                $('#mobile_' + contactId).val(fullMobileNumber);

                var formData = new FormData(this);
                formData.append('_method', 'PUT'); // Laravel uses this to simulate PUT
                var route = $(this).attr('action');
                $.ajax({
                    url: route,
                    type: 'POST',
                    data: formData,
                    success: function(response) {
                        $('.modal.show').modal('hide');
                        toastr.success(response.message);
                        location.reload();
                    },
                    error: function(response) {
                        document.querySelector('.loader').style.display = 'none';
                        document.querySelector('#loader-overlay').style.display = 'none';
                        if (response.status === 422) {
                            let errors = response.responseJSON.errors;
                            for (const [key, value] of Object.entries(errors)) {
                                // Add red border
                                $('input[name="' + key + '"], select[name="' + key + '"]')
                                    .addClass('is-invalid');
                                // Show error message
                                $('#' + contactId + '_error-' + key).text(value[0]);
                            }
                        }
                    },
                    complete: function() {
                        document.querySelector('.loader').style.display = 'none';
                        document.querySelector('#loader-overlay').style.display = 'none';
                    },
                    cache: false,
                    contentType: false,
                    processData: false
                });
            });

            $('#contactAddForm').on('submit', function(e) {
                e.preventDefault();

                // Clear previous errors
                $('.form-control').removeClass('is-invalid');
                $('.text-danger').text('');

                // Get country code
                var countryCode = $('#countryCode_' + 0).val();
                var mobileNumber = $('#mobile_' + 0).val();

                // Check if mobileNumber is not empty or undefined
                if (mobileNumber) {
                    mobileNumber = mobileNumber.trim();
                }

                // Concatenate country code and mobile number
                var fullMobileNumber = countryCode.replace('+', '') + mobileNumber;


                // Validate mobile number format
                var phoneRegex = /^[+]?[1-9]\d{0,9}$/;

                if (!phoneRegex.test(mobileNumber)) {
                    // Invalid phone number format
                    $('#mobile_' + 0).addClass('is-invalid');
                    $('#error-mobile').text(
                        'Please enter a valid phone number without leading zero or country code');
                    return; // Stop further processing
                }

                var phoneRegex = /^[+]?[1-9]\d{2}\d{9,12}$/;
                if (!phoneRegex.test(fullMobileNumber)) {
                    // Invalid phone number format
                    $('#mobile_' + 0).addClass('is-invalid');
                    $('#error-mobile').text('Please enter a valid phone number with country code');
                    return; // Stop further processing
                }

                // Update mobile number input value
                $('#mobile_' + 0).val(fullMobileNumber);

                var formData = new FormData(this);
                var route = $(this).attr('action');
                $.ajax({
                    url: route,
                    type: 'POST',
                    data: formData,
                    success: function(response) {
                        $('.modal.show').modal('hide');
                        toastr.success(response.message);
                        location.reload();
                    },
                    error: function(response) {
                        console.log('Error:', response);
                        if (response.status === 422) {
                            let errors = response.responseJSON.errors;
                            for (const [key, value] of Object.entries(errors)) {
                                // Add red border
                                $('input[name="' + key + '"], select[name="' + key + '"]')
                                    .addClass('is-invalid');
                                // Show error message
                                $('#error-' + key).text(value[0]);
                            }
                        }
                    },
                    cache: false,
                    contentType: false,
                    processData: false
                });
            });

        });

       
        // Function to update select box and input field based on the given number
        function updateFields(number, contactId) {
            var countryCode = Math.floor(number / 1000000000);
            console.log(countryCode, number);
            document.getElementById('countryCode_' + contactId).value = countryCode;
            document.getElementById('mobile_' + contactId).value = number % 1000000000;
        }

        function updateTable(contacts, tableId) {
            var tableBody = $('#' + tableId + ' tbody');
            tableBody.empty();

            $.each(contacts, function(index, contact) {
                var formattedDate = contact.created_at.split('T')[0]; // This will get the date part

                var channelName = '';
                if (contact.channel == 1) {
                    channelName = 'WhatsApp';
                } else if (contact.channel == 2) {
                    channelName = 'Messenger';
                } else {
                    channelName = 'Instagram';
                }

                // Handle tags
                var tagsString = '';
                if (contact.tags && contact.tags.length > 0) {
                    $.each(contact.tags, function(i, tag) {
                        tagsString += tag.name + ', ';
                    });
                    // Remove the trailing comma and space
                    tagsString = tagsString.slice(0, -2);
                }

                var row = `<tr>
            <td>${contact.first_name}</td>
            <td>${contact.last_name}</td>
            <td>${contact.email}</td>
            <td>${contact.mobile}</td>
            <td>${tagsString}</td>
            <td>${channelName}</td>
            <td>${formattedDate}</td>
            <td>
                <div class="d-flex">
                    <button type="button" data-bs-toggle="modal"
                        data-bs-target="#editModal_${contact.id}"
                        class="btn btn-primary shadow btn-xs sharp me-1"><i
                        class="fa fa-pencil"></i></button>
                    <button type="button" data-bs-toggle="modal"
                        data-bs-target="#deleteModal_${contact.id}"
                        class="btn btn-danger shadow btn-xs sharp"><i
                        class="fa fa-trash"></i></button>
                </div>
            </td>
        </tr>`;
                tableBody.append(row);
            });
        }

        function clearDateRange() {
            document.getElementById('date-range').value = '';
        }

        function setStatus(status) {
            document.getElementById('status').value = status;
        }
    </script>
@endpush