@extends('layouts.app')

@section('content')
<main class="main-content">
  <div class="page-header"><h1 class="page-title">Print QR Material</h1></div>
  <div class="content-card">
    <div class="card-body">
      <form method="GET" action="{{ route('home') }}" class="search-container">
        <i class="bi bi-list search-icon-left"></i>
        <input type="text" name="search" class="search-input" placeholder="Search by Code or Description" value="{{ request('search') }}" onchange="this.form.submit()">
        <i class="bi bi-search search-icon-right" onclick="this.closest('form').submit()"></i>
      </form>
      
      <div class="table-container">
        <table class="data-table">
          <thead><tr><th>Kode Material</th><th>Deskripsi material</th><th>Action</th></tr></thead>
          <tbody>
            @foreach($materials as $m)
            <tr class="clickable-row" onclick="window.location='{{ route('qr.create', $m->id) }}'">
              <td><span class="table-code">{{ $m->code }}</span></td>
              <td><span class="table-description">{{ $m->description }}</span></td>
              <td>
                <div class="table-action">
                  <a href="{{ route('qr.create', $m->id) }}" class="btn-icon"><i class="bi bi-qr-code"></i></a>
                </div>
              </td>
            </tr>
            @endforeach
            @if($materials->isEmpty())
            <tr><td colspan="3"><div class="empty-state"><div class="empty-state-icon">📦</div><div class="empty-state-title">No materials found</div></div></td></tr>
            @endif
          </tbody>
        </table>
      </div>
    </div>
  </div>
</main>
@endsection