<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{fragments/layout :: head('Admin Dashboard')}"></head>
<body>
<nav th:replace="~{fragments/layout :: adminbar}"></nav>

<section class="dash">
    <div class="container">

        <!-- Hero -->
        <div class="dash-hero">
            <div>
                <h1>Command Center</h1>
                <p>Real-time overview of fleet, drivers, vendors &amp; revenue</p>
            </div>
            <div class="dash-revenue">
                <div class="lbl">Total Revenue</div>
                <div class="val">[[${currencySymbol}]]<span th:text="${d.totalRevenue}">0</span></div>
            </div>
        </div>

        <!-- KPI cards -->
        <div class="kpi-grid">
            <div class="card kpi a1"><div class="ic">&#128663;</div><div class="v" th:text="${d.totalCars}">0</div><div class="l">Cars</div></div>
            <div class="card kpi a2"><div class="ic">&#128100;</div><div class="v" th:text="${d.totalDrivers}">0</div><div class="l">Drivers</div></div>
            <div class="card kpi a3"><div class="ic">&#127970;</div><div class="v" th:text="${d.totalVendors}">0</div><div class="l">Vendors</div></div>
            <div class="card kpi a4"><div class="ic">&#129489;</div><div class="v" th:text="${d.totalCustomers}">0</div><div class="l">Customers</div></div>
            <div class="card kpi a5"><div class="ic">&#128197;</div><div class="v" th:text="${d.totalBookings}">0</div><div class="l">Bookings</div></div>
            <div class="card kpi a6"><div class="ic">&#9889;</div><div class="v" th:text="${d.confirmed}">0</div><div class="l">Confirmed</div></div>
        </div>

        <!-- Charts -->
        <div class="chart-grid">
            <div class="card chart-card">
                <h3>Revenue Trend</h3>
                <canvas id="revChart"></canvas>
            </div>
            <div class="card chart-card">
                <h3>Bookings by Status</h3>
                <canvas id="statusChart"></canvas>
            </div>
            <div class="card chart-card">
                <h3>Owned vs Vendor</h3>
                <canvas id="splitChart"></canvas>
            </div>
        </div>

        <!-- Alerts -->
        <div class="dash-alerts">
            <div class="card alert-card" th:classappend="${not #lists.isEmpty(d.expiringCarDocs)} ? 'warn' : ''">
                <h4 th:if="${not #lists.isEmpty(d.expiringCarDocs)}">&#9888; Car documents expiring (30 days)</h4>
                <h4 th:if="${#lists.isEmpty(d.expiringCarDocs)}" style="color:#1a9c5b">&#10003; Car documents</h4>
                <ul th:if="${not #lists.isEmpty(d.expiringCarDocs)}">
                    <li th:each="doc : ${d.expiringCarDocs}">
                        <span th:text="${doc.car.make + ' ' + doc.car.model}">car</span> ·
                        <span th:text="${doc.docType}">RC</span> —
                        <span th:text="${doc.expiryDate}">date</span>
                        <span th:if="${doc.expired}" style="color:#ff5e3a;font-weight:600"> (EXPIRED)</span>
                    </li>
                </ul>
                <div th:if="${#lists.isEmpty(d.expiringCarDocs)}" class="alert-ok">All car documents are valid.</div>
            </div>

            <div class="card alert-card" th:classappend="${not #lists.isEmpty(d.expiringDriverDocs)} ? 'warn' : ''">
                <h4 th:if="${not #lists.isEmpty(d.expiringDriverDocs)}">&#9888; Driver documents expiring (30 days)</h4>
                <h4 th:if="${#lists.isEmpty(d.expiringDriverDocs)}" style="color:#1a9c5b">&#10003; Driver documents</h4>
                <ul th:if="${not #lists.isEmpty(d.expiringDriverDocs)}">
                    <li th:each="doc : ${d.expiringDriverDocs}">
                        <span th:text="${doc.driver.name}">driver</span> ·
                        <span th:text="${doc.docType}">LICENCE</span> —
                        <span th:text="${doc.expiryDate}">date</span>
                        <span th:if="${doc.expired}" style="color:#ff5e3a;font-weight:600"> (EXPIRED)</span>
                    </li>
                </ul>
                <div th:if="${#lists.isEmpty(d.expiringDriverDocs)}" class="alert-ok">All driver documents are valid.</div>
            </div>
        </div>

        <!-- Recent bookings -->
        <div class="card dash-table">
            <h3>Recent Bookings</h3>
            <table>
                <thead><tr><th>ID</th><th>Customer</th><th>Car</th><th>Dates</th><th>Total</th><th>Status</th></tr></thead>
                <tbody>
                <tr th:each="b : ${d.recentBookings}">
                    <td th:text="${'#' + b.id}">#1</td>
                    <td th:text="${b.user.fullName}">name</td>
                    <td th:text="${b.car.make + ' ' + b.car.model}">car</td>
                    <td th:text="${b.pickupDate + ' → ' + b.returnDate}">dates</td>
                    <td>[[${currencySymbol}]]<span th:text="${b.totalAmount}">0</span></td>
                    <td><span class="dash-pill" th:classappend="'pill-' + ${#strings.toLowerCase(b.status)}" th:text="${b.status}">PENDING</span></td>
                </tr>
                <tr th:if="${#lists.isEmpty(d.recentBookings)}"><td colspan="6" style="color:#888">No bookings yet.</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</section>

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script th:inline="javascript">
/*<![CDATA[*/
const monthLabels  = /*[[${d.monthLabels}]]*/ [];
const monthRevenue = /*[[${d.monthRevenue}]]*/ [];
const monthCount   = /*[[${d.monthCount}]]*/ [];
const statusData   = [ /*[[${d.pending}]]*/ 0, /*[[${d.confirmed}]]*/ 0, /*[[${d.completed}]]*/ 0, /*[[${d.cancelled}]]*/ 0 ];
const splitData    = [ /*[[${d.ownedRevenue}]]*/ 0, /*[[${d.vendorRevenue}]]*/ 0 ];

