<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title') - GriyaPadi.id</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=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">

    <link rel="shortcut icon" href="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/compiled/svg/favicon.svg"
        type="image/x-icon">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/compiled/css/app.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/compiled/css/app-dark.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/compiled/css/iconly.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

    @yield('css')

    <style>
        /* --- CUSTOM GREEN THEME  --- */
        :root {
            --primary-green: #81c408;
            --primary-hover: #6da705;
        }

        .logo a {
            font-family: 'Inter', sans-serif;
            font-weight: 600;
            font-size: 1.7rem;
        }

        .bg-primary-green {
            background-color: var(--primary-green) !important;
            color: #ffffff;
        }

        .text-primary-green {
            background-color: var(--primary-green) !important;
            color: #ffffff;
        }

        .sidebar-wrapper .sidebar-menu .sidebar-item.active .sidebar-link {
            background-color: var(--primary-green) !important;
            box-shadow: 0 5px 10px rgba(129, 196, 8, 0.3);
        }

        a {
            color: var(--primary-green);
        }

        a:hover {
            color: var(--primary-hover);
        }

        .stats-icon {
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
            width: 3rem;
            height: 3rem;
            margin-right: 0;
        }

        .stats-icon i {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            margin: 0 !important;
        }

        /* Loader/Spinner Color if exists */
        .spinner-border.text-primary {
            color: var(--primary-green) !important;
        }

        /* Pagination active color */
        .page-item.active .page-link {
            background-color: var(--primary-green) !important;
            border-color: var(--primary-green) !important;
        }

        .chat-card {
            height: 80vh;
            overflow: hidden;
            border-radius: 15px;
            background: #fff;
        }

        /* Sidebar List Scroll */
        .chat-sidebar {
            height: 100%;
            overflow-y: auto;
            border-right: 1px solid #e9ecef;
            background-color: #f2f7ff;
        }

        /* Chat Scroll */
        .chat-window {
            height: 100%;
            display: flex;
            flex-direction: column;
            background-color: #fff;
        }

        .chat-content {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
            background-color: #fafafa;
        }

        /* Item List  */
        .chat-item {
            transition: all 0.3s;
            border-bottom: 1px solid #dee2e6;
            cursor: pointer;
        }

        .chat-item:hover {
            background-color: #e9ecef;
        }

        /* Active Chat Item */
        .chat-item.active {
            background-color: rgba(129, 196, 8, 0.2);
            border-left: 4px solid var(--primary-green);
            color: #333 !important;
        }

        .chat-item.active p,
        .chat-item.active small,
        .chat-item.active h6 {
            color: #333 !important;
        }

        .btn-primary {
            background-color: var(--primary-green) !important;
            border-color: var(--primary-green) !important;
            color: #fff !important;
        }

        .btn-primary:hover,
        .btn-primary:focus,
        .btn-primary:active {
            background-color: var(--primary-hover) !important;
            border-color: var(--primary-hover) !important;
            box-shadow: 0 0 0 0.25rem rgba(129, 196, 8, 0.5) !important;
        }

        /* Tombol Outline  */
        .btn-outline-primary {
            color: var(--primary-green) !important;
            border-color: var(--primary-green) !important;
        }

        .btn-outline-primary:hover {
            background-color: var(--primary-green) !important;
            color: #fff !important;
        }

        /* Pagination  */
        .page-item.active .page-link {
            background-color: var(--primary-green) !important;
            border-color: var(--primary-green) !important;
        }

        .page-link {
            color: var(--primary-green) !important;
        }

        /* Form Check / Radio Button / Switch saat aktif */
        .form-check-input:checked {
            background-color: var(--primary-green) !important;
            border-color: var(--primary-green) !important;
        }

        ::-webkit-scrollbar {
            width: 5px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: #ccc;
            border-radius: 3px;
        }
    </style>
</head>

