@extends('layouts.admin')

@section('title', 'Dashboard')

@section('content')
<div class="container mt-4">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

    <!-- Statistik -->
    <div class="row">
        <div class="col-md-3">
            <div class="card text-white bg-primary shadow-sm mb-3">
                <div class="card-body text-center">
                    <i class="fas fa-clipboard-list fa-2x mb-2"></i>
                    <h5 class="card-title">Total Peminjaman</h5>
                    <p class="card-text display-6 fw-bold">{{ $totalBookings }}</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-white bg-success shadow-sm mb-3">
                <div class="card-body text-center">
                    <i class="fas fa-check-circle fa-2x mb-2"></i>
                    <h5 class="card-title">Disetujui</h5>
                    <p class="card-text display-6 fw-bold">{{ $approvedBookings }}</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-white bg-warning shadow-sm mb-3">
                <div class="card-body text-center">
                    <i class="fas fa-hourglass-half fa-2x mb-2"></i>
                    <h5 class="card-title">Pending</h5>
                    <p class="card-text display-6 fw-bold">{{ $pendingBookings }}</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-white bg-danger shadow-sm mb-3">
                <div class="card-body text-center">
                    <i class="fas fa-times-circle fa-2x mb-2"></i>
                    <h5 class="card-title">Ditolak</h5>
                    <p class="card-text display-6 fw-bold">{{ $rejectedBookings }}</p>
                </div>
            </div>
        </div>
    </div>
<br>
    <!-- Grafik & Tabel -->
    <div class="row">
        <!-- Grafik Peminjaman -->
        <div class="col-md-6">
            <div class="card shadow-sm">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0"><i class="fas fa-chart-line"></i> Grafik Peminjaman per Bulan</h5>
                </div>
                <div class="card-body">
                    <canvas id="monthlyChart"></canvas>
                </div>
            </div>
        </div>

        <!-- Daftar Peminjaman Terbaru -->
        <div class="col-md-6">
            <div class="card shadow-sm">
                <div class="card-header bg-dark text-white">
                    <h5 class="mb-0"><i class="fas fa-clock"></i> Peminjaman Terbaru</h5>
                </div>
                <div class="card-body">
                    <table class="table table-striped">
                        <thead class="table-dark">
                            <tr>
                                <th>Peminjam</th>
                                <th>Ruang</th>
                                <th>Tanggal</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($latestBookings as $booking)
                            <tr>
                                <td>{{ $booking->user->name }}</td>
                                <td>{{ $booking->room->name }}</td>
                                <td>{{ $booking->date }}</td>
                                <td>
                                    <span class="badge bg-{{ $booking->status == 'approved' ? 'success' : ($booking->status == 'pending' ? 'warning' : 'danger') }}">
                                        {{ ucfirst($booking->status) }}
                                    </span>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
    // Data Chart.js
    var monthlyBookings = @json($monthlyBookings);

    // Grafik peminjaman per bulan (Line Chart)
    new Chart(document.getElementById("monthlyChart"), {
        type: "line",
        data: {
            labels: Object.keys(monthlyBookings),
            datasets: [{
                label: "Peminjaman per Bulan",
                data: Object.values(monthlyBookings),
                backgroundColor: "rgba(54, 162, 235, 0.2)", // Warna transparan di bawah garis
                borderColor: "rgba(54, 162, 235, 1)", // Warna garis
                borderWidth: 2,
                fill: true, // Mengisi area di bawah garis
                pointRadius: 5,
                pointBackgroundColor: "rgba(54, 162, 235, 1)",
                tension: 0.4 // Efek lengkungan pada garis
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    display: false // Sembunyikan legenda untuk tampilan lebih bersih
                }
            },
            scales: {
                x: {
                    grid: {
                        display: false // Sembunyikan garis grid sumbu X
                    }
                },
                y: {
                    beginAtZero: true,
                    grid: {
                        color: "rgba(200, 200, 200, 0.2)" // Warna grid yang lebih soft
                    }
                }
            }
        }
    });
});
</script>
@endsection