@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')

{{-- =====================================================
     HEADER
====================================================== --}}

<div class="dashboard-header mb-4">

    <div>

        <h1 class="fw-bold mb-2">

            Selamat Datang,
            {{ auth()->user()->nama }}

            👋

        </h1>

        <p class="text-muted mb-0">

            Berikut ringkasan informasi aset
            laboratorium.

        </p>

    </div>

</div>



{{-- =====================================================
     STATISTIK UTAMA
====================================================== --}}

<div class="row g-4">


    {{-- TOTAL ASET --}}

    <div class="col-12 col-sm-6 col-xl-3">

        <div class="stat-card">

            <div class="stat-icon bg-primary-subtle">

                <i class="bi bi-box-seam text-primary"></i>

            </div>

            <div class="stat-content">

                <span>Total Aset</span>

                <strong>
                    {{ $totalAset ?? 0 }}
                </strong>

            </div>

        </div>

    </div>



    {{-- ASET BAIK --}}

    <div class="col-12 col-sm-6 col-xl-3">

        <div class="stat-card">

            <div class="stat-icon bg-success-subtle">

                <i class="bi bi-check-circle text-success"></i>

            </div>

            <div class="stat-content">

                <span>Aset Baik</span>

                <strong>
                    {{ $asetBaik ?? 0 }}
                </strong>

            </div>

        </div>

    </div>



    {{-- RUSAK RINGAN --}}

    <div class="col-12 col-sm-6 col-xl-3">

        <div class="stat-card">

            <div class="stat-icon bg-warning-subtle">

                <i class="bi bi-exclamation-circle text-warning"></i>

            </div>

            <div class="stat-content">

                <span>Rusak Ringan</span>

                <strong>
                    {{ $asetRusakRingan ?? 0 }}
                </strong>

            </div>

        </div>

    </div>



    {{-- RUSAK BERAT --}}

    <div class="col-12 col-sm-6 col-xl-3">

        <div class="stat-card">

            <div class="stat-icon bg-danger-subtle">

                <i class="bi bi-x-circle text-danger"></i>

            </div>

            <div class="stat-content">

                <span>Rusak Berat</span>

                <strong>
                    {{ $asetRusakBerat ?? 0 }}
                </strong>

            </div>

        </div>

    </div>

</div>



{{-- =====================================================
     GRAFIK
====================================================== --}}

<div class="row g-4 mt-1">


    {{-- GRAFIK KONDISI --}}

    <div class="col-12 col-xl-5">

        <div class="card dashboard-card h-100">

            <div class="card-header">

                <h5 class="mb-0">

                    <i class="bi bi-pie-chart me-2"></i>

                    Kondisi Aset

                </h5>

            </div>

            <div class="card-body">

                <div style="height:300px;">

                    <canvas id="grafikKondisi"></canvas>

                </div>

            </div>

        </div>

    </div>



    {{-- GRAFIK PER LAB --}}

    <div class="col-12 col-xl-7">

        <div class="card dashboard-card h-100">

            <div class="card-header">

                <h5 class="mb-0">

                    <i class="bi bi-bar-chart me-2"></i>

                    Aset per Laboratorium

                </h5>

            </div>

            <div class="card-body">

                <div style="height:300px;">

                    <canvas id="grafikLaboratorium"></canvas>

                </div>

            </div>

        </div>

    </div>

</div>



{{-- =====================================================
     ASET TERBARU + KATEGORI
====================================================== --}}

