@include('new_layouts.header')
<link href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css"
    rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" rel="stylesheet" />

<link href="https://cdn.jsdelivr.net/npm/dropzone@5.9.3/dist/min/dropzone.min.css" rel="stylesheet">

<style>
    #create {
        height: 40px !important;
        width: 100% !important;
    }
    #download_loader{
        display: none;
    }
    #reader_loader{
        display: none;
    }

    #reset {
        width: 12% !important;
    }

    div#choices_multiple1_chosen {
        width: 100% !important;
        border-color: #e6e7e9 !important;
    }

    div#choices_multiple2_chosen {
        width: 100% !important;
        border-color: #e6e7e9 !important;
    }

    #search_button {
        height: 35px !important;
        width: 12% !important;
    }

    .dropdown-toggle::after {
        display: none;
        position: absolute;
        top: 50%;
        right: 20px;
    }

    .user-initial {
        width: 101px;
        height: 100px;
        border-radius: 50%;
        background-color: #e0e0e0;
        color: #FFF;
        font-size: 42px;
        text-align: center;
    }

    .avatar-xl {
        --tblr-avatar-size: 6.2rem;
    }

    #phone {
        cursor: pointer;
    }

    /* Custom styles for date range filter and layout */
    .filter-section {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 20px;
    }

    .filter-section .form-control,
    .filter-section .form-select,
    .filter-section #daterange {
        width: 100%;
        /* Makes them take full width on small screens */
    }

    .filter-section .col-auto {
        flex: 1 1 calc(33% - 1rem);
        /* This makes the elements take up equal space */
    }

    @media (max-width: 768px) {
        .filter-section .col-auto {
            flex: 1 1 100%;
            /* Stacks the elements vertically on smaller screens */
        }

        .filter-section .form-control,
        .filter-section .form-select,
        .filter-section #daterange {
            width: 100%;
            /* Full width on smaller screens */
        }
    }

    :root {
        --theadColor: #206bc4;
    }

    table.dataTable {
        box-shadow: #bbbbbb 0px 0px 5px 0px;
    }

    thead {
        background-color: var(--theadColor);
    }

    thead>tr,
    thead>tr>th {
        background-color: transparent !important;
        color: #fff !important;
        font-weight: normal;
        text-align: start;
    }

    table.dataTable thead th,
    table.dataTable thead td {
        border-bottom: 0px solid #111 !important;
    }

    div.dataTables_wrapper div.dataTables_paginate {
        color: white;
    }

    .dataTables_wrapper>div {
        margin: 5px;
    }

    table.dataTable.display tbody tr.even>.sorting_1,
    table.dataTable.order-column.stripe tbody tr.even>.sorting_1,
    table.dataTable.display tbody tr.even,
    table.dataTable.display tbody tr.odd>.sorting_1,
    table.dataTable.order-column.stripe tbody tr.odd>.sorting_1,
    table.dataTable.display tbody tr.odd {
        background-color: #ffffff;
    }

    table.dataTable thead th {
        position: relative;
        background-image: none !important;
    }

    table.dataTable thead th.sorting:after,
    table.dataTable thead th.sorting_asc:after,
    table.dataTable thead th.sorting_desc:after {
        position: absolute;
        top: 12px;
        right: 8px;
        display: block;
        font-family: "Font Awesome\ 5 Free";
    }

    table.dataTable thead th.sorting:after {
        content: "\f0dc";
        color: #ddd;
        font-size: 0.8em;
        padding-top: 0.12em;
    }

    table.dataTable thead th.sorting_asc:after {
        content: "\f0de";
    }

    table.dataTable thead th.sorting_desc:after {
        content: "\f0dd";
    }

    table.dataTable.display tbody tr:hover>.sorting_1,
    table.dataTable.order-column.hover tbody tr:hover>.sorting_1 {
        background-color: #f2f2f2 !important;
        color: #000;
    }

    tbody tr:hover {
        background-color: #f2f2f2 !important;
        color: #000;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.current,
    .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
        background: none !important;
        border-radius: 50px;
        background-color: var(--theadColor) !important;
        color: #fff !important
    }

    .paginate_button.current:hover {
        background: none !important;
        border-radius: 50px;
        background-color: var(--theadColor) !important;
        color: #fff !important
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        border: 1px solid #979797;
        background: none !important;
        border-radius: 50px !important;
        background-color: #000 !important;
        color: #fff !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
    .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
        cursor: default;
        color: #fff !important;
        border: 1px solid transparent;
        background: transparent;
        box-shadow: none;
    }

    .table-responsive .bg-primary {
        background: #206bc4 !important;
    }

    /* Important part */
