@extends('layouts.app')

@section('title', 'Stock Reports')

@section('breadcrumbs')
  <nav class="flex" aria-label="Breadcrumb">
    <ol class="inline-flex items-center space-x-1">
      <li>
        <a href="{{ route('dashboard') }}" class="text-slate-700 hover:text-primary-600">Dashboard</a>
      </li>
      <li>
        <svg class="w-4 h-4 text-slate-400" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
        </svg>
      </li>
      <li>
        <span class="text-slate-700 font-medium">Stock Reports</span>
      </li>
    </ol>
  </nav>
@endsection

@section('content')
<div class="space-y-6">
  <!-- Header -->
  <div>
    <h1 class="text-3xl font-bold text-slate-900">Stock Reports</h1>
    <p class="text-slate-600 mt-1">Monitor inventory levels and stock status</p>
  </div>

  <!-- Filters -->
  <div class="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
      <div>
        <label class="block text-sm font-medium text-slate-700 mb-2">Category</label>
        <select class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500">
          <option value="">All Categories</option>
          <option value="bedding">Bedding & Linens</option>
          <option value="toiletries">Toiletries</option>
          <option value="kitchen">Kitchen Supplies</option>
          <option value="cleaning">Cleaning Supplies</option>
        </select>
      </div>
      <div>
        <label class="block text-sm font-medium text-slate-700 mb-2">Stock Status</label>
        <select class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500">
          <option value="">All Status</option>
          <option value="low">Low Stock</option>
          <option value="normal">Normal Stock</option>
          <option value="overstocked">Overstocked</option>
        </select>
      </div>
      <div>
        <label class="block text-sm font-medium text-slate-700 mb-2">Sort By</label>
        <select class="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500">
          <option value="name">Product Name</option>
          <option value="stock">Stock Quantity</option>
          <option value="reorder">Reorder Level</option>
        </select>
      </div>
      <div class="flex items-end">
        <button class="w-full px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200 font-medium">
          Filter
        </button>
      </div>
    </div>
  </div>

  <!-- Stock Table -->
  <div class="bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden">
    <div class="overflow-x-auto">
      <table class="w-full">
        <thead class="bg-slate-50 border-b border-slate-200">
          <tr>
            <th class="px-6 py-3 text-left text-xs font-semibold text-slate-700 uppercase tracking-wider">Product</th>
            <th class="px-6 py-3 text-left text-xs font-semibold text-slate-700 uppercase tracking-wider">Category</th>
            <th class="px-6 py-3 text-left text-xs font-semibold text-slate-700 uppercase tracking-wider">UOM</th>
            <th class="px-6 py-3 text-right text-xs font-semibold text-slate-700 uppercase tracking-wider">Stock</th>
            <th class="px-6 py-3 text-right text-xs font-semibold text-slate-700 uppercase tracking-wider">Reorder Level</th>
            <th class="px-6 py-3 text-left text-xs font-semibold text-slate-700 uppercase tracking-wider">Status</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-200">
          <!-- Low Stock Items -->
          @for ($i = 0; $i < 5; $i++)
            <tr class="hover:bg-red-50 bg-red-50">
              <td class="px-6 py-4 text-sm font-medium text-slate-900">
                @switch($i)
                  @case(0) Egyptian Cotton Sheets @break
                  @case(1) Bath Towels @break
                  @case(2) Shampoo & Conditioner @break
                  @case(3) Toilet Paper Rolls @break
                  @case(4) Washing Detergent @break
                @endswitch
              </td>
              <td class="px-6 py-4 text-sm text-slate-600">
                @switch($i)
                  @case(0) Bedding & Linens @break
                  @case(1) Bedding & Linens @break
                  @case(2) Toiletries @break
                  @case(3) Cleaning Supplies @break
                  @case(4) Cleaning Supplies @break
                @endswitch
              </td>
              <td class="px-6 py-4 text-sm text-slate-600">
                @switch($i % 3)
                  @case(0) Pieces @break
                  @case(1) Box @break
                  @case(2) Gallon @break
                @endswitch
              </td>
              <td class="px-6 py-4 text-sm font-semibold text-red-600 text-right">{{ 5 + ($i * 2) }}</td>
              <td class="px-6 py-4 text-sm text-slate-600 text-right">50</td>
              <td class="px-6 py-4 text-sm">
                <span class="px-3 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">Low Stock</span>
              </td>
            </tr>
          @endfor

          <!-- Normal Stock Items -->
          @for ($i = 0; $i < 10; $i++)
            <tr class="hover:bg-slate-50">
              <td class="px-6 py-4 text-sm font-medium text-slate-900">Product {{ $i + 6 }}</td>
              <td class="px-6 py-4 text-sm text-slate-600">
                @switch($i % 4)
                  @case(0) Bedding & Linens @break
                  @case(1) Toiletries @break
                  @case(2) Kitchen Supplies @break
                  @case(3) Cleaning Supplies @break
                @endswitch
              </td>
              <td class="px-6 py-4 text-sm text-slate-600">
                @switch($i % 3)
                  @case(0) Pieces @break
                  @case(1) Box @break
                  @case(2) Gallon @break
                @endswitch
              </td>
              <td class="px-6 py-4 text-sm font-semibold text-green-600 text-right">{{ 150 + ($i * 20) }}</td>
              <td class="px-6 py-4 text-sm text-slate-600 text-right">50</td>
              <td class="px-6 py-4 text-sm">
                <span class="px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">Normal Stock</span>
              </td>
            </tr>
          @endfor

          <!-- Overstocked Items -->
          @for ($i = 0; $i < 3; $i++)
            <tr class="hover:bg-yellow-50 bg-yellow-50">
              <td class="px-6 py-4 text-sm font-medium text-slate-900">Overstocked Item {{ $i + 1 }}</td>
              <td class="px-6 py-4 text-sm text-slate-600">Kitchen Supplies</td>
              <td class="px-6 py-4 text-sm text-slate-600">Pieces</td>
              <td class="px-6 py-4 text-sm font-semibold text-accent-600 text-right">{{ 500 + ($i * 100) }}</td>
              <td class="px-6 py-4 text-sm text-slate-600 text-right">100</td>
              <td class="px-6 py-4 text-sm">
                <span class="px-3 py-1 rounded-full text-xs font-medium bg-accent-100 text-accent-800">Overstocked</span>
              </td>
            </tr>
          @endfor
        </tbody>
      </table>
    </div>

    <!-- Pagination -->
    <div class="bg-white border-t border-slate-200 px-6 py-4 flex items-center justify-between">
      <p class="text-sm text-slate-600">Showing 1 to 18 of 48 products</p>
      <div class="flex space-x-2">
        <button class="px-3 py-2 border border-slate-300 rounded-lg text-sm font-medium text-slate-700 hover:bg-slate-50">Previous</button>
        <button class="px-3 py-2 border border-primary-300 bg-primary-50 rounded-lg text-sm font-medium text-primary-600">1</button>
        <button class="px-3 py-2 border border-slate-300 rounded-lg text-sm font-medium text-slate-700 hover:bg-slate-50">2</button>
        <button class="px-3 py-2 border border-slate-300 rounded-lg text-sm font-medium text-slate-700 hover:bg-slate-50">3</button>
        <button class="px-3 py-2 border border-slate-300 rounded-lg text-sm font-medium text-slate-700 hover:bg-slate-50">Next</button>
      </div>
    </div>
  </div>

  <!-- Summary Stats -->
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    <div class="bg-red-50 border border-red-200 rounded-lg p-6">
      <h3 class="font-semibold text-red-900 mb-3">Low Stock Items</h3>
      <p class="text-3xl font-bold text-red-600">5</p>
      <p class="text-sm text-red-800 mt-2">Products below reorder level</p>
    </div>
    <div class="bg-green-50 border border-green-200 rounded-lg p-6">
      <h3 class="font-semibold text-green-900 mb-3">Normal Stock</h3>
      <p class="text-3xl font-bold text-green-600">40</p>
      <p class="text-sm text-green-800 mt-2">Products in good stock</p>
    </div>
    <div class="bg-accent-50 border border-accent-200 rounded-lg p-6">
      <h3 class="font-semibold text-accent-900 mb-3">Overstocked Items</h3>
      <p class="text-3xl font-bold text-accent-600">3</p>
      <p class="text-sm text-accent-800 mt-2">Products exceeding optimal level</p>
    </div>
  </div>

  <!-- Export Options -->
  <div class="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
    <h3 class="font-semibold text-slate-900 mb-4">Export Options</h3>
    <div class="flex flex-wrap gap-3">
      <button class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors duration-200 flex items-center space-x-2">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        </svg>
        <span>Export as Excel</span>
      </button>
      <button class="px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors duration-200 flex items-center space-x-2">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        </svg>
        <span>Export as PDF</span>
      </button>
    </div>
  </div>
</div>
@endsection