<div class="row g-4 mt-1">


    {{-- ASET TERBARU --}}

    <div class="col-12 col-xl-8">

        <div class="card dashboard-card h-100">

            <div class="card-header d-flex justify-content-between align-items-center">

                <h5 class="mb-0">

                    <i class="bi bi-clock-history me-2"></i>

                    Aset Terbaru

                </h5>

                <a
                    href="{{ route('aset.index') }}"
                    class="btn btn-sm btn-outline-primary">

                    Lihat Semua

                </a>

            </div>


            <div class="card-body p-0">

                <div class="table-responsive">

                    <table class="table table-hover align-middle mb-0">

                        <thead class="table-light">

                            <tr>

                                <th>No</th>

                                <th>Kode</th>

                                <th>Nama Aset</th>

                                <th>Laboratorium</th>

                                <th>Kondisi</th>

                            </tr>

                        </thead>


                        <tbody>

                        @forelse($asetTerbaru as $item)

                            <tr>

                                <td>
                                    {{ $loop->iteration }}
                                </td>

                                <td>

                                    <strong>
                                        {{ $item->kode_aset }}
                                    </strong>

                                </td>

                                <td>

                                    {{ $item->nama_aset }}

                                </td>

                                <td>

                                    {{ $item->laboratorium->nama_lab ?? '-' }}

                                </td>

                                <td>

                                    @if($item->kondisi == 'Baik')

                                        <span class="badge bg-success">
                                            Baik
                                        </span>

                                    @elseif($item->kondisi == 'Rusak Ringan')

                                        <span class="badge bg-warning text-dark">
                                            Rusak Ringan
                                        </span>

                                    @else

                                        <span class="badge bg-danger">
                                            Rusak Berat
                                        </span>

                                    @endif

                                </td>

                            </tr>

                        @empty

                            <tr>

                                <td
                                    colspan="5"
                                    class="text-center py-4 text-muted">

                                    Belum ada data aset.

                                </td>

                            </tr>

                        @endforelse

                        </tbody>

                    </table>

                </div>

            </div>

        </div>

    </div>



    {{-- STATISTIK KATEGORI --}}

    <div class="col-12 col-xl-4">

        <div class="card dashboard-card h-100">

            <div class="card-header">

                <h5 class="mb-0">

                    <i class="bi bi-tags me-2"></i>

                    Statistik Kategori

                </h5>

            </div>


            <div class="card-body">

                @forelse($statistikKategori as $kategori)

                    <div class="category-item mb-3">

                        <div class="d-flex justify-content-between">

                            <span>

                                {{ $kategori->nama_kategori }}

                            </span>

                            <strong>

                                {{ $kategori->aset_count }}

                            </strong>

                        </div>


                        <div class="progress mt-2"
                             style="height:7px;">

                            @php

                                $persentase = $totalAset > 0
                                    ? ($kategori->aset_count / $totalAset) * 100
                                    : 0;

                            @endphp

                            <div
                                class="progress-bar"
                                style="width: {{ $persentase }}%">

                            </div>

                        </div>

                    </div>

                @empty

                    <div class="text-center text-muted py-4">

                        Belum ada kategori.

                    </div>

                @endforelse

            </div>

        </div>

    </div>

</div>



{{-- =====================================================
     LABORATORIUM
====================================================== --}}

<div class="card dashboard-card mt-4">

    <div class="card-header">

        <h5 class="mb-0">

            <i class="bi bi-building me-2"></i>

            Laboratorium

        </h5>

    </div>


    <div class="card-body">

        <div class="row g-3">

            @forelse($laboratorium as $lab)

                <div class="col-12 col-sm-6 col-lg-4 col-xl-3">

                    <div class="lab-card">

                        <div class="lab-icon">

                            <i class="bi bi-building"></i>

                        </div>


                        <div class="lab-info">

                            <h6>

                                {{ $lab->nama_lab }}

                            </h6>

                            <small>

                                {{ $lab->lokasi ?? 'Lokasi belum tersedia' }}

                            </small>

                            <div class="mt-2">

                                <span class="badge bg-primary">

                                    {{ $lab->aset_count }}

                                    Aset

                                </span>

                            </div>

                        </div>

                    </div>

                </div>

            @empty

                <div class="col-12">

                    <div class="empty-state">

                        <i class="bi bi-building"></i>

                        <p>

                            Belum ada data laboratorium.

                        </p>

                    </div>

                </div>

            @endforelse

        </div>

    </div>

</div>



{{-- =====================================================
     AKTIVITAS TERBARU
====================================================== --}}

