@extends('app-new')

@section('content')
<div class="content-w">
  <div class="content-i">
    <div class="content-box">
      <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
          <h5 class="mb-0">Issue Stock</h5>
          <div class="text-muted small">{{ $requisition->requisition_no }}</div>
        </div>
        <a href="{{ route('requisitions.show', $requisition) }}" class="btn btn-outline-secondary">Back</a>
      </div>

      <form method="POST" action="{{ route('requisitions.issue.store', $requisition) }}">
        @csrf

        @if ($errors->any())
          <div class="alert alert-danger">
            <div class="fw-semibold mb-1">Please fix the following:</div>
            <ul class="mb-0">
              @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
              @endforeach
            </ul>
          </div>
        @endif

        <div class="card border-0 shadow-sm mb-3">
          <div class="card-body">
            <div class="row g-3">
              <div class="col-lg-4">
                <label class="form-label">Location</label>
                <select name="location_id" class="form-select select2" required>
                  <option value="">Select location</option>
                  @foreach($locations as $loc)
                    <option value="{{ $loc->id }}" @selected(old('location_id')==$loc->id)>{{ $loc->name }}</option>
                  @endforeach
                </select>
              </div>
              <div class="col-lg-4">
                <label class="form-label">Sub Location</label>
                <select name="sub_location_id" class="form-select select2">
                  <option value="">Select sub location</option>
                  @foreach($subLocations as $subloc)
                    <option value="{{ $subloc->id }}" @selected(old('sub_location_id')==$subloc->id)>{{ $subloc->name }}</option>
                  @endforeach
                </select>
              </div>
            </div>
          </div>
        </div>

        <div class="card border-0 shadow-sm">
          <div class="card-body">
            <h6 class="mb-3">Items</h6>
            <div class="table-responsive">
              <table class="table table-bordered align-middle">
                <thead class="table-light">
                  <tr>
                    <th>Item</th>
                    <th>UOM</th>
                    <th class="text-end">Requested/Approved</th>
                    <th class="text-end">Issued</th>
                    <th class="text-end">Remaining</th>
                    <th style="width: 160px">Issue Qty</th>
                  </tr>
                </thead>
                <tbody>
                  @foreach($requisition->items as $row)
                    @php
                      $total = $row->qty_approved ?? $row->qty_requested;
                      $remaining = $total - $row->qty_issued;
                    @endphp
                    <tr>
                      <td>{{ $row->item->item_name ?? '-' }}</td>
                      <td>{{ $row->uom->name ?? '-' }}</td>
                      <td class="text-end">{{ number_format((float) $total, 3) }}</td>
                      <td class="text-end">{{ number_format((float) $row->qty_issued, 3) }}</td>
                      <td class="text-end">{{ number_format((float) $remaining, 3) }}</td>
                      <td>
                        <input type="number" step="0.001" min="0" name="items[{{ $row->id }}][issue_qty]"
                               value="{{ old('items.' . $row->id . '.issue_qty') }}" class="form-control">
                      </td>
                    </tr>
                  @endforeach
                </tbody>
              </table>
            </div>
          </div>
        </div>

        <div class="d-flex gap-2 justify-content-end mt-3">
          <a href="{{ route('requisitions.show', $requisition) }}" class="btn btn-light">Cancel</a>
          <button type="submit" class="btn btn-primary">Issue Stock</button>
        </div>
      </form>
    </div>
  </div>
</div>
@endsection

@push('head-script')
<script>
  document.addEventListener('DOMContentLoaded', function () {
    if (window.$ && $.fn.select2) {
      $('.select2').select2({ width: '100%' });
    }
  });
</script>
@endpush