<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SI PT SOL Admin</title>
    <link rel="stylesheet" href="<?php echo e(asset('css/admin.css')); ?>">
</head>

<body>

<!-- SIDEBAR -->
<div class="sidebar">
    <h2>Panel Admin</h2>

    <a href="/admin/dashboard">Dashboard</a>
    <a href="/admin/maintenance">Maintenance</a>
    <a href="/admin/vehicles">List kendaraan</a>
    <a href="/admin/fleet-status">Status Kendaraan</a>
    <a href="/admin/requests">Request Pengguna</a>
    <a href="/admin/calendar">Kendaraan yang dibooking </a>
    <a href="/admin/announcements">Pengumuman</a>
    <a href="/admin/logs">History Request Pengguna</a>
    <a href="/admin/reports">Inbox Laporan Kerusakan</a>
    <a href="/admin/users">Pusat Pengelolaan Akun</a>
</div>

<!-- MAIN -->
<div class="main">

    <!-- TOPBAR -->
    <div class="topbar" style="
        display:flex;
        align-items:center;
    ">

    <div style="
display:flex;
align-items:center;
gap:12px;
">

<img
src="<?php echo e(asset('images/sarulla-logo.png')); ?>"
style="
height:90px;
width:auto;
object-fit:contain;
">

<h3>Sistem Informasi Transport PT SOL</h3>

</div>

        <div style="
            margin-left:auto;
            margin-right:20px;
            color:gray;
            font-size:14px;
        ">
            <span id="clock"></span>
        </div>

<div class="role-btn"
    onclick="openProfileModal()"
    style="
        background:#15803d;
        color:white;
        padding:10px 20px;
        border-radius:10px;
        font-weight:600;
        cursor:pointer;
        margin-left:20px;
    ">
            Admin
</div>

    </div>

    <!-- CLOCK -->
    <script>

    function updateClock() {

        const now = new Date();

        const formatted =
            now.toLocaleDateString('en-GB', {
                day: '2-digit',
                month: 'short',
                year: 'numeric'
            })
            + ' ' +
            now.toLocaleTimeString('en-GB');

        document.getElementById('clock')
            .innerHTML = formatted;
    }

    setInterval(updateClock, 1000);

    updateClock();

    </script>

    <!-- CONTENT -->
    <div class="content">
        <?php echo $__env->yieldContent('content'); ?>
    </div>

</div>


<!-- PROFILE MODAL -->
<div class="modal-overlay" id="profileModal">

<div class="profile-card" style="
width:520px;
max-width:90%;
padding:35px;
border-radius:22px;
background:white;
position:relative;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,0.15);
">

<div class="close-btn" onclick="closeProfileModal()">✕</div>

<!-- PROFILE HEADER -->
<div style="
text-align:center;
margin-bottom:30px;
">

<?php if(auth()->user()->profile_photo): ?>

<img src="<?php echo e(asset('storage/' . auth()->user()->profile_photo) . '?v=' . time()); ?>"

style="
width:110px;
height:110px;
border-radius:50%;
object-fit:cover;
border:4px solid #16a34a;
box-shadow:0 4px 12px rgba(0,0,0,0.15);
">

<?php else: ?>

<div style="
width:110px;
height:110px;
border-radius:50%;
background:#dcfce7;
display:flex;
align-items:center;
justify-content:center;
font-size:40px;
font-weight:700;
color:#166534;
margin:auto;
border:4px solid #16a34a;
">
<?php echo e(strtoupper(substr(auth()->user()->name, 0, 1))); ?>

</div>

<?php endif; ?>

<h2 style="
margin-top:18px;
font-size:36px;
font-weight:700;
color:#166534;
">
Profile
</h2>

<p style="
color:#64748b;
margin-top:8px;
">
Kelola informasi akun anda
</p>

</div>


<!-- NAME -->
<div style="margin-bottom:22px;">

<p style="
font-size:13px;
font-weight:700;
color:#64748b;
margin-bottom:6px;
">
NAMA
</p>

<div style="
background:#f8fafc;
padding:14px 16px;
border-radius:12px;
font-size:16px;
font-weight:600;
">
<?php echo e(auth()->user()->name); ?>

</div>

</div>


<!-- EMAIL -->
<div style="margin-bottom:22px;">

<p style="
font-size:13px;
font-weight:700;
color:#64748b;
margin-bottom:6px;
">
EMAIL
</p>

<div style="
background:#f8fafc;
padding:14px 16px;
border-radius:12px;
font-size:16px;
font-weight:600;
">
<?php echo e(auth()->user()->email); ?>

</div>

</div>


<!-- ROLE -->
<div style="margin-bottom:25px;">

<p style="
font-size:13px;
font-weight:700;
color:#64748b;
margin-bottom:6px;
">
JABATAN
</p>

<div style="
display:inline-block;
background:#dcfce7;
color:#166534;
padding:10px 16px;
border-radius:999px;
font-size:14px;
font-weight:700;
">
<?php echo e(ucfirst(auth()->user()->role)); ?>

</div>

</div>


<!-- UPLOAD PHOTO -->
<form method="POST"
action="/profile/upload-photo"
enctype="multipart/form-data"
style="margin-bottom:25px;">

<?php echo csrf_field(); ?>

<input type="file"
name="photo"
accept="image/*"
required
onchange="this.form.submit()"
style="
width:100%;
padding:12px;
border:1px solid #d1d5db;
border-radius:12px;
margin-bottom:12px;
background:white;
cursor:pointer;
">

</form>


<!-- BUTTONS -->
<div style="
display:flex;
flex-direction:column;
gap:14px;
">

<a href="/change-password"
style="
background:#f8fafc;
color:#111827;
padding:14px;
border-radius:12px;
text-decoration:none;
font-weight:700;
text-align:center;
border:1px solid #e5e7eb;
">
Ubah Password
</a>


<form method="POST" action="/logout">

<?php echo csrf_field(); ?>

<button type="submit"
style="
width:100%;
background:#dc2626;
color:white;
padding:14px;
border:none;
border-radius:12px;
font-weight:700;
cursor:pointer;
">
Keluar
</button>

</form>

</div>

</div>
</div>

<script src="<?php echo e(asset('js/admin.js')); ?>"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

</body>
</html><?php /**PATH C:\laragon\www\Tracker\resources\views/layouts/admin.blade.php ENDPATH**/ ?>