@extends('layouts.user_type.auth')

@section('content')

<main class="main-content position-relative max-height-vh-100 h-100 mt-1 border-radius-lg">
  <div class="container-fluid py-4">
    <div class="row">
      <div class="col-12">
        <div class="card mb-4">
          <div class="card-header pb-0">
            <div class="row">
              <div class="col-6">
                <h6>
                  <i class="fas fa-boxes me-2 text-info"></i>
                  @if(request('category'))
                    @switch(request('category'))
                      @case('computer')
                        <i class="fas fa-desktop me-2 text-info"></i>Computer Items
                        @break
                      @case('laptop')
                        <i class="fas fa-laptop me-2 text-info"></i>Laptop Items
                        @break
                      @case('antivirus')
                        <i class="fas fa-shield-alt me-2 text-info"></i>Antivirus Items
                        @break
                      @default
                        All Items
                    @endswitch
                  @else
                    All Items
                  @endif
                </h6>
                <p class="text-sm mb-0">
                  <i class="fa fa-check text-info" aria-hidden="true"></i>
                  <span class="font-weight-bold">{{ $items->total() }} items found</span>
                </p>
              </div>
              <div class="col-6 text-end">
                @can('create items')
                <a href="{{ route('items.create') }}" class="btn bg-gradient-info btn-sm">
                  <i class="fas fa-plus me-2"></i>Add New Item
                </a>
                @endcan
              </div>
            </div>
          </div>

          <!-- Alert Messages -->
          @if(session('success'))
            <div class="alert alert-success border-0 mx-3 mt-3" role="alert">
              <div class="d-flex align-items-center">
                <i class="fas fa-check-circle me-3 text-success"></i>
                <div>
                  <strong>Success!</strong> {{ session('success') }}
                </div>
              </div>
            </div>
          @endif
          @if(session('error'))
            <div class="alert alert-danger border-0 mx-3 mt-3" role="alert">
              <div class="d-flex align-items-center">
                <i class="fas fa-exclamation-triangle me-3 text-danger"></i>
                <div>
                  <strong>Error!</strong> {{ session('error') }}
                </div>
              </div>
            </div>
          @endif

          <!-- Search and Filter Form -->
          <div class="card-body px-0 pt-0 pb-2">
            <div class="p-3 border-bottom">
              <form method="GET" class="row g-3">
                <div class="col-lg-3 col-md-6">
                  <div class="form-group">
                    <label class="form-label text-sm font-weight-bold text-dark mb-2">
                      <i class="fas fa-search me-2 text-info"></i>Search Items
                    </label>
                    <input type="text" name="search" class="form-control" 
                           value="{{ request('search') }}" 
                           placeholder="Enter item name...">
                  </div>
                </div>
                <div class="col-lg-3 col-md-6">
                  <div class="form-group">
                    <label class="form-label text-sm font-weight-bold text-dark mb-2">
                      <i class="fas fa-filter me-2 text-info"></i>Status Filter
                    </label>
                    <select name="status" class="form-control">
                      <option value="">All Status</option>
                      <option value="gudang" @selected(request('status') == 'gudang')>Gudang</option>
                      <option value="distributor" @selected(request('status') == 'distributor')>Distributor</option>
                    </select>
                  </div>
                </div>



                <div class="col-lg-3 col-md-12">
                  <div class="d-flex gap-2 mt-4">
                    <button class="btn bg-gradient-info btn-sm flex-fill" type="submit">
                      <i class="fas fa-search me-2"></i>Search
                    </button>
                    <a href="{{ route('items.index') }}" class="btn bg-gradient-secondary btn-sm" title="Clear all filters">
                      <i class="fas fa-times"></i>
                    </a>
                  </div>
                </div>
              </form>
            </div>

            <!-- Items Table -->
            <div class="table-responsive p-0">
              <table class="table align-items-center mb-0">
                <thead>
                  <tr>
                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Item</th>
                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Category</th>
                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Stock</th>
                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Expiry Date</th>
                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Location</th>
                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Serial Number</th>
                    <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Location Status</th>
                    <th class="text-secondary opacity-7"></th>
                  </tr>
                </thead>
                <tbody>
                  @forelse($items as $item)
                  <tr>
                    <td>
                      <div class="d-flex px-2 py-1">
                        <div>
                          <div class="icon icon-shape icon-sm me-3 d-flex align-items-center justify-content-center">
                            <i class="fas fa-box text-info"></i>
                          </div>
                        </div>
                        <div class="d-flex flex-column justify-content-center">
                          <h6 class="mb-0 text-sm">{{ $item->name }}</h6>
                          <p class="text-xs text-secondary mb-0">{{ $item->description ?: 'No description' }}</p>
                        </div>
                      </div>
                    </td>
                    <td>
                      <div class="d-flex align-items-center">
                        @switch($item->category)
                          @case('computer')
                            <div class="icon icon-shape icon-sm me-2 d-flex align-items-center justify-content-center">
                              <i class="fas fa-desktop text-primary"></i>
                            </div>
                            <span class="text-xs font-weight-bold text-primary">Computer</span>
                            @break
                          @case('laptop')
                            <div class="icon icon-shape icon-sm me-2 d-flex align-items-center justify-content-center">
                              <i class="fas fa-laptop text-info"></i>
                            </div>
                            <span class="text-xs font-weight-bold text-info">Laptop</span>
                            @break
                          @case('antivirus')
                            <div class="icon icon-shape icon-sm me-2 d-flex align-items-center justify-content-center">
                              <i class="fas fa-shield-alt text-success"></i>
                            </div>
                            <span class="text-xs font-weight-bold text-success">Antivirus</span>
                            @break
                          @default
                            <div class="icon icon-shape icon-sm me-2 d-flex align-items-center justify-content-center">
                              <i class="fas fa-tag text-secondary"></i>
                            </div>
                            <span class="text-xs font-weight-bold text-secondary">Unknown</span>
                        @endswitch
                      </div>
                    </td>
                    <td class="align-middle text-center text-sm">
                      <div class="d-flex align-items-center justify-content-center">
                        <div class="icon icon-shape icon-sm me-2 d-flex align-items-center justify-content-center">
                          <i class="fas fa-cubes text-{{ $item->stock > 20 ? 'success' : ($item->stock > 5 ? 'warning' : ($item->stock > 0 ? 'danger' : 'secondary')) }}"></i>
                        </div>
                        <span class="text-xs font-weight-bold text-{{ $item->stock > 20 ? 'success' : ($item->stock > 5 ? 'warning' : ($item->stock > 0 ? 'danger' : 'secondary')) }}">{{ $item->stock }}</span>
                      </div>
                    </td>
                    <td class="align-middle text-center">
                      <div class="d-flex align-items-center justify-content-center">
                        <div class="icon icon-shape icon-sm me-2 d-flex align-items-center justify-content-center">
                          <i class="fas fa-calendar text-{{ $item->expired_at ? ($item->is_expired ? 'danger' : ($item->is_expiring_soon ? 'warning' : 'success')) : 'info' }}"></i>
                        </div>
                        <span class="text-xs font-weight-bold text-{{ $item->expired_at ? ($item->is_expired ? 'danger' : ($item->is_expiring_soon ? 'warning' : 'success')) : 'info' }}">
                          @if($item->expired_at)
                            {{ $item->expired_at->format('d/m/Y') }}
                          @else
                            No expiry
                          @endif
                        </span>
                      </div>
                    </td>
                    <td>
                      <div class="d-flex align-items-center">
                        <div class="icon icon-shape icon-sm me-2 d-flex align-items-center justify-content-center">
                          <i class="fas fa-map-marker-alt text-info"></i>
                        </div>
                        <span class="text-xs font-weight-bold text-info">{{ $item->distribution ?: 'Not specified' }}</span>
                      </div>
                    </td>
                    <td>
                      <div class="d-flex align-items-center">
                        <div class="icon icon-shape icon-sm me-2 d-flex align-items-center justify-content-center">
                          <i class="fas fa-barcode text-secondary"></i>
                        </div>
                        <span class="text-xs font-weight-bold text-secondary">{{ $item->serial_number ?: 'No serial' }}</span>
                      </div>
                    </td>
                    <td class="align-middle text-center text-sm">
                      <div class="d-flex align-items-center justify-content-center">
                        <div class="icon icon-shape icon-sm me-2 d-flex align-items-center justify-content-center">
                          <i class="fas fa-{{ $item->status == 'gudang' ? 'warehouse' : 'truck' }} text-{{ $item->status == 'gudang' ? 'info' : 'warning' }}"></i>
                        </div>
                        <span class="text-xs font-weight-bold text-{{ $item->status == 'gudang' ? 'info' : 'warning' }}">
                          {{ ucfirst($item->status) }}
                        </span>
                      </div>
                    </td>
                    <td class="align-middle">
                      <div class="d-flex align-items-center">
                        <a href="{{ route('items.show', $item) }}" class="text-secondary font-weight-bold text-xs me-2" data-toggle="tooltip" data-original-title="View details">
                          <i class="fas fa-eye"></i>
                        </a>
                        @can('edit items')
                        <a href="{{ route('items.edit', $item) }}" class="text-secondary font-weight-bold text-xs me-2" data-toggle="tooltip" data-original-title="Edit item">
                          <i class="fas fa-edit"></i>
                        </a>
                        @endcan
                        @can('delete items')
                        <form action="{{ route('items.destroy', $item) }}" method="POST" class="d-inline" onsubmit="return confirm('Are you sure you want to delete this item?')">
                          @csrf
                          @method('DELETE')
                          <button type="submit" class="text-danger font-weight-bold text-xs border-0 bg-transparent" data-toggle="tooltip" data-original-title="Delete item">
                            <i class="fas fa-trash"></i>
                          </button>
                        </form>
                        @endcan
                      </div>
                    </td>
                  </tr>
                  @empty
                  <tr>
                    <td colspan="8" class="text-center py-5">
                      <div class="d-flex flex-column align-items-center">
                        <div class="icon icon-shape icon-lg bg-gradient-info rounded-3 d-flex align-items-center justify-content-center mb-3">
                          <i class="fas fa-box-open text-white"></i>
                        </div>
                        <h6 class="text-info mb-2">No items found</h6>
                        <p class="text-info text-sm mb-3">Try adjusting your search criteria or add a new item to get started.</p>
                        @can('create items')
                          <a href="{{ route('items.create') }}" class="btn bg-gradient-info btn-sm">
                            <i class="fas fa-plus me-2"></i>Add Your First Item
                          </a>
                        @endcan
                      </div>
                    </td>
                  </tr>
                  @endforelse
                </tbody>
              </table>
            </div>

            <!-- Pagination -->
            @if($items->hasPages())
            <div class="card-footer bg-white border-0 d-flex justify-content-center py-3">
              <div class="d-flex align-items-center">
                <span class="text-sm text-info me-3">
                  Showing {{ $items->firstItem() ?? 0 }} to {{ $items->lastItem() ?? 0 }} of {{ $items->total() }} items
                </span>
                {{ $items->withQueryString()->links() }}
              </div>
            </div>
            @endif
          </div>
        </div>
      </div>
    </div>
  </div>
</main>

@endsection