<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<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', 'FILE APP PORTAL')</title>
    
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap" rel="stylesheet">

    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Tailwind via Vite -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

    <style>
        body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #f4f7f9; overflow: hidden; }
        
        #sidebar { width: 85px; transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 0 1.5rem 1.5rem 0; }
        #sidebar.expanded { width: 266px; }
        .sidebar-text { display: none; white-space: nowrap; }
        #sidebar.expanded .sidebar-text { display: inline-block; }

        .workspace-console { background: linear-gradient(135deg, #ffffff 0%, #f0fdfa 100%); border-radius: 2rem; border: 1px solid #e2e8f0; }

        /* Grid View */
        .grid-view { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }

        /* List View */
        .list-view { display: flex; flex-direction: column; gap: 0; }

        .scroll-custom::-webkit-scrollbar { width: 5px; }
        .scroll-custom::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
        
        .modal-enter { animation: zoomIn 0.3s ease-out forwards; }
        @keyframes zoomIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
        
        /* Right-side fixed panel — below header */
        #userPanel {
            position: fixed;
            top: 80px; right: 0;
            height: calc(100vh - 80px);
            width: 0;
            overflow: hidden;
            z-index: 200;
            transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
            padding: 0;
            pointer-events: none;
        }
        #userPanel.panel-open { width: 380px; padding: 12px; pointer-events: all; }
        #userPanel .panel-inner {
            width: 356px; display: flex; flex-direction: column; height: 100%;
            background: #fff;
            border-radius: 1.75rem;
            border: 1px solid #e2e8f0;
            box-shadow: -4px 0 40px rgba(0,0,0,0.10);
            overflow: hidden;
        }
        /* Shift only content area (below header) when panel opens */
        #contentArea {
            transition: margin-right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .panel-open-state #contentArea {
            margin-right: 380px;
        }
        .panel-field {
            width: 100%; background: #f8fafc;
            border: 1.5px solid #e2e8f0; border-radius: 12px;
            padding: 11px 14px; font-size: 12px; color: #1e293b;
            outline: none; transition: all 0.2s;
            font-family: 'Plus Jakarta Sans', sans-serif;
        }
        .panel-field:focus { border-color: #00ada8; background: #fff; box-shadow: 0 0 0 3px rgba(0,173,168,0.08); }
        .panel-label { display: block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: #64748b; margin-bottom: 5px; }

        .badge { display: inline-block; padding: 2px 10px; border-radius: 8px; font-size: 10px; font-weight: 800; }
        .badge-admin    { background:#e6f7f6; color:#007d79; }
        .badge-editor   { background:#eff6ff; color:#2563eb; }
        .badge-viewer   { background:#f5f3ff; color:#7c3aed; }
        .badge-manager  { background:#fff7ed; color:#c2410c; }
        .badge-staff    { background:#f0fdf4; color:#16a34a; }
        .status-active   { background:#dcfce7; color:#15803d; }
        .status-inactive { background:#fee2e2; color:#b91c1c; }
        .status-pending  { background:#fef9c3; color:#a16207; }

        tbody tr:hover { background-color: #f8fffe; }

        /* Profile tray */
        .tray-hidden { display: none; }
        .tray-visible { display: block; }

        /* Hide less-important columns in list view when panel is open */
        #userPanel.panel-open ~ * .col-hide,
        .panel-open-state .col-hide { display: none; }
    </style>
    
    @yield('styles')

</head>
<body class="text-slate-900">

    <div class="flex h-screen overflow-hidden">
        
        <!-- Sidebar -->
        @include('admin.partials.sidebar')

        <div id="mainColumn" class="flex-1 flex flex-col min-w-0">
            
            <!-- Header -->
            @include('admin.partials.header')

            <!-- Content area -->
            <div id="contentArea" class="flex-1 flex flex-col overflow-hidden">
                @if(session('success'))
                    <div class="mx-8 mt-4 rounded-lg bg-green-100 border border-green-400 text-green-700 px-4 py-3" role="alert">
                        <span class="block sm:inline">{{ session('success') }}</span>
                    </div>
                @endif

                @if(session('error'))
                    <div class="mx-8 mt-4 rounded-lg bg-red-100 border border-red-400 text-red-700 px-4 py-3" role="alert">
                        <span class="block sm:inline">{{ session('error') }}</span>
                    </div>
                @endif
                
                @yield('content')
                
            </div><!-- end #contentArea -->
        </div>
    </div>

    <!-- Modals -->
    @yield('modals')

    <script>
        $(document).ready(function() {
            // Sidebar toggle
            $('#toggleBtn').on('click', function() {
                $('#sidebar').toggleClass('expanded');
            });

            // Profile tray toggle
            $('#profileBtn').on('click', function(e) {
                e.stopPropagation();
                $('#profileTray').toggleClass('tray-hidden tray-visible');
            });
            
            $(document).on('click', function() {
                $('#profileTray').addClass('tray-hidden').removeClass('tray-visible');
            });
        });
    </script>

    @stack('scripts')
</body>
</html>
