<!doctype html>
<html lang="{{ 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="{{ csrf_token() }}">
    <title>{{ config('app.name', 'ISP Billing System') }}</title>

    <!-- App CSS copied from legacy project (served from public/assets) -->
    <link href="{{ asset('assets/css/lib/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/css/lib/dataTables.min.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/js/lib/select2/css/select2.min.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/css/style.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/css/remixicon.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/css/lib/flatpickr.min.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/css/lib/full-calendar.css') }}" rel="stylesheet">
    <link href="{{ asset('assets/css/isp-admin-theme.css') }}" rel="stylesheet">
    @stack('styles')
    <style>
        body {
            min-height: 100vh;
        }
        .main-wrapper {
            margin-left: 260px;
            transition: margin-left .25s ease;
        }
        body.sidebar-collapsed .main-wrapper {
            margin-left: 72px;
        }
        @media (max-width: 992px) {
            .main-wrapper {
                margin-left: 0 !important;
            }
        }
        main.content-wrapper {
            min-height: calc(100vh - 80px);
            padding: 1.5rem 1rem 2rem;
            overflow-x: hidden;
        }
        .app-page-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: 48px;
            margin: 0 0 1rem;
        }
        .app-page-header h1,
        .app-page-header h2,
        .app-page-header h3 {
            margin: 0;
            font-size: 1.35rem !important;
            font-weight: 750;
            line-height: 1.25;
        }
        /* Page headers are intentionally title-only across the admin system. */
        .app-page-header > p,
        .app-page-header > div > p,
        .app-page-header .page-subtitle,
        .app-page-header .text-muted.mb-0 {
            display: none !important;
        }
        @media (max-width: 576px) {
            .app-page-header { min-height: 40px; margin-bottom: .75rem; }
            .app-page-header h1,
            .app-page-header h2,
            .app-page-header h3 { font-size: 1.15rem !important; }
        }
    </style>
</head>
<body>
    <div id="app" class="app-root">
        @include('layouts.navbar')
        <div class="main-wrapper d-flex">
            @include('layouts.sidebar')
            <main class="content-wrapper flex-fill">
                <div class="container-fluid">
                    @if (isset($header))
                        <header class="app-page-header">
                            {{ $header }}
                        </header>
                    @endif
                    <script id="flashNotifications" type="application/json">@json(['status' => session('status'), 'success' => session('success'), 'error' => session('error')])</script>

                    {{ $slot }}
                </div>
                @include('layouts.footer')
            </main>
        </div>
    </div>

    <!-- App JS copied from legacy project (served from public/assets) -->
    <script src="{{ asset('assets/js/lib/jquery-3.7.1.min.js') }}"></script>
    <script src="{{ asset('assets/js/lib/bootstrap.bundle.min.js') }}"></script>
    <script src="{{ asset('assets/js/lib/dataTables.min.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.print.min.js"></script>
    <script src="{{ asset('assets/js/lib/select2/js/select2.min.js') }}"></script>
    <script src="{{ asset('assets/js/lib/sweetalert2/sweetalert2.all.min.js') }}"></script>
    <script src="{{ asset('assets/js/lib/apexcharts.min.js') }}"></script>
    <script src="{{ asset('assets/js/flatpickr.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/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;
            }
        }
    </script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="{{ asset('assets/js/lib/iconify-icon.min.js') }}"></script>
    <script src="{{ asset('assets/js/app.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function(){
            try{ if(window.feather) feather.replace(); }catch(e){}
            try{ if(window.Iconify){} }catch(e){}
            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) {}
            }
        });
    </script>
    @stack('scripts' )
</body>
</html>
