@extends('layouts.app')

@section('title', 'Create Purchase Return')

@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('purchase-returns.index') }}" class="ml-1 text-sm font-medium text-slate-500 hover:text-slate-700">Purchase Returns</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">New Return</span>
        </div>
      </li>
    </ol>
  </nav>
@endsection

@section('content')
<div x-data="returnForm()" class="max-w-4xl mx-auto">
  <!-- Header -->
  <div class="mb-8">
    <h1 class="text-3xl font-bold text-slate-900">Create Purchase Return</h1>
    <p class="text-slate-600 mt-1">Return items from a previous purchase</p>
  </div>

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

    <!-- Select Purchase Invoice -->
    <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">Select Purchase Invoice</h2>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <!-- Purchase Invoice Selection -->
        <div>
          <label for="purchase_id" class="block text-sm font-medium text-slate-700 mb-2">
            Purchase Invoice <span class="text-red-500">*</span>
          </label>
          <select
            x-model="form.purchase_id"
            @change="handleInvoiceSelection()"
            name="purchase_id"
            class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent"
            required
          >
            <option value="">Select an invoice...</option>
            <option value="1">INV-001 (ABC Suppliers - $2,450.00)</option>
            <option value="2">INV-002 (XYZ Traders - $3,850.50)</option>
            <option value="3">INV-003 (Global Imports - $5,200.00)</option>
          </select>
          @error('purchase_id')
            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
          @enderror
        </div>

        <!-- Return Date -->
        <div>
          <label for="return_date" class="block text-sm font-medium text-slate-700 mb-2">
            Return Date <span class="text-red-500">*</span>
          </label>
          <input
            type="date"
            x-model="form.return_date"
            name="return_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('return_date')
            <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
          @enderror
        </div>
      </div>

      <!-- Invoice Summary -->
      <div x-show="selectedInvoice" class="mt-6 p-4 bg-slate-50 rounded-lg">
        <h3 class="font-semibold text-slate-900 mb-3">Invoice Details</h3>
        <div class="grid grid-cols-3 gap-4 text-sm">
          <div>
            <p class="text-slate-600">Supplier</p>
            <p class="font-medium text-slate-900" x-text="selectedInvoice?.supplier || ''"></p>
          </div>
          <div>
            <p class="text-slate-600">Invoice Date</p>
            <p class="font-medium text-slate-900" x-text="selectedInvoice?.date || ''"></p>
          </div>
          <div>
            <p class="text-slate-600">Total Amount</p>
            <p class="font-medium text-slate-900" x-text="selectedInvoice?.total || ''"></p>
          </div>
        </div>
      </div>
    </div>

    <!-- Return Items -->
    <div x-show="selectedInvoice" class="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
      <h2 class="text-xl font-semibold text-slate-900 mb-4">Select Items to Return</h2>

      <div class="space-y-3">
        <template x-for="(item, index) in selectedInvoice?.items || []" :key="index">
          <div class="p-4 border border-slate-200 rounded-lg hover:bg-slate-50 transition-colors duration-200">
            <div class="flex items-start gap-4">
              <div class="flex items-center">
                <input
                  type="checkbox"
                  :value="item.id"
                  x-model="form.selected_items"
                  @change="updateSelectedItems()"
                  class="w-4 h-4 text-primary-600 rounded focus:ring-2 focus:ring-primary-500"
                >
              </div>
              <div class="flex-1 grid grid-cols-1 md:grid-cols-4 gap-4">
                <div>
                  <p class="text-sm text-slate-600">Product</p>
                  <p class="font-medium text-slate-900" x-text="item.name"></p>
                </div>
                <div>
                  <p class="text-sm text-slate-600">Purchased Qty</p>
                  <p class="font-medium text-slate-900" x-text="item.quantity"></p>
                </div>
                <div>
                  <p class="text-sm text-slate-600">Unit Price</p>
                  <p class="font-medium text-slate-900" x-text="item.rate"></p>
                </div>
                <div>
                  <p class="text-sm text-slate-600">Total</p>
                  <p class="font-medium text-slate-900" x-text="item.total"></p>
                </div>
              </div>
            </div>

            <!-- Return Quantity Input (shown only if selected) -->
            <div x-show="form.selected_items.includes(item.id)" class="mt-4 pt-4 border-t border-slate-200">
              <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                  <label class="block text-sm font-medium text-slate-700 mb-2">
                    Return Quantity (Max: <span x-text="item.quantity"></span>)
                  </label>
                  <input
                    type="number"
                    :name="`return_items[${item.id}][quantity]`"
                    :value="getReturnQuantity(item.id) || ''"
                    @input="updateReturnQuantity(item.id, $event.target.value)"
                    :max="item.quantity"
                    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"
                  >
                </div>
                <div>
                  <label class="block text-sm font-medium text-slate-700 mb-2">Return Amount</label>
                  <input
                    type="text"
                    :value="`$${(getReturnQuantity(item.id) || 0) * item.rate}`"
                    readonly
                    class="w-full px-3 py-2 border border-slate-300 rounded-lg bg-slate-100 text-slate-600"
                  >
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>

      @error('selected_items')
        <p class="text-red-500 text-sm mt-2">{{ $message }}</p>
      @enderror
    </div>

    <!-- Return Reason -->
    <div x-show="form.selected_items.length > 0" class="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
      <h2 class="text-xl font-semibold text-slate-900 mb-4">Return Reason</h2>

      <div>
        <label for="reason" class="block text-sm font-medium text-slate-700 mb-2">
          Reason for Return <span class="text-red-500">*</span>
        </label>
        <select
          x-model="form.reason_type"
          name="reason_type"
          class="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent mb-4"
          required
        >
          <option value="">Select reason...</option>
          <option value="quality_issue">Quality Issue</option>
          <option value="damaged">Damaged</option>
          <option value="expired">Expired</option>
          <option value="wrong_item">Wrong Item</option>
          <option value="overstock">Overstock</option>
          <option value="other">Other</option>
        </select>

        <label for="notes" class="block text-sm font-medium text-slate-700 mb-2">
          Additional Notes
        </label>
        <textarea
          x-model="form.notes"
          name="notes"
          rows="4"
          placeholder="Provide detailed information about the return..."
          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('notes')
          <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
        @enderror
      </div>
    </div>

    <!-- Summary -->
    <div x-show="form.selected_items.length > 0" class="bg-white rounded-lg shadow-sm border border-slate-200 p-6">
      <h2 class="text-xl font-semibold text-slate-900 mb-4">Return Summary</h2>

      <div class="flex justify-end">
        <div class="w-full md:w-96">
          <div class="space-y-3 text-sm">
            <div class="flex justify-between py-2 border-b border-slate-200">
              <span class="text-slate-600">Items Count</span>
              <span class="font-semibold text-slate-900" x-text="form.selected_items.length"></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 Return Amount</span>
              <span class="text-lg font-bold text-primary-600" x-text="`$${calculateReturnTotal().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('purchase-returns.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.selected_items.length === 0"
        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 Return
      </button>
    </div>
  </form>
