@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])

@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid py-4">
        <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form">
            @csrf
            <div class="card shadow-sm mb-4 d-print-none">
                <div class="card-body py-3">
                    <div class="d-flex align-items-center gap-2 flex-wrap mb-0">
                        <button type="button" class="btn btn-secondary d-inline-flex align-items-center mb-0"
                            onclick="history.back()">
                            <i class="fas fa-circle-left me-1"></i>
                            <span class="fw-bold">Kembali</span>
                        </button>

                        <button type="submit" class="btn btn-primary d-inline-flex align-items-center mb-0"
                            data-shortcut="save confirm">
                            <i class="fas fa-floppy-disk me-1"></i>
                            <span>Simpan</span>
                        </button>
                    </div>
                </div>
            </div>
            {{-- CARD HEADER --}}
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">Header Komposisi</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="form-group">
                            <label>Nama Customer</label>
                            <input type="text" class="form-control" name="nama" required>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Material SAP</label>
                                <input type="text" class="form-control" name="matnr_sap">
                            </div>
                            <div class="form-group">
                                <label>Material FES</label>
                                <input type="text" class="form-control" name="matnr_fes">
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Width SAP</label>
                                <input type="text" class="form-control" name="width_sap" required>
                            </div>
                            <div class="form-group">
                                <label>Width FES</label>
                                <input type="text" class="form-control" name="width_fes" required>
                            </div>
                        </div>

                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>GSM SAP</label>
                                <input type="text" class="form-control" name="gsm_sap" readonly>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>GSM FES</label>
                                <input type="text" class="form-control" name="gsm_fes" readonly>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {{-- CARD DETAIL --}}
            <div class="card mb-4">
                <div class="card-header d-flex align-items-center justify-content-between">
                    <h5 class="mb-0">Detail Komposisi</h5>
                    <div class="d-print-none">
                        <button type="button" class="btn btn-outline-primary btn-sm" id="btnAddRow">
                            <i class="fas fa-plus me-1"></i> Tambah Baris
                        </button>
                    </div>
                </div>
                <div class="card-body table-responsive">
                    @php
                        use Illuminate\Support\Facades\DB;

                        // Ambil kategori lalu unik-kan secara case-insensitive & trim spasi
                        $kategoriList = DB::table('mst_kategori')
                            ->orderBy('kategori')
                            ->pluck('kategori')
                            ->map(fn($v) => trim($v))
                            ->unique(fn($v) => mb_strtolower($v))
                            ->sort()
                            ->values();
                    @endphp

                    <datalist id="kategoriOptions">
                        @foreach ($kategoriList as $k)
                            <option value="{{ e($k) }}"></option>
                        @endforeach
                    </datalist>

                    <table class="text-center table table-bordered excel-table" id="detailTable">
                        <thead style="background-color:#b8ecec">
                            <tr>
                                <th style="width:20%">Tipe</th>
                                <th style="width:50%">Kategori</th>
                                <th style="width:20%">GSM</th>
                                <th style="width:10%" class="d-print-none">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php $defaults = ['sap','sap','sap','sap','fes','fes']; @endphp
                            @foreach ($defaults as $tipeDefault)
                                <tr>
                                    <td>
                                        <select name="tipe[]" class="form-select tipe-select" required>
                                            <option value="" hidden>Pilih…</option>
                                            <option value="sap" {{ $tipeDefault === 'sap' ? 'selected' : '' }}>SAP
                                            </option>
                                            <option value="fes" {{ $tipeDefault === 'fes' ? 'selected' : '' }}>FES
                                            </option>
                                        </select>
                                        <div class="invalid-feedback">Tipe wajib dipilih.</div>
                                    </td>
                                    <td>
                                        <input type="text" class="form-control kategori-input" name="kategori[]"
                                            list="kategoriOptions" placeholder="Ketik / pilih kategori">
                                        <div class="invalid-feedback"></div>
                                    </td>
                                    <td>
                                        <input type="number" class="form-control gsm-input text-end" name="gsm[]"
                                            step="0.01" min="0" required placeholder="0.00">
                                        <div class="invalid-feedback">GSM wajib &gt;= 0.</div>
                                    </td>
                                    <td class="d-print-none">
                                        <button type="button" class="btn btn-outline-danger btn-sm btnDelRow">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>

                    <small class="text-muted">
                        Tips: Bisa <kbd>paste</kbd> banyak baris ke kolom <strong>Kategori</strong> atau
                        <strong>GSM</strong> (satu nilai per baris). Gunakan
                        tombol “Tambah Baris” untuk menambah baris kosong.
                    </small>
                </div>
            </div>
        </form>
    </div>
@endsection