if (window.Chart) {
  Chart.defaults.color = '#666';
  Chart.defaults.font.family = "'Poppins', sans-serif";
  Chart.defaults.borderColor = '#eef0f4';

  const ctx = document.getElementById('revChart').getContext('2d');
  const grad = ctx.createLinearGradient(0, 0, 0, 240);
  grad.addColorStop(0, 'rgba(247,148,29,.45)');
  grad.addColorStop(1, 'rgba(247,148,29,0)');
  new Chart(ctx, {
    type: 'line',
    data: { labels: monthLabels, datasets: [{
      label: 'Revenue', data: monthRevenue, borderColor: '#f7941d',
      backgroundColor: grad, fill: true, tension: .4, pointRadius: 3,
      pointBackgroundColor: '#f7941d' }]},
    options: { plugins: { legend: { display: false } },
      scales: { y: { beginAtZero: true } } }
  });

  new Chart(document.getElementById('statusChart'), {
    type: 'doughnut',
    data: { labels: ['Pending','Confirmed','Completed','Cancelled'],
      datasets: [{ data: statusData, borderWidth: 0,
        backgroundColor: ['#f7941d','#2ecc71','#16a0ff','#e23b3b'] }]},
    options: { cutout: '62%', plugins: { legend: { position: 'bottom', labels:{ boxWidth:12, padding:12 } } } }
  });

  new Chart(document.getElementById('splitChart'), {
    type: 'doughnut',
    data: { labels: ['Owned','Vendor'],
      datasets: [{ data: splitData, borderWidth: 0,
        backgroundColor: ['#7b5cff','#f7941d'] }]},
    options: { cutout: '62%', plugins: { legend: { position: 'bottom', labels:{ boxWidth:12, padding:12 } } } }
  });
}
/*]]>*/
</script>

<footer th:replace="~{fragments/layout :: footer}"></footer>
</body>
</html>