</style>

@php
    $profile = \App\Models\Utility::get_file('uploads/avatar/');
@endphp

<div class="page-wrapper m-3">
    <div class="card p-3">
        <div class="page-header d-print-none">
            <div class="container-fluid">
                <div class="row g-2 align-items-center">
                    <div class="col">
                        <h2 class="page-title">{{ __('Manage Tender') }}</h2>
                    </div>
                    <div class="col-auto ms-auto d-print-none">
                        <div class="input-group">
                            <div class="input-group-btn d-flex">
                                <a href="{{ route('tender.create') }}" class="btn btn-primary me-2" title="{{ __('Create New Tender') }}" id="create">
                                    <span class="btn-inner--icon">Add Tender <i class="fa fa-plus"></i></span>
                                </a>
                                <a href="{{ route('tender_home') }}" class="btn btn-danger">
                                    <span class="btn-inner--icon"><i class="fa fa-arrow-left"></i> Back</span>
                                </a>
                            </div>
                         </div>
                    </div>
                </div>
            </div>
        </div>
        <br>

        <div class="container-fluid">
            <div class="row row-cards">
                <div class="card">
                    <div class="card-body">
                        <div class="tab-content">
                            <div class="tab-pane active show" id="tabs-home-7" role="tabpanel">
                                <div class="col-12">
                                    <div class="row">
                                        <div class="col-md-2 border-end p-3">
                                            <form>

                                                <div class="col-lg-12 col-md-12 col-sm-12">
                                                    <div class="form-group">
                                                        {{ Form::label('maintrade', __('Main Trade'), ['class' => 'form-label']) }}
                                                        <span class="text-danger">*</span>
                                                        <div id="reporting_toerr">
                                                            {!! Form::select('main_trade[]', $tender_cat, null, [
                                                                'id' => 'choices-multiple1',
                                                                'class' => 'form-control get_reportto',
                                                            
                                                                'required' => 'required',
                                                            ]) !!}
                                                        </div>
                                                    </div>
                                                    {{-- <div class="btn-group">
                                                        <div class="form-check d-flex align-items-center">
                                                            {!! Form::checkbox('tender_division_all', '1', null, ['class' => 'form-check-input', 'id' => 'tender_division_all']) !!}
                                                            <label class="form-check-label ms-2" for="tender_division_all">ALL</label>
                                                        </div>
                                                       
                                                    </div> --}}
                                                </div>


                                                <div class="col-lg-12 col-md-12 col-sm-12">
                                                    <div class="form-group">
                                                        {{ Form::label('maintrade', __('Sub Division'), ['class' => 'form-label']) }}
                                                        <span class="text-danger">*</span>
                                                        <div id="reporting_toerr">

                                                            {!! Form::select('sub_division[]', ['' => 'Select Sub Division'], null, [
                                                                'id' => 'choices-multiple2',
                                                                'class' => 'form-control get_sub_division',
                                                                'required' => 'required',
                                                            ]) !!}
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="col-md-12">
                                                    <div class="mb-3">
                                                        <label class="form-label">Select By Project Name</label>
                                                        <select id="project_name" name="project_name"
                                                            class="form-select">
                                                            <option value="">Select Project</option>
                                                            @foreach ($projects as $pro)
                                                                <option value="{{ $pro->id }}">
                                                                    {{ $pro->project_name }}</option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="col-md-12 show_subcon">
                                                    <div class="mb-3">
                                                        <label class="form-label">Select By Sub-contractor</label>
                                                        <select id="sub_contractor" class="form-select" disabled>
                                                            <option value="">Select Sub-contractor</option>
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="col-md-12">
                                                    <div class="mb-3">
                                                        <label class="form-label required">Start Date</label>
                                                        <div class="input-icon">
                                                            <span class="input-icon-addon">
                                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon"
                                                                    width="24" height="24" viewBox="0 0 24 24"
                                                                    stroke-width="2" stroke="currentColor"
                                                                    fill="none" stroke-linecap="round"
                                                                    stroke-linejoin="round">
                                                                    <path stroke="none" d="M0 0h24v24H0z"
                                                                        fill="none" />
                                                                    <path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0
                                                                        1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0
                                                                        1 -2 -2v-12z" />
                                                                    <path d="M16 3v4" />
                                                                    <path d="M8 3v4" />
                                                                    <path d="M4 11h16" />
                                                                    <path d="M11 15h1" />
                                                                    <path d="M12 15v3" />
                                                                </svg>
                                                            </span>
                                                            <input class="form-control start_date" name="start_date"
                                                                placeholder="Select a End date" id="start-date" />
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-12">
                                                    <div class="mb-3">
                                                        <label class="form-label required">End Date
                                                        </label>
                                                        <div class="input-icon">
                                                            <span class="input-icon-addon">
                                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon"
                                                                    width="24" height="24" viewBox="0 0 24 24"
                                                                    stroke-width="2" stroke="currentColor"
                                                                    fill="none" stroke-linecap="round"
                                                                    stroke-linejoin="round">
                                                                    <path stroke="none" d="M0 0h24v24H0z"
                                                                        fill="none" />
                                                                    <path d="M4 7a2 2 0 0 1 2 -2h12a2 2 0 0
                                                                1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0
                                                                1 -2 -2v-12z" />
                                                                    <path d="M16 3v4" />
                                                                    <path d="M8 3v4" />
                                                                    <path d="M4 11h16" />
                                                                    <path d="M11 15h1" />
                                                                    <path d="M12 15v3" />
                                                                </svg>
                                                            </span>
                                                            <input class="form-control end_date"
                                                                placeholder="Select a End date" name="end_date"
                                                                id="end-date" />
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-12 mt-4">
                                                    <div class="mb-3">
                                                        <button type="button" id="filter_btn"
                                                            class="btn btn-tabler w-100">Filter</button>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>

                                        <div class="col-md-10">
                                            <div class="table-responsive card p-4">
                                                <div id="batch-actions-toolbar" class="d-flex align-items-center">
                                                    <button id="mark-read-btn" class="btn btn-primary mx-2">Mark as Read</button>
                                                    <img src="{{ asset('admin/loader/ajax_loader.gif') }}" id="reader_loader" class="mx-2" style="display:none;">
                                                    <button id="download-btn" class="btn btn-success mx-2">Download Attachments</button>
                                                    <img src="{{ asset('admin/loader/ajax_loader.gif') }}" id="download_loader" class="mx-2" style="display:none;">
                                                    <button id="delete-selected-btn" class="btn btn-danger mx-2">Delete Selected</button>
                                                </div>
                                                
                                                
                                                <table class="table table-vcenter card-table" id="tender_table"
                                                    aria-describedby="Tender Management">
                                                    <thead>
                                                        <tr>
                                                            <th><input type="checkbox" id="select-all"></th>
                                                            <th>{{ __('Project Name') }}</th>
                                                            <th>{{ __('Tender Type') }}</th>
                                                            <th>{{ __('Clarification Date') }}</th>
                                                            <th>{{ __('Dead Line Date') }}</th>
                                                            <th>{{ __('Extension Date') }}</th>
                                                            {{-- <th>{{ __('Quatation Request Date') }}</th> --}}
                                                            <th>{{ __('Status') }}</th>
                                                            <th>{{ __('Action') }}</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>

                                                    </tbody>
                                                </table>
                                            </div>

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


