<!doctype html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ $title ?? 'ISH Presence' }}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
    <style>:root{--red:#e51f2a;--ink:#25282d;--soft:#f7f8fa}body{background:var(--soft);color:var(--ink)}.sidebar{min-height:100vh;background:#fff;border-right:1px solid #e7e8eb}.brand{width:180px}.nav-link{color:#878c94;border-radius:8px;margin:3px 0}.nav-link.active,.nav-link:hover{color:var(--red);background:#fff0f1}.card{border:0;border-radius:12px}.stat{border-left:4px solid var(--red)}.hero{background:#25282d;color:#fff;border-radius:12px}.page-title{font-weight:800}.camera-box{background:#15181b;border-radius:12px;overflow:hidden;min-height:300px;position:relative}.camera-box video,.camera-box canvas{width:100%;height:100%;min-height:300px;object-fit:cover}.camera-overlay{position:absolute;inset:20px;border:2px solid #fff8;border-radius:16px;pointer-events:none}.camera-status{position:absolute;left:20px;bottom:18px;background:#000b;color:#fff;padding:8px 12px;border-radius:8px;font-size:12px}.map{height:300px;border-radius:12px}.table{font-size:.88rem}.badge-soft{background:#fff0f1;color:var(--red)}@media(max-width:991px){.sidebar{min-height:auto}.sidebar nav{display:flex;overflow:auto}.sidebar .nav-link{white-space:nowrap}.brand{width:145px}}</style>
</head>
<body>
<div class="d-flex flex-column flex-lg-row">
    <aside class="sidebar p-4 col-lg-2">
        <a href="{{ route('dashboard') }}"><img src="{{ asset('logo-ish.png') }}" class="brand mb-4" alt="Infomedia Solusi Humanika"></a>
        <div class="small text-danger fw-bold mb-4"><i class="bi bi-geo-alt-fill"></i> Cabang Medan</div>
        <nav>
            <a class="nav-link p-3 {{ request()->routeIs('dashboard') ? 'active' : '' }}" href="{{ route('dashboard') }}"><i class="bi bi-grid-1x2-fill me-2"></i> Ringkasan</a>
            <a class="nav-link p-3 {{ request()->routeIs('attendance.*') ? 'active' : '' }}" href="{{ route('attendance.index') }}"><i class="bi bi-fingerprint me-2"></i> Absensi</a>
            <a class="nav-link p-3 {{ request()->routeIs('leaves.*') ? 'active' : '' }}" href="{{ route('leaves.index') }}"><i class="bi bi-calendar2-check me-2"></i> Izin & Cuti</a>
            @if(auth()->user()->role === 'admin')
                <a class="nav-link p-3 {{ request()->routeIs('employees.*') ? 'active' : '' }}" href="{{ route('employees.index') }}"><i class="bi bi-people me-2"></i> Data Pegawai</a>
            @endif
            <a class="nav-link p-3 {{ request()->routeIs('reports.*') ? 'active' : '' }}" href="{{ route('reports.index') }}"><i class="bi bi-bar-chart-line me-2"></i> Laporan</a>
        </nav>
    </aside>
    <main class="flex-grow-1">
        <header class="bg-white border-bottom p-4 d-flex justify-content-between">
            <span class="text-muted">Workspace / <strong class="text-dark">{{ $title ?? 'Ringkasan' }}</strong></span>
            <div><strong>{{ auth()->user()->name }}</strong><small class="text-muted fw-normal ms-2">{{ auth()->user()->role }}</small><form method="POST" action="{{ route('logout') }}" class="d-inline ms-3">@csrf<button class="btn btn-sm btn-outline-secondary">Keluar</button></form></div>
        </header>
        <div class="container-fluid p-4">
            @if(session('success'))<div class="alert alert-success">{{ session('success') }}</div>@endif
            @if(session('warning'))<div class="alert alert-warning">{{ session('warning') }}</div>@endif
            @if($errors->any())<div class="alert alert-danger">{{ $errors->first() }}</div>@endif
            @yield('content')
        </div>
    </main>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
@stack('scripts')
</body>
</html>
