@extends('layouts.app', ['title' => 'Dashboard Inventaris', 'heading' => 'Dashboard'])

@section('content')
<div class="row g-4 mb-4">
    <div class="col-sm-6 col-xl-3">
        <div class="card">
            <div class="card-body">
                <div class="d-flex align-items-start justify-content-between">
                    <div class="content-left">
                        <span>Inventaris</span>
                        <div class="d-flex align-items-center my-2">
                            <h3 class="mb-0 me-2">{{ $stats['items'] }}</h3>
                        </div>
                        <p class="mb-0 text-muted">Total item inventaris aktif.</p>
                    </div>
                    <span class="badge bg-label-primary rounded p-3">
                        <i class="ti tabler-package ti-lg"></i>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="card">
            <div class="card-body">
                <div class="d-flex align-items-start justify-content-between">
                    <div class="content-left">
                        <span>Fasilitas</span>
                        <div class="d-flex align-items-center my-2">
                            <h3 class="mb-0 me-2">{{ $stats['facilities'] }}</h3>
                        </div>
                        <p class="mb-0 text-muted">Objek maintenance ruangan.</p>
                    </div>
                    <span class="badge bg-label-success rounded p-3">
                        <i class="ti tabler-building-community ti-lg"></i>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="card">
            <div class="card-body">
                <div class="d-flex align-items-start justify-content-between">
                    <div class="content-left">
                        <span>Pinjaman Aktif</span>
                        <div class="d-flex align-items-center my-2">
                            <h3 class="mb-0 me-2">{{ $stats['active_loans'] }}</h3>
                        </div>
                        <p class="mb-0 text-muted">Belum kembali penuh.</p>
                    </div>
                    <span class="badge bg-label-warning rounded p-3">
                        <i class="ti tabler-arrows-left-right ti-lg"></i>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-6 col-xl-3">
        <div class="card">
            <div class="card-body">
                <div class="d-flex align-items-start justify-content-between">
                    <div class="content-left">
                        <span>Log Maintenance</span>
                        <div class="d-flex align-items-center my-2">
                            <h3 class="mb-0 me-2">{{ $stats['maintenance_logs'] }}</h3>
                        </div>
                        <p class="mb-0 text-muted">Histori pemeriksaan dan kerja.</p>
                    </div>
                    <span class="badge bg-label-info rounded p-3">
                        <i class="ti tabler-tool ti-lg"></i>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row g-4 mb-4">
    <div class="col-md-6 col-lg-8">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between align-items-center border-bottom">
                <h5 class="card-title m-0 me-2">Barang Terbaru</h5>
                <a href="{{ route('items.index') }}" class="btn btn-sm btn-label-primary">Lihat semua</a>
            </div>
            <div class="card-datatable table-responsive pt-0">
                <table class="datatables-dashboard table table-hover">
                    <thead>
                        <tr>
                            <th>Nama</th>
                            <th>Lokasi</th>
                            <th>Total</th>
                            <th>Kondisi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($latestItems as $item)
                            <tr>
                                <td><strong>{{ $item->name }}</strong></td>
                                <td>{{ $item->location?->name }}</td>
                                <td><span class="badge bg-label-info">{{ $item->total_quantity }}</span></td>
                                <td>
                                    <span class="badge bg-label-success" title="Baik">{{ $item->good_count }}</span> / 
                                    <span class="badge bg-label-warning" title="Rusak Ringan">{{ $item->minor_damage_count }}</span> / 
                                    <span class="badge bg-label-danger" title="Rusak Berat">{{ $item->major_damage_count }}</span>
                                    <span class="badge bg-label-secondary" title="Hilang">{{ $item->lost_count }}</span>
                                </td>
                            </tr>
                        @empty
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="col-md-6 col-lg-4">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="card-title m-0 me-2">Maintenance Terbaru</h5>
                <a href="{{ route('maintenance.index') }}" class="btn btn-sm btn-label-primary">Histori</a>
            </div>
            <div class="card-body">
                <ul class="timeline mt-3 mb-0">
                    @forelse ($latestLogs as $log)
                        <li class="timeline-item timeline-item-transparent">
                            <span class="timeline-point timeline-point-primary"></span>
                            <div class="timeline-event">
                                <div class="timeline-header mb-1">
                                    <h6 class="mb-0">{{ $log->maintainable?->name ?? 'Objek terhapus' }}</h6>
                                    <small class="text-muted">{{ $log->performed_at?->translatedFormat('l, d F Y H:i') }}</small>
                                </div>
                                <p class="mb-1 text-muted small">Oleh: {{ $log->submitter_name }}</p>
                                <p class="mb-0">{{ $log->notes ?: 'Tanpa catatan.' }}</p>
                            </div>
                        </li>
                    @empty
                        <li class="text-center text-muted my-4">Belum ada log maintenance.</li>
                    @endforelse
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center border-bottom">
                <h5 class="card-title m-0 me-2">Peminjaman Terbaru</h5>
                <a href="{{ route('loans.index') }}" class="btn btn-sm btn-label-primary">Kelola peminjaman</a>
            </div>
            <div class="card-datatable table-responsive pt-0">
                <table class="datatables-dashboard table table-hover">
                    <thead>
                        <tr>
                            <th>Peminjam</th>
                            <th>Tanggal</th>
                            <th>Jatuh Tempo</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($latestLoans as $loan)
                            <tr>
                                <td><strong>{{ $loan->borrower_name }}</strong></td>
                                <td>{{ $loan->loaned_at?->translatedFormat('l, d F Y H:i') }}</td>
                                <td>{{ $loan->due_at?->translatedFormat('l, d F Y H:i') ?: '-' }}</td>
                                <td>
                                    @if($loan->status === 'active')
                                        <span class="badge bg-label-warning">AKTIF</span>
                                    @elseif($loan->status === 'completed')
                                        <span class="badge bg-label-success">SELESAI</span>
                                    @else
                                        <span class="badge bg-label-secondary">{{ strtoupper($loan->status) }}</span>
                                    @endif
                                </td>
                            </tr>
                        @empty
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script type="module">
    $(function() {
        var dt_dashboard_tables = $('.datatables-dashboard');
        if (dt_dashboard_tables.length) {
            dt_dashboard_tables.each(function() {
                let $table = $(this);
                let titleText = $table.closest('.card').find('.card-header h5').text() || 'Tabel Dashboard';
                
                let tableTitle = document.createElement('h5');
                tableTitle.classList.add('card-title', 'mb-0', 'text-md-start', 'text-center', 'pb-md-0', 'pb-6');
                tableTitle.innerHTML = titleText;

                $table.DataTable({
                    displayLength: 5,
                    lengthMenu: [5, 10, 25, 50],
                    language: {
                        search: "Cari:",
                        lengthMenu: "Tampil _MENU_ data",
                        info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
                        paginate: {
                            next: '<i class="icon-base ti tabler-chevron-right scaleX-n1-rtl icon-18px"></i>',
                            previous: '<i class="icon-base ti tabler-chevron-left scaleX-n1-rtl icon-18px"></i>',
                            first: '<i class="icon-base ti tabler-chevrons-left scaleX-n1-rtl icon-18px"></i>',
                            last: '<i class="icon-base ti tabler-chevrons-right scaleX-n1-rtl icon-18px"></i>'
                        }
                    },
                    layout: {
                        top2Start: {
                            rowClass: 'row card-header flex-column flex-md-row border-bottom mx-0 px-3',
                            features: [tableTitle]
                        },
                        top2End: {
                            features: [
                                {
                                    buttons: [
                                        {
                                            extend: 'collection',
                                            className: 'btn btn-label-primary dropdown-toggle me-2 waves-effect waves-light',
                                            text: '<span class="d-flex align-items-center gap-2"><i class="icon-base ti tabler-upload icon-xs me-sm-1"></i> <span class="d-none d-sm-inline-block">Export</span></span>',
                                            buttons: [
                                                { extend: 'print', text: '<span class="d-flex align-items-center"><i class="icon-base ti tabler-printer me-1"></i>Print</span>', className: 'dropdown-item' },
                                                { extend: 'csv', text: '<span class="d-flex align-items-center"><i class="icon-base ti tabler-file-text me-1"></i>Csv</span>', className: 'dropdown-item' },
                                                { extend: 'excel', text: '<span class="d-flex align-items-center"><i class="icon-base ti tabler-file-spreadsheet me-1"></i>Excel</span>', className: 'dropdown-item' },
                                                { extend: 'pdf', text: '<span class="d-flex align-items-center"><i class="icon-base ti tabler-file-description me-1"></i>Pdf</span>', className: 'dropdown-item' },
                                                { extend: 'copy', text: '<i class="icon-base ti tabler-copy me-1"></i>Copy', className: 'dropdown-item' }
                                            ]
                                        }
                                    ]
                                }
                            ]
                        },
                        topStart: {
                            rowClass: 'row mx-0 px-3 my-0 justify-content-between border-bottom',
                            features: [
                                {
                                    pageLength: {
                                        menu: [5, 10, 25, 50],
                                        text: 'Show_MENU_entries'
                                    }
                                }
                            ]
                        },
                        topEnd: {
                            search: {
                                placeholder: ''
                            }
                        },
                        bottomStart: {
                            rowClass: 'row mx-3 justify-content-between',
                            features: ['info']
                        },
                        bottomEnd: 'paging'
                    }
                });
            });
        }
    });
</script>
@endpush
