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

@section('content')
@include('layouts.navbars.auth.topnav', ['title' => ''])

<div class="card shadow-lg mx-4">
    <div class="card-body p-3">
        <div class="row gx-4">
            <div class="col-lg">
                <div class="nav-wrapper">
                    {{-- button back --}}
                    <button class="btn btn-secondary mb-0" onclick="history.back()">
                        <i class="fas fa-circle-left me-1"></i>
                        <span class="font-weight-bold">Kembali</span>
                    </button>

                    {{-- check authorize edit --}}
                    @if ($authorize->edit == '1')
                    {{-- button save --}}
                    <button class="btn btn-primary mb-0" id="{{ $dmenu }}-save"
                        onclick="event.preventDefault(); document.getElementById('{{ $dmenu }}-form').submit();">
                        <i class="fas fa-floppy-disk me-1"></i>
                        <span class="font-weight-bold">Simpan</span>
                    </button>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container-fluid py-4">
    <div class="row">
        <div class="col-md-12">
            <form role="form" method="POST" action="{{ URL::to($url_menu . '/' . $idencrypt) }}"
                enctype="multipart/form-data" id="{{ $dmenu }}-form">
                @csrf
                @method('PUT')

                <div class="card">
                    <div class="card-body">
                        <p class="text-uppercase text-sm">Edit {{ $title_menu }}</p>
                        <hr class="horizontal dark mt-0">

                        <p class="text-xs text-muted mb-2">
                            <i class="fas fa-info-circle me-1"></i>Data dari Outstanding PR SAP
                        </p>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-control-label">Date PR</label>
                                    <input class="form-control" type="date" name="date_pr" readonly
                                        value="{{ $list->date_pr ?? '' }}">
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-control-label">No PR</label>
                                    <input class="form-control" type="text" name="no_pr" readonly
                                        value="{{ $list->no_pr ?? '' }}">
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-control-label">No Item</label>
                                    <input class="form-control" type="text" name="no_item" readonly
                                        value="{{ $list->no_item ?? '' }}">
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-control-label">Material Group</label>
                                    <input class="form-control" type="text" name="material_group" readonly
                                        value="{{ $list->material_group ?? '' }}">
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-control-label">Material Code</label>
                                    <input class="form-control" type="text" name="material_code" readonly
                                        value="{{ $list->material_code ?? '' }}">
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-control-label">Item Name</label>
                                    <input class="form-control" type="text" name="item_name" readonly
                                        value="{{ $list->item_name ?? '' }}">
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-control-label">UOM</label>
                                    <input class="form-control" type="text" name="uom" readonly
                                        value="{{ $list->uom ?? '' }}">
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-control-label">Request By</label>
                                    <input class="form-control" type="text" name="request_by" readonly
                                        value="{{ $list->request_by ?? '' }}">
                                </div>
                            </div>
                        </div>

                        <hr class="horizontal dark">
                        <p class="text-xs text-muted mb-2">
                            <i class="fas fa-edit me-1"></i>Data Outstanding PR (dapat diedit)
                        </p>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-control-label">Quantity</label>
                                    <input class="form-control" type="number" name="quantity"
                                        value="{{ $list->quantity ?? '' }}">
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-control-label">SAP Code Vendor</label>
                                    <div class="flex flex-col mb-2 input-group">
                                        <input type="text"
                                            name="sap_code_vendor"
                                            id="input-sap_code_vendor"
                                            class="form-control"
                                            readonly value="{{ old('sap_code_vendor', $list->sap_code_vendor ?? '') }}">
                                        <span class="input-group-text bg-primary text-light"
                                            data-bs-toggle="modal"
                                            data-bs-target="#searchModalsap_code_vendor"
                                            style="border-color:#d2d6da; border-left:3px solid #d2d6da; cursor:pointer;">
                                            <i class="fas fa-search"></i>
                                        </span>
                                    </div>
                                    @error('sap_code_vendor')
                                    <p class='text-danger text-xs pt-1'>{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-control-label">Vendor Name</label>
                                    <input class="form-control" type="text"
                                        name="vendor_name"
                                        id="input-vendor_name"
                                        readonly
                                        value="{{ old('vendor_name', $list->vendor_name ?? '') }}">
                                    <p class='text-secondary text-xs pt-1 px-1'>
                                        *) Terisi otomatis setelah memilih SAP Code Vendor
                                    </p>
                                    @error('vendor_name')
                                    <p class='text-danger text-xs pt-1'>{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-control-label">Delivery Date</label>
                                    <input class="form-control" type="date"
                                        name="delivery_date"
                                        value="{{ old('delivery_date', $list->delivery_date ?? '') }}">
                                    @error('delivery_date')
                                    <p class='text-danger text-xs pt-1'>{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>

                            <div class="col-md-6">
                                <div class="form-group">
                                    <label class="form-control-label">Price</label>
                                    <input class="form-control" type="text"
                                        id="input-price"
                                        value="{{ number_format(old('price', $list->price ?? 0), 2, ',', '.') }}">

                                    <input type="hidden" name="price" id="input-price-raw"
                                        value="{{ old('price', $list->price ?? 0) }}">
                                    @error('price')
                                    <p class='text-danger text-xs pt-1'>{{ $message }}</p>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        <hr class="horizontal dark">
                    </div>
                    <!-- <div class="card-footer align-items-center pt-0 pb-2"></div> -->
                </div>
            </form>
        </div>
    </div>
</div>

{{-- ===================== MODAL SEARCH: sap_code_vendor ===================== --}}
@php
$vendor_search_query = DB::table('sys_table')
->where(['dmenu' => $dmenu, 'field' => 'sap_code_vendor'])
->value('query');

$vendor_list = $vendor_search_query
? DB::select($vendor_search_query)
: DB::select("SELECT sap_code_vendor, vendor_name FROM ms_vendor WHERE isactive = 1 ORDER BY vendor_name");
@endphp

<div class="modal fade" id="searchModalsap_code_vendor" tabindex="-1" role="dialog"
    aria-labelledby="searchModalVendorLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="searchModalVendorLabel">List Vendor</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body table-responsive">
                <table class="table display" id="table-vendor-modal">
                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                        <tr>
                            <th width="80px">Action</th>
                            <th>SAP Code Vendor</th>
                            <th>Vendor Name</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($vendor_list as $vendor)
                        @php
                        // Ambil kolom pertama sebagai code, kedua sebagai name
                        $vendorArr = array_values((array) $vendor);
                        $vCode = $vendorArr[0] ?? '';
                        $vName = $vendorArr[1] ?? '';
                        @endphp
                        <tr>
                            <td>
                                <span class="btn badge bg-primary badge-lg"
                                    onclick="selectVendor('{{ $vCode }}', '{{ addslashes($vName) }}')">
                                    <i class="bi bi-check-circle me-1"></i> Select
                                </span>
                            </td>
                            <td class="text-sm font-weight-normal">{{ $vCode }}</td>
                            <td class="text-sm font-weight-normal">{{ $vName }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{{-- ===================== JS FLAG ===================== --}}
@if ($jsmenu == '1')
@if (view()->exists("js.{$dmenu}"))
@push('addjs')
@include('js.' . $dmenu)
@endpush
@else
@push('addjs')
<script>
    Swal.fire({
        title: 'JS Not Found!!',
        text: 'Please Create File JS',
        icon: 'error',
        confirmButtonColor: '#028284'
    });
</script>
@endpush
@endif
@endif

@endsection

@push('js')
<script>
    // ══════════════════════════════════════════════════════════
    // PRICE FORMAT — #input-price (halaman show/edit)
    // ══════════════════════════════════════════════════════════

    function priceFormatDisplay(rawInt) {
        if (!rawInt || rawInt <= 0) return '';
        return new Intl.NumberFormat('id-ID').format(rawInt) + ',00';
    }

    function priceGetRaw(el) {
        var v = parseInt(el.getAttribute('data-raw') || '0', 10);
        return isNaN(v) ? 0 : v;
    }

    function priceSetRaw(el, val) {
        el.setAttribute('data-raw', String(val));
    }

    function getRawPrice(formattedVal) {
        if (!formattedVal) return 0;
        var mainPart = (formattedVal + '').split(',')[0];
        return parseInt(mainPart.replace(/\./g, ''), 10) || 0;
    }

    // Inisialisasi data-raw dari value yang sudah ada saat halaman load
    function initPriceInput(el) {
        var raw = getRawPrice(el.value);
        priceSetRaw(el, raw);
        el.value = priceFormatDisplay(raw);
    }

    document.addEventListener('DOMContentLoaded', function () {
        var el = document.getElementById('input-price');
        if (el) initPriceInput(el);
    });

    // ── Keydown: satu-satunya handler, tidak ada duplikat ──
    document.addEventListener('keydown', function (e) {
        var el = e.target;
        if (el.id !== 'input-price') return;

        var isDigit = e.key >= '0' && e.key <= '9';
        var isBack  = e.key === 'Backspace';
        var isDel   = e.key === 'Delete';
        var isNav   = ['Tab','ArrowLeft','ArrowRight','Home','End'].indexOf(e.key) !== -1;

        if (isNav) return; // biarkan Tab/Arrow jalan normal

        e.preventDefault();
        e.stopImmediatePropagation();

        var raw = priceGetRaw(el);

        if (isDigit) {
            if (String(raw).length >= 15) return;
            raw = raw * 10 + parseInt(e.key, 10);
        } else if (isBack || isDel) {
            raw = Math.floor(raw / 10);
        } else {
            return;
        }

        priceSetRaw(el, raw);
        el.value = priceFormatDisplay(raw);

        // sync ke hidden input
        var hidden = document.getElementById('input-price-raw');
        if (hidden) hidden.value = raw || 0;

        // cursor sebelum ',00'
        if (el.value) {
            var pos = el.value.length - 3;
            try { el.setSelectionRange(pos, pos); } catch(ex) {}
        }
    }, true); // true = capture phase, lebih prioritas dari jQuery

    // ── Cegah paste ──
    document.addEventListener('paste', function (e) {
        if (e.target.id === 'input-price') e.preventDefault();
    }, true);

    // ── Cegah cursor masuk ke area ',00' ──
    document.addEventListener('click',   fixPriceCursor, true);
    document.addEventListener('mouseup', fixPriceCursor, true);
    document.addEventListener('keyup',   fixPriceCursor, true);

    function fixPriceCursor(e) {
        var el = e.target;
        if (el.id !== 'input-price') return;
        if (!el.value || !el.value.includes(',')) return;
        setTimeout(function () {
            var pos = el.value.length - 3;
            if (el.selectionStart > pos) {
                try { el.setSelectionRange(pos, pos); } catch(ex) {}
            }
        }, 0);
    }

    // ── Sync hidden input saat submit ──
    document.addEventListener('DOMContentLoaded', function () {
        var form = document.getElementById('{{ $dmenu }}-form');
        if (form) {
            form.addEventListener('submit', function () {
                var el  = document.getElementById('input-price');
                var raw = el ? priceGetRaw(el) : 0;
                var hidden = document.getElementById('input-price-raw');
                if (hidden) hidden.value = raw || 0;
            });
        }
    });

    $(document).ready(function() {

        // ── Init DataTable modal vendor ──────────────────────────────────────
        $('#table-vendor-modal').DataTable();

        window.selectVendor = function(code, name) {
            $('#input-sap_code_vendor').val(code);
            $('#input-vendor_name').val(name);
            $('#searchModalsap_code_vendor').modal('hide');
            fetchHistoryPOForEdit(code);
        };

        function fetchHistoryPOForEdit(sapVendor) {
            var materialCode = '{{ $list->material_code ?? '' }}';
            if (!materialCode || !sapVendor) return;

            var url = "{{ route('lsospr.historyPO') }}?material_code=" + encodeURIComponent(materialCode)
                    + "&sap_code_vendor=" + encodeURIComponent(sapVendor);

            fetch(url, { headers: { 'Accept': 'application/json' } })
                .then(function(r) { return r.json(); })
                .then(function(res) {
                    if (!res.success || res.price <= 0) return;

                    var el = document.getElementById('input-price');
                    if (!el) return;

                    priceSetRaw(el, res.price);
                    el.value = priceFormatDisplay(res.price);

                    var hidden = document.getElementById('input-price-raw');
                    if (hidden) hidden.value = res.price;

                    el.style.backgroundColor = '#d4edda';
                    setTimeout(function() { el.style.backgroundColor = ''; }, 1500);
                })
                .catch(function(err) { console.error('History PO error:', err); });
        }

        // ── Jika sap_code_vendor diketik manual (opsional: kosongkan vendor_name) ─
        $('#input-sap_code_vendor').on('input', function() {
            // Kosongkan vendor_name jika user mengetik manual tanpa pilih dari modal
            // Aktifkan baris di bawah jika ingin strict harus pilih dari modal
            // $('#input-vendor_name').val('');
        });

    });
</script>
@endpush