@extends('layouts.main')
@section('content')
<div class="content-wrapper">
  <div class="content-header">
    <div class="container-fluid">
      <div class="row mb-2">
        <div class="col-sm-6"><h1 class="m-0">Buat Surat Jalan</h1></div>
        <div class="col-sm-6">
          <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item"><a href="{{ route('so.index') }}">Sales Order</a></li>
            <li class="breadcrumb-item active">Surat Jalan</li>
          </ol>
        </div>
      </div>
    </div>
  </div>
<section class="content">
  <div class="container-fluid">
    <form method="POST" action="{{ route('so.sj-store', $so->id) }}" id="formSJ">
      @csrf
      <div class="card">
        <div class="card-header"><h3 class="card-title font-weight-bold">Dari Sales Order {{ $so->no_sales_order }} — {{ optional($so->pelanggan)->nama }}</h3></div>
        <div class="card-body">
          @php $noSj = \App\Support\DocNumber::preview('surat_jalan'); @endphp
          <p class="text-muted">Nomor Surat Jalan akan otomatis: <strong>{{ $noSj }}</strong>. Pilih barang & qty yang dikirim (boleh parsial). Stok berkurang saat SJ diterbitkan.</p>

          <div class="row mb-3">
            <div class="col-md-3">
              <label>Tanggal Kirim</label>
              <input type="date" name="tanggal" id="tanggal" class="form-control" value="{{ now()->toDateString() }}" required>
            </div>
            <div class="col-md-3">
              <label>Nomor PO</label>
              <input type="text" name="no_po" class="form-control" placeholder="Kosongkan bila tidak ada" value="{{ old('no_po') }}">
            </div>
            <div class="col-md-3">
              <label>Plat Nomor Kendaraan</label>
              <input type="text" name="plat_nomor" class="form-control" placeholder="Contoh: B 1234 ABC" value="{{ old('plat_nomor') }}" maxlength="20" style="text-transform:uppercase">
              <small class="text-muted">Kendaraan pengiriman</small>
            </div>
            <div class="col-md-3">
              <label>Termin Pembayaran (hari)</label>
              <input type="number" name="termin_hari" id="termin_hari" class="form-control" value="{{ old('termin_hari', 14) }}" min="0" max="365" required>
              <small class="text-muted" id="jtPreview"></small>
            </div>
          </div>

          <table class="table table-bordered table-striped">
            <thead class="bg-secondary text-white">
              <tr><th width="5%" class="text-center"><input type="checkbox" id="checkAll" checked></th><th>Produk</th><th width="10%">Qty Kirim</th><th width="10%">Sisa</th><th width="14%">Harga</th><th width="13%">Diskon/Unit</th><th width="15%">Subtotal</th><th width="8%">Aksi</th></tr>
            </thead>
            <tbody id="sjBody">
              @foreach ($so->detail as $d)
                @php
                  $sisaRow = (int) ($sisa[$d->master_produk_id] ?? 0);
                @endphp
                @continue ($sisaRow <= 0)
                <tr>
                  <td class="text-center"><input type="checkbox" name="item_id[]" value="{{ $d->master_produk_id }}" checked class="row-check"></td>
                  <td>{{ optional($d->produk)->nama_produk ?? '-' }}</td>
                  <td><input type="number" name="qty[{{ $d->master_produk_id }}]" value="{{ min($sisaRow, $d->qty) }}" max="{{ $sisaRow }}" min="1" class="form-control form-control-sm row-qty" data-harga="{{ $d->harga_jual }}" data-diskon="{{ $d->diskon }}"></td>
                  <td class="text-center">{{ $sisaRow }}</td>
                  <td class="text-right">{{ rupiah($d->harga_jual) }}</td>
                  <td class="text-right">{{ rupiah($d->diskon) }}</td>
                  <td class="text-right row-subtotal">{{ rupiah(($d->harga_jual - $d->diskon) * min($sisaRow, $d->qty)) }}</td>
                  <td class="text-center"><button type="button" class="btn btn-sm btn-danger btn-remove-row" title="Hapus baris - tidak ikut dikirim"><i class="fas fa-trash"></i></button></td>
                </tr>
              @endforeach
            </tbody>
          </table>
          <p id="sjEmpty" class="text-center text-muted" style="display:none;">Semua item sudah terkirim.</p>

          <div class="row justify-content-end">
            <div class="col-md-5">
              <table class="table table-bordered">
                <tr class="font-weight-bold bg-light"><th>Nilai Pengiriman</th><td class="text-right" id="grandTotal">Rp 0</td></tr>
              </table>
            </div>
          </div>
        </div>
        <div class="card-footer text-right">
          <a href="{{ route('so.show', $so->id) }}" class="btn btn-secondary">Batal</a>
          <button type="submit" class="btn btn-success"><i class="fas fa-truck"></i> Terbitkan Surat Jalan</button>
        </div>
      </div>
    </form>
  </div>
