@extends('layouts.app')
@section('title', 'Edit Barang Keluar — ' . $project->nama_proyek)

@section('page-style')
<style>
.item-row { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; margin-bottom: 10px; }
.item-row .remove-row { cursor: pointer; }
</style>
@endsection

@section('content')
<div class="d-flex align-items-center mb-4">
  <a href="{{ route('admin.usages.index', $project) }}" class="btn btn-outline-secondary btn-sm me-3"><i class="bx bx-arrow-back"></i></a>
  <div>
    <h4 class="fw-bold mb-0">Edit Pemakaian Material</h4>
    <p class="text-muted mb-0" style="font-size:0.85rem;">{{ $project->nama_proyek }}</p>
  </div>
</div>

<div class="alert alert-info alert-dismissible mb-4" role="alert" style="font-size:0.85rem;">
  <i class="bx bx-info-circle me-2"></i>
  <strong>Info:</strong> Stok yang ditampilkan sudah memperhitungkan pengembalian qty dari transaksi ini (stok efektif).
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>

@if(session('stock_error'))
<div class="alert alert-danger alert-dismissible mb-4" role="alert">
  <i class="bx bx-error-circle me-2"></i><strong>Gagal Menyimpan!</strong> {{ session('stock_error') }}
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

<form action="{{ route('admin.usages.update', [$project, $usage]) }}" method="POST">
  @csrf @method('PUT')
  <div class="card mb-3">
    <div class="card-header py-3"><h6 class="mb-0 fw-bold">Informasi Pengeluaran</h6></div>
    <div class="card-body">
      <div class="row g-3">
        <div class="col-md-3">
          <label class="form-label fw-semibold">Tanggal Keluar <span class="text-danger">*</span></label>
          <input type="date" name="tanggal_keluar" class="form-control @error('tanggal_keluar') is-invalid @enderror"
            value="{{ old('tanggal_keluar', $usage->tanggal_keluar) }}" required>
          @error('tanggal_keluar') <div class="invalid-feedback">{{ $message }}</div> @enderror
        </div>
        <div class="col-md-9">
          <label class="form-label fw-semibold">Keterangan / Tujuan Pemakaian</label>
          <input type="text" name="keterangan" class="form-control" value="{{ old('keterangan', $usage->keterangan) }}" placeholder="cth: Pengecoran pondasi blok A">
        </div>
      </div>
    </div>
  </div>

  <div class="card mb-3">
    <div class="card-header py-3 d-flex justify-content-between align-items-center">
      <h6 class="mb-0 fw-bold">Daftar Material yang Digunakan</h6>
      <button type="button" class="btn btn-sm btn-outline-primary" id="btnAddItem">
        <i class="bx bx-plus me-1"></i>Tambah Item
      </button>
    </div>
    <div class="card-body" id="itemContainer"></div>
  </div>

  <div class="d-flex gap-2 text-end">
    <button type="submit" class="btn btn-primary px-4"><i class="bx bx-save me-1"></i>Simpan Perubahan</button>
    <a href="{{ route('admin.usages.index', $project) }}" class="btn btn-outline-secondary">Batal</a>
  </div>
</form>

