@local <!-- views/dashboard.blade.php --> @endlocal
<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;
            }
            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;
            }
            td.joburl{
                cursor:pointer;
            }

            table.js-dataTable-full{
                min-width:100% !important;
            }
            @keyframes slideDown {
                0% {
                    max-height: 0;
                }
                100% {
                    max-height: 10000px;
                }
            }
            @keyframes flashing {
                0% { opacity: 1.0; }
                50% { opacity: 0.7; }
                100% { opacity: 1.0; }
            }
            .flashing-button {
                animation: flashing 1.5s infinite;
            }
        </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>
            $(document).ready(function() {
                let current_keyword_id = null;
                let current_tr = null;
                let countriesColumnIndexes = {
                    "id": 0,
                    "name": 1,
                    "region": 2,
                    "excluded": 3,
                    "Action": 4
                };
                let keywordsColumnIndexes = {
                    "id": 0,
                    "keyword": 1,
                    "title": 2,
                    "description": 3,
                    "skills":4,
                    "title_color_class":5,
                    "description_color_class":6,
                    "skills_color_class":7,
                    "Action": 8
                };
                let countries_table = $('[data-table-id="countries_table"]').DataTable({
                    pageLength: 10,
                    lengthMenu: [[5, 10, 20, 999999], [5, 10, 20, 'All']],
                    autoWidth: true,
                    "order": [[countriesColumnIndexes['excluded'], "asc"], [countriesColumnIndexes['name'], "asc"]],
                    columns: [
                        { data: 'id', visible:false},
                        { data: 'name', name: 'Country Name', 'width':'40%' },
                        { data: 'region', name: 'Region' },
                        { data: 'excluded', name:'Status'},
                        { data: 'Action', name:null, orderable: false, 'width':'15%' }
                    ],
                    serverSide: false, // pagination on the client
                    processing: true,
                    drawCallback: function(settings) {
                        // popover initialization
                    }
                });
                $('#countries-tables-container').on('click', 'button.action', function() {
                    const $that = $(this);
                    const country_id = $that.closest('td').attr('id').split('_')[1];
                    const action = $that.hasClass('exclude') ? 'exclude' : 'include';
                    const tr = $that.closest('tr');
                    const span = tr.find('span.status')
                    const row = countries_table.row(tr);
                    let rowData = row.data();
                    rowData['name'] = rowData['name'].includes('text-info') ? rowData['name'].replace(/text-info/g, 'text-danger') : rowData['name'].replace(/text-danger/g, 'text-info');
                    rowData['excluded'] = action == 'exclude' ? '<span class="status text-danger">Excluded</span>' : '<span class="status text-info">Included</span>';
                    rowData['Action'] = action == 'exclude' ? '<button class="btn btn-tools-green action include">Include</button>' : '<button class="btn btn-tools-green action exclude">Exclude</button>';
                    row.data(rowData);
                    row.invalidate().draw(false);
                    axios.post(`/filters/excluded_countries`, {
                        country_id: country_id, action:action
                    });
                });
                $('#keywords-tables-container').on('click', 'button.remove', function() {
                    const $that = $(this);
                    current_keyword_id = $that.closest('td').attr('id').split('_')[1];
                    current_tr = $that.closest('tr');
                });
                $('#keywords-remove-modal').on('click', 'button.remove', function() {
                    axios.post('/filters/remove_keywords', {
                        keyword_id: current_keyword_id
                    }).then(function (response) {
                        keywords_table.row(current_tr).remove().draw(false);
                        current_keyword_id = null;
                        current_tr = null;
                    });
                });

                $('#keywords-tables-container').on('click', 'button.edit', function() {
                    const $that = $(this);
                    current_keyword_id = $that.closest('td').attr('id').split('_')[1];
                    current_tr = $that.closest('tr');
                    const rowData = keywords_table.row(current_tr).data();

                    const current_title = rowData['title'] == 'Excluded' ? true : false;
                    const current_description = rowData['description'] == 'Excluded' ? true : false;
                    const current_skills = rowData['skills'] == 'Excluded' ? true : false;

                    $('input#edit-form-keyword').val(rowData['keyword']);
                    $('input#edit-form-title').prop('checked', current_title);
                    $('input#edit-form-description').prop('checked', current_description);
                    $('input#edit-form-skills').prop('checked', current_skills);
                });
                let keywords_table = $('[data-table-id="keywords_table"]').DataTable({
                    pageLength: 10,
                    lengthMenu: [[5, 10, 20, 999999], [5, 10, 20, 'All']],
                    autoWidth: true,
                    "order": [[keywordsColumnIndexes['keyword'], "asc"]],
                    columns: [
                        { data: 'id', name:'id', visible:false},
                        { data: 'keyword', name: 'Keyword'},
                        { data: 'title', name: 'In Title', render: function(data, type, row) {
                                return "<span class='" + row.title_color_class + "'>" + row.title + "</span>";
                        }},
                        { data: 'description', name:'In Description', render: function(data, type, row) {
                                return "<span class='" + row.description_color_class + "'>" + row.description + "</span>";
                        }},
                        { data: 'skills', name:'In Skills', render: function(data, type, row) {
                                return "<span class='" + row.skills_color_class + "'>" + row.skills + "</span>";
                        }},
                        { data: 'title_color_class', name:'title_color_class', visible:false},
                        { data: 'description_color_class', name:'description_color_class', visible:false},
                        { data: 'skills_color_class', name:'skills_color_class', visible:false},
                        { data: 'Action', name:null, orderable: false, render:function(data, type, row) {
                            return "<button id='btn_"+row.id +"'class='btn btn-tools-green edit last-added' data-bs-toggle='modal' data-bs-target='#keywords-edit-modal'>Edit</button><button class='btn btn-danger ms-3 remove' data-bs-toggle='modal' data-bs-target='#keywords-remove-modal'>Remove</button>";
                        } }
                    ],
                    serverSide: false, // pagination on the client
                    processing: true,
                    drawCallback: function(settings) {
                        $('button.last-added').each(function(idx, el){
                            const $el = $(el);
                            const td = $el.closest('td').addClass('text-muted').addClass('text-center');
                            const new_row_id = $el.attr('id').split('_')[1];
                            $el.removeClass('last-added');
                            td.attr('id', 'action_'+new_row_id);
                        });
                    }
                });

                $('#keywords-tables-container').on('click', 'button.edit', function() {
                    const $that = $(this);
                    const job_id = $that.attr('id').split('_')[1];
                });
                $('div#keywords-modal').on('click', 'button.add', function(e){
                    e.preventDefault();

                    const $that = $(this);
                    const form = $that.closest('.modal').find('form');
                    const keyword = form.find('input#block-form-keyword').val();
                    const in_title = form.find('input#block-form-title').prop('checked');
                    const in_description = form.find('input#block-form-description').prop('checked');
                    const in_skills = form.find('input#block-form-skills').prop('checked');

                    axios.post('/filters/excluded_keywords', {
                        action:'add',
                        keyword: keyword,
                        in_title:in_title,
                        in_description:in_description,
                        in_skills:in_skills
                    }).then(function (response) {
                        let new_row_id;
                        if(response.data['exists']){
                            alert('This keyword already exists')
                        }
                        else{
                            response.data.data.forEach(function(item) {
                                new_row_id = item.id;
                                keywords_table.row.add({
                                    "id": item.id,
                                    "keyword": item.keyword,
                                    "title": item.title,
                                    "description": item.description,
                                    "skills": item.skills,
                                    "title_color_class": item.title_color_class,
                                    "description_color_class": item.description_color_class,
                                    "skills_color_class": item.skills_color_class,
                                    "Action":''
                                }).draw(false);
                            });
                        }

                    }).catch(function (error) {

                    });

                });
                $('div#keywords-edit-modal').on('click', 'button.edit', function(e){
                    e.preventDefault();

                    const $that = $(this);
                    const form = $that.closest('.modal').find('form');
                    const keyword = form.find('input#edit-form-keyword').val();
                    const in_title = form.find('input#edit-form-title').prop('checked');
                    const in_description = form.find('input#edit-form-description').prop('checked');
                    const in_skills = form.find('input#edit-form-skills').prop('checked');

                    axios.post('/filters/excluded_keywords', {
                        action:'edit',
                        keyword_id: current_keyword_id,
                        keyword: keyword,
                        in_title:in_title,
                        in_description:in_description,
                        in_skills:in_skills
                    }).then(function (response) {
                        current_keyword_id = null;
                        response.data.data.forEach(function(item) {
                            console.log('GG response')
                            console.log(item)
                            const row = {
                                "id": item.id,
                                "keyword": item.keyword,
                                "title": item.title,
                                "description": item.description,
                                "skills": item.skills,
                                "title_color_class": item.title_color_class,
                                "description_color_class": item.description_color_class,
                                "skills_color_class": item.skills_color_class,
                                "Action":''
                            }
                            keywords_table.row(current_tr).data(row).draw(false);
                            current_tr = null;
                        });
                    }).catch(function (error) {

                    });

                });
                $('div#keywords-modal').on('hidden.bs.modal', function () {
                    const form = $(this).closest('.modal').find('form');
                    form[0].reset();
                });
            });
        </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">
            <ul class="nav nav-tabs nav-tabs-block justify-content-start" role="tablist">
                <li class="nav-item">
                    <button class="nav-link active" id="btabs-static-countries-tab" data-bs-toggle="tab" data-bs-target="#btabs-static-countries" role="tab" aria-controls="btabs-static-countries" aria-selected="true">Excluded Countries</button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" id="btabs-static-keywords-tab" data-bs-toggle="tab" data-bs-target="#btabs-static-keywords" role="tab" aria-controls="btabs-static-keywords" aria-selected="false">Excluded Keywords</button>
                </li>
            </ul>
            <div class="block-content tab-content">
                <div class="tab-pane" id="btabs-static-keywords" role="tabpanel" aria-labelledby="btabs-static-keywords-tab" tabindex="0">
                    <div class="block block-rounded" id="keywords-tables-container">
                        <div class="block-header block-header-default justify-content-end">
                            <button class="btn btn-primary add-keyword" data-bs-toggle="modal" data-bs-target="#keywords-modal">Add Keyword</button>
                        </div>
                        <div class="block-content block-content-full table-responsive fs-5">
                            <x-page.data-table jsDataTableClass="js-dataTable-full" dataTableId="keywords_table">
                                <thead>
                                <tr>
                                    <th>id</th>
                                    <th>Keyword</th>
                                    <th>In Title</th>
                                    <th>In Description</th>
                                    <th>In Skills</th>
                                    <th class="hidden"></th>
                                    <th class="hidden"></th>
                                    <th class="hidden"></th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach ($keywords_data as $i => $keyword)
                                    <tr>
                                        <td>{{$keyword['id']}}</td>
                                        <td>{{$keyword['keyword']}}</td>
                                        <td>{{$keyword['title']}}</td>
                                        <td>{{$keyword['description']}}</td>
                                        <td>{{$keyword['skills']}}</td>
                                        <td>{{$keyword['title_color_class']}}</td>
                                        <td>{{$keyword['description_color_class']}}</td>
                                        <td>{{$keyword['skills_color_class']}}</td>
                                        <td></td>
                                    </tr>
                                @endforeach
                            </x-page.data-table>
                        </div>
                    </div>
                </div>
                <div class="tab-pane active" id="btabs-static-countries" role="tabpanel" aria-labelledby="btabs-static-countries-tab" tabindex="0">
                    <div class="block block-rounded" id="countries-tables-container">
                        <div class="block-content block-content-full table-responsive fs-5">
                            <x-page.data-table jsDataTableClass="js-dataTable-full" dataTableId="countries_table">
                                <thead>
                                <tr>
                                    <th>id</th>
                                    <th>Country Name</th>
                                    <th>Region</th>
                                    <th>Status</th>
                                    <th></th>
                                </tr>
                                </thead>
                                <tbody>
                                @foreach ($country_data as $i => $country)
                                    <tr>
                                        <td>{{$country->id}}</td>
                                        <td class="text-muted fs-4">
                                            @if($country->excluded)
                                                <span class="status text-danger">{{$country->name}}</span>
                                            @else
                                                <span class="status text-info">{{$country->name}}</span>
                                            @endif
                                        </td>
                                        <td class="text-muted text-left">
                                            <span>{{$country->region}}</span>
                                        </td>
                                        <td class="text-muted text-left">
                                            @if($country->excluded)
                                                <span class="status text-danger">Excluded</span>
                                            @else
                                                <span class="status text-info">Included</span>
                                            @endif
                                        </td>
                                        <td class="text-muted text-center" id="action_{{$country->id}}">
                                            @if($country->excluded)
                                                <button class="btn btn-tools-green action include">Include</button>
                                            @else
                                                <button class="btn btn-tools-green action exclude">Exclude</button>
                                            @endif
                                        </td>
                                    </tr>
                                @endforeach
                                </tbody>

                            </x-page.data-table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- END Dynamic Table Full -->

        <div class="modal fade" id="keywords-modal" tabindex="-1" role="dialog" aria-labelledby="modal-block-fadein" 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">Add Keyword To Exclude</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">
                            <form action="be_blocks_forms.html" method="POST">
                                <div class="block block-rounded">
                                    <div class="block-content">
                                        <div class="row justify-content-center py-sm-3 py-md-5">
                                            <div class="col-sm-10 col-md-8">
                                                <div class="mb-4">
                                                    <label class="form-label" for="block-form-keyword">Keyword</label>
                                                    <input type="text" class="form-control" id="block-form-keyword" name="block-form-keyword" placeholder="Enter a keyword..">
                                                </div>
                                                <div class="mb-4">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" value="" id="block-form-title" name="block-form-title" checked>
                                                        <label class="form-check-label" for="block-form-title">In Title</label>
                                                    </div>
                                                </div>
                                                <div class="mb-4">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" value="" id="block-form-description" name="block-form-description" checked>
                                                        <label class="form-check-label" for="block-form-description">In Description</label>
                                                    </div>
                                                </div>
                                                <div class="mb-4">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" value="" id="block-form-skills" name="block-form-skills" checked>
                                                        <label class="form-check-label" for="block-form-skills">In Skills</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </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 add" data-bs-dismiss="modal">Add</button>
                            <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-edit-modal" tabindex="-1" role="dialog" aria-labelledby="modal-block-fadein" 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">Edit Keyword To Exclude</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">
                            <form action="be_blocks_forms.html" method="POST">
                                <div class="block block-rounded">
                                    <div class="block-content">
                                        <div class="row justify-content-center py-sm-3 py-md-5">
                                            <div class="col-sm-10 col-md-8">
                                                <div class="mb-4">
                                                    <label class="form-label" for="block-form-keyword">Keyword</label>
                                                    <input type="text" class="form-control" id="edit-form-keyword" name="edit-form-keyword" value="" placeholder="Enter a keyword..">
                                                </div>
                                                <div class="mb-4">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" value="" id="edit-form-title" name="edit-form-title" checked>
                                                        <label class="form-check-label" for="edit-form-title">In Title</label>
                                                    </div>
                                                </div>
                                                <div class="mb-4">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" value="" id="edit-form-description" name="edit-form-description" checked>
                                                        <label class="form-check-label" for="edit-form-description">In Description</label>
                                                    </div>
                                                </div>
                                                <div class="mb-4">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" value="" id="edit-form-skills" name="edit-form-skills" checked>
                                                        <label class="form-check-label" for="edit-form-skills">In Skills</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </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 edit" data-bs-dismiss="modal">Edit</button>
                            <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-remove-modal" tabindex="-1" role="dialog" aria-labelledby="modal-block-fadein" 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">Remove Keyword</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">
                            <h3>Are you sure that you want to remove this keyword?</h3>
                        </div>
                        <div class="block-content block-content-full text-end bg-body">
                            <button type="button" class="btn btn-sm btn-alt-primary remove" data-bs-dismiss="modal">Yes</button>
                            <button type="button" class="btn btn-sm btn-alt-secondary" data-bs-dismiss="modal">No</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </x-page.content-section>
    <!-- END Page Content -->
</x-app-layout>