@extends('layouts.app')
@section('title', 'Tambah 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">Tambah Barang Masuk</h4>
    <p class="text-muted mb-0" style="font-size:0.85rem;">{{ $project->nama_proyek }}</p>
  </div>
</div>

{{-- Budget Alert --}}
<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;">SUDAH DIBELI</p>
        <strong class="text-warning">Rp {{ number_format($totalPurchased, 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</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-block me-2"></i><strong>Transaksi Ditolak!</strong> {{ session('budget_error') }}
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
@endif

<form action="{{ route('admin.purchases.store', $project) }}" method="POST" id="formPurchase">
  @csrf
  <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') == $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', date('Y-m-d')) }}" 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') }}" 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">
      {{-- Item rows will be added here --}}
    </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 Transaksi</button>
    <a href="{{ route('admin.purchases.index', $project) }}" class="btn btn-outline-secondary">Batal</a>
  </div>
</form>

{{-- Item Row Template (hidden) --}}
<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 }};

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

function recalcGrandTotal() {
    let grand = 0;
    document.querySelectorAll('.subtotal-display').forEach(function(el) {
        const raw = parseFloat(el.dataset.raw || 0);
        grand += raw;
    });
    document.getElementById('grandTotalDisplay').textContent = formatRupiah(grand);

    const grandTotalEl = document.getElementById('grandTotalDisplay');
    if (rabSisa > 0 && grand > rabSisa) {
        grandTotalEl.classList.add('text-danger');
        grandTotalEl.classList.remove('text-success');
    } else {
        grandTotalEl.classList.add('text-success');
        grandTotalEl.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 qty   = parseFloat(qtyInput.value) || 0;
        const harga = parseFloat(hargaInput.value) || 0;
        const total = qty * harga;
        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 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');
            }
        }
    });

    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 {
                var newOption = new Option(data.item_id, data.item_id, true, true);
                selectEl.append(newOption).trigger('change');
            }
        }
        if (data.qty) row.querySelector('.qty-input').value = data.qty;
        if (data.satuan) {
            const satuanSelect = $(row).find('.select2-unit');
            if (!satuanSelect.find("option[value='" + data.satuan + "']").length) {
                satuanSelect.append(new Option(data.satuan, data.satuan, true, true));
            }
            satuanSelect.val(data.satuan).trigger('change');
        }
        if (data.harga_satuan) {
            row.querySelector('.harga-input').value = data.harga_satuan;
            $(row.querySelector('.harga-input')).trigger('input');
        }
    }
}

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

    @if(old('vendor_id'))
        var oldVendor = @json(old('vendor_id'));
        var vendorSelect = $('#vendorSelect');
        if (vendorSelect.find("option[value='" + oldVendor + "']").length) {
            vendorSelect.val(oldVendor).trigger('change');
        } else {
            var newOption = new Option(oldVendor, oldVendor, true, true);
            vendorSelect.append(newOption).trigger('change');
        }
    @endif

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

    @if(old('items'))
        const oldItems = @json(old('items'));
        Object.values(oldItems).forEach(function(itemData) {
            addItemRow(itemData);
        });
    @else
        // Add first row automatically inside DOM ready
        addItemRow();
    @endif
});
</script>
@endsection