@extends('layouts.app')

@section('title', 'QR Code Ruangan')
@section('page_title', 'QR Code Ruangan')
@section('page_pretitle', 'QR Tracking')

@section('page_actions')
  <a class="btn btn-primary" href="{{ route('rooms.index') }}">
    <i class="ti ti-building me-1"></i>
    Kelola Ruangan
  </a>
@endsection

@section('content')
  <div class="row row-cards">
    @forelse ($rooms as $room)
      <div class="col-sm-6 col-xl-4">
        <div class="card h-100">
          <div class="card-body">
            <div class="d-flex gap-3">
              <img class="qr-card-image" src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data={{ urlencode($room->scanUrl()) }}" alt="QR {{ $room->nama_ruangan }}">
              <div class="flex-fill">
                <div class="subheader">{{ $room->kode_ruangan }}</div>
                <h3 class="card-title mb-1">{{ $room->nama_ruangan }}</h3>
                <div class="text-secondary">{{ $room->inventory_items_count }} barang terdaftar</div>
                <div class="mt-3">
                  <span class="badge {{ $room->status_ruangan === 'active' ? 'bg-success-lt text-success' : 'bg-warning-lt text-warning' }}">
                    {{ $room->status_ruangan === 'active' ? 'Aktif' : 'Nonaktif' }}
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div class="card-footer">
            <div class="btn-list">
              <a class="btn btn-primary" href="{{ route('rooms.qr.pdf', $room) }}" target="_blank" rel="noopener">
                <i class="ti ti-file-type-pdf me-1"></i>
                Print QR PDF
              </a>
            </div>
          </div>
        </div>
      </div>
    @empty
      <div class="col-12">
        <div class="empty">
          <div class="empty-icon"><i class="ti ti-qrcode"></i></div>
          <p class="empty-title">Belum ada ruangan untuk dibuatkan QR.</p>
        </div>
      </div>
    @endforelse
  </div>
@endsection
