@extends('layouts.app')

@section('title', 'Add Purchase')

@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>
          <a href="{{ route('purchases.index') }}" class="ml-1 text-sm font-medium text-slate-500 hover:text-slate-700">Purchases</a>
        </div>
      </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">Add Purchase</span>
        </div>
      </li>
    </ol>
  </nav>
@endsection

@section('content')
<div x-data="purchaseForm()" class="max-w-6xl mx-auto">
  <!-- Header -->
  <div class="mb-8">
    <h1 class="text-3xl font-bold text-slate-900">Add New Purchase</h1>
    <p class="text-slate-600 mt-1">Create a new purchase order and manage items</p>
  </div>

  <form @submit.prevent="submit()" class="space-y-6">
    @csrf

    <!-- Basic Information Card -->
    <div class="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
      <h2 class="text-xl font-semibold text-slate-900 mb-4">Basic Information</h2>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <!-- Supplier -->
        <div>
          <label for="supplier_id" class="block text-sm font-medium text-slate-700 mb-2">
            Supplier <span class="text-red-500">*</span>
          </label>
          <div class="relative" x-ref="supplierContainer">
            <input
              type="hidden"
              x-model="form.supplier_id"
              name="supplier_id"
            >
            <input
              type="text"
              x-model="supplierSearch"
              @input="handleSupplierSearch()"
              @focus="showSupplierDropdown = true"
              @keydown.arrow-down.prevent="selectedSupplierIndex = Math.min(selectedSupplierIndex + 1, filteredSuppliers.length - 1)"
              @keydown.arrow-up.prevent="selectedSupplierIndex = Math.max(selectedSupplierIndex - 1, 0)"
              @keydown.enter.prevent="selectSupplier(filteredSuppliers[selectedSupplierIndex])"
              @click.away="showSupplierDropdown = false"
              placeholder="Search suppliers..."
              class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
            >
            <div
              x-show="showSupplierDropdown && filteredSuppliers.length > 0"
              class="absolute top-full left-0 right-0 mt-1 bg-white border border-slate-300 rounded-lg shadow-lg z-10 max-h-48 overflow-y-auto"
            >
              <template x-for="(supplier, index) in filteredSuppliers" :key="supplier.id">
                <button
                  type="button"
                  @click="selectSupplier(supplier)"
                  :class="index === selectedSupplierIndex ? 'bg-primary-50' : 'hover:bg-slate-50'"
                  class="w-full text-left px-4 py-2 text-sm text-slate-900 transition-colors duration-200 border-b border-slate-100 last:border-b-0"
                  x-text="supplier.name"
                ></button>
              </template>
            </div>
          </div>
          @error('supplier_id')
            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
          @enderror
        </div>

        <!-- Invoice Number -->
        <div>
          <label for="invoice_number" class="block text-sm font-medium text-slate-700 mb-2">
            Invoice Number <span class="text-red-500">*</span>
          </label>
          <input
            type="text"
            x-model="form.invoice_number"
            name="invoice_number"
            placeholder="e.g., INV-001"
            class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
            required
          >
          @error('invoice_number')
            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
          @enderror
        </div>

        <!-- Purchase Date -->
        <div>
          <label for="purchase_date" class="block text-sm font-medium text-slate-700 mb-2">
            Purchase Date <span class="text-red-500">*</span>
          </label>
          <input
            type="date"
            x-model="form.purchase_date"
            name="purchase_date"
            class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
            required
          >
          @error('purchase_date')
            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
          @enderror
        </div>

        <!-- Expiry Date -->
        <div>
          <label for="expiry_date" class="block text-sm font-medium text-slate-700 mb-2">
            Expiry Date
          </label>
          <input
            type="date"
            x-model="form.expiry_date"
            name="expiry_date"
            class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
          >
          @error('expiry_date')
            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
          @enderror
        </div>
      </div>

      <!-- Details -->
      <div class="mt-4">
        <label for="details" class="block text-sm font-medium text-slate-700 mb-2">
          Details
        </label>
        <textarea
          x-model="form.details"
          name="details"
          rows="3"
          placeholder="Add any additional notes..."
          class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
        ></textarea>
        @error('details')
          <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
        @enderror
      </div>
    </div>

    <!-- Items Card -->
    <div class="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
      <h2 class="text-xl font-semibold text-slate-900 mb-4">Purchase Items</h2>

      <!-- Items Table -->
      <div class="overflow-x-auto mb-4">
        <table class="w-full">
          <thead>
            <tr class="bg-slate-50 border-b border-slate-200">
              <th class="px-4 py-3 text-left text-sm font-semibold text-slate-900">Product Name</th>
              <th class="px-4 py-3 text-left text-sm font-semibold text-slate-900">Available Stock</th>
              <th class="px-4 py-3 text-left text-sm font-semibold text-slate-900">Quantity</th>
              <th class="px-4 py-3 text-left text-sm font-semibold text-slate-900">Rate</th>
              <th class="px-4 py-3 text-left text-sm font-semibold text-slate-900">Total</th>
              <th class="px-4 py-3 text-left text-sm font-semibold text-slate-900">Action</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-slate-200">
            <template x-for="(item, index) in form.items" :key="index">
              <tr class="hover:bg-slate-50 transition-colors duration-200">
                <!-- Product Name with Search -->
                <td class="px-4 py-3">
                  <div class="relative">
                    <input
                      type="hidden"
                      :name="`items[${index}][product_id]`"
                      x-model="item.product_id"
                    >
                    <input
                      type="text"
                      :id="`product_search_${index}`"
                      x-model="item.product_search"
                      @input="handleProductSearch(index)"
                      @focus="showProductDropdown[index] = true"
                      @keydown.arrow-down.prevent="selectedProductIndex[index] = Math.min((selectedProductIndex[index] || 0) + 1, filteredProducts[index]?.length - 1 || 0)"
                      @keydown.arrow-up.prevent="selectedProductIndex[index] = Math.max((selectedProductIndex[index] || 0) - 1, 0)"
                      @keydown.enter.prevent="selectProduct(index, filteredProducts[index]?.[selectedProductIndex[index]])"
                      @click.away="showProductDropdown[index] = false"
                      placeholder="Search products..."
                      class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent text-sm"
                    >
                    <div
                      x-show="showProductDropdown[index] && filteredProducts[index]?.length > 0"
                      class="absolute top-full left-0 right-0 mt-1 bg-white border border-slate-300 rounded-lg shadow-lg z-20 max-h-40 overflow-y-auto"
                    >
                      <template x-for="(product, pIndex) in filteredProducts[index]" :key="product.id">
                        <button
                          type="button"
                          @click="selectProduct(index, product)"
                          :class="pIndex === selectedProductIndex[index] ? 'bg-primary-50' : 'hover:bg-slate-50'"
                          class="w-full text-left px-4 py-2 text-sm text-slate-900 transition-colors duration-200 border-b border-slate-100 last:border-b-0"
                        >
                          <div class="font-medium" x-text="product.name"></div>
                          <div class="text-xs text-slate-500" x-text="`Stock: ${product.stock}`"></div>
                        </button>
                      </template>
                    </div>
                  </div>
                </td>

                <!-- Available Stock -->
                <td class="px-4 py-3">
                  <input
                    type="text"
                    x-model="item.available_stock"
                    readonly
                    class="w-full px-3 py-2 border border-slate-300 rounded-lg bg-slate-100 text-sm text-slate-600"
                  >
                </td>

                <!-- Quantity -->
                <td class="px-4 py-3">
                  <input
                    type="number"
                    :name="`items[${index}][quantity]`"
                    x-model.number="item.quantity"
                    @input="calculateItemTotal(index)"
                    min="1"
                    class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent text-sm"
                  >
                </td>

                <!-- Rate -->
                <td class="px-4 py-3">
                  <input
                    type="number"
                    :name="`items[${index}][rate]`"
                    x-model.number="item.rate"
                    @input="calculateItemTotal(index)"
                    step="0.01"
                    min="0"
                    class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent text-sm"
                  >
                </td>

                <!-- Total -->
                <td class="px-4 py-3">
                  <input
                    type="text"
                    x-model="item.total"
                    readonly
                    class="w-full px-3 py-2 border border-slate-300 rounded-lg bg-slate-100 text-sm text-slate-600 font-medium"
                  >
                </td>

                <!-- Delete Button -->
                <td class="px-4 py-3">
                  <button
                    type="button"
                    @click="removeItem(index)"
                    class="inline-flex items-center px-3 py-2 bg-red-50 text-red-600 hover:bg-red-100 rounded-lg transition-colors duration-200"
                  >
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                    </svg>
                  </button>
                </td>
              </tr>
            </template>
          </tbody>
        </table>
      </div>

      <!-- Add More Item Button -->
      <button
        type="button"
        @click="addItem()"
        class="inline-flex items-center px-4 py-2 bg-slate-100 text-slate-700 hover:bg-slate-200 rounded-lg transition-colors duration-200 font-medium mb-6"
      >
        <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 More Item
      </button>

      <!-- Error Messages for Items -->
      @error('items')
        <p class="text-red-500 text-sm">{{ $message }}</p>
      @enderror
    </div>

    <!-- Totals Card -->
    <div class="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
      <div class="flex justify-end">
        <div class="w-full md:w-80">
          <div class="space-y-3 text-sm">
            <div class="flex justify-between py-2 border-b border-slate-200">
              <span class="text-slate-600">Subtotal</span>
              <span class="font-semibold text-slate-900" x-text="`$${subtotal.toFixed(2)}`"></span>
            </div>
            <div class="flex justify-between py-2 border-b border-slate-200">
              <span class="text-slate-600">Tax</span>
              <span class="font-semibold text-slate-900" x-text="`$${tax.toFixed(2)}`"></span>
            </div>
            <div class="flex justify-between py-3 bg-primary-50 px-4 rounded-lg">
              <span class="text-lg font-semibold text-slate-900">Total</span>
              <span class="text-lg font-bold text-primary-600" x-text="`$${grandTotal.toFixed(2)}`"></span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Form Actions -->
    <div class="flex flex-col sm:flex-row gap-3 justify-end">
      <a href="{{ route('purchases.index') }}" class="px-6 py-2 border border-slate-300 text-slate-700 rounded-lg hover:bg-slate-50 transition-colors duration-200 font-medium text-center">
        Cancel
      </a>
      <button
        type="submit"
        :disabled="form.items.length === 0 || !form.supplier_id"
        class="px-6 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200 font-medium disabled:opacity-50 disabled:cursor-not-allowed"
      >
        Create Purchase
      </button>
    </div>
  </form>
