@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" enctype="multipart/form-data">
  @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-4">
          <label class="form-label fw-semibold">Upload Lampiran Baru</label>
          <input type="file" name="file" class="form-control @error('file') is-invalid @enderror" accept=".pdf,.jpg,.jpeg,.png">
          <div class="form-text" style="font-size:0.7rem;">Opsional (PDF, JPG, PNG maks 10MB)</div>
          @error('file') <div class="invalid-feedback">{{ $message }}</div> @enderror
        </div>
        <div class="col-md-5">
          <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>

      @if($usage->files && $usage->files->isNotEmpty())
      <div class="mt-3 pt-3 border-top">
        <label class="form-label fw-semibold mb-2" style="font-size:0.82rem;"><i class="bx bx-paperclip me-1"></i>File Terlampir Saat Ini:</label>
        <div class="table-responsive">
          <table class="table table-sm table-bordered mb-0">
            <thead class="table-light">
              <tr>
                <th style="width:30px;"></th>
                <th>Nama File</th>
                <th style="width:100px;">Ukuran</th>
                <th style="width:120px;">Pengunggah</th>
                <th style="width:110px;" class="text-center">Aksi</th>
              </tr>
            </thead>
            <tbody>
              @foreach($usage->files as $file)
              <tr>
                <td class="text-center"><i class="bx {{ $file->icon_class }} {{ $file->icon_color }}" style="font-size:1.1rem;"></i></td>
                <td style="font-size:0.85rem;">{{ $file->nama_asli }}</td>
                <td style="font-size:0.82rem;" class="text-muted">{{ $file->ukuran_readable }}</td>
                <td style="font-size:0.82rem;" class="text-muted">{{ $file->uploader->name ?? '-' }}</td>
                <td class="text-center">
                  <a href="{{ route('admin.files.preview', [$project, $file]) }}" target="_blank" class="btn btn-xs btn-outline-info" title="Preview"><i class="bx bx-show"></i></a>
                  <a href="{{ route('admin.files.download', [$project, $file]) }}" class="btn btn-xs btn-outline-success" title="Download"><i class="bx bx-download"></i></a>
                  <form action="{{ route('admin.files.destroy', [$project, $file]) }}" method="POST" class="d-inline" onsubmit="return confirm('Hapus file ini?')">
                    @csrf @method('DELETE')
                    <button type="submit" class="btn btn-xs btn-outline-danger" title="Hapus"><i class="bx bx-trash"></i></button>
                  </form>
                </td>
              </tr>
              @endforeach
            </tbody>
          </table>
        </div>
      </div>
      @endif
    </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: {{ (floor((float)$stokEfektif) == (float)$stokEfektif) ? number_format($stokEfektif, 0, ',', '.') : rtrim(rtrim(number_format($stokEfektif, 2, ',', '.'), '0'), ',') }} {{ $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