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

@section('content')
<div class="row g-4 mb-4">
    <div class="col-md-4">
        <div class="card h-100">
            <div class="card-body text-center">
                <div class="badge bg-label-primary p-3 rounded mb-3">
                    <i class="ti tabler-package fs-2"></i>
                </div>
                <h5 class="card-title">Laporan Inventaris</h5>
                <p class="card-text text-muted">Export stok, kondisi, dan lokasi barang ke Excel.</p>
                <a href="{{ route('reports.export', 'items') }}" class="btn btn-primary mt-2">Export Inventaris</a>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card h-100">
            <div class="card-body text-center">
                <div class="badge bg-label-success p-3 rounded mb-3">
                    <i class="ti tabler-arrows-left-right fs-2"></i>
                </div>
                <h5 class="card-title">Laporan Peminjaman</h5>
                <p class="card-text text-muted">Export histori checkout-checkin.</p>
                <a href="{{ route('reports.export', 'loans') }}" class="btn btn-success mt-2">Export Peminjaman</a>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card h-100">
            <div class="card-body text-center">
                <div class="badge bg-label-info p-3 rounded mb-3">
                    <i class="ti tabler-tool fs-2"></i>
                </div>
                <h5 class="card-title">Laporan Maintenance</h5>
                <p class="card-text text-muted">Export histori maintenance dan pemeriksaan.</p>
                <a href="{{ route('reports.export', 'maintenance') }}" class="btn btn-info mt-2">Export Maintenance</a>
            </div>
        </div>
    </div>
</div>

<div class="row g-4">
    <div class="col-md-6">
        <div class="card">
            <h5 class="card-header border-bottom">Preview Inventaris</h5>
            <div class="card-datatable table-responsive pt-0">
                <table class="datatables-report table table-hover">
                    <thead>
                        <tr>
                            <th>Lokasi</th>
                            <th>Barang</th>
                            <th>Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($items as $item)
                            <tr>
                                <td>{{ $item->location?->name }}</td>
                                <td><strong>{{ $item->name }}</strong></td>
                                <td><span class="badge bg-label-primary">{{ $item->total_quantity }}</span></td>
                            </tr>
                        @empty
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <h5 class="card-header border-bottom">Preview Maintenance</h5>
            <div class="card-datatable table-responsive pt-0">
                <table class="datatables-report table table-hover">
                    <thead>
                        <tr>
                            <th>Objek</th>
                            <th>Tanggal</th>
                            <th>Kondisi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($logs as $log)
                            <tr>
                                <td><strong>{{ $log->maintainable?->name ?? '-' }}</strong></td>
                                <td>{{ $log->performed_at?->translatedFormat('l, d F Y H:i') }}</td>
                                <td>
                                    @if($log->condition === 'good')
                                        <span class="badge bg-label-success">BAIK</span>
                                    @elseif($log->condition === 'minor')
                                        <span class="badge bg-label-warning">RUSAK RINGAN</span>
                                    @else
                                        <span class="badge bg-label-danger">RUSAK BERAT</span>
                                    @endif
                                </td>
                            </tr>
                        @empty
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script type="module">
    $(function() {
        var dt_report_tables = $('.datatables-report');
        if (dt_report_tables.length) {
            dt_report_tables.each(function() {
                let $table = $(this);
                let titleText = $table.closest('.card').find('h5.card-header').text() || 'Tabel Laporan';
                
                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