</div>

<script>
  function purchaseForm() {
    return {
      form: {
        supplier_id: '',
        invoice_number: '',
        purchase_date: new Date().toISOString().split('T')[0],
        expiry_date: '',
        details: '',
        items: [{ product_id: '', product_search: '', available_stock: 0, quantity: 1, rate: 0, total: 0 }]
      },
      suppliers: [
        { id: 1, name: 'ABC Suppliers' },
        { id: 2, name: 'XYZ Traders' },
        { id: 3, name: 'Global Imports' }
      ],
      supplierSearch: '',
      filteredSuppliers: [],
      selectedSupplierIndex: 0,
      showSupplierDropdown: false,

      products: [
        { id: 1, name: 'Rice (10kg)', stock: 50 },
        { id: 2, name: 'Flour (5kg)', stock: 30 },
        { id: 3, name: 'Oil (2L)', stock: 20 },
        { id: 4, name: 'Sugar (2kg)', stock: 25 },
        { id: 5, name: 'Spices Mix', stock: 15 }
      ],
      filteredProducts: {},
      selectedProductIndex: {},
      showProductDropdown: {},

      init() {
        this.filteredSuppliers = this.suppliers;
        this.$watch('form.items', () => this.calculateTotals(), { deep: true });
        this.calculateTotals();
      },

      handleSupplierSearch() {
        this.filteredSuppliers = this.suppliers.filter(s =>
          s.name.toLowerCase().includes(this.supplierSearch.toLowerCase())
        );
        this.selectedSupplierIndex = 0;
      },

      selectSupplier(supplier) {
        this.form.supplier_id = supplier.id;
        this.supplierSearch = supplier.name;
        this.showSupplierDropdown = false;
      },

      handleProductSearch(index) {
        const search = this.form.items[index].product_search.toLowerCase();
        this.filteredProducts[index] = this.products.filter(p =>
          p.name.toLowerCase().includes(search)
        );
        this.selectedProductIndex[index] = 0;
      },

      selectProduct(index, product) {
        if (!product) return;
        this.form.items[index].product_id = product.id;
        this.form.items[index].product_search = product.name;
        this.form.items[index].available_stock = product.stock;
        this.showProductDropdown[index] = false;
      },

      calculateItemTotal(index) {
        const item = this.form.items[index];
        item.total = (item.quantity || 0) * (item.rate || 0);
      },

      calculateTotals() {
        let subtotal = 0;
        this.form.items.forEach(item => {
          subtotal += (item.quantity || 0) * (item.rate || 0);
        });
        this.subtotal = subtotal;
        this.tax = subtotal * 0.1; // 10% tax
        this.grandTotal = subtotal + this.tax;
      },

      addItem() {
        this.form.items.push({
          product_id: '',
          product_search: '',
          available_stock: 0,
          quantity: 1,
          rate: 0,
          total: 0
        });
      },

      removeItem(index) {
        if (this.form.items.length > 1) {
          this.form.items.splice(index, 1);
        }
      },

      submit() {
        if (!this.form.supplier_id) {
          alert('Please select a supplier');
          return;
        }
        if (this.form.items.length === 0) {
          alert('Please add at least one item');
          return;
        }
        this.$el.closest('form').submit();
      }
    };
  }
</script>
@endsection