<!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() }}">
@php
  $adminLogoSetting = \App\Models\CompanySetting::where('division', auth()->user()->division)->first() ?? \App\Models\CompanySetting::first();
  $adminLogoUrl = $adminLogoSetting?->logo_path ? asset('storage/'.$adminLogoSetting->logo_path) : asset('images/logo.svg');
  $faviconUrl = asset('images/favicon.svg');
@endphp
<title>@yield('title','Dashboard') — JPN Helpdesk</title>
<link rel="icon" type="image/svg+xml" href="{{ $faviconUrl }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
@stack('styles')
<style>
:root{--sidebar-w:250px;--jpn-blue:#1a56db;--jpn-dark:#1e2a3b}
body{background:#f0f4f8;font-size:14px}
.sidebar{position:fixed;top:0;left:0;width:var(--sidebar-w);height:100vh;background:var(--jpn-dark);color:#fff;overflow-y:auto;z-index:1000;transition:.3s}
.sidebar.collapsed{width:70px}
.sidebar.collapsed .brand{justify-content:center}
.sidebar.collapsed .brand .brand-text{display:none}
.sidebar.collapsed .nav-section{display:none}
.sidebar.collapsed .nav-link{justify-content:center;padding-left:0;padding-right:0}
.sidebar.collapsed .nav-link .nav-text{display:none}
.sidebar .brand{padding:20px 16px;font-weight:700;font-size:16px;border-bottom:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:10px}
.sidebar .brand img{width:32px;height:32px;border-radius:6px;object-fit:cover}
.sidebar .nav-section{padding:8px 16px;font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:rgba(255,255,255,.4);margin-top:8px}
.sidebar .nav-link{color:rgba(255,255,255,.75);padding:9px 16px;border-radius:6px;margin:1px 8px;display:flex;align-items:center;gap:10px;font-size:13.5px;transition:.15s}
.sidebar .nav-link:hover,.sidebar .nav-link.active{background:rgba(255,255,255,.12);color:#fff}
.sidebar .nav-link i{width:18px;text-align:center;font-size:14px}
.sidebar .nav-link .nav-text{white-space:nowrap}
.sidebar .badge-count{margin-left:auto;background:#ef4444;font-size:10px;padding:2px 6px;border-radius:10px}
.main{margin-left:var(--sidebar-w);min-height:100vh;transition:.3s}
.main.sidebar-collapsed{margin-left:70px}
.topbar{background:#fff;border-bottom:1px solid #e5e7eb;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:0;z-index:100}
.topbar .page-title{font-weight:600;font-size:16px;color:#1e2a3b;flex:1}
.content-area{padding:24px 20px}
.card{border:none;border-radius:10px;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.card-header{background:#fff;border-bottom:1px solid #f0f0f0;font-weight:600;padding:14px 20px}
.stat-card{border-radius:10px;padding:20px;color:#fff;background:linear-gradient(135deg,var(--jpn-blue),#2563eb)}
.stat-card .num{font-size:28px;font-weight:700}
.stat-card .label{font-size:12px;opacity:.85}
.badge-ok{background:#dcfce7;color:#16a34a}
.badge-warning{background:#fef9c3;color:#a16207}
.badge-breach{background:#fee2e2;color:#dc2626}
.table th{font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.5px}
.btn-sm{font-size:12px}
@media(max-width:768px){
  .sidebar{transform:translateX(-100%);width:100%;}
  .sidebar.show{transform:translateX(0);box-shadow:0 20px 40px rgba(0,0,0,.25);}
  .main{margin-left:0}
  .topbar{padding:12px 16px}
  .topbar .page-title{font-size:14px}
  .content-area{padding:16px}
  .sidebar .nav-link{margin:4px 0;}
}
</style>
</head>
<body>
<aside class="sidebar" id="sidebar">
  <div class="brand" style="display:flex;align-items:center;gap:10px;">
    <div style="width:32px;height:32px;display:flex;align-items:center;justify-content:center;">
      @if($adminLogoSetting?->logo_path)
        <img src="{{ $adminLogoUrl }}" alt="Logo" style="max-height:32px;max-width:32px;object-fit:contain;border-radius:6px;">
      @else
        <div style="background:var(--jpn-blue);border-radius:6px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700">J</div>
      @endif
    </div>
    <div class="brand-text"><div style="font-size:14px">JPN Helpdesk</div><div style="font-size:10px;opacity:.5">{{ auth()->user()->division }}</div></div>
  </div>

  <div class="nav-section">Menu Utama</div>
  <a href="{{ route('admin.dashboard') }}" class="nav-link {{ request()->routeIs('admin.dashboard') ? 'active' : '' }}"><i class="fas fa-gauge-high"></i><span class="nav-text"> Dashboard</span></a>
  <a href="{{ route('admin.tickets.index') }}" class="nav-link {{ request()->routeIs('admin.tickets*') ? 'active' : '' }}"><i class="fas fa-ticket"></i><span class="nav-text"> Tiket</span></a>
  <a href="{{ route('admin.visits.calendar') }}" class="nav-link {{ request()->routeIs('admin.visits*') ? 'active' : '' }}"><i class="fas fa-calendar-days"></i><span class="nav-text"> Kunjungan</span></a>
  <a href="{{ route('admin.knowledgebase.index') }}" class="nav-link {{ request()->routeIs('admin.knowledgebase*') ? 'active' : '' }}"><i class="fas fa-book"></i><span class="nav-text"> Knowledge Base</span></a>

  <div class="nav-section">Klien & Aset</div>
  <a href="{{ route('admin.clients.index') }}" class="nav-link {{ request()->routeIs('admin.clients*') ? 'active' : '' }}"><i class="fas fa-building"></i><span class="nav-text"> Klien</span></a>

  <div class="nav-section">Workshop</div>
  <a href="{{ route('admin.workorders.index') }}" class="nav-link {{ request()->routeIs('admin.workorders*') ? 'active' : '' }}"><i class="fas fa-screwdriver-wrench"></i><span class="nav-text"> FixLab / WO</span></a>
  <a href="{{ route('admin.projects.index') }}" class="nav-link {{ request()->routeIs('admin.projects*') ? 'active' : '' }}"><i class="fas fa-diagram-project"></i><span class="nav-text"> Proyek CCTV</span></a>

  @unless(auth()->user()->isTechnician())
    <div class="nav-section">Keuangan</div>
    <a href="{{ route('admin.invoices.index') }}" class="nav-link {{ request()->routeIs('admin.invoices*') ? 'active' : '' }}"><i class="fas fa-file-invoice-dollar"></i><span class="nav-text"> Invoice</span></a>
  @endunless

  <div class="nav-section">Analitik</div>
  <a href="{{ route('admin.reports.index') }}" class="nav-link {{ request()->routeIs('admin.reports*') ? 'active' : '' }}"><i class="fas fa-chart-bar"></i><span class="nav-text"> Laporan</span></a>

  @if(auth()->user()->isAdmin())
  <div class="nav-section">Sistem</div>
  <a href="{{ route('admin.users.index') }}" class="nav-link {{ request()->routeIs('admin.users*') ? 'active' : '' }}"><i class="fas fa-users-cog"></i><span class="nav-text"> Pengguna</span></a>
  <a href="{{ route('admin.settings.index') }}" class="nav-link {{ request()->routeIs('admin.settings*') ? 'active' : '' }}"><i class="fas fa-gear"></i><span class="nav-text"> Pengaturan</span></a>
  @endif

  <div style="height:40px"></div>
</aside>

<div class="main">
  <div class="topbar">
    <button class="btn btn-sm btn-outline-secondary d-md-none me-2" onclick="document.getElementById('sidebar').classList.toggle('show')"><i class="fas fa-bars"></i></button>
    <button class="btn btn-sm btn-outline-secondary d-none d-md-inline-flex me-2" id="sidebarToggle"><i class="fas fa-chevron-left"></i></button>
    <div class="page-title">@yield('title','Dashboard')</div>
    <div class="d-flex align-items-center gap-3">
      <a href="{{ route('admin.tickets.create') }}" class="btn btn-primary btn-sm"><i class="fas fa-plus me-1"></i>Tiket Baru</a>
      <div class="dropdown">
        <button class="btn btn-sm btn-light dropdown-toggle" data-bs-toggle="dropdown">
          <i class="fas fa-user-circle me-1"></i>{{ auth()->user()->name }}
        </button>
        <ul class="dropdown-menu dropdown-menu-end">
          <li><span class="dropdown-item-text text-muted small">{{ auth()->user()->role }}</span></li>
          <li><hr class="dropdown-divider"></li>
          <li>
            <form action="{{ route('logout') }}" method="POST">
              @csrf
              <button class="dropdown-item text-danger"><i class="fas fa-sign-out-alt me-2"></i>Logout</button>
            </form>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <div class="content-area">
    @if(session('success'))
      <div class="alert alert-success alert-dismissible"><i class="fas fa-check-circle me-2"></i>{{ session('success') }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
    @endif
    @if(session('warning'))
      <div class="alert alert-warning alert-dismissible"><i class="fas fa-exclamation-triangle me-2"></i>{{ session('warning') }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
    @endif
    @if($errors->any())
      <div class="alert alert-danger alert-dismissible"><i class="fas fa-times-circle me-2"></i>{{ $errors->first() }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>
    @endif
    @yield('content')
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
<script>
(function(){
  const sidebar = document.getElementById('sidebar');
  const main = document.querySelector('.main');
  const toggle = document.getElementById('sidebarToggle');
  const storageKey = 'jpn-sidebar-collapsed';

  function setCollapsed(collapsed){
    if(collapsed){
      sidebar.classList.add('collapsed');
      main.classList.add('sidebar-collapsed');
      toggle.innerHTML = '<i class="fas fa-chevron-right"></i>';
    } else {
      sidebar.classList.remove('collapsed');
      main.classList.remove('sidebar-collapsed');
      toggle.innerHTML = '<i class="fas fa-chevron-left"></i>';
    }
    localStorage.setItem(storageKey, collapsed ? '1' : '0');
  }

  if(toggle){
    toggle.addEventListener('click', function(){
      const collapsed = !sidebar.classList.contains('collapsed');
      setCollapsed(collapsed);
    });
  }

  const saved = localStorage.getItem(storageKey);
  if(saved === '1'){
    setCollapsed(true);
  }
})();
</script>
@stack('scripts')
</body>
</html>
