@extends('layouts.app', ['title' => 'Detail Lokasi', 'heading' => 'Detail Lokasi / Ruangan'])

@section('content')
<div class="row g-4 mb-4">
    <!-- Info Lokasi -->
    <div class="col-12 col-md-4">
        <div class="card h-100">
            <div class="card-header border-bottom mb-3">
                <h5 class="card-title mb-0">Informasi Lokasi</h5>
            </div>
            <div class="card-body">
                <div class="d-flex align-items-center mb-4">
                    <div class="avatar avatar-xl bg-label-primary rounded p-3 me-3">
                        <i class="ti tabler-map-pin ti-xl"></i>
                    </div>
                    <div>
                        <h4 class="mb-1">{{ $location->name }}</h4>
                        <span class="badge {{ $location->is_active ? 'bg-label-success' : 'bg-label-secondary' }}">
                            {{ $location->is_active ? 'Aktif' : 'Nonaktif' }}
                        </span>
                    </div>
                </div>
                <div class="mb-3">
                    <small class="text-muted text-uppercase">Deskripsi</small>
                    <p class="mb-0">{{ $location->description ?: 'Tidak ada deskripsi' }}</p>
                </div>
                <div class="d-flex gap-2 mt-4">
                    <a href="{{ route('locations.edit', $location) }}" class="btn btn-primary w-100">
                        <i class="ti tabler-edit me-1"></i> Edit Lokasi
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Ringkasan Statistik -->
    <div class="col-12 col-md-8">
        <div class="row g-4">
            <div class="col-sm-6">
                <div class="card h-100">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="avatar avatar-md bg-label-info rounded p-2 me-3">
                                <i class="ti tabler-package ti-md"></i>
                            </div>
                            <div class="d-flex flex-column">
                                <span class="fw-semibold">Total Inventaris</span>
                                <h3 class="mb-0">{{ $items->count() }} Item</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="card h-100">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="avatar avatar-md bg-label-warning rounded p-2 me-3">
                                <i class="ti tabler-building-community ti-md"></i>
                            </div>
                            <div class="d-flex flex-column">
                                <span class="fw-semibold">Total Fasilitas</span>
                                <h3 class="mb-0">{{ $facilities->count() }} Objek</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="col-12 mt-4">
                <div class="card">
                    <div class="card-body">
                        <h5 class="mb-3">Aksi Cepat</h5>
                        <div class="d-flex gap-2 flex-wrap">
                            <a href="{{ route('qr.print', ['location_id' => $location->id]) }}" target="_blank" class="btn btn-label-dark">
                                <i class="ti tabler-printer me-1"></i> Cetak QR Ruangan Ini
                            </a>
                            <a href="{{ route('items.create', ['location_id' => $location->id]) }}" class="btn btn-label-info">
                                <i class="ti tabler-plus me-1"></i> Tambah Inventaris
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row g-4">
    <!-- Tabel Barang Inventaris -->
    <div class="col-12 col-lg-6">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between align-items-center border-bottom">
                <h5 class="m-0">Data Inventaris di {{ $location->name }}</h5>
                <span class="badge bg-label-info rounded-pill">{{ $items->count() }}</span>
            </div>
            <div class="card-datatable table-responsive pt-0">
                <table class="datatables-basic table table-hover">
                    <thead>
                        <tr>
                            <th>Barang</th>
                            <th>Stok / Tracking</th>
                            <th>Kondisi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($items as $item)
                            <tr>
                                <td>
                                    <strong>{{ $item->name }}</strong>
                                </td>
                                <td>
                                    @if ($item->tracking_mode === 'stock')
                                        <span class="badge bg-label-secondary">Stok: {{ $item->stock?->available_quantity ?? 0 }}</span>
                                    @else
                                        <span class="badge bg-label-primary">Unit Berkode</span>
                                    @endif
                                </td>
                                <td>
                                    @php
                                        $badges = [
                                            'good' => 'bg-label-success',
                                            'minor' => 'bg-label-warning',
                                            'major' => 'bg-label-danger',
                                            'lost' => 'bg-label-secondary'
                                        ];
                                        $labels = [
                                            'good' => 'Baik',
                                            'minor' => 'Rusak Ringan',
                                            'major' => 'Rusak Berat',
                                            'lost' => 'Hilang'
                                        ];
                                        $condition = $item->current_condition ?? 'good';
                                    @endphp
                                    <span class="badge {{ $badges[$condition] }}">{{ $labels[$condition] }}</span>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="3" class="text-center text-muted py-4">Belum ada inventaris di lokasi ini.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Tabel Objek Fasilitas -->
    <div class="col-12 col-lg-6">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between align-items-center border-bottom">
                <h5 class="m-0">Keadaan Fasilitas di {{ $location->name }}</h5>
                <span class="badge bg-label-warning rounded-pill">{{ $facilities->count() }}</span>
            </div>
            <div class="card-datatable table-responsive pt-0">
                <table class="datatables-basic table table-hover">
                    <thead>
                        <tr>
                            <th>Fasilitas</th>
                            <th>Kondisi Terkini</th>
                            <th>Cek Terakhir</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($facilities as $facility)
                            <tr>
                                <td>
                                    <strong>{{ $facility->name }}</strong>
                                </td>
                                <td>
                                    @php
                                        $badges = [
                                            'good' => 'bg-label-success',
                                            'minor' => 'bg-label-warning',
                                            'major' => 'bg-label-danger',
                                            'lost' => 'bg-label-secondary'
                                        ];
                                        $labels = [
                                            'good' => 'Baik',
                                            'minor' => 'Rusak Ringan',
                                            'major' => 'Rusak Berat',
                                            'lost' => 'Hilang'
                                        ];
                                        $condition = $facility->current_condition ?? 'good';
                                    @endphp
                                    <span class="badge {{ $badges[$condition] }}">{{ $labels[$condition] }}</span>
                                </td>
                                <td>
                                    <small class="text-muted">
                                        {{ $facility->last_checked_at ? $facility->last_checked_at->translatedFormat('l, d F Y H:i') : '-' }}
                                    </small>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="3" class="text-center text-muted py-4">Belum ada fasilitas tercatat di lokasi ini.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

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