@extends('layouts.app')

@section('title')@yield('page-title', 'Dashboard') - United Motors @endsection

@section('styles')
<link rel="stylesheet" href="{{ asset('assets/css/layout.css') }}">
@yield('page-styles')
@endsection

@section('body-class')class="ps-page"@endsection

@section('content')
<div class="ps-wrapper">

    @include('partials.sidebar')

    <!-- ── MAIN AREA ─────────────────────────────────────── -->
    <div class="ps-main">

        @include('partials.topbar')

        <!-- Breadcrumb -->
        <div class="ps-breadcrumb">
            @yield('breadcrumb')
            <h4 class="ps-page-title">@yield('page-heading')</h4>
        </div>

        @yield('page-content')

    </div><!-- end ps-main -->
</div><!-- end ps-wrapper -->
@endsection

@section('scripts')
<script>
    /* ── Nav Mobile Toggle ──────────────────────────────────────── */
    const psNav = document.getElementById('psNav');
    const navOverlay = document.getElementById('navOverlay');
    function toggleNav() {
        psNav.classList.toggle('open');
        navOverlay.classList.toggle('open');
    }
    document.getElementById('navToggle')?.addEventListener('click', toggleNav);
    document.getElementById('navOverlay')?.addEventListener('click', toggleNav);
    document.getElementById('navClose')?.addEventListener('click', toggleNav);

    /* ── User Dropdown Toggle ──────────────────────────────────── */
    const userMenu = document.getElementById('userMenu');
    const userDropdown = document.getElementById('userDropdown');

    userMenu?.addEventListener('click', (e) => {
        e.stopPropagation();
        userDropdown?.classList.toggle('show');
    });

    document.addEventListener('click', (e) => {
        if (!userMenu?.contains(e.target)) {
            userDropdown?.classList.remove('show');
        }
    });
</script>
@yield('page-scripts')
@endsection