<div class="card dashboard-card mt-4">

    <div class="card-header d-flex justify-content-between align-items-center">

        <h5 class="mb-0">

            <i class="bi bi-activity me-2"></i>

            Aktivitas Terbaru

        </h5>


        <a
            href="{{ route('histori-aset.index') }}"
            class="btn btn-sm btn-outline-primary">

            Lihat Histori

        </a>

    </div>


    <div class="card-body p-0">

        <div class="table-responsive">

            <table class="table table-hover align-middle mb-0">

                <thead class="table-light">

                    <tr>

                        <th>No</th>

                        <th>Tanggal</th>

                        <th>Aset</th>

                        <th>Kondisi Lama</th>

                        <th>Kondisi Baru</th>

                        <th>Keterangan</th>

                    </tr>

                </thead>


                <tbody>

                @forelse($aktivitasTerbaru as $item)

                    <tr>

                        <td>

                            {{ $loop->iteration }}

                        </td>

                        <td>

                            {{ $item->created_at->format('d-m-Y H:i') }}

                        </td>

                        <td>

                            <strong>

                                {{ $item->aset->kode_aset ?? '-' }}

                            </strong>

                            <br>

                            <small class="text-muted">

                                {{ $item->aset->nama_aset ?? '-' }}

                            </small>

                        </td>

                        <td>

                            {{ $item->kondisi_lama }}

                        </td>

                        <td>

                            @if($item->kondisi_baru == 'Baik')

                                <span class="badge bg-success">

                                    Baik

                                </span>

                            @elseif($item->kondisi_baru == 'Rusak Ringan')

                                <span class="badge bg-warning text-dark">

                                    Rusak Ringan

                                </span>

                            @else

                                <span class="badge bg-danger">

                                    Rusak Berat

                                </span>

                            @endif

                        </td>

                        <td>

                            {{ $item->keterangan ?? '-' }}

                        </td>

                    </tr>

                @empty

                    <tr>

                        <td
                            colspan="6"
                            class="text-center py-4 text-muted">

                            Belum ada aktivitas perubahan aset.

                        </td>

                    </tr>

                @endforelse

                </tbody>

            </table>

        </div>

    </div>

</div>



{{-- =====================================================
     CHART.JS
====================================================== --}}

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>


<script>

document.addEventListener('DOMContentLoaded', function () {


    // =================================================
    // GRAFIK KONDISI ASET
    // =================================================

    const grafikKondisi =
        document.getElementById('grafikKondisi');


    if (grafikKondisi) {

        new Chart(grafikKondisi, {

            type: 'doughnut',

            data: {

                labels: [
                    'Baik',
                    'Rusak Ringan',
                    'Rusak Berat'
                ],

                datasets: [{

                    data: [

                        {{ $grafikKondisi['baik'] ?? 0 }},

                        {{ $grafikKondisi['rusak_ringan'] ?? 0 }},

                        {{ $grafikKondisi['rusak_berat'] ?? 0 }}

                    ]

                }]

            },

            options: {

                responsive: true,

                maintainAspectRatio: false,

                plugins: {

                    legend: {

                        position: 'bottom'

                    }

                }

            }

        });

    }



    // =================================================
    // GRAFIK ASET PER LABORATORIUM
    // =================================================

    const grafikLaboratorium =
        document.getElementById('grafikLaboratorium');


    if (grafikLaboratorium) {

        new Chart(grafikLaboratorium, {

            type: 'bar',

            data: {

                labels: [

                    @foreach($grafikLaboratorium as $lab)

                        "{{ $lab->nama_lab }}",

                    @endforeach

                ],

                datasets: [{

                    label: 'Jumlah Aset',

                    data: [

                        @foreach($grafikLaboratorium as $lab)

                            {{ $lab->total }},

                        @endforeach

                    ]

                }]

            },

            options: {

                responsive: true,

                maintainAspectRatio: false,

                scales: {

                    y: {

                        beginAtZero: true,

                        ticks: {

                            precision: 0

                        }

                    }

                },

                plugins: {

                    legend: {

                        display: false

                    }

                }

            }

        });

    }

});

</script>

@endsection