<!doctype html>
<html lang="<?php echo e(str_replace('_', '-', app()->getLocale())); ?>">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
    <title><?php echo e(config('app.name', 'ISP Billing System')); ?></title>

    <!-- App CSS copied from legacy project (served from public/assets) -->
    <link href="<?php echo e(asset('assets/css/lib/bootstrap.min.css')); ?>" rel="stylesheet">
    <link href="<?php echo e(asset('assets/css/lib/dataTables.min.css')); ?>" rel="stylesheet">
    <link href="<?php echo e(asset('assets/js/lib/select2/css/select2.min.css')); ?>" rel="stylesheet">
    <link href="<?php echo e(asset('assets/css/style.css')); ?>" rel="stylesheet">
    <link href="<?php echo e(asset('assets/css/remixicon.css')); ?>" rel="stylesheet">
    <link href="<?php echo e(asset('assets/css/lib/flatpickr.min.css')); ?>" rel="stylesheet">
    <link href="<?php echo e(asset('assets/css/lib/full-calendar.css')); ?>" rel="stylesheet">
    <link href="<?php echo e(asset('assets/css/isp-admin-theme.css')); ?>?v=<?php echo e(filemtime(public_path('assets/css/isp-admin-theme.css'))); ?>" rel="stylesheet">
    <?php echo $__env->yieldPushContent('styles'); ?>
</head>

