@local <!-- views/dashboard.blade.php --> @endlocal
@php
    $id_prefix = 'EU';
@endphp
<x-app-layout>
    <x-slot name="css">
        <!-- Page JS Plugins CSS -->
        <link rel="stylesheet" href="{{ asset('js/plugins/datatables-bs5/css/dataTables.bootstrap5.min.css') }}">
        <link rel="stylesheet" href="{{ asset('js/plugins/datatables-buttons-bs5/css/buttons.bootstrap5.min.css') }}">
        <style>
            td.truncated {
                max-width: 130px;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                cursor: pointer;
                position:relative;
            }
            td.truncated.smaller{
                max-width: 100px;
            }
            div#popover-container1 div.popover{
                border-width:2px;
                font-size:14px;
                font-weight: bold;
                color:#222;
            }
            div#popover-container2 div.popover, div#popover-container3 div.popover{
                border-width:4px;
                font-size:14px;
                font-weight: 500;
                color:#222;
                max-width:700px !important;
                max-height:400px;
            }
            div#popover-container2 div.popover-body, div#popover-container3 div.popover-body{
                max-height:356px;
                overflow-y:auto;
                overflow-x:hidden;
            }
            h3.popover-header{
                position:relative;
                word-wrap: break-word;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            i.copy-desc{
                position:absolute;
                top:2px;
                right:2px;
                font-size:16px;
                cursor:pointer;
            }
            i.copy-desc:hover{
                opacity:0.7;
            }
            div#popover-container3 div.popover{
                font-size:12px;
            }
            div.content.large{
                width:100% !important;
                padding-left:10px !important;
                padding-right:10px !important;
            }
            div.table-responsive{
                overflow-x:auto !important;
            }
            div.table-responsive.jobs-list{
                min-height: 320px;
            }
            td.joburl{
                cursor:pointer;
            }

            @keyframes slideDown {
                0% {
                    max-height: 1px;
                }
                100% {
                    max-height: 10000px;
                }
            }
            div#tables-container.collapsed{
                opacity:0;
            }
            div.slideDown{
                animation: slideDown 10s linear;
            }
            td.no-right-border, th.no-right-border{
                border-right-width: 0 !important;
                padding-right: 0 !important;
            }
            td.no-left-border, th.no-left-border{
                border-left-width: 0 !important;
                padding-left: 0 !important;
            }
            .top-n8{
                top:-8px !important;
            }
            .end-n8{
                right: -8px !important;
            }
            .max-height-500{
                max-height: 500px;
            }
            .cursor-pointer {
                cursor: pointer;
            }
            .text-orange {
                color: #ff8000;
            }
        </style>
    </x-slot>
    <x-slot name="js">
        <!-- jQuery (required for DataTables plugin) -->
        <script src="{{ asset('js/lib/jquery.min.js') }}"></script>
        <script>window.AppLocale = "{{ App::getLocale() }}";</script>
        <!-- Page JS Plugins -->
        <script src="{{ asset('js/plugins/datatables/jquery.dataTables.min.js') }}"></script>
        <script src="{{ asset('js/plugins/datatables-bs5/js/dataTables.bootstrap5.min.js') }}"></script>
        <script src="{{ asset('js/plugins/datatables-buttons/dataTables.buttons.min.js') }}"></script>
        <script src="{{ asset('js/plugins/datatables-buttons-bs5/js/buttons.bootstrap5.min.js') }}"></script>
        <script src="{{ asset('js/plugins/datatables-buttons-jszip/jszip.min.js') }}"></script>
        <script src="{{ asset('js/plugins/datatables-buttons-pdfmake/pdfmake.min.js') }}"></script>
        <script src="{{ asset('js/plugins/datatables-buttons-pdfmake/vfs_fonts.js') }}"></script>
        <script src="{{ asset('js/plugins/datatables-buttons/buttons.print.min.js') }}"></script>
        <script src="{{ asset('js/plugins/datatables-buttons/buttons.html5.min.js') }}"></script>
        <script>
            window.closeAllPopovers = function() {
                window.helperBsPopovers.forEach(function(popoverInstance) {
                    popoverInstance.hide();
                });
            }
            $(document).on('keydown', function (e) {
                if (e.keyCode === 27) { // ESC
                    window.closeAllPopovers();
                }
            });
            $(document).ready(function() {
                const search_data = @json($search_data);
                const application_data = @json($application_data);
                let timeDiff = 0;

                let set_buttons = {'favourite':false, 'applied':false, 'eu':true, 'uk_only':false, 'budget':false, 'verified':true, 'feedback':true, 'laravel':false, 'looker':false, 'php':false, 'sheets':false, 'excel':false, 'maps':false, 'amazon':false, 'apis' :false};
                let buttons_state = {'favourite':null, 'applied':null, 'eu':null, 'uk_only':null, 'budget':null, 'verified':null, 'feedback':null, 'laravel':null, 'looker':null, 'php':null, 'sheets':null, 'excel':null, 'maps':null, 'amazon':null, 'apis' :null};
                let buttons_active = {'favourite':null, 'applied':null, 'eu':null, 'uk_only':null, 'budget':null, 'verified':null, 'feedback':null, 'laravel':null, 'looker':null, 'php':null, 'sheets':null, 'excel':null, 'maps':null, 'amazon':null, 'apis' :null};
                let click_buttons = {'favourite':null, 'applied':null, 'eu':null, 'uk_only':null, 'budget':null, 'verified':null, 'feedback':null, 'laravel':null, 'looker':null, 'php':null, 'sheets':null, 'excel':null, 'maps':null, 'amazon':null, 'apis' :null};

                let current_tr = null;
                let table_draw_disabled_on_click = true;
                let total_favourites = 0;
                let total_applied = 0;
                setTimeout(() => {
                    $.each(buttons_state, function(key, value) {
                        buttons_state[key] = sessionStorage.getItem(key+"_button");
                    });
                    $.each(buttons_active, function(key, value) {
                        buttons_active[key] = $('.btn.filters.'+key).hasClass('active');
                    });
                    $.each(click_buttons, function(key, value) {
                        click_buttons[key] = ((buttons_state[key] == 'active') && (!buttons_active[key])) || (buttons_active[key] && (buttons_state[key] == 'not_active'));
                        click_buttons[key] && $('.btn.filters.'+key).click();
                    });

                    setTimeout(() => {
                        jobs_table.draw();
                        table_draw_disabled_on_click = false;
                    }, 100)
                }, 0);

                $('.btn.filters:not(.toggle)').on('click', function(){
                    const $that = $(this);
                    const $active_btn = $that.hasClass('uk_only') ? 'uk_only_button' : 'eu_button';
                    const $not_active_btn = $that.hasClass('eu') ? 'uk_only_button' : 'eu_button';

                    if(!$that.hasClass('active')){
                        sessionStorage.setItem($active_btn, "active");
                        sessionStorage.setItem($not_active_btn, "not_active");
                        $('.btn.filters:not(.toggle)').removeClass('active');
                        $('.btn.filters:not(.toggle)').removeClass('btn-primary').addClass('btn-secondary');
                        $that.removeClass('btn-secondary').addClass('btn-primary').addClass('active');
                        set_buttons['eu'] = $active_btn == 'eu_button' ? true : false;
                        set_buttons['uk_only'] = $active_btn == 'uk_only_button' ? true : false;
                    }
                    else{
                        sessionStorage.setItem($active_btn, "not_active");
                        sessionStorage.setItem($not_active_btn, "not_active");
                        $('.btn.filters:not(.toggle)').removeClass('active');
                        $('.btn.filters:not(.toggle)').removeClass('btn-primary').addClass('btn-secondary');
                        set_buttons['eu'] = false;
                        set_buttons['uk_only'] = false;
                    }

                    table_draw_disabled_on_click || jobs_table.draw();

                    return false;
                });

                $('.btn.filters.toggle').on('click', function(){
                    const $that = $(this);
                    const $what = $that.attr('filter_name');
                    const $what_btn = $what + '_button';
                    const hasClassActive = $that.hasClass('active');
                    const hasClassUnique = $that.hasClass('unique');
                    let isChecked = true;

                    if(hasClassUnique){
                        $('.unique').removeClass('active').removeClass('btn-primary').addClass('btn-secondary');
                    }

                    if(hasClassActive){
                        $that.removeClass('active').removeClass('btn-primary').addClass('btn-secondary')
                        isChecked = false;
                    }
                    else{
                        $that.addClass('active').addClass('btn-primary').removeClass('btn-secondary')
                        isChecked = true;
                    }

                    if(isChecked) {
                        if(hasClassUnique){
                            $('.unique').each(function(i, el){
                                const $el = $(el);
                                const $w = $el.attr('filter_name');
                                const $w_btn = $w + '_button';
                                if(!$el.hasClass('active')){
                                    sessionStorage.setItem($w_btn, "not_active");
                                    set_buttons[$w] = false;
                                    buttons_state[$w] = null;
                                    buttons_active[$w] = null;
                                }
                            });
                        }
                        sessionStorage.setItem($what_btn, "active");
                        set_buttons[$what] = true;
                        buttons_state[$what] = 'active';
                        buttons_active[$what] = true;
                    } else {
                        sessionStorage.setItem($what_btn, "not_active");
                        set_buttons[$what] = false;
                        buttons_state[$what] = null;
                        buttons_active[$what] = false;
                    }

                    table_draw_disabled_on_click || jobs_table.draw();
                })

                $('div.popover-container').on('click', 'i.copy-desc', function(){
                    const $that = $(this);
                    const $popover = $that.closest('div.popover').find('div.popover-body');
                    const textToCopy = $popover[0].innerText;
                    navigator.clipboard.writeText(textToCopy);
                });
                $('#tables-container').on('click', 'button.reject', function() {
                    const $that = $(this);
                    const job_id = $that.attr('id').split('_')[1];
                    const tr = $that.closest('tr');
                    jobs_table.row(tr).remove().draw(false);
                    axios.post('/dashboard/reject', {
                        job_id: job_id
                    }).then(function (response) {

                    });
                });

                $('#tables-container').on('click', 'a.favourite', function(e) {
                    e.preventDefault();
                    let $that = $(this);

                    const job_id = $that.attr('id').split('_')[1];
                    const action = $that.hasClass('add') ? 'add' : 'remove';
                    const tr = $that.closest('tr');
                    const row = jobs_table.row(tr);

                    let rowData = row.data();
                    rowData['favourite'] = action == 'add' ? 1 : 0;

                    const is_applied = !!parseInt(rowData['applied']);
                    const is_client_contact = !!parseInt(rowData['client_contact']);
                    const is_job_accepted = !!parseInt(rowData['job_accepted']);

                    axios.post(`/dashboard/statuses`, {
                        job_id: job_id, action:action, column:'favourite'
                    }).then(function (response) {

                    });

                    row.data(rowData);
                    //row.invalidate().draw(false);

                    setTimeout(() => {
                        $that = tr.find('a.favourite');
                        const ul = $that.closest('ul');
                        if(action == 'add'){
                            tr.find('span.title:not(.category)').addClass('text-danger');
                            ul.find('li.favourite.add').addClass('hidden');
                            ul.find('li.favourite.remove').removeClass('hidden');
                        }
                        else{
                            tr.find('span.title:not(.category)').removeClass('text-danger');
                            ul.find('li.favourite.remove').addClass('hidden');
                            ul.find('li.favourite.add').removeClass('hidden');
                        }
                        if(is_applied){
                            ul.find('li.applied.add').addClass('hidden');
                            ul.find('li.applied.remove').removeClass('hidden');
                        }
                        else{
                            ul.find('li.applied.remove').addClass('hidden');
                            ul.find('li.applied.add').removeClass('hidden');
                        }
                        if(is_client_contact){
                            if(action == 'add'){
                                tr.find('span.title:not(.category)').removeClass('text-orange');
                            }
                            else{
                                tr.find('span.title:not(.category)').addClass('text-orange');
                            }
                            ul.find('li.client_contact.add').addClass('hidden');
                            ul.find('li.client_contact.remove').removeClass('hidden');
                        }
                        else{
                            tr.find('span.title:not(.category)').removeClass('text-orange');
                            ul.find('li.client_contact.remove').addClass('hidden');
                            ul.find('li.client_contact.add').removeClass('hidden');
                        }
                        if(is_job_accepted){
                            if(action == 'add'){
                                tr.find('span.title:not(.category)').removeClass('text-success');
                            }
                            else{
                                tr.find('span.title:not(.category)').addClass('text-success');
                            }
                            ul.find('li.job_accepted.add').addClass('hidden');
                            ul.find('li.job_accepted.remove').removeClass('hidden');
                        }
                        else{
                            tr.find('span.title:not(.category)').removeClass('text-success');
                            ul.find('li.job_accepted.remove').addClass('hidden');
                            ul.find('li.job_accepted.add').removeClass('hidden');
                        }
                        jobs_table.row(tr).draw(false);
                    }, 0)

                });

                $('#tables-container').on('click', 'a.applied', function(e) {
                    e.preventDefault();
                    let $that = $(this);

                    const job_id = $that.attr('id').split('_')[1];
                    const action = $that.hasClass('add') ? 'add' : 'remove';
                    const tr = $that.closest('tr');
                    const row = jobs_table.row(tr);

                    let rowData = row.data();
                    rowData['applied'] = action == 'add' ? 1 : 0;

                    const is_favourite = !!parseInt(rowData['favourite']);
                    const is_client_contact = !!parseInt(rowData['client_contact']);
                    const is_job_accepted = !!parseInt(rowData['job_accepted']);

                    axios.post(`/dashboard/statuses`, {
                        job_id: job_id, action:action, column:'applied'
                    }).then(function (response) {

                    });

                    row.data(rowData);
                    //row.invalidate().draw(false);

                    setTimeout(() => {
                        $that = tr.find('a.applied');

                        const ul = $that.closest('ul');
                        if(action == 'add'){
                            ul.find('li.applied.add').addClass('hidden');
                            ul.find('li.applied.remove').removeClass('hidden');
                            tr.find('button.reject').addClass('hidden');
                            tr.find('button.select').removeClass('hidden');
                            ul.find('li.apply').addClass('hidden');
                        }
                        else{
                            ul.find('li.applied.remove').addClass('hidden');
                            ul.find('li.applied.add').removeClass('hidden');
                            tr.find('button.reject').removeClass('hidden');
                            tr.find('button.select').addClass('hidden');
                            ul.find('li.apply').removeClass('hidden');
                        }
                        if(is_client_contact){
                            tr.find('span.title:not(.category)').addClass('text-orange');
                            ul.find('li.client_contact.add').addClass('hidden');
                            ul.find('li.client_contact.remove').removeClass('hidden');
                        }
                        else{
                            tr.find('span.title:not(.category)').removeClass('text-orange');
                            ul.find('li.client_contact.remove').addClass('hidden');
                            ul.find('li.client_contact.add').removeClass('hidden');
                        }
                        if(is_job_accepted){
                            tr.find('span.title:not(.category)').addClass('text-success');
                            ul.find('li.job_accepted.add').addClass('hidden');
                            ul.find('li.job_accepted.remove').removeClass('hidden');
                        }
                        else{
                            tr.find('span.title:not(.category)').removeClass('text-success');
                            ul.find('li.job_accepted.remove').addClass('hidden');
                            ul.find('li.job_accepted.add').removeClass('hidden');
                        }
                        if(is_favourite){
                            tr.find('span.title:not(.category)').removeClass('text-orange');
                            tr.find('span.title:not(.category)').removeClass('text-success');
                            tr.find('span.title:not(.category)').addClass('text-danger');
                            ul.find('li.favourite.add').addClass('hidden');
                            ul.find('li.favourite.remove').removeClass('hidden');
                        }
                        else{
                            tr.find('span.title:not(.category)').removeClass('text-danger');
                            ul.find('li.favourite.remove').addClass('hidden');
                            ul.find('li.favourite.add').removeClass('hidden');
                        }
                        jobs_table.row(tr).draw(false);
                    }, 0)

                });
                $('#tables-container').on('click', 'a.client_contact', function(e) {
                    e.preventDefault();
                    let $that = $(this);

                    const job_id = $that.attr('id').split('_')[1];
                    const action = $that.hasClass('add') ? 'add' : 'remove';
                    const tr = $that.closest('tr');
                    const row = jobs_table.row(tr);

                    let rowData = row.data();
                    rowData['client_contact'] = action == 'add' ? 1 : 0;

                    const is_favourite = !!parseInt(rowData['favourite']);
                    const is_job_accepted = !!parseInt(rowData['job_accepted']);
                    const is_applied = !!parseInt(rowData['applied']);

                    axios.post(`/dashboard/statuses`, {
                        job_id: job_id, action:action, column:'client_contact'
                    }).then(function (response) {

                    });

                    row.data(rowData);

                    setTimeout(() => {
                        $that = tr.find('a.client_contact');
                        const ul = $that.closest('ul');
                        if(action == 'add'){
                            tr.find('span.title:not(.category)').addClass('text-orange');
                            ul.find('li.client_contact.add').addClass('hidden');
                            ul.find('li.client_contact.remove').removeClass('hidden');
                        }
                        else{
                            tr.find('span.title:not(.category)').removeClass('text-orange');
                            ul.find('li.client_contact.remove').addClass('hidden');
                            ul.find('li.client_contact.add').removeClass('hidden');
                        }
                        if(is_job_accepted){
                            if(action == 'add'){
                                tr.find('span.title:not(.category)').removeClass('text-success');
                            }
                            else{
                                tr.find('span.title:not(.category)').addClass('text-success');
                            }
                            ul.find('li.job_accepted.add').addClass('hidden');
                            ul.find('li.job_accepted.remove').removeClass('hidden');
                        }
                        else{
                            tr.find('span.title:not(.category)').removeClass('text-success');
                            ul.find('li.job_accepted.remove').addClass('hidden');
                            ul.find('li.job_accepted.add').removeClass('hidden');
                        }
                        if(is_favourite){
                            if(action == 'add'){
                                tr.find('span.title:not(.category)').removeClass('text-danger');
                            }
                            else{
                                tr.find('span.title:not(.category)').addClass('text-danger');
                            }
                            ul.find('li.favourite.add').addClass('hidden');
                            ul.find('li.favourite.remove').removeClass('hidden');
                        }
                        else{
                            tr.find('span.title:not(.category)').removeClass('text-danger');
                            ul.find('li.favourite.remove').addClass('hidden');
                            ul.find('li.favourite.add').removeClass('hidden');
                        }
                        if(is_applied){
                            ul.find('li.applied.add').addClass('hidden');
                            ul.find('li.applied.remove').removeClass('hidden');
                        }
                        else{
                            ul.find('li.applied.remove').addClass('hidden');
                            ul.find('li.applied.add').removeClass('hidden');
                        }
                        jobs_table.row(tr).draw(false);
                    }, 0)
                });
                $('#tables-container').on('click', 'a.job_accepted', function(e) {
                    e.preventDefault();
                    let $that = $(this);

                    const job_id = $that.attr('id').split('_')[1];
                    const action = $that.hasClass('add') ? 'add' : 'remove';
                    const tr = $that.closest('tr');
                    const row = jobs_table.row(tr);

                    let rowData = row.data();
                    rowData['job_accepted'] = action == 'add' ? 1 : 0;

                    const is_favourite = !!parseInt(rowData['favourite']);
                    const is_client_contact = !!parseInt(rowData['client_contact']);
                    const is_applied = !!parseInt(rowData['applied']);

                    axios.post(`/dashboard/statuses`, {
                        job_id: job_id, action:action, column:'job_accepted'
                    }).then(function (response) {

                    });

                    row.data(rowData);

                    setTimeout(() => {
                        $that = tr.find('a.job_accepted');
                        const ul = $that.closest('ul');
                        if(action == 'add'){
                            tr.find('span.title:not(.category)').addClass('text-success');
                            ul.find('li.job_accepted.add').addClass('hidden');
                            ul.find('li.job_accepted.remove').removeClass('hidden');
                        }
                        else{
                            tr.find('span.title:not(.category)').removeClass('text-success');
                            ul.find('li.job_accepted.remove').addClass('hidden');
                            ul.find('li.job_accepted.add').removeClass('hidden');
                        }
                        if(is_client_contact){
                            if(action == 'add'){
                                tr.find('span.title:not(.category)').removeClass('text-orange');
                            }
                            else{
                                tr.find('span.title:not(.category)').addClass('text-orange');
                            }
                            ul.find('li.client_contact.add').addClass('hidden');
                            ul.find('li.client_contact.remove').removeClass('hidden');
                        }
                        else{
                            tr.find('span.title:not(.category)').removeClass('text-orange');
                            ul.find('li.client_contact.remove').addClass('hidden');
                            ul.find('li.client_contact.add').removeClass('hidden');
                        }
                        if(is_favourite){
                            if(action == 'add'){
                                tr.find('span.title:not(.category)').removeClass('text-danger');
                            }
                            else{
                                tr.find('span.title:not(.category)').addClass('text-danger');
                            }
                            ul.find('li.favourite.add').addClass('hidden');
                            ul.find('li.favourite.remove').removeClass('hidden');
                        }
                        else{
                            tr.find('span.title:not(.category)').removeClass('text-danger');
                            ul.find('li.favourite.remove').addClass('hidden');
                            ul.find('li.favourite.add').removeClass('hidden');
                        }
                        if(is_applied){
                            ul.find('li.applied.add').addClass('hidden');
                            ul.find('li.applied.remove').removeClass('hidden');
                        }
                        else{
                            ul.find('li.applied.remove').addClass('hidden');
                            ul.find('li.applied.add').removeClass('hidden');
                        }
                        jobs_table.row(tr).draw(false);
                    }, 0)
                });
                $('#tables-container').on('click', 'td.joburl', function() {
                    const $that = $(this);
                    const job_url = 'http://www.upwork.com/jobs/' + $that.attr('id').split('_')[1];
                    window.open(job_url, '_blank');
                });
                $('#tables-container').on('click', 'a.apply', function() {
                    $(this).closest('td').find('button.apply').click();
                    return false;
                });
                $('#tables-container').on('click', 'button.apply', function() {
                    const $that = $(this);
                    const job_id = $that.attr('id').split('_')[1];
                    const tr = $that.closest('tr');
                    const row = jobs_table.row(tr);
                    current_tr = tr;

                    let rowData = row.data();
                    timeDiff = rowData['timeDiff'];

                    $.each(application_data, function(key, data){
                        $.each(data, function(i, item){
                            $('div#keywords-modal').find('input[name=check-'+item['title_abbr']).prop('checked', item['ticked']);
                        });
                    });
                    $.each(search_data, function(key, data) {
                        let check_keyword = true;
                        let check_region = true;
                        let check_country = true;
                        if(key == 'Text'){
                            $.each(data, function(keyword, match) {
                                if(match == 'all'){
                                    check_keyword = true;
                                    $.each(keyword.split('_'), function(i, piece){
                                        check_keyword = check_keyword && (rowData['title'].toLowerCase().includes(piece) || rowData['description'].toLowerCase().includes(piece));
                                    })
                                    $('div#keywords-modal').find('input[name=check-'+keyword).prop('checked', check_keyword);
                                }
                                else if(match == 'any'){
                                    check_keyword = false;
                                    $.each(keyword.split('_'), function(i, piece){
                                        check_keyword = check_keyword || (rowData['title'].toLowerCase().includes(piece) || rowData['description'].toLowerCase().includes(piece));
                                    })
                                    $('div#keywords-modal').find('input[name=check-'+keyword).prop('checked', check_keyword);
                                }
                                else{
                                    const match_lower = match.toLowerCase();
                                    check_keyword = rowData['title'].toLowerCase().includes(match_lower) || rowData['description'].toLowerCase().includes(match_lower);
                                    $('div#keywords-modal').find('input[name=check-'+keyword).prop('checked', check_keyword);
                                }
                            });
                        }
                        if(key == 'Region'){
                            $.each(data, function(key, val) {
                                $('div#keywords-modal').find('input[name=check-'+key).prop('checked', false);
                                if(rowData['region'] == val){
                                    $('div#keywords-modal').find('input[name=check-'+key).prop('checked', true);
                                }
                            })
                        }
                        if(key == 'Country'){
                            const countries = {'uk':'United Kingdom', 'us':'United States'}
                            $.each(data, function(key, val) {
                                if(rowData['location'] == countries[val]){
                                    $('div#keywords-modal').find('input[name=check-'+key).prop('checked', false);
                                    $('div#keywords-modal').find('input[name=check-'+key).prop('checked', true);
                                }
                            })
                        }
                    });
                });
                $('div#keywords-modal').on('click', 'button.generate', function() {
                    $.each(application_data, function(index, elements) {
                        $.each(elements, function(idx, item) {
                            const check = $('div#keywords-modal').find('input[name=check-'+item['title_abbr']).prop('checked');
                            if(check && item['text']){
                                let text_to_use = item['text'].replace("#TD#", timeDiff);
                                const h6 = $('div#generated-modal').find('h6#generated-'+item['title_abbr']+'-title');
                                $('div#generated-modal').find('h4#generated-'+item['heading_abbr']+'-heading').html(item['heading'])
                                $('div#generated-modal').find('p#generated-'+item['title_abbr']+'-response').html(text_to_use)
                                h6.find('span').html(item['title'])
                                h6.find('i').removeClass('hidden')
                                h6.find('button').removeClass('hidden')
                            }
                        });
                    });
                    setTimeout(() => {
                        current_tr.find('button.generated').click();
                    }, 500);
                });
                $('div#generated-modal').on('click', 'i.copy', function(){
                    const $that = $(this);
                    let elementToCopy;
                    let textToCopy = '';
                    if($that.hasClass('all')){
                        $that.closest('div.modal-content').find('div.generated-response-wrap').each(function(idx, el){
                            const $el = $(el);
                            const h4 = $el.find('h4.generated-response-heading')
                            const innerText = $el.find('h4.generated-response-heading')[0].innerText;
                            if(innerText){
                                textToCopy += h4.hasClass('use-headings') ? innerText + "\n" : '';
                                $el.find('div.element-wrap').each(function(idx, item){
                                    const $item = $(item);
                                    const h6 = $item.find('h6.generated-response-title').find('span');
                                    const inner = $item.find('h6.generated-response-title').find('span')[0].innerText;
                                    if(inner){
                                        textToCopy += h6.hasClass('use-headings') ? inner + "\n" : '';
                                        textToCopy += $item.find('p.generated-response')[0].innerHTML + "\n\n";
                                    }
                                })
                            }
                        });
                    }
                    else{
                        const el_wrap = $that.closest('div.element-wrap');
                        const h6 = el_wrap.find('h6.generated-response-title').find('span');
                        const inner = h6[0].innerText;
                        if(inner){
                            const h_wrap = el_wrap.closest('div.generated-response-wrap');
                            const h4 = h_wrap.find('h4.generated-response-heading')
                            const innerText = h4[0].innerText;
                            if(innerText){
                                textToCopy = h4.hasClass('use-headings') ? innerText + "\n" : '';
                            }
                            textToCopy += h6.hasClass('use-headings') ? inner + "\n" : '';
                        }
                        elementToCopy = $that.closest('div.element-wrap').find('p.generated-response')[0];
                        textToCopy += elementToCopy.innerHTML;
                    }
                    textToCopy = textToCopy.replaceAll('<p>', '').replaceAll('</p>', '').replaceAll('<br>', '\n');
                    navigator.clipboard.writeText(textToCopy);
                });
                $('#chatgpt-modal').on('hidden.bs.modal', function () {
                    $('p#chat-gpt-response').html('Be patient ...');
                });
                $('#generated-modal').on('hidden.bs.modal', function () {
                    const h6_1 = $('div#generated-modal').find('h6.generated-response');
                    const h6_2 = $('div#generated-modal').find('h6.generated-response-title');
                    $('div#generated-modal').find('p.generated-response').text('');
                    $('div#generated-modal').find('h4.generated-response-heading').text('');
                    h6_1.find('span').text('');
                    h6_1.find('i').addClass('hidden');
                    h6_1.find('button').addClass('hidden');
                    h6_2.find('span').text('');
                    h6_2.find('i').addClass('hidden');
                    h6_2.find('button').addClass('hidden');
                    timeDiff = 0;
                });

                let columnIndexes = {
                    "id": 0,
                    "ciphertext": 1,
                    "posted": 2,
                    "title": 3,
                    "description": 4,
                    "desc_len": 5,
                    "category": 6,
                    "category_abbr":7,
                    "subCategory": 8,
                    "location": 9,
                    "timeDiff": 10,
                    "region": 11,
                    "experienceLevel": 12,
                    "hires": 13,
                    "verified": 14,
                    "feedback": 15,
                    "budget": 16,
                    "good_budget": 17,
                    "very_good_budget": 18,
                    "duration": 19,
                    "favourite": 20,
                    "applied": 21,
                    "client_contact": 22,
                    "job_accepted": 23,
                    "hasLaravel": 24,
                    "hasLooker": 25,
                    "hasPhp": 26,
                    "hasSheets": 27,
                    "hasExcel": 28,
                    "hasMaps": 29,
                    "hasAmazon": 30,
                    "hasApis": 31,
                    "categoryId":32,
                    "subCategoryId":33,
                    "postedDateTime":34,
                    "desc": 35,
                    "Action": 36,
                    "skills": 37
                };
                let jobs_table = $('[data-table-id="jobs_table"]').DataTable({
                    pageLength: 10,
                    lengthMenu: [[5, 10, 20, 999999], [5, 10, 20, 'All']],
                    autoWidth: true,
                    "order": [[columnIndexes['posted'], "desc"]],
                    columns: [
                        { data: 'id', visible:false},
                        { data: 'ciphertext', visible:false},
                        { data: 'posted'},
                        { data: 'title', 'width':'25%'},
                        { data: 'description', visible:false},
                        { data: 'desc_len', visible:false},
                        { data: 'category', visible:false},
                        { data: 'category_abbr', visible:false},
                        { data: 'subCategory', visible:false},
                        { data: 'location' },
                        { data: 'timeDiff' },
                        { data: 'region', visible:false},
                        { data: 'experienceLevel', name: 'exp' },
                        { data: 'hires', name:'PH' },
                        { data: 'verified', visible:false},
                        { data: 'feedback', name: 'fb' },
                        { data: 'budget'},
                        { data: 'good_budget', visible:false},
                        { data: 'very_good_budget', visible:false},
                        { data: 'duration', name:'Dur' },
                        { data: 'favourite', visible:false},
                        { data: 'applied', visible:false},
                        { data: 'client_contact', visible:false},
                        { data: 'job_accepted', visible:false},
                        { data: 'hasLaravel', visible:false},
                        { data: 'hasLooker', visible:false},
                        { data: 'hasPhp', visible:false},
                        { data: 'hasSheets', visible:false},
                        { data: 'hasExcel', visible:false},
                        { data: 'hasMaps', visible:false},
                        { data: 'hasAmazon', visible:false},
                        { data: 'hasApis', visible:false},
                        { data: 'categoryId', visible:false},
                        { data: 'subCategoryId', visible:false},
                        { data: 'postedDateTime', visible:false},
                        { data: 'desc', name:null, orderable: false},
                        { data: 'Action', name:null, orderable: false},
                        { data: 'skills', 'width':'20%', orderable: false },
                    ],
                    serverSide: false, // pagination on the client
                    processing: true,
                    drawCallback: function(settings) {
                        window.closeAllPopovers();
                    },
                    initComplete: function(settings, json) {
                        $('div#tables-container').removeClass('collapsed');
                        $('div.jobs-list').removeClass('collapsed').addClass('slideDown');
                    },
                    "infoCallback": function( settings, start, end, max, total, pre ) {
                        let max_to_show = max;
                        let modifiedPre = pre;
                        const hasFavourites = !!set_buttons['favourite'];
                        const hasApplied = !!set_buttons['applied'];
                        const hasFilters = hasFavourites || hasApplied;

                        if(hasFilters){
                            if(hasFavourites){
                                max_to_show = hasApplied ? total_favourites + total_applied : total_favourites;
                            }
                            else if(hasApplied){
                                max_to_show = total_applied;
                            }
                        }
                        else{
                            if(!set_buttons['favourite']){
                                max_to_show -= total_favourites;
                            }
                            if(!set_buttons['applied']){
                                max_to_show -= total_applied;
                            }
                        }

                        modifiedPre = pre.replace(/(filtered from )(\d+)( total entries)/, function(match, p1, p2, p3) {
                            if(max_to_show == 1){
                                p3 = ' entry';
                            }
                            return p1 + max_to_show + p3;
                        });

                        total_favourites = 0;
                        total_applied = 0;

                        return modifiedPre;
                    },
                    //the render function can be defined also in "columns", but using columnsDefs I can group all them
                    //here and leave a clean definition for columns
                    columnDefs: [
                        {
                            targets: columnIndexes['title'],
                            render: function(data, type, row) {

                                //type can be "display", "filter", "type", e "sort"
                                if (type === 'sort') {
                                   let categoryId = parseInt(row['categoryId']);
                                   let subCategoryId = parseInt(row['subCategoryId']);
                                   if(subCategoryId == 60750082){
                                       subCategoryId = 99950082;
                                   }
                                    categoryId *= 100000000;

                                   return categoryId + subCategoryId;
                                }

                                return data;
                            }
                        },
                        {
                            targets: columnIndexes['posted'],
                            render: function(data, type, row) {

                                //type can be "display", "filter", "type", e "sort"
                                if (type === 'sort') {
                                    return row['postedDateTime']
                                }

                                return data;
                            }
                        },
                        {
                            targets: columnIndexes['budget'],
                            render: function(data, type, row) {
                                //type can be "display", "filter", "type", e "sort"
                                if (type === 'sort' || type === 'type') {
                                    let ret = 0;
                                    let match = data.match(/\$([^<]*)/);
                                    const value1 = match[0];
                                    const value2 = match[1];
                                    if(value2.includes('-')){
                                        const range = value2.match(/(\d+)-(\d+)/);
                                        if(range){
                                            ret = parseInt(range[1], 10) + parseInt(range[2], 10) + 100000;
                                        }
                                    }
                                    else{
                                        ret = parseInt(value2.replace(/,/g, ''));
                                    }

                                    return ret;
                                }

                                return data;
                            }
                        },
                        {
                            targets: columnIndexes['duration'],
                            render: function(data, type, row) {
                                //type can be "display", "filter", "type", e "sort"
                                if (type === 'sort' || type === 'type') {
                                    let ret = 0;
                                    let match = data.match(/>([^<]*)/);
                                    if(match[1]){
                                        const regex = /[<>]?(\d+)-?(\d+)?m/g;
                                        const match1 = regex.exec(match[1]);
                                        if(match1[2] == undefined){
                                            if(match[1].match(/\&lt/)){
                                                ret = parseInt(match1[1]) + 1000;
                                            }
                                            if(match[1].match(/\&gt/)){
                                                ret = parseInt(match1[1]) + 100000;
                                            }
                                        }
                                        else{
                                            ret = parseInt(match1[1]) + parseInt(match1[2]) + 10000;
                                        }
                                    }

                                    return ret;
                                }

                                return data;
                            }
                        }
                    ]
                });

                $('#tables-container').on('click', 'table', function() {
                    window.closeAllPopovers();
                });

                $.fn.dataTable.ext.search.push(
                    function(settings, data, dataIndex) {
                        const region = data[columnIndexes['region']];
                        const country = data[columnIndexes['location']];
                        const favourite = !!parseInt(data[columnIndexes['favourite']]);
                        const applied = !!parseInt(data[columnIndexes['applied']]);
                        const good_budget = !!parseInt(data[columnIndexes['good_budget']]);
                        const laravel = !!parseInt(data[columnIndexes['hasLaravel']]);
                        const looker = !!parseInt(data[columnIndexes['hasLooker']]);
                        const php = !!parseInt(data[columnIndexes['hasPhp']]);
                        const sheets = !!parseInt(data[columnIndexes['hasSheets']]);
                        const excel = !!parseInt(data[columnIndexes['hasExcel']]);
                        const maps = !!parseInt(data[columnIndexes['hasMaps']]);
                        const amazon = !!parseInt(data[columnIndexes['hasAmazon']]);
                        const apis = !!parseInt(data[columnIndexes['hasApis']]);

                        const verified = data[columnIndexes['verified']];
                        const feedback = parseFloat(data[columnIndexes['feedback']]) >= 4.5;

                        const check1_1 = (set_buttons['favourite'] && favourite) || (!set_buttons['favourite'] && !favourite);
                        const check1_2 = (set_buttons['applied'] && applied) || (!set_buttons['applied'] && !applied);
                        const check1 = check1_1 && check1_2;

                        const check2_1 = (set_buttons['eu'] && region == 'EU') || !set_buttons['eu'];
                        const check2_2 = (set_buttons['uk_only'] && country == 'United Kingdom') || !set_buttons['uk_only'];
                        const check2 = check2_1 && check2_2;

                        const check3_1 = (set_buttons['budget'] && good_budget) || !set_buttons['budget'];
                        const check3_2 = (set_buttons['verified'] && verified) || !set_buttons['verified'];
                        const check3_3 = (set_buttons['feedback'] && feedback) || !set_buttons['feedback'];
                        const check3 = check3_1 && check3_2 && check3_3;

                        const check4_1 = (set_buttons['laravel'] && laravel) || !set_buttons['laravel'];
                        const check4_2 = (set_buttons['looker'] && looker) || !set_buttons['looker'];
                        const check4_3 = (set_buttons['php'] && php) || !set_buttons['php'];
                        const check4_4 = (set_buttons['sheets'] && sheets) || !set_buttons['sheets'];
                        const check4_5 = (set_buttons['excel'] && excel) || !set_buttons['excel'];
                        const check4_6 = (set_buttons['maps'] && maps) || !set_buttons['maps'];
                        const check4_7 = (set_buttons['amazon'] && amazon) || !set_buttons['amazon'];
                        const check4_8 = (set_buttons['apis'] && apis) || !set_buttons['apis'];
                        const check4 = check4_1 && check4_2 && check4_3 && check4_4 && check4_5 && check4_6 && check4_7 && check4_8;

                        total_favourites += favourite ? 1 : 0;
                        total_applied += applied ? 1 : 0;

                        return check1 && check2 && check3 && check4;
                    }
                );
            });
        </script>

        <!-- Page JS Code -->
        @vite(['resources/js/pages/datatables.js'])
    </x-slot>
    <!-- Hero -->
    <x-page.hero-section pageTitle="DataTables Example" breadcrumbItem="Examples" breadcrumbActive="Plugin"/>
    <!-- END Hero -->
    <!-- Page Content -->
    <x-page.content-section>
        <div class="block block-rounded collapsed" id="tables-container">
            <div class="block-header block-header-default justify-content-start gap-2">
                <span class="d-inline-flex align-self-start mt-3">Filters</span>
                <div class="block-header block-header-default justify-content-start flex-wrap gap-5">
                    <span class=" d-inline-flex">
                        <button class="btn btn-secondary filters toggle favourite" filter_name="favourite">Favourite</button>
                        <button class="btn btn-secondary ms-3 filters toggle applied" filter_name="applied">Applied</button>
                    </span>
                        <span class=" d-inline-flex">
                        <button class="btn btn-secondary filters uk_only" filter_name="uk_only">UK Only</button>
                        <button class="btn btn-primary ms-3 filters eu active" filter_name="eu">Europe</button>
                        <button class="btn btn-secondary ms-3 filters toggle budget" filter_name="budget">Budget</button>
                        <button class="btn btn-primary ms-3 filters toggle verified active" filter_name="verified">Verified</button>
                        <button class="btn btn-primary ms-3 filters toggle feedback active" filter_name="feedback">+4.5 FB</button>
                    </span>
                    <span class="d-inline-flex">
                        <button class="btn btn-secondary filters toggle unique laravel" filter_name="laravel">Laravel</button>
                        <button class="btn btn-secondary ms-3 filters toggle unique looker" filter_name="looker">Looker</button>
                        <button class="btn btn-secondary ms-3 filters toggle unique php" filter_name="php">PHP</button>
                        <button class="btn btn-secondary ms-3 filters toggle unique sheets" filter_name="sheets">Sheets</button>
                        <button class="btn btn-secondary ms-3 filters toggle unique excel" filter_name="excel">Data Viz</button>
                        <button class="btn btn-secondary ms-3 filters toggle unique maps" filter_name="maps">Maps</button>
                        <button class="btn btn-secondary ms-3 filters toggle unique amazon" filter_name="amazon">Amazon</button>
                        <button class="btn btn-secondary ms-3 filters toggle unique apis" filter_name="apis">Apis</button>
                    </span>
                </div>
            </div>
            <div class="block-content block-content-full table-responsive jobs-list">
                <x-page.data-table jsDataTableClass="js-dataTable-full" dataTableId="jobs_table">
                    <thead>
                    <tr>
                        <th class="hidden">id</th>
                        <th class="hidden">ciphertext</th>
                        <th>Posted</th>
                        <th>Title</th>
                        <th class="hidden">description</th>
                        <th class="hidden">desc_len</th>
                        <th class="hidden">category</th>
                        <th class="hidden">category_abbr</th>
                        <th class="hidden">subCategory</th>
                        <th>Location</th>
                        <th>TD</th>
                        <th>Region</th>
                        <th>Exp</th>
                        <th>PH</th>
                        <th>Verified</th>
                        <th>FB</th>
                        <th>Budget</th>
                        <th class="hidden">good_budget</th>
                        <th class="hidden">very_good_budget</th>
                        <th>Dur</th>
                        <th class="hidden">favourite</th>
                        <th class="hidden">applied</th>
                        <th class="hidden">client_contact</th>
                        <th class="hidden">job_accepted</th>
                        <th class="hidden">hasLaravel</th>
                        <th class="hidden">hasLooker</th>
                        <th class="hidden">hasPhp</th>
                        <th class="hidden">hasSheets</th>
                        <th class="hidden">hasExcel</th>
                        <th class="hidden">hasMaps</th>
                        <th class="hidden">hasAmazon</th>
                        <th class="hidden">hasApis</th>
                        <th class="hidden">categoryId</th>
                        <th class="hidden">subCategoryId</th>
                        <th class="hidden">postedDateTime</th>
                        <th class="no-right-border"></th>
                        <th class="no-left-border"></th>
                        <th>Skills</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach ($jobs_data as $i => $job)
                        <tr>
                            <td></td>
                            <td></td>
                            <td class="d-none d-sm-table-cell text-center">
                                <span class="text-muted">{{$job['posted']}}</span>
                            </td>
                            <td class="fw-semibold joburl" id="joburl_{{$job['ciphertext']}}">
                                <div class="position-relative">
                                    <i class="fas fa-link text-primary position-absolute top-n8 end-n8"></i>
                                    <div class="d-flex flex-column">
                                        @if($job['favourite'])
                                            <span class="title text-danger">{{$job['title']}}</span>
                                        @elseif($job['client_contact'])
                                            <span class="title text-orange">{{$job['title']}}</span>
                                        @elseif($job['job_accepted'])
                                            <span class="title text-success">{{$job['title']}}</span>
                                        @else
                                            <span class="title">{{$job['title']}}</span>
                                        @endif
                                        <span class="title category text-warning mt-3"><span title="{{$job['category']}}">{{$job['category_abbr']}}</span> / {{$job['subCategory']}}</span>
                                    </div>
                                </div>
                            </td>
                            <td>{{$job['description']}}</td>
                            <td></td>
                            <td></td>
                            <td>{{$job['category_abbr']}}</td>
                            <td>{{$job['subCategory']}}</td>
                            <td class="text-muted">
                                {{$job['location']}}
                            </td>
                            <td class="text-muted">
                                {{$job['timeDiff']}}
                            </td>
                            <td>{{$job['region']}}</td>
                            <td class="text-muted text-center">
                                <span>{{$job['experienceLevel']}}</span>
                            </td>
                            <td class="text-muted">
                                @if($job['verified'] == 'VERIFIED')
                                    <span>{{$job['hires']}}</span>
                                @else
                                    <span class="text-danger fw-bolder">{{$job['hires']}}</span>
                                @endif
                            </td>
                            <td>{{$job['verified']}}</td>
                            <td class="text-muted">
                                <span>{{$job['feedback']}}</span>
                            </td>
                            <td class="text-muted text-nowrap">
                                @if($job['very_good_budget'] == 1)
                                    <span class="text-danger fw-bolder">{{$job['budget']}}</span>
                                @else
                                    <span>{{$job['budget']}}</span>
                                @endif
                            </td>
                            <td>{{$job['good_budget']}}</td>
                            <td>{{$job['very_good_budget']}}</td>
                            <td class="text-muted">
                                <span>{{$job['duration']}}</span>
                            </td>
                            <td>{{$job['favourite']}}</td>
                            <td>{{$job['applied']}}</td>
                            <td>{{$job['client_contact']}}</td>
                            <td>{{$job['job_accepted']}}</td>
                            <td>{{$job['hasLaravel']}}</td>
                            <td>{{$job['hasLooker']}}</td>
                            <td>{{$job['hasPhp']}}</td>
                            <td>{{$job['hasSheets']}}</td>
                            <td>{{$job['hasExcel']}}</td>
                            <td>{{$job['hasMaps']}}</td>
                            <td>{{$job['hasAmazon']}}</td>
                            <td>{{$job['hasApis']}}</td>
                            <td>{{$job['categoryId']}}</td>
                            <td>{{$job['subCategoryId']}}</td>
                            <td>{{$job['postedDateTime']}}</td>
                            @if($job['desc_len'] < 2500)
                                <td class="text-muted no-right-border popover-wrap" data-bs-toggle="popover" data-bs-container="#popover-container2" data-bs-trigger="click" data-bs-placement="left" title="{{$job['title']}}<i class='fas fa-copy text-dark copy-desc'></i>" data-bs-content="{{$job['description']}}">
                            @else
                                <td class="text-muted no-right-border popover-wrap" data-bs-toggle="popover" data-bs-container="#popover-container3" data-bs-trigger="click" data-bs-placement="left" title="{{$job['title']}}<i class='fas fa-copy text-dark copy-desc'></i>" data-bs-content="{{$job['description']}}">
                            @endif
                                    <button class="btn btn-light btn-outline-primary btn-sm"><i class="fas fa-book-open"></i></button>
                                </td>
                                <td class="no-left-border">
                                    <button class="btn btn-tools-green apply hidden" id="apply_{{$job['id']}}" data-bs-toggle="modal" data-bs-target="#keywords-modal"></button>
                                    <button class="btn btn-tools-green generated hidden" id="generated_{{$job['id']}}" data-bs-toggle="modal" data-bs-target="#generated-modal"></button>
                                    <div class="btn-group">
                                        @if($job['applied'])
                                            <button type="button" class="btn btn-tools-green select" id="reject_{{$job['id']}}">Select</button>
                                            <button type="button" class="btn btn-tools-green reject hidden" id="reject_{{$job['id']}}">Reject</button>
                                        @else
                                            <button type="button" class="btn btn-tools-green select hidden" id="reject_{{$job['id']}}">Select</button>
                                            <button type="button" class="btn btn-tools-green reject" id="reject_{{$job['id']}}">Reject</button>
                                        @endif
                                        <button type="button" class="btn btn-tools-green dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false" data-bs-reference="parent">
                                            <span class="visually-hidden">Toggle Dropdown</span>
                                        </button>
                                        <ul class="dropdown-menu">
                                            @if(!$job['applied'])
                                                <li class="apply"><a class="dropdown-item apply" href="#">Apply</a></li>
                                            @else
                                                <li class="apply hidden"><a class="dropdown-item apply" href="#">Apply</a></li>
                                            @endif
                                            @if($job['favourite'])
                                                <li class="favourite remove"><a class="dropdown-item remove favourite" id="favourite_{{$job['id']}}" href="#">Remove Favourite</a></li>
                                                <li class="favourite add hidden"><a class="dropdown-item add favourite" id="favourite_{{$job['id']}}" href="#">Set as Favourite</a></li>
                                            @else
                                                <li class="favourite remove hidden"><a class="dropdown-item remove favourite" id="favourite_{{$job['id']}}" href="#">Remove Favourite</a></li>
                                                <li class="favourite add"><a class="dropdown-item add favourite" id="favourite_{{$job['id']}}" href="#">Set as Favourite</a></li>
                                            @endif
                                            @if($job['applied'])
                                                <li class="applied remove"><a class="dropdown-item remove applied" id="applied_{{$job['id']}}" href="#">Mark as Not Applied</a></li>
                                                <li class="applied add hidden"><a class="dropdown-item add applied" id="applied_{{$job['id']}}" href="#">Mark as Applied</a></li>
                                            @else
                                                <li class="applied remove hidden"><a class="dropdown-item remove applied" id="applied_{{$job['id']}}" href="#">Mark as Not Applied</a></li>
                                                <li class="applied add"><a class="dropdown-item add applied" id="applied_{{$job['id']}}" href="#">Mark as Applied</a></li>
                                            @endif
                                            @if($job['client_contact'])
                                                <li class="client_contact remove"><a class="dropdown-item remove client_contact" id="client-contact_{{$job['id']}}" href="#">Unmark as Client Contac</a></li>
                                                <li class="client_contact add hidden"><a class="dropdown-item add client_contact" id="client-contact_{{$job['id']}}" href="#">Mark as Client Contact</a></li>
                                            @else
                                                <li class="client_contact remove hidden"><a class="dropdown-item remove client_contact" id="client-contact_{{$job['id']}}" href="#">Unmark as Client Contact</a></li>
                                                <li class="client_contact add"><a class="dropdown-item add client_contact" id="client-contact_{{$job['id']}}" href="#">Mark as Client Contact</a></li>
                                            @endif
                                            @if($job['job_accepted'])
                                                <li class="job_accepted remove"><a class="dropdown-item remove job_accepted" id="client-contact_{{$job['id']}}" href="#">Unmark as Job Accepted</a></li>
                                                <li class="job_accepted add hidden"><a class="dropdown-item add job_accepted" id="client-contact_{{$job['id']}}" href="#">Mark as Job Accepted</a></li>
                                            @else
                                                <li class="job_accepted remove hidden"><a class="dropdown-item remove job_accepted" id="job-accepted_{{$job['id']}}" href="#">Unmark as Job Accepted</a></li>
                                                <li class="job_accepted add"><a class="dropdown-item add job_accepted" id="job-accepted_{{$job['id']}}" href="#">Mark as Job Accepted</a></li>
                                            @endif
                                        </ul>
                                    </div>
                                </td>
                                <td class="text-muted smaller">
                                    <span>{{$job['skills']}} </span>
                                </td>
                        </tr>
                    @endforeach
                    </tbody>
                </x-page.data-table>
            </div>
        </div>
        <div id="popover-container1" class="popover-container"></div>
        <div id="popover-container2" class="popover-container"></div>
        <div id="popover-container3" class="popover-container"></div>
        <div class="modal fade" id="chatgpt-modal" tabindex="-1" role="dialog" aria-labelledby="chatgpt-modal" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="block block-rounded block-themed block-transparent mb-0">
                        <div class="block-header bg-primary-dark">
                            <h3 class="block-title">chatGPT response</h3>
                            <div class="block-options">
                                <button type="button" class="btn-block-option" data-bs-dismiss="modal" aria-label="Close">
                                    <i class="fa fa-fw fa-times"></i>
                                </button>
                            </div>
                        </div>
                        <div class="block-content">
                            <p id="chat-gpt-response">Be patient ...</p>
                        </div>
                        <div class="block-content block-content-full text-end bg-body">
                            <button type="button" class="btn btn-sm btn-alt-secondary" data-bs-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="generated-modal" tabindex="-1" role="dialog" aria-labelledby="generated-modal" aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="block block-rounded block-themed block-transparent mb-0">
                        <div class="block-header bg-primary-dark">
                            <h3 class="block-title">Text fragments for the Cover letter</h3>
                            <div class="block-options">
                                <span>Copy all in the clipboard</span>
                                <button type="button" class="btn-block-option me-5 pe-5">
                                    <i class='fas fa-copy text-light copy all'></i>
                                </button>
                            </div>
                            <div class="block-options">
                                <button type="button" class="btn-block-option" data-bs-dismiss="modal" aria-label="Close">
                                    <i class="fa fa-fw fa-times"></i>
                                </button>
                            </div>
                        </div>
                        <div class="block-content max-height-500 overflow-auto">
                            @foreach($application_data as $headings => $elements)
                                <div class="generated-response-wrap">
                                    @php $heading_abbr = str_replace(' ', '_', strtolower($headings)); @endphp
                                    @if($elements[0]['use_headings'] == 1)
                                        <h4 id="generated-{{$heading_abbr}}-heading" class="generated-response-heading use-headings"></h4>
                                    @else
                                        <h4 id="generated-{{$heading_abbr}}-heading" class="generated-response-heading"></h4>
                                    @endif
                                    @foreach($elements as $item)
                                        <div class="element-wrap">
                                            <h6 id="generated-{{$item['title_abbr']}}-title" class="generated-response-title">
                                                @if($item['use_headings'] == 1)
                                                    <span class="use-headings"></span>
                                                @else
                                                    <span></span>
                                                @endif
                                                <button type="button" class="btn-block-option float-end hidden">
                                                    <i class='fas fa-copy text-dark-emphasis copy fragment cursor-pointer hidden'></i>
                                                </button>
                                            </h6>
                                            <p id="generated-{{$item['title_abbr']}}-response" class="generated-response"></p>
                                        </div>
                                    @endforeach
                                </div>
                            @endforeach
                        </div>
                        <div class="block-content block-content-full text-end bg-body">
                            <button type="button" class="btn btn-sm btn-alt-secondary" data-bs-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="keywords-modal" tabindex="-1" role="dialog" aria-labelledby="keywords-modal" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="block block-rounded block-themed block-transparent mb-0">
                        <div class="block-header bg-primary-dark">
                            <h3 class="block-title">Cover letter generator</h3>
                            <div class="block-options">
                                <button type="button" class="btn-block-option" data-bs-dismiss="modal" aria-label="Close">
                                    <i class="fa fa-fw fa-times"></i>
                                </button>
                            </div>
                        </div>
                        <div class="block-content px-5">
                            <form action="be_blocks_forms.html" method="POST">
                                <div class="block block-rounded">
                                    <div class="block-content px-5">
                                        @if(!empty($application_data))
                                            @foreach($application_data as $section => $headings)
                                                @if($section == 'Keywords')
                                                    <div class="row mb-2">
                                                        <div class="col-12">
                                                            <h4 class="text-center">{{ $section }}</h4>
                                                        </div>
                                                    </div>
                                                @else
                                                    <div class="row mb-2 mt-5">
                                                        <div class="col-12">
                                                            <h4 class="text-center">{{ $section }}</h4>
                                                        </div>
                                                    </div>
                                                @endif

                                                @php $num = ceil(count($headings) / 2); $chunks = array_chunk($headings, ceil(count($headings) / $num)); @endphp
                                                @foreach ($chunks as $chunk)
                                                    <div class="row">
                                                        @foreach ($chunk as $idx => $element)
                                                            @if($idx == 0)
                                                                <div class="col-md-7">
                                                                    <div class="form-check">
                                                                        <input class="form-check-input" type="checkbox" value="" name="check-{{ $element['title_abbr'] }}" {{$element['ticked'] ? 'checked' : ''}}>
                                                                        <label class="form-check-label" for="{{ $element['title'] }}">
                                                                            {{ $element['title'] }}
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                            @else
                                                                <div class="col-md-5 me-0 pe-0">
                                                                    <div class="form-check">
                                                                        <input class="form-check-input" type="checkbox" value="" name="check-{{ $element['title_abbr'] }}" {{$element['ticked'] ? 'checked' : ''}}>
                                                                        <label class="form-check-label" for="{{ $element['title'] }}">
                                                                            {{ $element['title'] }}
                                                                        </label>
                                                                    </div>
                                                                </div>
                                                            @endif
                                                        @endforeach
                                                    </div>
                                                @endforeach
                                            @endforeach
                                        @endif
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="block-content block-content-full text-end bg-body">
                            <button type="button" class="btn btn-sm btn-alt-primary generate" data-bs-dismiss="modal">Generate</button>
                            <button type="button" class="btn btn-sm btn-alt-secondary" data-bs-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- END Dynamic Table Full -->
    </x-page.content-section>
    <!-- END Page Content -->
</x-app-layout>