@include('new_layouts.footer')
<script src="{{ asset('litepicker/litepicker.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/dropzone@5.9.3/dist/min/dropzone.min.js"></script>
<script>
    $(document).ready(function() {

        $('#choices-multiple2').on('change', function() {
            var selectedSubDivisions = $(this).val(); // Get the selected sub-divisions

            if (selectedSubDivisions && selectedSubDivisions.length > 0) {
                // Enable the sub-contractor dropdown
                $('#sub_contractor').prop('disabled', false);

                // Make the AJAX call to fetch sub-contractors based on selected sub-divisions
                $.ajax({
                    url: '{{ route('getSubContractors') }}', // Backend route
                    method: 'GET',
                    data: {
                        sub_divison_id: selectedSubDivisions,
                    },
                    success: function(response) {
                        // Clear previous options
                        $('#sub_contractor').empty().append(
                            '<option value="">Select Sub-contractor</option>');

                        // If sub-contractors are found, populate the dropdown
                        if (response.length > 0) {
                            $.each(response, function(index, user) {
                                $('#sub_contractor').append('<option value="' + user
                                    .id + '">' + user.name + '</option>');
                            });
                        } else {
                            $('#sub_contractor').append(
                                '<option value="" disabled>No Sub-contractors found</option>'
                                );
                        }
                    },
                    error: function(xhr, status, error) {
                        console.log("Error:", error);
                        // Handle error if needed
                    }
                });
            } else {
                // If no sub-division is selected, disable the sub-contractor dropdown
                $('#sub_contractor').prop('disabled', true);
                $('#sub_contractor').empty().append('<option value="">Select Sub-contractor</option>');
            }
        });

        // Initialize DataTable only once
        var table = $('#tender_table').DataTable({
            processing: true,
            serverSide: true,
            pagingType: 'full_numbers',
            aaSorting: [], // Disable default sorting
            destroy: true,
            language: {
                sLengthMenu: "{{ __('Records per page: _MENU_') }}",
                sZeroRecords: "{{ __('No data available in table') }}",
                sEmptyTable: "{{ __('No data available in table') }}",
                sInfo: "{{ __('Showing records _START_ to _END_ of a total of _TOTAL_ records') }}",
                sInfoFiltered: "{{ __('filtering of a total of _MAX_ records') }}",
                sSearch: "{{ __('Search by Project Name...') }}:",
                oPaginate: {
                    sFirst: "{{ __('First') }}",
                    sLast: "{{ __('Last') }}",
                    sNext: "{{ __('Next') }}",
                    sPrevious: "{{ __('Previous') }}"
                },
            },
            ajax: {
                url: "{{ route('tender_table') }}",
                dataType: "json",
                type: "POST",
                data: function(d) {
                    d._token = "{{ csrf_token() }}";
                    d.project_name = $('#project_name').val() || ''; // Empty string if no value
                    d.sub_contractor = $('#sub_contractor').val() || ''; // Handle empty
                    d.start_date = $('#start-date').val() || '';
                    d.end_date = $('#end-date').val() || '';
                    d.main_trade = $('#choices-multiple1').val() ||
                []; // Default to empty array if no selection
                    d.sub_division = $('#choices-multiple2').val() ||
                []; // Default to empty array if no selection
                }
            },

            deferRender: true,
            columnDefs: [{
                    orderable: false,
                    targets: [0]
                }, // Disable sorting for the first column (checkbox)
                {
                    orderable: true,
                    targets: [1, 2, 3, 4]
                }
            ],
            pageLength: 10,
            lengthMenu: [
                [10, 25, 50, 100, 500],
                [10, 25, 50, 100, 500]
            ],
            searching: true,
            aoColumns: [
                {data: "checkbox"},
                {data: "project_name"},
                {data: "tender_type"},
                {data: "clarification_date"},
                {data: "dead_line"},
                {data: "extension_date"},
                // {data: "quatation_request_date"},
                {data: "status"},
                {data: "action"}
            ]
        });

         // Check sessionStorage for the update flag
            if (sessionStorage.getItem('dataUpdated') === 'true') {
                // Reload the DataTable
                table.ajax.reload(null, false);  // Reload without changing the page

                // Optionally, remove the sessionStorage flag after reloading
                sessionStorage.removeItem('dataUpdated');
            }

        // Ensure DataTable is re-initialized properly after each filtering or search
        function reloadTable() {
            table.ajax.reload(); // Reload DataTable content after applying filters
        }

        // Filter button click
        $('#filter_btn').on('click', function() {
            reloadTable();
        });

        $('#delete-selected-btn').on('click', function() {
            var selectedRows = getSelectedRows();
            if (selectedRows.length === 0) {
                toastr.error('Please select at least one row.');
                return;
            }

            // Show confirmation dialog before deleting
            Swal.fire({
                title: 'Are you sure?',
                text: "You won't be able to revert this!",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#3085d6',
                cancelButtonColor: '#d33',
                confirmButtonText: 'Yes, delete it!'
            }).then((result) => {
                if (result.isConfirmed) {
                    // Send AJAX request to delete selected tenders
                    $.ajax({
                        url: "{{ route('tender.delete-multiple') }}", // Define this route for multiple delete
                        method: 'POST',
                        data: {
                            _token: '{{ csrf_token() }}',
                            tender_ids: selectedRows
                        },
                        success: function(response) {
                            Swal.fire(
                                'Deleted!',
                                'The selected tenders have been deleted.',
                                'success'
                            );
                            reloadTable(); // Reload table after deletion
                        },
                        error: function() {
                            Swal.fire(
                                'Error!',
                                'There was an error deleting the tenders.',
                                'error'
                            );
                        }
                    });
                }
            });
        });

        // Handle Sub-contractor dropdown change
        $('#project_name').change(function() {
            var projectId = $(this).val();
            $('#sub_contractor').empty().append('<option value="">Select Sub-contractor</option>').prop(
                'disabled', !projectId);

            if (projectId) {
                $.ajax({
                    url: "{{ route('tender.get-subcontractors-list', ':projectId') }}".replace(
                        ':projectId', projectId),
                    type: 'GET',
                    dataType: 'json',
                    success: function(data) {
                        $('#sub_contractor').prop('disabled', false); // Enable dropdown
                        $.each(data, function(key, value) {
                            $('#sub_contractor').append('<option value="' + value
                                .id + '">' + value.name + '</option>');
                        });
                        reloadTable(); // Reload table after project/sub-contractor change

                        $(".show_subcon").show();
                    },
                    error: function() {
                        console.error('Failed to fetch sub-contractors');
                    }
                });
            } else {
                reloadTable(); // Reload table if no project is selected
                $(".show_subcon").hide();
            }
        });

        // Handle Sub-contractor filter
        $('#sub_contractor').change(function() {
            reloadTable(); // Reload table when sub-contractor is changed
        });

        // Select all checkboxes
        $('#select-all').on('click', function() {
            var isChecked = $(this).prop('checked');
            $('input.row-checkbox').prop('checked', isChecked);
        });

        // Handle Mark as Read action
        $('#mark-read-btn').on('click', function() {
            var selectedRows = getSelectedRows();
            if (selectedRows.length === 0) {
                toastr.error('Please select at least one row.');
                return;
            }
            $('#reader_loader').show();
            $('#mark-read-btn').prop('disabled', true);
            $.ajax({
                url: "{{ route('tenders-read') }}",
                method: 'POST',
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content'),
                    tender_ids: selectedRows,
                    type: 'company'
                },
                success: function(response) {
                    toastr.success('Selected tenders marked as read.');


                    var validTenderCount = response.valid_tender_count;


                    var unreadCount = parseInt($('#tender_badge').text()) -
                    validTenderCount;
                    if (unreadCount > 0) {
                        $('#tender_badge').text(unreadCount);
                    } else {
                        $('#tender_badge').remove();
                    }
                    $('#select-all').prop('checked', false);
                    reloadTable();
                    $('#reader_loader').hide();
                    $('#mark-read-btn').prop('disabled', false);
                },
                error: function() {
                    toastr.error('Error marking tenders as read.');
                    $('#reader_loader').hide();
                    $('#mark-read-btn').prop('disabled', false);
                }
            });
        });

        $(document).on('click', '.view-file', function(event) {
            event.preventDefault(); // Prevent default anchor behavior

            var tenderId = $(this).data('id'); // Get tender ID from data attribute

            // Send AJAX request to update status
            $.ajax({
                url: '{{ route('update_main_con_tender_status') }}', // Ensure this route exists in your routes file
                method: 'POST',
                data: {
                    tender_id: tenderId,
                    _token: '{{ csrf_token() }}' // Include CSRF token for security
                },
                success: function(response) {
                    if (response.success) {
                        // Find the row in the table and update the status and color
                        var row = $('#tender_table').find('tr[data-id="' + tenderId + '"]');
                        row.find('.status-column').html(
                            '<span style="color:green;">Read</span>');

                        // Optionally change button appearance
                        row.find('.view-file').removeClass('btn-info').addClass(
                            'btn-success');
                        row.find('.view-file i').removeClass('fa-eye').addClass('fa-check');
                        var unreadCount = parseInt($('#tender_badge').text()) - 1;
                        if (unreadCount > 0) {
                            $('#tender_badge').text(unreadCount);
                        } else {
                            $('#tender_badge')
                        .remove(); // Remove the badge if no unread tenders
                        }

                        reloadTable();

                    }
                },
                error: function(xhr, status, error) {
                    console.error(error);
                    toastr.error('There was an error updating the status.');

                }
            });
        });

        // Handle Download Attachments action
        $('#download-btn').on('click', function() {
            var selectedRows = getSelectedRows();
            if (selectedRows.length === 0) {
                toastr.error('Please select at least one row.');
                return;
            }
            $('#download-btn').prop('disabled', true);
            $('#download_loader').show();
            
            $.ajax({
                url: "{{ route('download-tender') }}",
                method: 'POST',
                data: {
                    _token: $('meta[name="csrf-token"]').attr('content'),
                    tender_ids: selectedRows
                },
                success: function(response) {
                    $('#download_loader').hide();
                    $('#download-btn').prop('disabled', false);
                    window.location.href = response.download_link;
                    $('#select-all').prop('checked', false);
                    $('.row-checkbox').prop('checked', false);
                },
                error: function() {
                    $('#download-btn').prop('disabled', false);
                    $('#download_loader').hide();
                    toastr.error('Error downloading attachments.');

                }
            });
        });

        // Get selected rows from checkboxes
        function getSelectedRows() {
            var selectedRows = [];
            $('input.row-checkbox:checked').each(function() {
                selectedRows.push($(this).val());
            });
            return selectedRows;
        }
    });


    $(document).on('click', '.delete-tender', function(e) {
        e.preventDefault();

        var tenderId = $(this).data('id'); // Get the tender ID
        var deleteUrl = '{{ route('tender.destroy', ':id') }}'.replace(':id', tenderId); // Get the delete URL

        // Show SweetAlert confirmation
        Swal.fire({
            title: 'Are you sure?',
            text: "You won't be able to revert this!",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                // If confirmed, make the AJAX request to delete the tender
                $.ajax({
                    url: deleteUrl,
                    type: 'DELETE',
                    data: {
                        _token: '{{ csrf_token() }}', // Include CSRF token
                    },
                    success: function(response) {
                        // If delete is successful, show success message and refresh the page (or remove the tender from the table)
                        Swal.fire(
                            'Deleted!',
                            'The tender has been deleted.',
                            'success'
                        );
                        // Optionally, you can reload the page or remove the tender from the DataTable directly:
                        // $('#tender-table').DataTable().ajax.reload();
                        location.reload(); // Reload the page
                    },
                    error: function(response) {
                        Swal.fire(
                            'Error!',
                            'There was an error deleting the tender.',
                            'error'
                        );
                    }
                });
            }
        });
    });
    $(".chosen-select").chosen({
        placeholder_text: "{{ __('Reporting to') }}"
    });

    $('#choices-multiple1').on('change', function() {
        var selectedTenderDivisionId = $(this).val();
        autofetch(selectedTenderDivisionId);

    });

    $('#tender_division_all').on('change', function() {
        var isChecked = $(this).prop('checked');
        var $select = $('#choices-multiple1');

        if (isChecked) {
            var allValues = $select.find('option').map(function() {
                return $(this).val();
            }).get();

            $select.val(allValues).trigger('chosen:updated');
            autofetch(allValues);
        } else {
            $select.val([]).trigger('chosen:updated');
        }
    });

    function autofetch(value) {
        console.log("value", value);
        $.ajax({
            url: '{{ route('getSubDivisions') }}',
            method: 'GET',
            data: {
                tender_division_id: value
            },
            success: function(response) {
                $('#choices-multiple2').empty();
                $('#choices-multiple2').append('<option value="" >Select Sub Division</option>');
                $.each(response, function(key, value) {
                    $('#choices-multiple2').append('<option value="' + value.id + '">' + value
                        .division_item + '</option>');
                });
                $('#choices-multiple2').trigger('chosen:updated');
            },
            error: function(xhr, status, error) {
                console.log("Error: " + error);
            }
        });
    }

    document.addEventListener("DOMContentLoaded", function() {
        window.Litepicker && (new Litepicker({
            element: document.getElementById('start-date'),
            elementEnd: document.getElementById('end-date'),
            singleMode: false,
            allowRepick: true,
            buttonText: {
                previousMonth: `<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z"
                fill="none"/><path d="M15 6l-6 6l6 6" /></svg>`,

                nextMonth: `<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24"
                height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none"
                stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z"
                fill="none"/><path d="M9 6l6 6l-6 6" /></svg>`,
            },
        }));
    });
</script>