@push('js')
    <script>
        (() => {
            const table = document.getElementById('detailTable');
            const form = table?.closest('form') || document.querySelector('form');
            const btn = form?.querySelector('button[type="submit"]');
            if (!table || !form || !btn) return;

            // ====== Master kategori (dari datalist) ======
            const normalize = s => (s || '').trim().replace(/\s+/g, ' ').toLowerCase();
            const canonMap = new Map(); // low -> canonical
            const allowed = new Set();
            document.querySelectorAll('#kategoriOptions option').forEach(opt => {
                const raw = (opt.value || '').trim().replace(/\s+/g, ' ');
                const low = normalize(raw);
                if (!allowed.has(low)) {
                    allowed.add(low);
                    canonMap.set(low, raw);
                }
            });

            const qAll = (sel, ctx = document) => Array.from(ctx.querySelectorAll(sel));

            // Parser angka yang robust (hapus spasi/pemisah, koma desimal -> titik)
            const toNum = v => {
                const s = String(v ?? '').trim()
                    .replace(/\s+/g, '') // buang spasi
                    .replace(/[.](?=\d{3}\b)/g, '') // hapus titik ribuan ala Eropa/ID (1.234 -> 1234)
                    .replace(/[,](?=\d{1,})/g, '.') // koma desimal -> titik
                    .replace(/[^\d.\-]/g, ''); // buang simbol lain
                const n = parseFloat(s);
                return isNaN(n) ? 0 : n;
            };
            const r3 = x => Math.round(x * 1000) / 1000;

            // ====== Builders ======
            const makeRow = () => {
                const tr = document.createElement('tr');
                tr.innerHTML = `
            <td>
                <select name="tipe[]" class="form-select tipe-select" required>
                    <option value="" hidden>Pilih…</option>
                    <option value="sap">SAP</option>
                    <option value="fes">FES</option>
                </select>
                <div class="invalid-feedback">Tipe wajib dipilih.</div>
            </td>
            <td>
                <input type="text" class="form-control kategori-input" name="kategori[]" list="kategoriOptions"
                       placeholder="Ketik / pilih kategori">
                <div class="invalid-feedback"></div>
            </td>
            <td>
                <input type="number" class="form-control gsm-input text-end" name="gsm[]" step="0.01" min="0" required placeholder="0.00">
                <div class="invalid-feedback">GSM wajib &gt;= 0.</div>
            </td>
            <td class="d-print-none">
                <button type="button" class="btn btn-outline-danger btn-sm btnDelRow">
                    <i class="fas fa-trash"></i>
                </button>
            </td>
        `;
                return tr;
            };

            // ====== Validation ======
            const validateTipe = (el) => {
                const ok = !!el.value;
                el.classList.toggle('is-invalid', !ok);
                el.classList.toggle('is-valid', ok);
                return ok;
            };
            const validateKategori = (inp) => {
                const raw = (inp.value || '').trim().replace(/\s+/g, ' ');
                // KOSONG DIPERBOLEHKAN
                if (!raw) {
                    // bersihkan state validasi & pesan
                    inp.classList.remove('is-invalid', 'is-valid');
                    const fb = inp.parentElement.querySelector('.invalid-feedback');
                    if (fb) fb.textContent = '';
                    return true;
                }
                // Jika DIISI, WAJIB ada di master (datalist)
                const low = raw.toLowerCase();
                if (!allowed.has(low)) {
                    inp.classList.add('is-invalid');
                    inp.classList.remove('is-valid');
                    const fb = inp.parentElement.querySelector('.invalid-feedback');
                    if (fb) fb.textContent = 'Kategori tidak ditemukan di master.';
                    return false;
                }
                // kanonisasi tampilan (spasi/case)
                const fixed = canonMap.get(low) || raw;
                if (inp.value !== fixed) inp.value = fixed;
                inp.classList.add('is-valid');
                inp.classList.remove('is-invalid');
                const fb = inp.parentElement.querySelector('.invalid-feedback');
                if (fb) fb.textContent = '';
                return true;
            };
            const validateGsm = (inp) => {
                const v = toNum(inp.value);
                const ok = inp.value !== '' && v >= 0;
                inp.classList.toggle('is-invalid', !ok);
                inp.classList.toggle('is-valid', ok);
                return ok;
            };

            const tableHasInvalid = () => {
                let ok = true;
                qAll('tbody tr', table).forEach(tr => {
                    ok = validateTipe(tr.querySelector('.tipe-select')) && ok;
                    ok = validateKategori(tr.querySelector('.kategori-input')) && ok;
                    ok = validateGsm(tr.querySelector('.gsm-input')) && ok;
                });
                return !ok;
            };
            const invalidOutsideTable = () => {
                for (const el of Array.from(form.elements)) {
                    if (table.contains(el)) continue;
                    if (typeof el.checkValidity === 'function' && el.willValidate && !el.checkValidity())
                        return true;
                }
                return false;
            };

            // ====== Totals -> header fields (RUMUS BARU) ======
            const gsmSapEl = document.querySelector('input[name="gsm_sap"]');
            const gsmFesEl = document.querySelector('input[name="gsm_fes"]');
            const wSapEl = document.querySelector('input[name="width_sap"]');
            const wFesEl = document.querySelector('input[name="width_fes"]');

            const recalcTotals = () => {
                let sumSap = 0,
                    sumFes = 0;
                qAll('tbody tr', table).forEach(tr => {
                    const tipe = (tr.querySelector('.tipe-select')?.value || '').toLowerCase();
                    const gsm = toNum(tr.querySelector('.gsm-input')?.value);
                    if (tipe === 'sap') sumSap += gsm;
                    if (tipe === 'fes') sumFes += gsm;
                });

                const wSap = toNum(wSapEl?.value);
                const wFes = toNum(wFesEl?.value);

                // GSM SAP = Σ(gsm SAP)
                if (gsmSapEl) gsmSapEl.value = sumSap ? r3(sumSap) : '';

                // GSM FES = ((w_fes / w_sap) * Σ(gsm FES)) + GSM SAP
                if (gsmFesEl) {
                    if (wSap > 0) {
                        const scaledFes = (wFes / wSap) * sumFes; // skala hanya bagian FES
                        const totalFes = scaledFes + sumSap; // lalu tambahkan GSM SAP
                        gsmFesEl.value = totalFes > 0 ? r3(totalFes) : '';
                    } else {
                        gsmFesEl.value = '';
                    }
                }
            };

            const refresh = () => {
                recalcTotals();
                const disable = invalidOutsideTable() || tableHasInvalid();
                btn.disabled = disable;
                btn.setAttribute('aria-disabled', disable ? 'true' : 'false');
            };

            // ====== Events ======
            table.addEventListener('click', (e) => {
                const del = e.target.closest('.btnDelRow');
                if (del) {
                    const tr = del.closest('tr');
                    tr?.remove();
                    if (!table.tBodies[0].querySelectorAll('tr').length) {
                        table.tBodies[0].appendChild(makeRow());
                    }
                    refresh();
                }
            });

            document.getElementById('btnAddRow')?.addEventListener('click', () => {
                table.tBodies[0].appendChild(makeRow());
                refresh();
            });

            table.addEventListener('input', (e) => {
                const el = e.target;
                if (el.classList.contains('tipe-select')) validateTipe(el);
                if (el.classList.contains('kategori-input')) validateKategori(el);
                if (el.classList.contains('gsm-input')) validateGsm(el);
                refresh();
            });

            table.addEventListener('blur', (e) => {
                const el = e.target;
                if (el.classList?.contains('kategori-input')) {
                    const t = el.value.trim().replace(/\s+/g, ' ');
                    if (el.value !== t) el.value = t;
                    validateKategori(el);
                }
                if (el.classList?.contains('gsm-input')) validateGsm(el);
                refresh();
            }, true);

            // Paste multiline ke kolom kategori & gsm (down-fill)
            table.addEventListener('paste', (e) => {
                const target = e.target;
                const isKat = target.classList?.contains('kategori-input');
                const isGsm = target.classList?.contains('gsm-input');
                if (!isKat && !isGsm) return;

                const text = (e.clipboardData || window.clipboardData)?.getData('text');
                if (!text) return;
                const lines = text.split(/\r?\n/).map(s => s.trim()).filter(Boolean);
                if (lines.length <= 1) return;
                e.preventDefault();

                const selector = isKat ? '.kategori-input' : '.gsm-input';
                const inputs = qAll(selector, table.tBodies[0]);
                const start = inputs.indexOf(target);

                // Tambah baris jika kurang
                while ((start + lines.length) > qAll('tbody tr', table).length) {
                    table.tBodies[0].appendChild(makeRow());
                }

                const inputs2 = qAll(selector, table.tBodies[0]);
                lines.forEach((line, i) => {
                    const t = inputs2[start + i];
                    if (!t) return;
                    t.value = line;
                    if (isKat) validateKategori(t);
                    if (isGsm) validateGsm(t);
                });
                refresh();
            });

            // Field di luar tabel
            form.addEventListener('input', e => {
                if (!table.contains(e.target)) refresh();
            });
            form.addEventListener('change', e => {
                if (!table.contains(e.target)) refresh();
            });
            form.addEventListener('blur', e => {
                if (!table.contains(e.target)) refresh();
            }, true);

            // Perubahan width juga mempengaruhi total (rumus FES)
            [wSapEl, wFesEl].forEach(el => {
                if (!el) return;
                ['input', 'change', 'blur'].forEach(evt => el.addEventListener(evt, refresh));
            });

            // Hitung ulang tepat sebelum submit (hindari nilai lama terkirim)
            form.addEventListener('submit', (e) => {
                recalcTotals();
                refresh();
                if (btn.disabled) e.preventDefault();
            });

            // Init
            requestAnimationFrame(refresh);
        })();
    </script>
@endpush