@extends('layouts.app')

@section('content')
<div class="max-w-3xl mx-auto">
    <!-- Page Title -->
    <h1 class="text-3xl font-extrabold mb-6 text-gray-800">📦 Record Usage</h1>

    @if($errors->any())
        <div class="mb-4 p-3 bg-red-100 text-red-700 rounded">
            <ul class="list-disc list-inside">
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
            </ul>
        </div>
    @endif

    <!-- Form -->
    <form method="POST" action="{{ route('deliveries.store') }}" id="deliveryForm"
          class="space-y-6 bg-white p-6 rounded-lg shadow-md border">
      @csrf

      <!-- Customer Name -->
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Customer (optional)</label>
        <input name="customer_name"
               value="{{ old('customer_name') }}"
               class="border-gray-300 focus:ring-indigo-500 focus:border-indigo-500 rounded-md shadow-sm w-full p-2"
               placeholder="Enter customer name">
      </div>

      <!-- Delivered At -->
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Delivered At (optional)</label>
        <input type="datetime-local" name="delivered_at"
               value="{{ old('delivered_at') }}"
               class="border-gray-300 focus:ring-indigo-500 focus:border-indigo-500 rounded-md shadow-sm w-full p-2">
      </div>

      <!-- Items Used -->
      <div>
        <h2 class="text-lg font-semibold text-gray-800 mb-2">Items Used</h2>
        <p class="text-sm text-gray-500 mb-4">Enter the number of portions used for each item (zero = not used).</p>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          @foreach($foods as $food)
            <div class="flex items-center justify-between gap-3 p-3 border rounded-lg hover:shadow transition">
              <!-- Food Info -->
              <div>
                <div class="font-medium text-gray-800">{{ $food->name }}</div>
                <div class="text-xs text-gray-500">
                  Stock: <span class="font-semibold">{{ $food->stock->quantity ?? 0 }}</span> {{ $food->unit }}
                </div>
              </div>

              <!-- Counter -->
              <div class="flex items-center gap-2">
                <button type="button" data-food="{{ $food->id }}"
                        class="decrement px-3 py-1 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg font-bold">−</button>
                <input name="items[{{ $food->id }}]"
                       data-food-input="{{ $food->id }}"
                       value="0" min="0" type="number"
                       class="w-16 text-center p-1 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500">
                <button type="button" data-food="{{ $food->id }}"
                        class="increment px-3 py-1 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg font-bold">+</button>
              </div>
            </div>
          @endforeach
        </div>
      </div>

      <!-- Notes / Comments -->
      <div>
        <label class="block text-sm font-medium text-gray-700 mb-1">Notes / Comments (optional)</label>
        <textarea name="notes" rows="3"
                  class="w-full border-gray-300 rounded-md shadow-sm p-2 focus:ring-indigo-500 focus:border-indigo-500"
                  placeholder="Enter any notes or comments">{{ old('notes') }}</textarea>
      </div>

      <!-- Submit -->
      <div class="pt-4">
        <button type="submit" id="submitBtn"
                class="w-full bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg shadow font-semibold">
          ✅ Record Delivery
        </button>
      </div>
    </form>
</div>

<!-- Script -->
<script>
document.addEventListener('DOMContentLoaded', function(){
  document.querySelectorAll('.increment').forEach(btn=>{
    btn.addEventListener('click', ()=> {
      const id = btn.dataset.food;
      const input = document.querySelector(`[data-food-input="${id}"]`);
      input.value = parseInt(input.value || 0) + 1;
    });
  });
  document.querySelectorAll('.decrement').forEach(btn=>{
    btn.addEventListener('click', ()=> {
      const id = btn.dataset.food;
      const input = document.querySelector(`[data-food-input="${id}"]`);
      input.value = Math.max(0, parseInt(input.value || 0) - 1);
    });
  });

  document.getElementById('deliveryForm').addEventListener('submit', function(e){
    const inputs = Array.from(document.querySelectorAll('input[name^="items"]'));
    const total = inputs.reduce((s,i)=> s + (parseInt(i.value || 0) || 0), 0);
    if (total <= 0) {
      e.preventDefault();
      alert('⚠️ Please enter quantities for at least one item.');
    }
  });
});
</script>
@endsection