</section>
</div>

<script>
(function () {
    var BULAN = ['Januari','Februari','Maret','April','Mei','Juni','Juli','Agustus','September','Oktober','November','Desember'];

    function angka(v){ return parseFloat(v) || 0; }
    function rupiah(n){ return 'Rp ' + Math.round(n).toString().replace(/\B(?=(\d{3})+(?!\d))/g, "."); }

    function hitung() {
        let total = 0;
        document.querySelectorAll('.row-check').forEach(function (cb) {
            var tr = cb.closest('tr');
            var qty = tr.querySelector('.row-qty');
            var sub = tr.querySelector('.row-subtotal');
            if (cb.checked) {
                qty.disabled = false;
                var v = angka(qty.value) * angka(qty.dataset.harga) - angka(qty.value) * angka(qty.dataset.diskon);
                sub.textContent = rupiah(Math.max(0, v));
                total += Math.max(0, v);
            } else {
                qty.disabled = true;
                sub.textContent = 'Rp 0';
            }
        });
        document.getElementById('grandTotal').textContent = rupiah(total);
    }

    function jt() {
        var t = document.getElementById('tanggal').value;
        var n = parseInt(document.getElementById('termin_hari').value, 10);
        var el = document.getElementById('jtPreview');
        if (!t || isNaN(n)) { el.textContent = ''; return; }
        var d = new Date(t + 'T00:00:00'); d.setDate(d.getDate() + n);
        el.textContent = 'Perkiraan jatuh tempo invoice: ' + d.getDate() + ' ' + BULAN[d.getMonth()] + ' ' + d.getFullYear();
    }

    function toggleEmpty() {
        var hasRow = document.querySelectorAll('#sjBody tr').length > 0;
        document.getElementById('sjEmpty').style.display = hasRow ? 'none' : 'block';
        document.getElementById('checkAll').disabled = !hasRow;
    }

    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.row-check, .row-qty').forEach(function (el) {
            el.addEventListener('change', hitung); el.addEventListener('input', hitung);
        });
        document.getElementById('checkAll').addEventListener('change', function () {
            document.querySelectorAll('.row-check').forEach(function (cb) { cb.checked = document.getElementById('checkAll').checked; });
            hitung();
        });
        document.addEventListener('click', function (e) {
            if (e.target.closest('.btn-remove-row')) {
                var tr = e.target.closest('tr');
                var nama = tr.querySelector('td:nth-child(2)') ? tr.querySelector('td:nth-child(2)').textContent.trim() : 'item ini';
                Swal.fire({ title: 'Hapus item?', text: nama + ' tidak akan ikut dikirim pada Surat Jalan ini.', icon: 'warning', showCancelButton: true, confirmButtonColor: '#d33', confirmButtonText: 'Ya, hapus', cancelButtonText: 'Batal' }).then(function (r) {
                    if (r.isConfirmed) { tr.remove(); hitung(); toggleEmpty(); }
                });
            }
        });
        document.getElementById('tanggal').addEventListener('change', jt);
        document.getElementById('termin_hari').addEventListener('input', jt);
        document.getElementById('formSJ').addEventListener('submit', function (e) {
            if (!document.querySelector('.row-check:checked')) { e.preventDefault(); Swal.fire({ icon: 'warning', title: 'Pilih item', text: 'Pilih minimal satu item untuk dikirim.' }); }
        });
        hitung(); jt(); toggleEmpty();
    });
})();
</script>
@endsection