</div>

<script>
  function returnForm() {
    return {
      form: {
        purchase_id: '',
        return_date: new Date().toISOString().split('T')[0],
        selected_items: [],
        reason_type: '',
        notes: '',
        return_quantities: {}
      },
      selectedInvoice: null,
      invoices: {
        1: {
          supplier: 'ABC Suppliers',
          date: 'Jan 15, 2026',
          total: '$2,450.00',
          items: [
            { id: 1, name: 'Rice (10kg)', quantity: 5, rate: 150, total: '$750.00' },
            { id: 2, name: 'Flour (5kg)', quantity: 3, rate: 200, total: '$600.00' },
            { id: 3, name: 'Oil (2L)', quantity: 2, rate: 250, total: '$500.00' }
          ]
        },
        2: {
          supplier: 'XYZ Traders',
          date: 'Jan 20, 2026',
          total: '$3,850.50',
          items: [
            { id: 4, name: 'Sugar (2kg)', quantity: 10, rate: 150, total: '$1,500.00' },
            { id: 5, name: 'Spices Mix', quantity: 8, rate: 240, total: '$1,920.00' }
          ]
        },
        3: {
          supplier: 'Global Imports',
          date: 'Jan 25, 2026',
          total: '$5,200.00',
          items: [
            { id: 6, name: 'Rice (10kg)', quantity: 20, rate: 150, total: '$3,000.00' },
            { id: 7, name: 'Flour (5kg)', quantity: 15, rate: 200, total: '$3,000.00' }
          ]
        }
      },

      handleInvoiceSelection() {
        this.selectedInvoice = this.invoices[this.form.purchase_id] || null;
        this.form.selected_items = [];
        this.form.return_quantities = {};
      },

      updateSelectedItems() {
        // Remove quantities for deselected items
        this.form.selected_items.forEach(itemId => {
          if (!this.form.return_quantities[itemId]) {
            this.form.return_quantities[itemId] = 1;
          }
        });
      },

      getReturnQuantity(itemId) {
        return this.form.return_quantities[itemId] || '';
      },

      updateReturnQuantity(itemId, value) {
        this.form.return_quantities[itemId] = parseInt(value) || 0;
      },

      calculateReturnTotal() {
        let total = 0;
        if (!this.selectedInvoice) return total;

        this.selectedInvoice.items.forEach(item => {
          const quantity = this.form.return_quantities[item.id] || 0;
          total += quantity * item.rate;
        });

        return total;
      },

      submit() {
        if (this.form.selected_items.length === 0) {
          alert('Please select at least one item to return');
          return;
        }
        this.$el.closest('form').submit();
      }
    };
  }
</script>
@endsection