<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Dashboard Admin – Sumans</title>
    @vite(['resources/css/app.css','resources/css/master.css', 'resources/js/app.js', 'resources/js/master.js'])
    @stack('styles')

</head>
<body>

<div class="sidebar-overlay" id="overlay" onclick="closeSidebar()"></div>

<aside class="sidebar" id="sidebar">
    <div class="sidebar-logo">
        <div class="logo-circle">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
                <circle cx="10" cy="10" r="8" stroke="white" stroke-width="1.5"/>
                <path d="M7 10.5L9 12.5L13 8" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
        </div>
        <div>
            <div class="logo-text">Sumans</div>
            <div class="logo-sub">Admin Dashboard</div>
        </div>
        <button class="sidebar-close" onclick="closeSidebar()" aria-label="Tutup menu">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
                <path d="M3 3l10 10M13 3L3 13"/>
            </svg>
        </button>
    </div>

    <nav class="sidebar-nav">
        <a class="nav-item" href="{{route('dashboard.view')}}" data-page="dashboard">
            <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                <rect x="3" y="3" width="8" height="8" rx="2"/>
                <rect x="13" y="3" width="8" height="8" rx="2"/>
                <rect x="3" y="13" width="8" height="8" rx="2"/>
                <rect x="13" y="13" width="8" height="8" rx="2"/>
            </svg>
            Dashboard
        </a>

        @canany(['isAdmin', 'isSuperAdmin'])
        <div class="nav-item" onclick="toggleSub('pendaftaran-sub', this)" data-group="pendaftaran">
            <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                <path d="M12 12a4 4 0 1 0-4-4 4 4 0 0 0 4 4z"/>
                <path d="M5 21v-1a7 7 0 0 1 14 0v1"/>
                <path d="M19 8v6"/>
                <path d="M16 11h6"/>
            </svg>
            Pendaftaran
            <svg class="nav-arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8">
                <path d="M4 6l4 4 4-4"/>
            </svg>
        </div>
        <div class="nav-sub" id="pendaftaran-sub">
            <a class="nav-sub-item" href="{{route('administrator.view')}}" data-page="pendaftaran">Administrator</a>
            <a class="nav-sub-item" href="{{route('user.view')}}" data-page="pendaftaran-tambah">Users</a>
        </div>

        <a class="nav-item" href="{{route('customer.view')}}" data-page="customer">
            <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                <path d="M17 21v-2a4 4 0 0 0-4-4H7a4 4 0 0 0-4 4v2"/>
                <circle cx="10" cy="7" r="4"/>
                <path d="M21 21v-2a3.5 3.5 0 0 0-2.5-3.35"/>
                <path d="M16 3.3a4 4 0 0 1 0 7.4"/>
            </svg>
            List Customer
        </a>
        @endcanany

        <a class="nav-item" href="{{route('report.view')}}" data-page="report">
            <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                <path d="M4 19V5"/>
                <path d="M4 19h16"/>
                <path d="M8 16v-5"/>
                <path d="M12 16V8"/>
                <path d="M16 16v-9"/>
            </svg>
            Laporan
        </a>

        @canany(['isFA', 'isAgronomist', 'isMK', 'isSuperAdmin', 'isAdmin'])
        <div class="nav-item" onclick="toggleSub('management-sub', this)" data-group="management">
            <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                <path d="M19.4 15a1.7 1.7 0 0 0 .34 1.87l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.7 1.7 0 0 0-1.87-.34 1.7 1.7 0 0 0-1 1.54V21a2 2 0 0 1-4 0v-.1a1.7 1.7 0 0 0-1-1.54 1.7 1.7 0 0 0-1.87.34l-.06.06A2 2 0 1 1 4.6 16.93l.06-.06a1.7 1.7 0 0 0 .34-1.87 1.7 1.7 0 0 0-1.54-1H3a2 2 0 0 1 0-4h.1a1.7 1.7 0 0 0 1.54-1 1.7 1.7 0 0 0-.34-1.87l-.06-.06A2 2 0 1 1 7.07 4.6l.06.06a1.7 1.7 0 0 0 1.87.34h0A1.7 1.7 0 0 0 10 3.46V3a2 2 0 0 1 4 0v.1a1.7 1.7 0 0 0 1 1.54h0a1.7 1.7 0 0 0 1.87-.34l.06-.06A2 2 0 1 1 21.4 7.07l-.06.06a1.7 1.7 0 0 0-.34 1.87V9"/>
            </svg>
            Management
            <svg class="nav-arrow" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8">
                <path d="M4 6l4 4 4-4"/>
            </svg>
        </div>
        <div class="nav-sub" id="management-sub">
            @canany(['isFA', 'isAgronomist'])
                <a class="nav-sub-item" href="{{route('management-single.view')}}" data-page="management-single">Modul Saya</a>
            @endcanany
            @canany(['isAgronomist', 'isMK', 'isSuperAdmin', 'isAdmin'])
                <a class="nav-sub-item" href="{{route('management.view')}}" data-page="management">Plan Visit</a>
            @endcanany
        </div>
        @endcanany
    </nav>

</aside>

<!-- MAIN -->
<div class="main" id="main">

    <!-- TOPBAR -->
    <header class="topbar">
        <button class="topbar-menu" aria-label="Toggle menu">
            <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round">
                <path d="M2 4h14M2 9h14M2 14h14"/>
            </svg>
        </button>
        <span class="topbar-title" id="topbar-title">Dashboard</span>
        <div class="topbar-right">
            <button class="user-dropdown" id="userDropdownBtn">
                <div class="user-info">
                    <span class="user-name">Administrator</span>
                    <span class="user-role">Super Admin</span>
                </div>
                <div class="avatar">A</div>
                <svg class="dropdown-arrow" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <polyline points="6,9 12,15 18,9"/>
                </svg>
            </button>

            <!-- Dropdown Menu -->
            <div class="dropdown-menu" id="dropdownMenu">
                <a href="#" class="dropdown-item" onclick="changePassword()">
                    <svg class="dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M12 7v14"/>
                        <path d="M10 15H8a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-2z"/>
                    </svg>
                    <span>Ganti Password</span>
                </a>

                <a href="#" class="dropdown-item" onclick="logout()">
                    <svg class="dropdown-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
                        <polyline points="16,17 21,12 16,7"/>
                        <line x1="21" y1="12" x2="9" y2="12"/>
                    </svg>
                    <span>Keluar</span>
                </a>
            </div>

            <form id="logout-form" action="{{ route('auth.logout') }}" method="POST" style="display: none;">
                @csrf
            </form>
        </div>
    </header>

    <main class="content">
        @yield('content')


    </main>
</div>

@stack('scripts')

</body>
</html>
