@extends('layouts.app')
@section('title', 'Edit Barang Masuk — ' . $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; }
.total-preview { font-size: 0.85rem; color: #16a34a; font-weight: 600; }
</style>
@endsection

@section('content')
<div class="d-flex align-items-center mb-4">
  <a href="{{ route('admin.purchases.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 Transaksi Barang Masuk</h4>
    <p class="text-muted mb-0" style="font-size:0.85rem;">{{ $project->nama_proyek }}</p>
  </div>
</div>

{{-- Budget Info --}}
<div class="row g-3 mb-4">
  <div class="col-md-4">
    <div class="card" style="border-left: 4px solid #16a34a;">
      <div class="card-body py-2 px-3">
        <p class="mb-0 text-muted" style="font-size:0.72rem;">ANGGARAN RAB MATERIAL</p>
        <strong class="text-success">Rp {{ number_format($rabBudget, 0, ',', '.') }}</strong>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card" style="border-left: 4px solid #f59e0b;">
      <div class="card-body py-2 px-3">
        <p class="mb-0 text-muted" style="font-size:0.72rem;">NILAI TRANSAKSI INI SEBELUMNYA</p>
        <strong class="text-warning">Rp {{ number_format($oldTotal, 0, ',', '.') }}</strong>
      </div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="card" style="border-left: 4px solid {{ $remaining >= 0 ? '#2563eb' : '#dc2626' }};">
      <div class="card-body py-2 px-3">
        <p class="mb-0 text-muted" style="font-size:0.72rem;">SISA ANGGARAN EFEKTIF (TERMASUK NILAI LAMA)</p>
        <strong class="{{ $remaining >= 0 ? 'text-primary' : 'text-danger' }}">Rp {{ number_format($remaining, 0, ',', '.') }}</strong>
        @if($remaining <= 0) <span class="badge bg-danger ms-1" style="font-size:0.65rem;">HABIS</span> @endif
      </div>
    </div>
  </div>
</div>

@if(session('budget_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('budget_error') }}
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

<form action="{{ route('admin.purchases.update', [$project, $purchase]) }}" method="POST" id="formPurchaseEdit">
  @csrf @method('PUT')
  <div class="card mb-3">
    <div class="card-header py-3"><h6 class="mb-0 fw-bold">Informasi Transaksi</h6></div>
    <div class="card-body">
      <div class="row g-3">
        <div class="col-md-4">
          <label class="form-label fw-semibold">Vendor / Supplier <span class="text-danger">*</span></label>
          <select name="vendor_id" id="vendorSelect" class="form-select select2-vendor @error('vendor_id') is-invalid @enderror" required>
            <option value="">-- Pilih Vendor --</option>
            @foreach($vendors as $v)
            <option value="{{ $v->id }}" {{ (old('vendor_id', $purchase->vendor_id) == $v->id) ? 'selected' : '' }}>{{ $v->nama_vendor }}</option>
            @endforeach
          </select>
          @error('vendor_id') <div class="invalid-feedback">{{ $message }}</div> @enderror
        </div>
        <div class="col-md-3">
          <label class="form-label fw-semibold">Tanggal Masuk <span class="text-danger">*</span></label>
          <input type="date" name="tanggal_masuk" class="form-control @error('tanggal_masuk') is-invalid @enderror"
            value="{{ old('tanggal_masuk', $purchase->tanggal_masuk) }}" required>
          @error('tanggal_masuk') <div class="invalid-feedback">{{ $message }}</div> @enderror
        </div>
        <div class="col-md-5">
          <label class="form-label fw-semibold">Keterangan</label>
          <input type="text" name="keterangan" class="form-control" value="{{ old('keterangan', $purchase->keterangan) }}" placeholder="Opsional">
        </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 Dibeli</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 class="card-footer d-flex justify-content-between align-items-center">
      <span class="text-muted" style="font-size:0.85rem;">Grand Total Transaksi:</span>
      <strong class="text-success fs-5" id="grandTotalDisplay">Rp 0</strong>
    </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.purchases.index', $project) }}" class="btn btn-outline-secondary">Batal</a>
  </div>
</form>

{{-- Item Row Template --}}
<template id="itemRowTemplate">
  <div class="item-row d-flex gap-2 align-items-end flex-wrap" data-index="__IDX__">
    <div style="flex:2; min-width:200px;">
      <label class="form-label fw-semibold" style="font-size:0.82rem;">Nama Material <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)
        <option value="{{ $item->id }}" data-satuan="{{ $item->satuan }}">
          [{{ $item->category->name ?? '-' }}] {{ $item->nama_barang }} ({{ $item->satuan }})
        </option>
        @endforeach
      </select>
    </div>
    <div style="flex:0.7; min-width:100px;">
      <label class="form-label fw-semibold" style="font-size:0.82rem;">Qty <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-input">
        <option value="">-- Satuan --</option>
        @foreach($units as $u)
        <option value="{{ $u->nama_satuan }}">{{ $u->nama_satuan }}</option>
        @endforeach
      </select>
    </div>
    <div style="flex:1.2; min-width:150px;">
      <label class="form-label fw-semibold" style="font-size:0.82rem;">Harga Satuan (Rp) <span class="text-danger">*</span></label>
      <input type="number" name="items[__IDX__][harga_satuan]" class="form-control text-end harga-input" step="1" min="0" required placeholder="0">
    </div>
    <div style="flex:1; min-width:130px;">
      <label class="form-label fw-semibold" style="font-size:0.82rem;">Subtotal</label>
      <div class="form-control bg-light text-end fw-bold text-success subtotal-display">Rp 0</div>
    </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 rabSisa = {{ $remaining }};

// Data item yang sudah ada (dari transaksi yang sedang diedit)
const existingItems = @json($existingItems);

function formatRupiah(val) {
    return 'Rp ' + Math.round(val).toLocaleString('id-ID');
}

function recalcGrandTotal() {
    let grand = 0;
    document.querySelectorAll('.subtotal-display').forEach(function(el) {
        grand += parseFloat(el.dataset.raw || 0);
    });
    document.getElementById('grandTotalDisplay').textContent = formatRupiah(grand);
    const el = document.getElementById('grandTotalDisplay');
    if (rabSisa > 0 && grand > rabSisa) {
        el.classList.add('text-danger'); el.classList.remove('text-success');
    } else {
        el.classList.add('text-success'); el.classList.remove('text-danger');
    }
}

function bindRowEvents(row) {
    const qtyInput   = row.querySelector('.qty-input');
    const hargaInput = row.querySelector('.harga-input');
    const subtotal   = row.querySelector('.subtotal-display');
    const itemSelect = row.querySelector('.select2-item');

    function updateSubtotal() {
        const total = (parseFloat(qtyInput.value) || 0) * (parseFloat(hargaInput.value) || 0);
        subtotal.textContent  = formatRupiah(total);
        subtotal.dataset.raw  = total;
        recalcGrandTotal();
    }
    qtyInput.addEventListener('input', updateSubtotal);
    hargaInput.addEventListener('input', updateSubtotal);

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

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

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 --' });

    const satuanSelect = $(row).find('.select2-unit');
    satuanSelect.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 {
                // item baru yang diketik — tampilkan nama item
                const label = '[' + (data.item_label || data.item_name);
                selectEl.append(new Option(label, data.item_id, true, true)).trigger('change');
            }
        }
        if (data.qty)          row.querySelector('.qty-input').value   = data.qty;
        if (data.harga_satuan) row.querySelector('.harga-input').value = data.harga_satuan;
        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');
        }
        // Trigger recalc after all values set
        $(row.querySelector('.harga-input')).trigger('input');
    }
}

$(document).ready(function() {
    $('#vendorSelect').select2({ theme:'bootstrap-5', width:'100%', tags:true, allowClear:true, placeholder:'-- Pilih / Ketik Vendor --' });

    // Pre-fill existing items
    @if(old('items'))
        const oldItems = @json(old('items'));
        Object.values(oldItems).forEach(d => addItemRow(d));
    @else
        existingItems.forEach(d => addItemRow(d));
    @endif

    document.getElementById('btnAddItem').addEventListener('click', function() { addItemRow(); });
});
</script>
@endsection