@extends('layouts.app')

@section('title', 'Purchases')

@section('breadcrumbs')
  <nav class="flex" aria-label="Breadcrumb">
    <ol class="inline-flex items-center space-x-1 md:space-x-3">
      <li>
        <a href="{{ route('dashboard') }}" class="inline-flex items-center text-sm font-medium text-slate-500 hover:text-slate-700">
          <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
          Home
        </a>
      </li>
      <li>
        <div class="flex items-center">
          <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>
          <span class="ml-1 text-sm font-medium text-slate-700">Purchases</span>
        </div>
      </li>
    </ol>
  </nav>
@endsection

@section('content')
<div x-data="purchaseFilter()">
  <!-- Header Section -->
  <div class="mb-8">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
      <div>
        <h1 class="text-3xl font-bold text-slate-900">Purchases</h1>
        <p class="text-slate-600 mt-1">Manage and track all supplier purchases</p>
      </div>
      <a href="{{ route('purchases.create') }}" class="inline-flex items-center px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200 font-medium">
        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
        </svg>
        Add Purchase
      </a>
    </div>
  </div>

  <!-- Filters Section -->
  <div class="bg-white rounded-lg shadow-sm border border-slate-200 p-6 mb-6">
    <h3 class="text-lg font-semibold text-slate-900 mb-4">Filters</h3>
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
      <!-- Date Range Filter -->
      <div>
        <label class="block text-sm font-medium text-slate-700 mb-2">From Date</label>
        <input
          type="date"
          x-model="filters.from_date"
          @change="apply()"
          class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
        >
      </div>

      <div>
        <label class="block text-sm font-medium text-slate-700 mb-2">To Date</label>
        <input
          type="date"
          x-model="filters.to_date"
          @change="apply()"
          class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
        >
      </div>

      <!-- Supplier Filter -->
      <div>
        <label class="block text-sm font-medium text-slate-700 mb-2">Supplier</label>
        <select
          x-model="filters.supplier"
          @change="apply()"
          class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
        >
          <option value="">All Suppliers</option>
          <option value="supplier1">Supplier 1</option>
          <option value="supplier2">Supplier 2</option>
        </select>
      </div>

      <!-- Status Filter -->
      <div>
        <label class="block text-sm font-medium text-slate-700 mb-2">Status</label>
        <select
          x-model="filters.status"
          @change="apply()"
          class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
        >
          <option value="">All Status</option>
          <option value="paid">Paid</option>
          <option value="unpaid">Unpaid</option>
        </select>
      </div>
    </div>
  </div>

  <!-- Table Section -->
  <div class="bg-white rounded-lg shadow-sm border border-slate-200 overflow-hidden">
    <div class="overflow-x-auto">
      <table class="w-full">
        <thead>
          <tr class="bg-slate-50 border-b border-slate-200">
            <th class="px-6 py-3 text-left text-sm font-semibold text-slate-900">Invoice No</th>
            <th class="px-6 py-3 text-left text-sm font-semibold text-slate-900">Supplier</th>
            <th class="px-6 py-3 text-left text-sm font-semibold text-slate-900">Date</th>
            <th class="px-6 py-3 text-left text-sm font-semibold text-slate-900">Items</th>
            <th class="px-6 py-3 text-left text-sm font-semibold text-slate-900">Total Amount</th>
            <th class="px-6 py-3 text-left text-sm font-semibold text-slate-900">Status</th>
            <th class="px-6 py-3 text-left text-sm font-semibold text-slate-900">Actions</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-slate-200">
          <tr class="hover:bg-slate-50 transition-colors duration-200">
            <td class="px-6 py-4 text-sm text-slate-900 font-medium">INV-001</td>
            <td class="px-6 py-4 text-sm text-slate-600">ABC Suppliers</td>
            <td class="px-6 py-4 text-sm text-slate-600">Jan 15, 2026</td>
            <td class="px-6 py-4 text-sm text-slate-600">5</td>
            <td class="px-6 py-4 text-sm text-slate-900 font-semibold">$2,450.00</td>
            <td class="px-6 py-4 text-sm">
              <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Paid</span>
            </td>
            <td class="px-6 py-4 text-sm">
              <div class="flex items-center space-x-2">
                <a href="#" class="text-primary-600 hover:text-primary-700 font-medium">View</a>
                <a href="#" class="text-accent-600 hover:text-accent-700 font-medium">Edit</a>
                <form action="#" method="POST" class="inline" onsubmit="return confirm('Are you sure?');">
                  @csrf
                  @method('DELETE')
                  <button type="submit" class="text-red-600 hover:text-red-700 font-medium">Delete</button>
                </form>
              </div>
            </td>
          </tr>

          <tr class="hover:bg-slate-50 transition-colors duration-200">
            <td class="px-6 py-4 text-sm text-slate-900 font-medium">INV-002</td>
            <td class="px-6 py-4 text-sm text-slate-600">XYZ Traders</td>
            <td class="px-6 py-4 text-sm text-slate-600">Jan 20, 2026</td>
            <td class="px-6 py-4 text-sm text-slate-600">8</td>
            <td class="px-6 py-4 text-sm text-slate-900 font-semibold">$3,850.50</td>
            <td class="px-6 py-4 text-sm">
              <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">Unpaid</span>
            </td>
            <td class="px-6 py-4 text-sm">
              <div class="flex items-center space-x-2">
                <a href="#" class="text-primary-600 hover:text-primary-700 font-medium">View</a>
                <a href="#" class="text-accent-600 hover:text-accent-700 font-medium">Edit</a>
                <form action="#" method="POST" class="inline" onsubmit="return confirm('Are you sure?');">
                  @csrf
                  @method('DELETE')
                  <button type="submit" class="text-red-600 hover:text-red-700 font-medium">Delete</button>
                </form>
              </div>
            </td>
          </tr>

          <tr class="hover:bg-slate-50 transition-colors duration-200">
            <td class="px-6 py-4 text-sm text-slate-900 font-medium">INV-003</td>
            <td class="px-6 py-4 text-sm text-slate-600">Global Imports</td>
            <td class="px-6 py-4 text-sm text-slate-600">Jan 25, 2026</td>
            <td class="px-6 py-4 text-sm text-slate-600">12</td>
            <td class="px-6 py-4 text-sm text-slate-900 font-semibold">$5,200.00</td>
            <td class="px-6 py-4 text-sm">
              <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Paid</span>
            </td>
            <td class="px-6 py-4 text-sm">
              <div class="flex items-center space-x-2">
                <a href="#" class="text-primary-600 hover:text-primary-700 font-medium">View</a>
                <a href="#" class="text-accent-600 hover:text-accent-700 font-medium">Edit</a>
                <form action="#" method="POST" class="inline" onsubmit="return confirm('Are you sure?');">
                  @csrf
                  @method('DELETE')
                  <button type="submit" class="text-red-600 hover:text-red-700 font-medium">Delete</button>
                </form>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- Pagination -->
    <div class="bg-white px-6 py-4 border-t border-slate-200 flex items-center justify-between">
      <div class="text-sm text-slate-600">
        Showing <span class="font-medium">1</span> to <span class="font-medium">10</span> of <span class="font-medium">50</span> results
      </div>
      <div class="flex items-center 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 transition-colors duration-200 disabled:opacity-50" disabled>
          Previous
        </button>
        <button class="px-3 py-2 bg-primary-600 text-white rounded-lg text-sm font-medium hover:bg-primary-700 transition-colors duration-200">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 transition-colors duration-200">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 transition-colors duration-200">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 transition-colors duration-200">
          Next
        </button>
      </div>
    </div>
  </div>
</div>

<script>
  function purchaseFilter() {
    return {
      filters: {
        from_date: '',
        to_date: '',
        supplier: '',
        status: ''
      },
      apply() {
        // Handle filter application
        console.log('Filters applied:', this.filters);
      }
    };
  }
</script>
@endsection