@extends('layouts.app')
@section('title', 'Tambah 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">Tambah Pemakaian Material</h4>
    <p class="text-muted mb-0" style="font-size:0.85rem;">{{ $project->nama_proyek }}</p>
  </div>
</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.store', $project) }}" method="POST">
  @csrf
  <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', date('Y-m-d')) }}" 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') }}" 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">
      {{-- Item rows --}}
    </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 Pemakaian</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 $stokTersedia = $stocks[$item->id] ?? 0; @endphp
          <option value="{{ $item->id }}" data-satuan="{{ $item->satuan }}" data-stock="{{ $stokTersedia }}">
            {{ $item->nama_barang }} (Sisa Stok: {{ number_format($stokTersedia, 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;

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 itemSatuan = data.element.dataset.satuan;
            if (itemSatuan) {
                const satuanSelect = $(row).find('.select2-unit');
                if (!satuanSelect.find("option[value='" + itemSatuan + "']").length) {
                    satuanSelect.append(new Option(itemSatuan, itemSatuan, true, true));
                }
                satuanSelect.val(itemSatuan).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() {
    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);

    $(row).find('.select2-item').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);
}

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

    // Init 1 row automatically inside DOM ready
    addItemRow();
});
</script>
@endsection