<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>PLUS SmartLane Lite — @yield('title', 'Dashboard')</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">
@stack('head')
<style>
:root { --sidebar-w: 240px; }
body { background: #0f1117; color: #e2e8f0; font-family: 'Segoe UI', sans-serif; }
#sidebar {
    width: var(--sidebar-w); min-height: 100vh; background: #141820;
    border-right: 1px solid #1e2433; position: fixed; top: 0; left: 0; z-index: 100;
    display: flex; flex-direction: column;
}
#sidebar .brand {
    padding: 20px 20px 16px; border-bottom: 1px solid #1e2433;
    font-size: 1rem; font-weight: 700; color: #60a5fa; letter-spacing: .5px;
}
#sidebar .brand small { display: block; color: #64748b; font-size: .7rem; font-weight: 400; margin-top: 2px; }
#sidebar nav { flex: 1; padding: 12px 0; }
#sidebar .nav-link {
    color: #94a3b8; padding: 9px 20px; border-radius: 0;
    font-size: .88rem; display: flex; align-items: center; gap: 10px;
    transition: background .15s, color .15s;
}
#sidebar .nav-link:hover { background: #1e2433; color: #e2e8f0; }
#sidebar .nav-link.active { background: #1e3a5f; color: #60a5fa; border-right: 3px solid #60a5fa; }
#sidebar .nav-link i { font-size: 1rem; width: 18px; text-align: center; }
#sidebar .nav-section {
    font-size: .68rem; text-transform: uppercase; letter-spacing: 1px;
    color: #475569; padding: 12px 20px 4px;
}
#content { margin-left: var(--sidebar-w); min-height: 100vh; }
.topbar {
    background: #141820; border-bottom: 1px solid #1e2433;
    padding: 14px 28px; display: flex; align-items: center; justify-content: space-between;
}
.topbar .page-title { font-size: 1.1rem; font-weight: 600; color: #e2e8f0; }
.main-content { padding: 28px; }
.card { background: #141820; border: 1px solid #1e2433; border-radius: 10px; }
.card-header { background: #0d1117; border-bottom: 1px solid #1e2433; }
.stat-card { border-radius: 10px; padding: 20px; }
.stat-card .label { font-size: .75rem; text-transform: uppercase; letter-spacing: .8px; opacity: .65; }
.stat-card .value { font-size: 2rem; font-weight: 700; line-height: 1; }
.table { color: #e2e8f0; }
.table thead th { background: #0d1117; color: #94a3b8; border-color: #1e2433; font-size: .78rem; text-transform: uppercase; letter-spacing: .6px; }
.table td, .table th { border-color: #1e2433; vertical-align: middle; }
.table tbody tr:hover { background: rgba(255,255,255,.03); }
.form-control, .form-select {
    background: #0d1117; border-color: #1e2433; color: #e2e8f0;
}
.form-control:focus, .form-select:focus {
    background: #0d1117; border-color: #3b82f6; color: #e2e8f0; box-shadow: 0 0 0 3px rgba(59,130,246,.2);
}
.form-label { color: #94a3b8; font-size: .85rem; }
.btn-primary { background: #2563eb; border-color: #2563eb; }
.btn-primary:hover { background: #1d4ed8; border-color: #1d4ed8; }
.badge-buka  { background: #166534; color: #4ade80; }
.badge-tutup { background: #7f1d1d; color: #f87171; }
.alert-success { background: #14532d; border-color: #166534; color: #4ade80; }
.alert-danger  { background: #7f1d1d; border-color: #991b1b; color: #f87171; }
.alert-warning { background: #78350f; border-color: #92400e; color: #fbbf24; }
.ping-online  { color: #4ade80; }
.ping-offline { color: #f87171; }
.ping-unknown { color: #94a3b8; }
.modal-content { background: #141820; border: 1px solid #1e2433; color: #e2e8f0; }
.modal-header { border-bottom-color: #1e2433; }
.modal-footer { border-top-color: #1e2433; }
.btn-close-white { filter: invert(1) grayscale(1); }
</style>
</head>
<body>

<div id="sidebar">
    <div class="brand">
        <i class="bi bi-display me-2"></i>PLUS SmartLane Lite
        <small>for ELITE</small>
    </div>
    <nav>
        <div class="nav-section">Overview</div>
        <a href="{{ route('lis.dashboard') }}" class="nav-link {{ request()->routeIs('lis.dashboard') ? 'active' : '' }}">
            <i class="bi bi-grid-1x2-fill"></i> Dashboard
        </a>

        <div class="nav-section">Management</div>
        <a href="{{ route('lis.devices.index') }}" class="nav-link {{ request()->routeIs('lis.devices.*') ? 'active' : '' }}">
            <i class="bi bi-hdd-network"></i> Devices
        </a>
        <a href="{{ route('lis.schedule.index') }}" class="nav-link {{ request()->routeIs('lis.schedule.*') ? 'active' : '' }}">
            <i class="bi bi-clock"></i> Schedule
        </a>
        <a href="{{ route('lis.send.index') }}" class="nav-link {{ request()->routeIs('lis.send.*') ? 'active' : '' }}">
            <i class="bi bi-send"></i> Send Image
        </a>

        <div class="nav-section">Monitoring</div>
        <a href="{{ route('lis.map.index') }}" class="nav-link {{ request()->routeIs('lis.map.*') ? 'active' : '' }}">
            <i class="bi bi-map"></i> Device Map
        </a>
        <a href="{{ route('lis.health.index') }}" class="nav-link {{ request()->routeIs('lis.health.*') ? 'active' : '' }}">
            <i class="bi bi-heart-pulse"></i> Health Check
        </a>
        <a href="{{ route('lis.cameras.index') }}" class="nav-link {{ request()->routeIs('lis.cameras.*') ? 'active' : '' }}">
            <i class="bi bi-camera-video"></i> RTSP Cameras
        </a>
        <a href="{{ route('lis.log.index') }}" class="nav-link {{ request()->routeIs('lis.log.*') ? 'active' : '' }}">
            <i class="bi bi-journal-text"></i> Activity Logs
        </a>
        <a href="{{ route('lis.schedule-log.index') }}" class="nav-link {{ request()->routeIs('lis.schedule-log.*') ? 'active' : '' }}">
            <i class="bi bi-file-text"></i> Schedule Log
        </a>
    </nav>
    <div style="padding: 16px 20px; border-top: 1px solid #1e2433; font-size:.72rem; color:#475569;">
        PLUS SmartLane Lite v1.1 · PHP {{ PHP_VERSION }}
    </div>
</div>

<div id="content">
    <div class="topbar">
        <div class="page-title"><i class="bi bi-chevron-right me-1 text-secondary" style="font-size:.8rem"></i>@yield('title', 'Dashboard')</div>
        <div class="d-flex align-items-center gap-3">
            <span class="text-secondary" style="font-size:.8rem">{{ now()->format('D, d M Y  H:i') }}</span>
            <span class="badge bg-primary">{{ \App\Models\Device::where('is_active',true)->count() }} Devices</span>
        </div>
    </div>

    <div class="main-content">
        @foreach (['success','error','warning','danger'] as $type)
            @if(session($type))
                <div class="alert alert-{{ $type === 'error' ? 'danger' : $type }} alert-dismissible mb-4" role="alert">
                    <i class="bi bi-{{ $type === 'success' ? 'check-circle' : 'exclamation-triangle' }} me-2"></i>
                    {{ session($type) }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif
        @endforeach

        @yield('content')
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
@stack('scripts')
</body>
</html>
