@extends('layouts.app')

@section('title', isset($so) ? 'Edit Sales Order' : 'Buat Sales Order')

@section('breadcrumb')
    <a href="{{ route('sales-orders.index') }}">Sales Order</a>
    <i class="bi bi-chevron-right"></i>
    <span>{{ isset($so) ? 'Edit '.$so->no_so : 'Buat Baru' }}</span>
@endsection

@section('content')

<div class="pf-page-header">
    <div>
        <h1 class="pf-page-title">
            <i class="bi bi-cart-plus-fill me-2 text-primary-pf"></i>
            {{ isset($so) ? 'Edit Sales Order' : 'Buat Sales Order Baru' }}
        </h1>
        @if(isset($estimasi))
            <p class="pf-page-subtitle">
                <i class="bi bi-calculator me-1 text-success"></i>
                Dibuat dari Estimasi: <strong>{{ $estimasi->no_estimasi }}</strong>
            </p>
        @endif
    </div>
</div>

<form id="formSO"
      action="{{ isset($so) ? route('sales-orders.update', $so->id) : route('sales-orders.store') }}"
      method="POST">
    @csrf
    @if(isset($so)) @method('PUT') @endif

    <div class="row g-4">

        {{-- ===== KOLOM UTAMA ===== --}}
        <div class="col-12 col-xl-8">

            {{-- Info Pelanggan --}}
            <div class="pf-card mb-4">
                <div class="pf-card-header">
                    <h6 class="pf-card-title"><i class="bi bi-person-fill"></i> Data Pelanggan & Order</h6>
                </div>
                <div class="pf-card-body">
                    <div class="row g-3">
                        <div class="col-12 col-md-6">
                            <label class="form-label">Pelanggan <span class="text-danger">*</span></label>
                            <select class="form-select" name="pelanggan_id" id="selPelanggan" required
                                    onchange="loadPelangganInfo(this.value)">
                                <option value="">— Pilih Pelanggan —</option>
                                @foreach($pelanggan as $p)
                                    <option value="{{ $p->id }}"
                                        data-termin="{{ $p->termin_hari }}"
                                        data-limit="{{ $p->limit_kredit }}"
                                        {{ old('pelanggan_id', $so->pelanggan_id ?? $estimasi?->pelanggan_id) == $p->id ? 'selected' : '' }}>
                                        {{ $p->nama }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-12 col-md-6">
                            <label class="form-label">PIC / Nama Kontak</label>
                            <input type="text" class="form-control" name="nama_pic"
                                   value="{{ old('nama_pic', $so->nama_pic ?? '') }}"
                                   placeholder="Nama PIC atau kontak person">
                        </div>

                        {{-- Info Pelanggan (dinamis) --}}
                        <div class="col-12" id="infoPelangganPanel" style="display:none">
                            <div class="alert alert-info p-3 mb-0" style="font-size:12.5px">
                                <div class="row g-2">
                                    <div class="col-auto"><i class="bi bi-clock me-1"></i>Termin: <strong id="infTermin">-</strong> hari</div>
                                    <div class="col-auto"><i class="bi bi-credit-card me-1"></i>Limit Kredit: <strong id="infLimit">-</strong></div>
                                    <div class="col-auto"><i class="bi bi-exclamation-circle me-1"></i>Outstanding: <strong id="infOutstanding" class="text-danger">-</strong></div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12 col-md-4">
                            <label class="form-label">Tanggal Order <span class="text-danger">*</span></label>
                            <input type="date" class="form-control" name="tgl_order" required
                                   value="{{ old('tgl_order', $so->tgl_order?->format('Y-m-d') ?? date('Y-m-d')) }}">
                        </div>
                        <div class="col-12 col-md-4">
                            <label class="form-label">Deadline <span class="text-danger">*</span></label>
                            <input type="date" class="form-control" name="tgl_deadline" required
                                   id="inpDeadline"
                                   value="{{ old('tgl_deadline', $so->tgl_deadline?->format('Y-m-d') ?? '') }}">
                        </div>
                        <div class="col-12 col-md-4">
                            <label class="form-label">Prioritas</label>
                            <select class="form-select" name="prioritas">
                                @foreach(['normal'=>'Normal','urgent'=>'🔴 Urgent','express'=>'⚡ Express'] as $val => $lbl)
                                    <option value="{{ $val }}" {{ old('prioritas', $so->prioritas ?? 'normal') === $val ? 'selected' : '' }}>
                                        {{ $lbl }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Item Pekerjaan --}}
            <div class="pf-card mb-4">
                <div class="pf-card-header">
                    <h6 class="pf-card-title"><i class="bi bi-list-check"></i> Item Pekerjaan</h6>
                    <button type="button" class="btn btn-sm btn-outline-primary" onclick="tambahItem()">
                        <i class="bi bi-plus"></i> Tambah Item
                    </button>
                </div>
                <div class="pf-card-body p-0">
                    <div class="table-responsive">
                        <table class="table mb-0" id="tblItems">
                            <thead>
                                <tr>
                                    <th style="width:32px">#</th>
                                    <th>Nama Pekerjaan / Produk</th>
                                    <th style="width:110px">Jenis</th>
                                    <th style="width:90px">Oplah</th>
                                    <th style="width:120px">Harga Satuan (Rp)</th>
                                    <th style="width:130px">Subtotal</th>
                                    <th style="width:36px"></th>
                                </tr>
                            </thead>
                            <tbody id="itemsBody">
                                @php $items = old('items', $so->items ?? [['nama_pekerjaan'=>$estimasi?->nama_pekerjaan,'jenis_produk'=>$estimasi?->jenis_produk,'oplah'=>$estimasi?->oplah,'harga_satuan'=>$estimasi?->harga_final,'estimasi_id'=>$estimasi?->id]]); @endphp
                                @foreach($items as $idx => $item)
                                    @include('modules.sales-order.partials.item-row', ['idx'=>$idx,'item'=>$item])
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            {{-- Instruksi & Catatan --}}
            <div class="pf-card mb-4">
                <div class="pf-card-header">
                    <h6 class="pf-card-title"><i class="bi bi-chat-text-fill"></i> Instruksi & Catatan</h6>
                </div>
                <div class="pf-card-body">
                    <div class="row g-3">
                        <div class="col-12">
                            <label class="form-label">Instruksi Produksi</label>
                            <textarea class="form-control" name="instruksi_produksi" rows="3"
                                      placeholder="Instruksi khusus untuk tim produksi, referensi warna Pantone, proof, dll...">{{ old('instruksi_produksi', $so->instruksi_produksi ?? '') }}</textarea>
                        </div>
                        <div class="col-12 col-md-6">
                            <label class="form-label">Alamat Pengiriman</label>
                            <textarea class="form-control" name="alamat_kirim" rows="3"
                                      placeholder="Kosongkan jika ambil sendiri">{{ old('alamat_kirim', $so->alamat_kirim ?? '') }}</textarea>
                        </div>
                        <div class="col-12 col-md-6">
                            <label class="form-label">Catatan Internal</label>
                            <textarea class="form-control" name="catatan" rows="3"
                                      placeholder="Catatan internal (tidak tampil di dokumen cetak)">{{ old('catatan', $so->catatan ?? '') }}</textarea>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        {{-- ===== KOLOM KANAN — RINGKASAN HARGA ===== --}}
        <div class="col-12 col-xl-4">
            <div style="position:sticky;top:calc(var(--pf-topbar-h) + 16px)">

                {{-- Ringkasan Harga --}}
                <div class="pf-card mb-3">
                    <div class="pf-card-header" style="background:var(--pf-primary);border-radius:calc(var(--pf-radius-lg) - 1px) calc(var(--pf-radius-lg) - 1px) 0 0">
                        <h6 class="pf-card-title" style="color:#fff"><i class="bi bi-receipt"></i> Ringkasan Harga</h6>
                    </div>
                    <div class="pf-card-body p-0">
                        <div style="padding:16px 20px">
                            <div class="d-flex justify-content-between mb-2" style="font-size:13px">
                                <span class="text-muted">Subtotal</span>
                                <span id="dispSubtotal" class="font-mono">Rp 0</span>
                            </div>

                            <div class="row g-2 mb-2">
                                <div class="col-7" style="font-size:13px;padding-top:8px;color:var(--pf-text-muted)">
                                    Diskon
                                </div>
                                <div class="col-5">
                                    <div class="input-group input-group-sm">
                                        <input type="number" class="form-control text-center font-mono"
                                               name="diskon_pct" id="inpDiskon"
                                               value="{{ old('diskon_pct', $so->diskon_pct ?? 0) }}"
                                               min="0" max="100" step="0.5" oninput="hitungTotal()">
                                        <span class="input-group-text">%</span>
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex justify-content-between mb-2" style="font-size:13px">
                                <span class="text-muted">Nilai Diskon</span>
                                <span id="dispDiskon" class="font-mono text-danger">- Rp 0</span>
                            </div>

                            <div class="d-flex justify-content-between mb-2" style="font-size:13px">
                                <span class="text-muted">DPP</span>
                                <span id="dispDPP" class="font-mono">Rp 0</span>
                            </div>

                            <div class="row g-2 mb-2">
                                <div class="col-7" style="font-size:13px;padding-top:8px;color:var(--pf-text-muted)">
                                    PPN
                                </div>
                                <div class="col-5">
                                    <div class="input-group input-group-sm">
                                        <input type="number" class="form-control text-center font-mono"
                                               name="ppn_pct" id="inpPPN"
                                               value="{{ old('ppn_pct', $so->ppn_pct ?? 11) }}"
                                               min="0" max="100" step="1" oninput="hitungTotal()">
                                        <span class="input-group-text">%</span>
                                    </div>
                                </div>
                            </div>

                            <div class="d-flex justify-content-between mb-2" style="font-size:13px">
                                <span class="text-muted">Nilai PPN</span>
                                <span id="dispPPN" class="font-mono">Rp 0</span>
                            </div>

                            <div class="pf-divider" style="margin:12px 0"></div>
                        </div>

                        <div style="padding:14px 20px 18px;background:linear-gradient(135deg,rgba(27,79,216,.07),rgba(27,79,216,.02))">
                            <div class="d-flex justify-content-between align-items-baseline">
                                <span style="font-weight:600;font-size:13px;color:var(--pf-text-muted)">GRAND TOTAL</span>
                            </div>
                            <div style="font-size:28px;font-weight:700;font-family:var(--pf-font-mono);color:var(--pf-primary);letter-spacing:-1.5px;margin-top:4px" id="dispGrandTotal">
                                Rp 0
                            </div>
                            <input type="hidden" name="grand_total" id="hdnGrandTotal" value="0">
                            <input type="hidden" name="total_harga" id="hdnSubtotal" value="0">
                        </div>
                    </div>
                </div>

                {{-- Pembayaran --}}
                <div class="pf-card mb-3">
                    <div class="pf-card-header">
                        <h6 class="pf-card-title"><i class="bi bi-cash-coin"></i> Pembayaran</h6>
                    </div>
                    <div class="pf-card-body">
                        <div class="row g-3">
                            <div class="col-12">
                                <label class="form-label">Cara Bayar</label>
                                <select class="form-select" name="cara_bayar">
                                    <option value="transfer" {{ ($so->cara_bayar ?? '') === 'transfer' ? 'selected' : '' }}>Transfer Bank</option>
                                    <option value="tunai"    {{ ($so->cara_bayar ?? '') === 'tunai'    ? 'selected' : '' }}>Tunai</option>
                                    <option value="giro"     {{ ($so->cara_bayar ?? '') === 'giro'     ? 'selected' : '' }}>Giro / Cek</option>
                                    <option value="tempo"    {{ ($so->cara_bayar ?? '') === 'tempo'    ? 'selected' : '' }}>Tempo (Kredit)</option>
                                </select>
                            </div>
                            <div class="col-12">
                                <label class="form-label">DP (Rp)</label>
                                <div class="input-group">
                                    <span class="input-group-text">Rp</span>
                                    <input type="number" class="form-control font-mono" name="dp_nominal"
                                           value="{{ old('dp_nominal', $so->dp_nominal ?? 0) }}"
                                           placeholder="0" oninput="hitungTotal()">
                                </div>
                                <div class="mt-1" style="font-size:12px;color:var(--pf-text-muted)">
                                    Sisa bayar: <strong id="dispSisaBayar" class="text-danger">Rp 0</strong>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Status & Sales --}}
                <div class="pf-card mb-3">
                    <div class="pf-card-header">
                        <h6 class="pf-card-title"><i class="bi bi-toggles"></i> Status & Penugasan</h6>
                    </div>
                    <div class="pf-card-body">
                        <div class="row g-3">
                            <div class="col-12">
                                <label class="form-label">Status</label>
                                <select class="form-select" name="status">
                                    @foreach(['draft','pending','proses','selesai','kirim','batal'] as $s)
                                        <option value="{{ $s }}" {{ old('status', $so->status ?? 'draft') === $s ? 'selected' : '' }}>
                                            {{ ucfirst($s) }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-12">
                                <label class="form-label">Sales / Marketing</label>
                                <select class="form-select" name="sales_id">
                                    <option value="">— Pilih Sales —</option>
                                    @foreach($salesUsers ?? [] as $u)
                                        <option value="{{ $u->id }}" {{ old('sales_id', $so->sales_id ?? '') == $u->id ? 'selected' : '' }}>
                                            {{ $u->name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Action Buttons --}}
                <div class="d-grid gap-2">
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-save2-fill"></i>
                        {{ isset($so) ? 'Update Sales Order' : 'Simpan Sales Order' }}
                    </button>
                    <div class="row g-2">
                        @if(isset($so))
                        <div class="col-6">
                            <a href="/sales-orders/{{ $so->id }}/print" target="_blank" class="btn btn-outline-secondary w-100">
                                <i class="bi bi-printer"></i> Cetak SO
                            </a>
                        </div>
                        <div class="col-6">
                            <button type="button" class="btn btn-outline-success w-100"
                                    onclick="buatJO({{ $so->id }})">
                                <i class="bi bi-kanban"></i> Buat JO
                            </button>
                        </div>
                        @else
                        <div class="col-12">
                            <a href="{{ route('sales-orders.index') }}" class="btn btn-outline-secondary w-100">
                                <i class="bi bi-arrow-left"></i> Kembali
                            </a>
                        </div>
                        @endif
                    </div>
                </div>

            </div>
        </div>

    </div>
</form>

{{-- Item Row Template (hidden) --}}
<template id="tmplItemRow">
    <tr class="item-row" id="item-row-{IDX}">
        <td class="align-middle text-center" style="font-size:12px;color:var(--pf-text-muted)">{NUM}</td>
        <td>
            <input type="text" class="form-control form-control-sm" name="items[{IDX}][nama_pekerjaan]" placeholder="Nama pekerjaan" required>
            <input type="hidden" name="items[{IDX}][estimasi_id]" value="">
        </td>
        <td>
            <select class="form-select form-select-sm" name="items[{IDX}][jenis_produk]">
                <option value="brosur">Brosur</option>
                <option value="kartu_nama">Kartu Nama</option>
                <option value="kalender">Kalender</option>
                <option value="buku">Buku</option>
                <option value="spanduk">Spanduk</option>
                <option value="nota">Nota</option>
                <option value="stiker">Stiker</option>
                <option value="lain">Lainnya</option>
            </select>
        </td>
        <td>
            <input type="number" class="form-control form-control-sm font-mono item-oplah" name="items[{IDX}][oplah]" value="1000" min="1" oninput="hitungSubtotal('{IDX}')">
        </td>
        <td>
            <input type="number" class="form-control form-control-sm font-mono item-harga" name="items[{IDX}][harga_satuan]" value="0" min="0" oninput="hitungSubtotal('{IDX}')">
        </td>
        <td>
            <span class="font-mono fw-500 item-subtotal" id="subtotal-{IDX}" style="font-size:13px">Rp 0</span>
            <input type="hidden" name="items[{IDX}][subtotal]" class="item-subtotal-val">
        </td>
        <td>
            <button type="button" class="btn btn-sm btn-outline-danger" onclick="hapusItem('item-row-{IDX}')">
                <i class="bi bi-x"></i>
            </button>
        </td>
    </tr>
</template>

@endsection

@push('scripts')
<script>
let itemCount = {{ count(old('items', $so->items ?? [['nama_pekerjaan'=>$estimasi?->nama_pekerjaan]])) }};

function tambahItem() {
    const tmpl = document.getElementById('tmplItemRow').innerHTML;
    const html = tmpl.replaceAll('{IDX}', itemCount).replaceAll('{NUM}', itemCount + 1);
    document.getElementById('itemsBody').insertAdjacentHTML('beforeend', html);
    itemCount++;
    hitungTotal();
}

function hapusItem(rowId) {
    document.getElementById(rowId)?.remove();
    hitungTotal();
    // Re-number
    document.querySelectorAll('.item-row td:first-child').forEach((td, i) => {
        td.textContent = i + 1;
    });
}

function hitungSubtotal(idx) {
    const oplah  = parseFloat(document.querySelector(`[name="items[${idx}][oplah]"]`)?.value) || 0;
    const harga  = parseFloat(document.querySelector(`[name="items[${idx}][harga_satuan]"]`)?.value) || 0;
    const sub    = oplah * harga;
    const span   = document.getElementById(`subtotal-${idx}`);
    const hidden = document.querySelector(`[name="items[${idx}][subtotal]"]`);
    if (span) span.textContent = 'Rp ' + sub.toLocaleString('id-ID');
    if (hidden) hidden.value = sub;
    hitungTotal();
}

function hitungTotal() {
    let subtotal = 0;
    document.querySelectorAll('.item-subtotal-val').forEach(el => {
        subtotal += parseFloat(el.value) || 0;
    });

    const diskonPct = parseFloat(document.getElementById('inpDiskon')?.value) || 0;
    const ppnPct    = parseFloat(document.getElementById('inpPPN')?.value) || 0;
    const dpNominal = parseFloat(document.querySelector('[name="dp_nominal"]')?.value) || 0;

    const nilaiDiskon = subtotal * (diskonPct / 100);
    const dpp         = subtotal - nilaiDiskon;
    const nilaiPPN    = dpp * (ppnPct / 100);
    const grandTotal  = dpp + nilaiPPN;
    const sisaBayar   = grandTotal - dpNominal;

    const fmt = n => 'Rp ' + Math.round(n).toLocaleString('id-ID');

    document.getElementById('dispSubtotal').textContent   = fmt(subtotal);
    document.getElementById('dispDiskon').textContent     = '- ' + fmt(nilaiDiskon);
    document.getElementById('dispDPP').textContent        = fmt(dpp);
    document.getElementById('dispPPN').textContent        = fmt(nilaiPPN);
    document.getElementById('dispGrandTotal').textContent = fmt(grandTotal);
    document.getElementById('dispSisaBayar').textContent  = fmt(sisaBayar);
    document.getElementById('hdnGrandTotal').value        = Math.round(grandTotal);
    document.getElementById('hdnSubtotal').value          = Math.round(subtotal);
}

function loadPelangganInfo(id) {
    if (!id) { document.getElementById('infoPelangganPanel').style.display = 'none'; return; }
    const opt = document.querySelector(`#selPelanggan option[value="${id}"]`);
    document.getElementById('infTermin').textContent = opt?.dataset.termin || '-';
    document.getElementById('infLimit').textContent  = 'Rp ' + parseInt(opt?.dataset.limit || 0).toLocaleString('id-ID');
    document.getElementById('infoPelangganPanel').style.display = 'block';

    // Fetch outstanding via AJAX
    fetch(`/api/pelanggan/${id}/outstanding`)
        .then(r => r.json())
        .then(d => {
            document.getElementById('infOutstanding').textContent = 'Rp ' + parseInt(d.outstanding || 0).toLocaleString('id-ID');
        });
}

function buatJO(soId) {
    Swal.fire({
        title: 'Buat Job Order?',
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#1B4FD8',
        confirmButtonText: 'Buat JO'
    }).then(r => { if (r.isConfirmed) window.location.href = `/job-orders/create?so_id=${soId}`; });
}

// Init
document.querySelectorAll('.item-subtotal-val').forEach((_, i) => hitungSubtotal(i));
hitungTotal();
loadPelangganInfo(document.getElementById('selPelanggan')?.value);
</script>
@endpush