<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', 'Dashboard') — Super Admin</title>
    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
    <link href="{{ asset('css/axis-sadmin.css') }}?v={{ filemtime(public_path('css/axis-sadmin.css')) }}" rel="stylesheet">
    @stack('styles')
</head>
<body>
<div id="sa-sidebar-backdrop" aria-hidden="true"></div>
<nav id="sidebar">
    <div class="sa-brand">
        <div class="icon"><i class="bi bi-shield-lock"></i></div>
        <div>
            <span>Super Admin</span><br>
            <span class="sa-badge">SYSTEM</span>
        </div>
    </div>
    <div class="pt-2">
        <a href="{{ route('sadmin.dashboard') }}" class="nav-link-sa {{ request()->routeIs('sadmin.dashboard') ? 'active' : '' }}">
            <i class="bi bi-speedometer2"></i> Dashboard
        </a>
        <div class="sa-section">Companies</div>
        <a href="{{ route('sadmin.companies') }}" class="nav-link-sa {{ request()->routeIs('sadmin.companies*') ? 'active' : '' }}">
            <i class="bi bi-credit-card"></i> Subscription
        </a>
        <a href="{{ route('sadmin.companies.create') }}" class="nav-link-sa {{ request()->routeIs('sadmin.companies.create') ? 'active' : '' }}">
            <i class="bi bi-plus-circle"></i> Add Company
        </a>
        <div class="sa-section">System</div>
        <a href="{{ route('sadmin.branding') }}" class="nav-link-sa {{ request()->routeIs('sadmin.branding*') ? 'active' : '' }}">
            <i class="bi bi-image"></i> Application Branding
        </a>
        <div class="sa-section">Monitoring</div>
        <a href="{{ route('sadmin.online-users') }}" class="nav-link-sa {{ request()->routeIs('sadmin.online-users') ? 'active' : '' }}">
            <i class="bi bi-people"></i> Online Users
        </a>
        <a href="{{ route('sadmin.audit-logs') }}" class="nav-link-sa {{ request()->routeIs('sadmin.audit-logs') ? 'active' : '' }}">
            <i class="bi bi-journal-text"></i> Audit Logs
        </a>
        <div class="sa-section">Account</div>
        <form action="{{ route('sadmin.logout') }}" method="POST">
            @csrf
            <button type="submit" class="nav-link-sa w-100 border-0 text-start bg-transparent" style="color:rgba(255,100,100,.8)">
                <i class="bi bi-box-arrow-right"></i> Logout
            </button>
        </form>
    </div>
</nav>

<header id="topbar">
    <button type="button" id="saSidebarToggle" class="btn btn-link text-dark p-0 me-2 d-md-none" aria-label="Open menu">
        <i class="bi bi-list" style="font-size:22px"></i>
    </button>
    <i class="bi bi-shield-lock text-primary me-2 d-none d-md-inline" style="font-size:18px"></i>
    <span style="font-weight:600;color:#0D2E54">{{ config('app.name') }}</span>
    <span class="badge bg-danger ms-2" style="font-size:10px">SUPER ADMIN</span>
    <div class="ms-auto d-flex align-items-center gap-3">
        <span style="font-size:12px;color:#999"><i class="bi bi-clock me-1"></i>{{ now()->format('H:i') }}</span>
        <span style="font-size:13px;color:#495057">
            <i class="bi bi-person-circle me-1"></i>{{ auth('super_admin')->user()->name }}
        </span>
    </div>
</header>

<main id="main">
    <div class="page-content">
        @if(session('success'))
            <div class="alert alert-success alert-dismissible fade show" style="font-size:13px">
                <i class="bi bi-check-circle me-2"></i>{{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif
        @if(session('error'))
            <div class="alert alert-danger alert-dismissible fade show" style="font-size:13px">
                <i class="bi bi-exclamation-triangle me-2"></i>{{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        @endif
        @yield('content')
    </div>
</main>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" defer></script>
<script src="{{ asset('js/axis-core.js') }}?v={{ filemtime(public_path('js/axis-core.js')) }}" defer></script>
<script>
if (window.jQuery) {
    $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content } });
}
(function () {
    const sidebar = document.getElementById('sidebar');
    const backdrop = document.getElementById('sa-sidebar-backdrop');
    const toggle = document.getElementById('saSidebarToggle');
    function closeSidebar() {
        sidebar?.classList.remove('sa-open');
        backdrop?.classList.remove('show');
    }
    toggle?.addEventListener('click', function () {
        sidebar?.classList.toggle('sa-open');
        backdrop?.classList.toggle('show');
    });
    backdrop?.addEventListener('click', closeSidebar);
    sidebar?.querySelectorAll('a.nav-link-sa').forEach(function (link) {
        link.addEventListener('click', closeSidebar);
    });
})();

document.querySelectorAll('.btn-confirm').forEach(function (btn) {
    btn.setAttribute('data-confirm', '1');
    btn.dataset.confirmTitle = btn.dataset.title || 'Confirm';
    btn.dataset.confirmText = btn.dataset.message || 'Are you sure?';
    btn.dataset.confirmIcon = btn.dataset.icon || 'warning';
    btn.dataset.confirmColor = btn.dataset.color || '#2563eb';
    btn.dataset.confirmBtn = btn.dataset.confirm || 'Confirm';
});
</script>
@stack('scripts')
</body>
</html>