<body>
    <style>
        :root {
            --sidebar-width: 260px;
            --sidebar-collapsed-width: 72px;
        }

        html, body {
            max-width: 100%;
            overflow-x: hidden;
        }

        img, svg, canvas {
            max-width: 100%;
        }

        .table-responsive {
            width: 100%;
            -webkit-overflow-scrolling: touch;
        }

        .dataTables_wrapper,
        .card {
            max-width: 100%;
        }

        .btn {
            white-space: normal;
        }

        #sidebarModern {
            position: fixed;
            left: 0;
            top: 0;
            height: 100vh;
            width: var(--sidebar-width);
            z-index: 1030;
        }

        .navbar-header {
            position: fixed;
            top: 0;
            left: var(--sidebar-width);
            right: 0;
            z-index: 1025;
            background: #fefefe;
        }

        .content-wrapper {
            margin-left: var(--sidebar-width);
            padding: 100px 20px 40px 20px;
            min-height: 100vh;
            transition: margin-left .2s ease;
        }

        #sidebarModern.collapsed {
            width: var(--sidebar-collapsed-width);
        }

        body.sidebar-collapsed .content-wrapper {
            margin-left: var(--sidebar-collapsed-width);
        }

        @media (max-width:992px) {
            #sidebarModern {
                transform: translateX(-100%);
            }

            #sidebarModern.show {
                transform: translateX(0);
            }

            .navbar-header {
                left: 0;
            }

            .content-wrapper {
                margin-left: 0;
                padding: 80px 12px 32px;
            }

            .navbar-header {
                width: 100%;
            }
        }

        @media (max-width:576px) {
            .content-wrapper {
                padding-left: 8px;
                padding-right: 8px;
            }

            .card-body {
                padding: 1rem;
            }
        }
    </style>

    <div id="app" class="app-root">
        <?php echo $__env->make('layouts.navbar', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
        <div class="main-wrapper d-flex">
            <?php echo $__env->make('layouts.sidebar', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
            <main class="content-wrapper flex-fill">
                <div class="container-fluid">

                    <?php if(isset($header)): ?>
                        <header class="app-page-header">
                            <?php echo e($header); ?>

                        </header>
                    <?php endif; ?>

                    
                    <script id="flashNotifications" type="application/json"><?php echo json_encode(['status' => session('status'), 'success' => session('success'), 'error' => session('error')]) ?></script>
                    
                    <?php echo e($slot); ?>

                </div>
                <?php echo $__env->make('layouts.footer', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
            </main>
        </div>
    </div>

    <!-- App JS copied from legacy project (served from public/assets) -->
    <script src="<?php echo e(asset('assets/js/lib/jquery-3.7.1.min.js')); ?>"></script>
    <script src="<?php echo e(asset('assets/js/lib/bootstrap.bundle.min.js')); ?>"></script>
    <script src="<?php echo e(asset('assets/js/lib/dataTables.min.js')); ?>"></script>
    <script src="<?php echo e(asset('assets/js/lib/select2/js/select2.min.js')); ?>"></script>
    <script src="<?php echo e(asset('assets/js/lib/sweetalert2/sweetalert2.all.min.js')); ?>"></script>
    <script src="<?php echo e(asset('assets/js/lib/apexcharts.min.js')); ?>"></script>
    <script src="<?php echo e(asset('assets/js/flatpickr.js')); ?>"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="<?php echo e(asset('assets/js/lib/iconify-icon.min.js')); ?>"></script>
    <script src="<?php echo e(asset('assets/js/app.js')); ?>"></script>
    <script src="<?php echo e(asset('assets/js/axios.min.js')); ?>"></script>
    <script>
        const appCsrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
        if (window.jQuery && appCsrfToken) {
            window.jQuery.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': appCsrfToken,
                    'X-Requested-With': 'XMLHttpRequest'
                }
            });
        }
        if (window.axios) {
            window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
            if (appCsrfToken) {
                window.axios.defaults.headers.common['X-CSRF-TOKEN'] = appCsrfToken;
            }
        }
        document.addEventListener('DOMContentLoaded', function() {
            try {
                if (window.feather) feather.replace();
            } catch (e) {}
            document.querySelectorAll('.dt-search input, .dataTables_filter input').forEach(function(input) {
                input.placeholder = 'Search records...';
                input.setAttribute('aria-label', 'Search table records');
            });
            const flashes = document.getElementById('flashNotifications');
            if(flashes && window.showToast){
                try { const messages = JSON.parse(flashes.textContent); [['status','success'],['success','success'],['error','error']].forEach(([key,type])=>{ if(messages[key]) showToast(messages[key],type); }); } catch(e) {}
            }
        });
        if (window.jQuery) {
            window.jQuery(document).on('init.dt draw.dt', function() {
                document.querySelectorAll('.dt-search input, .dataTables_filter input').forEach(function(input) {
                    input.placeholder = 'Search records...';
                    input.setAttribute('aria-label', 'Search table records');
                });
            });
        }
        <?php if(app()->getLocale()==='bn'): ?>
        document.addEventListener('DOMContentLoaded', function(){
            const words=<?php echo json_encode(__('runtime'), 15, 512) ?>; const skip=new Set(['SCRIPT','STYLE','CODE','PRE','TEXTAREA']);
            const walker=document.createTreeWalker(document.body,NodeFilter.SHOW_TEXT); let node;
            while(node=walker.nextNode()){if(skip.has(node.parentElement?.tagName))continue;const raw=node.nodeValue, key=raw.trim();if(key&&words[key])node.nodeValue=raw.replace(key,words[key]);}
            document.querySelectorAll('input[placeholder],textarea[placeholder]').forEach(el=>{const key=el.placeholder.trim();if(words[key])el.placeholder=words[key];});
        });
        <?php endif; ?>

        $(document).on('xhr.dt', function(event, settings, json) {
            if (!json || !Array.isArray(json.sync_status)) return;

            let banner = document.getElementById('mikrotik-sync-status');
            if (!banner) {
                banner = document.createElement('div');
                banner.id = 'mikrotik-sync-status';
                banner.className = 'mikrotik-sync-status mb-3';
                const container = document.querySelector('.content-wrapper > .container-fluid');
                const header = container?.querySelector('.app-page-header');
                if (container) header ? header.insertAdjacentElement('afterend', banner) : container.prepend(banner);
            }

            banner.innerHTML = '';
            json.sync_status.forEach(function(router) {
                const item = document.createElement('span');
                item.className = 'router-sync-pill ' + (router.connected ? 'is-online' : (router.has_snapshot ? 'is-stale' : 'is-offline'));
                const state = router.connected ? 'Live' : (router.has_snapshot ? 'Offline · last data' : 'No connection');
                item.textContent = (router.router_name || 'MikroTik') + ': ' + state;
                if (router.synced_at) item.title = 'Last sync: ' + router.synced_at;
                banner.appendChild(item);
            });
        });
    </script>
    <?php echo $__env->yieldPushContent('scripts'); ?>
</body>

</html>
<?php /**PATH D:\herd\billing\laravel-app\resources\views/layouts/app.blade.php ENDPATH**/ ?>