
<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title><?php echo $__env->yieldContent('title', config('app.name', 'RateMyPay')); ?></title>

        <link rel="icon" type="image/png" href="/favicon.png">

        <?php echo app('Illuminate\Foundation\Vite')(['resources/css/app.css', 'resources/js/app.js']); ?>


    </head>

    <body class="bgwhite ">
        
        
        <?php echo $__env->make('components.header', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

        
        <main>
            <?php echo $__env->yieldContent('content'); ?>
        </main>

        
        <?php echo $__env->make('components.footer', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
        <?php echo $__env->make('salary.modal-register', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

    </body>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

    <?php echo $__env->yieldContent('scripts'); ?>
    <script>
            function openRegisterModal(url) {
                $('#get_started_modal').attr('href', url ?? '/login');
                $("#myDialog").attr("open", true);
            }



            function closeRegisterModal() {
                $("#myDialog").removeAttr("open");
            }
            window.openRegisterModal = openRegisterModal;
            window.closeRegisterModal = closeRegisterModal;
            $(document).ready(function () {
            // Mobile menu toggle
            $("#mobile-menu-button").on("click", function () {
                $("#mobile-menu").toggleClass("hidden");
            });
            // User menu toggle
            $("#user-menu-button").on("click", function () {
                $("#user-menu-dropdown").toggleClass("hidden");
            });
        });
            </script>


    <script>
        const suggestions = document.getElementById('suggestions');
        let countries = [];


            const input = document.getElementById('location');
            if (input) {
                // Fetch all countries from REST Countries API
                fetch('https://restcountries.com/v3.1/all?fields=name,logo')
                    .then(res => res.json())
                    .then(data => {
                        countries = data.map(c => c.name.common).sort();
                    });

            // Show suggestions as user types
            input.addEventListener('input', () => {
                const query = input.value.toLowerCase();
                suggestions.innerHTML = '';
                if (!query) {
                    suggestions.classList.add('hidden');
                    return;
                }
                const matches = countries.filter(c => c.toLowerCase().includes(query)).slice(0, 10);
                matches.forEach(country => {
                    const li = document.createElement('li');
                    li.textContent = country;
                    li.className =
                        " bg-white text-black text-left px-4 py-1  cursor-pointer hover:bg-gray-200";
                    li.addEventListener('click', () => {
                        input.value = country;
                        suggestions.classList.add('hidden');
                    });
                    suggestions.appendChild(li);
                });
                suggestions.classList.toggle('hidden', matches.length === 0);
            });

        }



            // Job autocomplete
            var $jobInput = $('#job_title');
            var $suggestionsList = $('#job-suggestions');
            var timeout = null;
            $jobInput.on('input', function () {
                var query = $jobInput.val().trim();
                if (query.length < 2) {
                    $suggestionsList.addClass('hidden').empty();
                    return;
                }

            clearTimeout(timeout);
            timeout = setTimeout(function () {
                $.getJSON('/google-job-autocomplete', {
                    q: query
                })
                    .done(function (data) {
                        $suggestionsList.empty();
                        if (!data || data.length === 0) {
                            $suggestionsList.addClass('hidden');
                            return;
                        }
                        $.each(data, function (_, item) {
                            var $li = $('<li>')
                                .text(item.displayTitle)
                                .addClass(
                                    'px-3 py-2 hover:bg-blue-100 cursor-pointer text-sm text-left'
                                )
                                .click(function () {
                                    $jobInput.val($(this).text());
                                    $suggestionsList.addClass('hidden');
                                });
                            $suggestionsList.append($li);
                        });
                        $suggestionsList.removeClass('hidden');
                    })
                    .fail(function (err) {
                        console.error(err);
                        $suggestionsList.addClass('hidden');
                    });
            }, 300);
        });

                    </script>

</html><?php /**PATH /var/www/ratemypay/resources/views/layouts/app.blade.php ENDPATH**/ ?>