
<!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', 'Laravel')); ?></title>
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
        <link
            href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Montserrat:wght@400;500;600;700&display=swap"
            rel="stylesheet">
        <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">
        <div class="flex overflow-hidden">
            <?php echo $__env->make('dashboard.sidebar', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>

            <main class="w-full md:w-[80%] pt-[50px] md:pt-0">
                <?php echo $__env->yieldContent('content'); ?>
            </main>
        </div>
        <?php echo $__env->make('salary.share-pay', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>


        <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>
            document.addEventListener("DOMContentLoaded", function () {
                // Wait for ApexCharts + target element to be ready
                const el = document.querySelector("#marketChart");
                if (!el) return

                const options = {
                    series: [{
                        name: "Salary Range High",
                        data: [28000, 32000, 35000, 31000, 38000, 42000, 45000]
                    },
                    {
                        name: "Salary Range Low",
                        data: [15000, 18000, 22000, 20000, 25000, 28000, 32000]
                    }
                    ],
                    chart: {
                        type: "area",
                        height: 320,
                        toolbar: {
                            show: false
                        },
                        zoom: {
                            enabled: false
                        }
                    },
                    dataLabels: {
                        enabled: false
                    },
                    stroke: {
                        curve: "smooth",
                        width: 3
                    },
                    colors: ["#6366f1", "#ec4899"],
                    fill: {
                        type: "gradient",
                        gradient: {
                            opacityFrom: 0.3,
                            opacityTo: 0.1
                        }
                    },
                    xaxis: {
                        categories: [
                            "May",
                            "June",
                            "July",
                            "August",
                            "September",
                            "October",
                            "November"
                        ],
                        axisBorder: {
                            show: false
                        },
                        axisTicks: {
                            show: false
                        }
                    },
                    yaxis: {
                        labels: {
                            formatter: val => val.toLocaleString()
                        },
                        min: 0,
                        max: 50000
                    },
                    grid: {
                        borderColor: "#f1f5f9",
                        strokeDashArray: 4
                    },
                    tooltip: {
                        y: {
                            formatter: val => val.toLocaleString()
                        }
                    },
                    legend: {
                        position: "top",
                        horizontalAlign: "left",
                        offsetY: -10
                    },
                    annotations: {
                        points: [{
                            x: "September",
                            y: 45000,
                            marker: {
                                size: 8,
                                fillColor: "#fff",
                                strokeColor: "#4f46e5",
                                strokeWidth: 3,
                                radius: 2
                            },
                            label: {
                                borderColor: "#4f46e5",
                                offsetY: -10,
                                style: {
                                    color: "#fff",
                                    background: "#4f46e5",
                                    fontSize: "12px",
                                    fontWeight: 600,
                                    padding: {
                                        left: 8,
                                        right: 8,
                                        top: 4,
                                        bottom: 4
                                    }
                                },
                                text: "$45,000"
                            }
                        }]
                    }
                };

                const chart = new ApexCharts(el, options);
                chart.render();
            });


            function toggleSubmenu(menu) {
                const submenu = document.getElementById(menu + '-submenu');
                const icon = document.getElementById(menu + '-icon');

                if (submenu) {
                    if (submenu.style.display === 'none' || submenu.style.display === '') {
                        submenu.style.display = 'block';
                        icon.classList.remove('fa-chevron-down');
                        icon.classList.add('fa-chevron-up');
                    } else {
                        submenu.style.display = 'none';
                        icon.classList.remove('fa-chevron-up');
                        icon.classList.add('fa-chevron-down');
                    }
                } else {
                    if (icon.classList.contains('fa-chevron-down')) {
                        icon.classList.remove('fa-chevron-down');
                        icon.classList.add('fa-chevron-up');
                    } else {
                        icon.classList.remove('fa-chevron-up');
                        icon.classList.add('fa-chevron-down');
                    }
                }
            }
        </script>
    </body>

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