{{-- Item Row Template --}}
<template id="itemRowTemplate">
  <div class="item-row d-flex gap-3 align-items-end flex-wrap" data-index="__IDX__">
    <div style="flex:3; min-width:250px;">
      <label class="form-label fw-semibold" style="font-size:0.82rem;">Material dari Stok <span class="text-danger">*</span></label>
      <select name="items[__IDX__][item_id]" class="form-select select2-item" required>
        <option value="">-- Pilih / Ketik Material --</option>
        @foreach($items as $item)
          @php $stokEfektif = $stocksEffective[$item->id] ?? 0; @endphp
          <option value="{{ $item->id }}" data-satuan="{{ $item->satuan }}" data-stock="{{ $stokEfektif }}">
            {{ $item->nama_barang }} (Stok Efektif: {{ number_format($stokEfektif, 2, ',', '.') }} {{ $item->satuan }})
          </option>
        @endforeach
      </select>
    </div>
    <div style="flex:1; min-width:120px;">
      <label class="form-label fw-semibold" style="font-size:0.82rem;">Qty Keluar <span class="text-danger">*</span></label>
      <input type="number" name="items[__IDX__][qty]" class="form-control text-end qty-input" step="0.01" min="0.01" required placeholder="0">
    </div>
    <div style="flex:1; min-width:120px;">
      <label class="form-label fw-semibold" style="font-size:0.82rem;">Satuan</label>
      <select name="items[__IDX__][satuan]" class="form-select select2-unit satuan-display">
        <option value="">-- Satuan --</option>
        @foreach($units as $u)
        <option value="{{ $u->nama_satuan }}">{{ $u->nama_satuan }}</option>
        @endforeach
      </select>
    </div>
    <div>
      <label class="form-label fw-semibold" style="font-size:0.82rem;">&nbsp;</label>
      <button type="button" class="btn btn-outline-danger remove-row d-block"><i class="bx bx-trash"></i></button>
    </div>
  </div>
</template>
@endsection

@section('page-script')
<script>
let itemIndex = 0;

const existingItems = @json($existingItems);

function bindRowEvents(row) {
    const qtyInput   = row.querySelector('.qty-input');
    const itemSelect = row.querySelector('.select2-item');
    let maxStock     = 0;

    $(itemSelect).on('select2:select', function(e) {
        const data = e.params.data;
        if (data.element && data.element.dataset) {
            const sat = data.element.dataset.satuan;
            if (sat) {
                const satuanSel = $(row).find('.select2-unit');
                if (!satuanSel.find("option[value='" + sat + "']").length) {
                    satuanSel.append(new Option(sat, sat, true, true));
                }
                satuanSel.val(sat).trigger('change');
            }
            maxStock = parseFloat(data.element.dataset.stock) || 0;
            qtyInput.max         = maxStock;
            qtyInput.placeholder = 'Maks ' + maxStock;
        }
    });

    qtyInput.addEventListener('input', function() {
        const val = parseFloat(this.value) || 0;
        if (maxStock > 0 && val > maxStock) {
            this.classList.add('is-invalid');
        } else {
            this.classList.remove('is-invalid');
        }
    });

    row.querySelector('.remove-row').addEventListener('click', function() { row.remove(); });
}

function addItemRow(data = null) {
    const tmpl = document.getElementById('itemRowTemplate').innerHTML.replace(/__IDX__/g, itemIndex++);
    const container = document.getElementById('itemContainer');
    const div = document.createElement('div');
    div.innerHTML = tmpl;
    const row = div.firstElementChild;
    container.appendChild(row);

    const selectEl = $(row).find('.select2-item');
    selectEl.select2({ theme:'bootstrap-5', width:'100%', tags:true, allowClear:true, placeholder:'-- Pilih / Ketik Material --' });
    $(row).find('.select2-unit').select2({ theme:'bootstrap-5', width:'100%', tags:true, allowClear:true, placeholder:'-- Satuan --' });

    bindRowEvents(row);

    if (data) {
        if (data.item_id) {
            if (selectEl.find("option[value='" + data.item_id + "']").length) {
                selectEl.val(data.item_id).trigger('change');
            } else {
                selectEl.append(new Option(data.item_name || data.item_id, data.item_id, true, true)).trigger('change');
            }
        }
        if (data.qty) row.querySelector('.qty-input').value = data.qty;
        if (data.satuan) {
            const satuanSel = $(row).find('.select2-unit');
            if (!satuanSel.find("option[value='" + data.satuan + "']").length) {
                satuanSel.append(new Option(data.satuan, data.satuan, true, true));
            }
            satuanSel.val(data.satuan).trigger('change');
        }
    }
}

$(document).ready(function() {
    document.getElementById('btnAddItem').addEventListener('click', function() { addItemRow(); });

    @if(old('items'))
        const oldItems = @json(old('items'));
        Object.values(oldItems).forEach(d => addItemRow(d));
    @else
        existingItems.forEach(d => addItemRow(d));
    @endif
});
</script>
@endsection