<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', 'CRM')</title>
    <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=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="{{ asset('css/portal-theme.css') }}" rel="stylesheet">
    @stack('styles')
</head>
<body class="portal-body @auth portal-body-app @endauth">
@guest
    <main class="container portal-main portal-main-guest">
        @if(session('success'))
            <div class="alert alert-success portal-alert-success mt-3">{{ session('success') }}</div>
        @endif
        @if($errors->any())
            <div class="alert alert-danger portal-alert-danger mt-3">
                <strong>Please fix the following:</strong>
                <ul class="mb-0 mt-2">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        @yield('content')
    </main>
@endguest

@auth
<div class="portal-app">
    <div class="portal-sidebar-backdrop" id="portalSidebarBackdrop" aria-hidden="true"></div>

    @include('layouts.partials.sidebar')

    <div class="portal-main-wrap">
        @include('layouts.partials.topbar')

        <main class="portal-content">
            @if(session('success'))
                <div class="alert alert-success portal-alert-success">{{ session('success') }}</div>
            @endif

            @if(session('warning'))
                <div class="alert alert-warning border-0 rounded-3">{{ session('warning') }}</div>
            @endif

            @if($errors->any())
                <div class="alert alert-danger portal-alert-danger">
                    <strong>Please fix the following:</strong>
                    <ul class="mb-0 mt-2">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            @yield('content')
        </main>
    </div>
</div>
@endauth

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
@auth
<script>
(function () {
    var sidebar = document.getElementById('portalSidebar');
    var backdrop = document.getElementById('portalSidebarBackdrop');
    var openBtn = document.getElementById('portalSidebarOpen');
    var closeBtn = document.getElementById('portalSidebarClose');

    function openSidebar() {
        document.body.classList.add('portal-sidebar-open');
    }
    function closeSidebar() {
        document.body.classList.remove('portal-sidebar-open');
    }

    if (openBtn) openBtn.addEventListener('click', openSidebar);
    if (closeBtn) closeBtn.addEventListener('click', closeSidebar);
    if (backdrop) backdrop.addEventListener('click', closeSidebar);

    if (sidebar) {
        sidebar.querySelectorAll('.portal-sidebar-link, .portal-sidebar-sublink').forEach(function (link) {
            link.addEventListener('click', function () {
                if (window.innerWidth < 992) closeSidebar();
            });
        });
    }
})();
</script>
@endauth
@stack('scripts')
</body>
</html>