<body>
    <script src="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/static/js/initTheme.js"></script>

    <div id="app">
        <div id="sidebar">
            <div class="sidebar-wrapper active">
                <div class="sidebar-header position-relative">
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="logo me-md-2">
                            <a href="#" style="color: #81c408;">GriyaPadi.id</a>
                        </div>
                        <div class="sidebar-toggler x">
                            <a href="#" class="sidebar-hide d-xl-none d-block"><i class="bi bi-x bi-middle"></i></a>
                        </div>
                    </div>
                </div>

                <div class="sidebar-menu">
                    <ul class="menu">
                        <li class="sidebar-title">Menu Utama</li>

                        {{-- Menu Dashboard Admin --}}
                        @if (Auth::guard('admin')->check())

                            {{-- DASHBOARD --}}
                            <li class="sidebar-item {{ request()->is('admin/dashboard') ? 'active' : '' }}">
                                <a href="{{ route('admin.dashboard') }}" class='sidebar-link'>
                                    <i class="bi bi-grid-fill"></i> <span>Dashboard</span>
                                </a>
                            </li>

                            {{-- MASTER KATEGORI --}}
                            <li class="sidebar-item {{ request()->is('admin/kategori*') ? 'active' : '' }}">
                                <a href="{{ route('admin.kategori.index') }}" class='sidebar-link'>
                                    <i class="bi bi-tags-fill"></i> <span>Master Kategori</span>
                                </a>
                            </li>

                            {{-- VERIFIKASI PETANI --}}
                            <li class="sidebar-item {{ request()->is('admin/verifikasi*') ? 'active' : '' }}">
                                <a href="{{ route('admin.verifikasi.index') }}" class='sidebar-link'>
                                    <i class="bi bi-person-badge-fill"></i> <span>Verifikasi Petani</span>
                                </a>
                            </li>

                            {{-- MONITORING --}}
                            <li class="sidebar-item {{ request()->is('admin/monitoring*') ? 'active' : '' }}">
                                <a href="{{ route('admin.monitoring') }}" class='sidebar-link'>
                                    <i class="bi bi-eye-fill"></i> <span>Monitoring</span>
                                </a>
                            </li>

                        @endif

                        {{-- Menu Dashboard Petani --}}
                        @if (Auth::guard('petani')->check())
                            <li class="sidebar-item {{ request()->is('petani/dashboard') ? 'active' : '' }}">
                                <a href="{{ route('petani.dashboard') }}" class='sidebar-link'>
                                    <i class="bi bi-grid-fill"></i> <span>Dashboard</span>
                                </a>
                            </li>
                            <li class="sidebar-item {{ request()->is('petani/produk*') ? 'active' : '' }}">
                                <a href="{{ route('petani.produk.index') }}" class='sidebar-link'>
                                    <i class="bi bi-basket-fill"></i> <span>Kelola Produk</span>
                                </a>
                            </li>
                            <li class="sidebar-item {{ request()->is('petani/pesanan*') ? 'active' : '' }}">
                                <a href="{{ route('petani.pesanan.index') }}" class='sidebar-link'>
                                    <i class="bi bi-receipt"></i> <span>Pesanan Masuk</span>
                                </a>
                            </li>
                            <li
                                class="sidebar-item {{ request()->is('petani/pesan') || request()->is('petani/pesan/*') ? 'active' : '' }}">
                                <a href="{{ route('petani.pesan.index') }}" class='sidebar-link'>
                                    <i class="bi bi-chat-dots-fill"></i> <span>Kotak Masuk</span>
                                </a>
                            </li>
                        @endif

                        <li class="sidebar-title">Akun</li>

                        {{-- Menu Profil --}}
                        @if (Auth::guard('petani')->check())
                            <li class="sidebar-item {{ request()->is('petani/profile*') ? 'active' : '' }}">
                                <a href="{{ route('petani.profile') }}" class='sidebar-link'>
                                    <i class="bi bi-person-circle"></i> <span>Profil Saya</span>
                                </a>
                            </li>
                        @endif

                        {{-- Logout --}}
                        <li class="sidebar-item">
                            <form action="{{ route('logout') }}" method="POST">
                                @csrf
                                <button type="submit"
                                    class='sidebar-link border-0 bg-transparent text-danger w-100 text-start'>
                                    <i class="bi bi-box-arrow-left"></i> <span>Logout</span>
                                </button>
                            </form>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div id="main">
            <header class="mb-3">
                <a href="#" class="burger-btn d-block d-xl-none">
                    <i class="bi bi-justify fs-3"></i>
                </a>
            </header>

            <div class="page-heading">
                <div class="fw-bold fs-5">@yield('page-title')</div>
            </div>

            <div class="page-content">
                @yield('content')
            </div>

            <footer>
                <div class="footer clearfix mb-0 text-muted">
                    <div class="float-start">
                        <p>2025 &copy; GriyaPadi.id</p>
                    </div>
                </div>
            </footer>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/static/js/components/dark.js"></script>
    <script
        src="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/extensions/perfect-scrollbar/perfect-scrollbar.min.js">
        </script>
    <script src="https://cdn.jsdelivr.net/gh/zuramai/mazer@docs/demo/assets/compiled/js/app.js"></script>

    @yield('js')
</body>

</html>