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

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

    <div class="card shadow-sm border-0 mx-4 mb-3">
        <div class="card-body p-3">
            <div class="d-flex gap-2">
                <button type="button" class="btn btn-secondary mb-0" onclick="window.location='{{ URL::to($url_menu) }}'">
                    <i class="fas fa-circle-left me-1"></i><span class="fw-bold">Kembali</span>
                </button>

                @if (isset($authorize) && ($authorize->edit ?? '0') == '1')
                    <button type="button" class="btn bg-primary text-light mb-0" onclick="confirmUpdate(event);">
                        <i class="fas fa-floppy-disk me-1"></i><span class="fw-bold">Update</span>
                    </button>
                @endif
            </div>
        </div>
    </div>

    <div class="container-fluid py-2">
        <div class="row">
            <div class="col-12">
                <div class="card shadow-sm border-0">
                    <form method="POST" action="{{ URL::to($url_menu . '/' . encrypt($permintaan->id)) }}"
                        id="{{ $dmenu }}-form">
                        @csrf
                        @method('PUT')

                        <div class="card-body p-4">
                            <div class="text-uppercase text-muted small mb-3" style="letter-spacing:.06em;">
                                EDIT PERMINTAAN BARANG
                            </div>

                            <div class="row g-3 mb-3">
                                <div class="col-md-6">
                                    <label class="form-label mb-1 fw-semibold">ID</label>
                                    <input type="text" class="form-control" value="{{ $permintaan->id }}" readonly>
                                    <small class="text-muted">ID tidak bisa diubah</small>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label mb-1 fw-semibold">Tanggal Permintaan</label>
                                    <input type="date" class="form-control" name="tanggal_pengajuan"
                                        value="{{ old('tanggal_pengajuan', $tanggal_permintaan ?? date('Y-m-d')) }}"
                                        readonly>
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label mb-1 fw-semibold">Departemen</label>
                                    <input type="text" class="form-control" value="{{ $departemen_nama ?? '-' }}"
                                        readonly>
                                    <input type="hidden" name="departemen_id" value="{{ $departemen_id }}">
                                </div>

                                <div class="col-md-6">
                                    <label class="form-label mb-1 fw-semibold">Status Pengajuan</label>
                                    <input type="text" class="form-control"
                                        value="{{ strtoupper(old('status', $status_default ?? ($permintaan->status ?? 'entry'))) }}"
                                        readonly>
                                    <input type="hidden" name="status"
                                        value="{{ old('status', $status_default ?? ($permintaan->status ?? 'entry')) }}">
                                </div>
                                @if (!empty($catatan_head))
                                    <div class="row g-3 mt-1">
                                        <div class="col-12">
                                            <label class="form-label mb-1 fw-semibold">Catatan SPV</label>
                                            <textarea class="form-control" rows="3" readonly>{{ $catatan_head }}</textarea>
                                        </div>
                                    </div>
                                @endif
                            </div>

                            <div class="mb-3">
                                <button type="button" class="btn bg-primary text-light mb-0" id="btnAddRow">
                                    <i class="fas fa-plus me-1"></i> <span class="fw-bold">Tambah Barang</span>
                                </button>
                            </div>

                            <div class="table-responsive">
                                <table class="table align-middle table-hover" id="itemsTable">
                                    <thead style="background:#0a8f97; color:#fff;">
                                        <tr>
                                            <th class="th-action">Action</th>
                                            <th style="min-width:260px;">Nama Barang</th>
                                            <th style="min-width:220px;">Penerima</th>
                                            <th style="width:110px;">Jumlah</th>
                                            <th style="width:110px;">UOM</th>
                                            <th style="min-width:260px;">Keterangan</th>
                                        </tr>
                                    </thead>

                                    <tbody id="itemsTbody">
                                        @php
                                            $dbItems = ($items ?? collect())->values();
                                            $oldItemIds = old('item_id', $dbItems->pluck('barang_id')->toArray());
                                            $rowCount = max(count($oldItemIds), 1);
                                        @endphp

                                        @for ($i = 0; $i < $rowCount; $i++)
                                            @php
                                                $dbRow = $dbItems->get($i);
                                                $itemId = old('item_id.' . $i, $dbRow->barang_id ?? null);
                                                $itemName = old('item_name.' . $i, $dbRow->nama_barang ?? '');
                                                $itemDetail = old('item_detail.' . $i, $dbRow->item_detail ?? '');

                                                $penerima = old('penerima.' . $i, $dbRow->penerima_nik ?? '');
                                                $penerimaDisplay = old('penerima_display.' . $i, $dbRow->nama_penerima ?? $dbRow->penerima_nik ?? '');
                                                $jumlah = old('jumlah.' . $i, $dbRow->qty_diminta ?? 1);
                                                $uom = old('uom.' . $i, $dbRow->uom_name ?? '');
                                                $ketItem = old('keterangan_item.' . $i, $dbRow->keterangan ?? '');
                                            @endphp

                                            <tr class="item-row" data-row="{{ $i }}">
                                                <td class="td-action">
                                                    <button type="button" class="btn btn-danger mb-0 btnDeleteRow"
                                                        title="Hapus">
                                                        <i class="fas fa-times"></i>
                                                    </button>
                                                </td>

                                                <td>
                                                    <input type="hidden" name="item_id[]" class="item-id"
                                                        value="{{ $itemId }}">
                                                    <input type="hidden" name="item_name[]" class="item-name-hidden"
                                                        value="{{ old('item_name.' . $i, $dbRow->nama_barang ?? '') }}">
                                                    <input type="hidden" name="item_detail[]" class="item-detail-hidden"
                                                        value="{{ $itemDetail }}">

                                                    <div class="input-group mb-0">
                                                        <input type="text" class="form-control item-name"
                                                            value="{{ old('item_name.' . $i, $dbRow->nama_barang ?? '') }}"
                                                            placeholder="Pilih Barang..."
                                                            onfocus="focused(this)" onfocusout="defocused(this)"
                                                            readonly required>

                                                        <span
                                                            class="input-group-text bg-primary text-light btnOpenBarangModal"
                                                            style="border-color:#d2d6da; border-left:3px solid #d2d6da; cursor:pointer;">
                                                            <i class="fas fa-search" aria-hidden="true"></i>
                                                        </span>
                                                    </div>

                                                    @error('item_id.' . $i)
                                                        <div class="text-danger text-xs mt-1">{{ $message }}</div>
                                                    @enderror
                                                </td>

                                                <td>
                                                    <input type="hidden" name="penerima[]" class="penerima-hidden"
                                                        value="{{ $penerima }}">
                                                    <div class="input-group flex-nowrap w-100 mb-0">
                                                        <input type="text" class="form-control penerima-display"
                                                            placeholder="Pilih Penerima..."
                                                            value="{{ $penerimaDisplay }}"
                                                            readonly onfocus="focused(this)" onfocusout="defocused(this)">
                                                        <span class="input-group-text bg-primary text-light btnOpenPenerimaModal"
                                                            style="border-color:#d2d6da; border-left:3px solid #d2d6da; cursor:pointer;">
                                                            <i class="fas fa-search" aria-hidden="true"></i>
                                                        </span>
                                                    </div>
                                                    @error('penerima.' . $i)
                                                        <div class="text-danger text-xs mt-1">{{ $message }}</div>
                                                    @enderror
                                                </td>

                                                <td>
                                                    <input type="number" min="1" name="jumlah[]"
                                                        class="form-control" value="{{ $jumlah }}">
                                                    @error('jumlah.' . $i)
                                                        <div class="text-danger text-xs mt-1">{{ $message }}</div>
                                                    @enderror
                                                </td>
                                                <td>
                                                    <input type="text" name="uom[]" class="form-control item-uom"
                                                        value="{{ $uom }}" readonly>
                                                </td>

                                                <td>
                                                    <input type="text" name="keterangan_item[]" class="form-control"
                                                        value="{{ $ketItem }}" placeholder="Keterangan">
                                                    @error('keterangan_item.' . $i)
                                                        <div class="text-danger text-xs mt-1">{{ $message }}</div>
                                                    @enderror
                                                </td>
                                            </tr>
                                        @endfor
                                    </tbody>
                                </table>
                            </div>

                            <hr class="horizontal dark mb-0">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="barangModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="text-uppercase text-muted small" style="letter-spacing:.06em;">LIST BARANG</div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table display" id="barangTable">
                            <thead style="background:#00b7bd4f;">
                                <tr>
                                    <th style="width:120px;">Action</th>
                                    <th>Nama Barang</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($list_barang ?? [] as $b)
                                    <tr>
                                        <td>
                                            <button type="button"
                                                class="btn bg-primary text-light fw-bold btnSelectBarang"
                                                data-id="{{ $b->id }}" data-name="{{ $b->name }}"
                                                data-detail="{{ $b->area ?? '' }}" data-uom="{{ $b->uom_name }}">
                                                Select
                                            </button>
                                        </td>
                                        <td>{{ $b->name }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="penerimaModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="text-uppercase text-muted small" style="letter-spacing:.06em;">LIST PENERIMA</div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body py-2 px-3">
                    <div class="mb-3">
                        <input type="text" id="searchPenerimaModal" class="form-control picker-search-input"
                            placeholder="Cari nama penerima..." autocomplete="off">
                    </div>
                    <div class="table-responsive">
                        <table class="table align-middle table-hover mb-0">
                            <thead style="background:#00b7bd4f;">
                                <tr>
                                    <th style="width:100px;">Action</th>
                                    <th>Nama Penerima</th>
                                    <th>Departemen</th>
                                </tr>
                            </thead>
                            <tbody id="penerimaModalList">
                                <tr>
                                    <td colspan="3" class="text-center text-muted py-3">Memuat...</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Tutup</button>
                </div>
            </div>
        </div>
    </div>
@endsection

<style>
    .picker-search-input {
        border-radius: .375rem !important;
    }

    .picker-list-item {
        padding: .5rem .75rem;
        cursor: pointer;
        font-size: .875rem;
        border-bottom: 1px solid #f0f0f0;
        transition: background .15s;
    }

    .picker-list-item:last-child {
        border-bottom: none;
    }

    .picker-list-item:hover {
        background: #0a8f9715;
        color: #0a8f97;
    }

    #itemsTable {
        border-collapse: separate !important;
        border-spacing: 0;
    }

    #itemsTable th,
    #itemsTable td {
        border: 1px solid #dee2e6 !important;
    }

    #itemsTable .th-action,
    #itemsTable .td-action {
        width: 90px;
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
    }
</style>

@push('js')
    <script>
        let activeRowEl = null;
        const defaultPenerimaHidden  = @json($default_penerima_nik ?? '');
        const defaultPenerimaDisplay = @json($default_penerima_nama ?? '');

        function updateDeleteButtons() {
            const rows = document.querySelectorAll('#itemsTbody tr.item-row');
            rows.forEach((tr) => {
                const btn = tr.querySelector('.btnDeleteRow');
                if (btn) btn.disabled = (rows.length <= 1);
            });
        }

        function getSelectedIds(excludeRow = null) {
            const ids = new Set();
            document.querySelectorAll('#itemsTbody tr.item-row').forEach((tr) => {
                if (tr === excludeRow) return;
                const id = tr.querySelector('.item-id')?.value;
                if (id && id !== '') ids.add(String(id));
            });
            return ids;
        }

        function refreshModalButtons() {
            const selectedIds = getSelectedIds(activeRowEl ? activeRowEl[0] : null);
            document.querySelectorAll('#barangTable .btnSelectBarang').forEach((btn) => {
                const id = String($(btn).data('id'));
                const isDuplicate = selectedIds.has(id);
                btn.disabled = isDuplicate;
                btn.textContent = isDuplicate ? 'Select' : 'Select';
                btn.classList.toggle('btn-secondary', isDuplicate);
                btn.classList.toggle('bg-primary', !isDuplicate);
                btn.classList.toggle('text-light', !isDuplicate);
            });
        }

        function buildRow(index) {
            return `
        <tr class="item-row" data-row="${index}">
          <td class="td-action">
            <button type="button" class="btn btn-danger mb-0 btnDeleteRow" title="Hapus">
              <i class="fas fa-times"></i>
            </button>
          </td>
          <td class="td-item-name">
            <input type="hidden" name="item_id[]" class="item-id" value="">
            <input type="hidden" name="item_name[]" class="item-name-hidden" value="">
            <input type="hidden" name="item_detail[]" class="item-detail-hidden" value="">
            <div class="input-group flex-nowrap w-100 mb-0">
                <input type="text" class="form-control item-name" placeholder="Ketik Barang atau Pilih Barang ..." value=""
                required onfocus="focused(this)" onfocusout="defocused(this)"
                oninput="$(this).closest('td').find('.item-name-hidden').val($(this).val()); $(this).closest('td').find('.item-id').val('');">
                <span class="input-group-text bg-primary text-light btnOpenBarangModal"
                style="border-color:#d2d6da; border-left:3px solid #d2d6da; cursor:pointer;">
                <i class="fas fa-search" aria-hidden="true"></i>
                </span>
            </div>
            <div class="text-danger text-xs mt-1 item-error d-none"></div>
            </td>
          <td>
            <input type="hidden" name="penerima[]" class="penerima-hidden" value="${defaultPenerimaHidden}">
            <div class="input-group flex-nowrap w-100 mb-0">
                <input type="text" class="form-control penerima-display" placeholder="Pilih Penerima..."
                    value="${defaultPenerimaDisplay}" readonly onfocus="focused(this)" onfocusout="defocused(this)">
                <span class="input-group-text bg-primary text-light btnOpenPenerimaModal"
                    style="border-color:#d2d6da; border-left:3px solid #d2d6da; cursor:pointer;">
                <i class="fas fa-search" aria-hidden="true"></i>
                </span>
            </div>
            </td>
          <td><input type="number" min="1" name="jumlah[]" class="form-control" value="1"></td>
          <td><input type="text" name="uom[]" class="form-control item-uom" value="" readonly></td>
          <td><input type="text" name="keterangan_item[]" class="form-control" value="" placeholder="Keterangan"></td>
        </tr>
    `;
        }

        $(document).ready(function() {
            if ($.fn.DataTable.isDataTable('#barangTable')) {
                $('#barangTable').DataTable().destroy();
            }
            $('#barangTable').DataTable({
                pageLength: 10,
                order: [],
                columnDefs: [{
                    orderable: false,
                    targets: [0]
                }],
                language: {
                    lengthMenu: "Tampilkan _MENU_ baris",
                    search: "Cari :",
                    info: "Data _START_ - _END_ dari _TOTAL_",
                    paginate: {
                        previous: "Previous",
                        next: "Next"
                    },
                    zeroRecords: "Data tidak ditemukan",
                    emptyTable: "Tidak ada data"
                }
            });

            updateDeleteButtons();

            $('#btnAddRow').on('click', function() {
                const tbody = document.getElementById('itemsTbody');
                const idx = tbody.querySelectorAll('tr.item-row').length;
                tbody.insertAdjacentHTML('beforeend', buildRow(idx));
                updateDeleteButtons();
            });

            $(document).on('click', '.btnOpenBarangModal', function() {
                activeRowEl = $(this).closest('tr.item-row');
                refreshModalButtons();
                const modal = new bootstrap.Modal(document.getElementById('barangModal'));
                modal.show();
            });

            $('#barangTable').on('draw.dt', function() {
                if (activeRowEl) refreshModalButtons();
            });

            $(document).on('click', '.btnSelectBarang', function() {
                if (!activeRowEl || $(this).prop('disabled')) return;

                const id = $(this).data('id');
                const name = $(this).data('name');
                const detail = $(this).data('detail');
                const uom = $(this).data('uom');

                activeRowEl.find('.item-id').val(id);
                activeRowEl.find('.item-name').val(name);
                activeRowEl.find('.item-name-hidden').val(name);
                activeRowEl.find('.item-detail-hidden').val(detail);
                activeRowEl.find('.item-uom').val(uom);

                bootstrap.Modal.getInstance(document.getElementById('barangModal')).hide();
            });

            $(document).on('click', '.btnDeleteRow', function() {
                const rows = document.querySelectorAll('#itemsTbody tr.item-row');
                if (rows.length <= 1) {
                    updateDeleteButtons();
                    return;
                }
                $(this).closest('tr').remove();
                updateDeleteButtons();
            });
        });

        function confirmUpdate(event) {
            event.preventDefault();
            Swal.fire({
                title: 'Konfirmasi',
                text: 'Apakah Anda yakin ingin mengupdate data permintaan barang ini?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, Update',
                cancelButtonText: 'Batal',
                confirmButtonColor: '#028284'
            }).then((result) => {
                if (result.isConfirmed) {
                    document.getElementById('{{ $dmenu }}-form').submit();
                }
            });
        }
        let activePenerimaRowEl = null;
        let penerimaModalInstance = null;
        let penerimaCache = null;

        function loadPenerima(q) {
            const tbody = document.getElementById('penerimaModalList');
            const lower = (q || '').toLowerCase().trim();

            if (penerimaCache !== null) {
                renderPenerimaList(penerimaCache, lower);
                return;
            }

            tbody.innerHTML =
                '<tr><td colspan="3" class="text-center text-muted py-3"><i class="fas fa-spinner fa-spin me-1"></i> Memuat...</td></tr>';

            $.ajax({
                url: '{{ url('trptbr/get-penerima') }}',
                success: function(data) {
                    penerimaCache = data;
                    renderPenerimaList(data, lower);
                },
                error: function() {
                    tbody.innerHTML =
                        '<tr><td colspan="3" class="text-center text-danger py-3">Gagal memuat data penerima</td></tr>';
                }
            });
        }

        function renderPenerimaList(data, q) {
            const tbody    = document.getElementById('penerimaModalList');
            const filtered = q ? data.filter(p => p.nama.toLowerCase().includes(q)) : data;

            if (filtered.length === 0) {
                tbody.innerHTML = '<tr><td colspan="3" class="text-center text-muted py-3">Penerima tidak ditemukan</td></tr>';
                return;
            }

            tbody.innerHTML = filtered.map(p =>
                `<tr class="picker-list-item">
                    <td><button type="button" class="btn btn-sm bg-primary text-light fw-bold btn-select-penerima mb-0"
                        data-nik="${p.nik}"
                        data-nama="${p.nama}">Pilih</button></td>
                    <td>${p.nama}</td>
                    <td class="text-muted">${p.nama_departemen ?? '-'}</td>
                </tr>`
            ).join('');
        }

        $(document).on('click', '.btn-select-penerima', function() {
            if (!activePenerimaRowEl) return;
            const nik  = $(this).data('nik');
            const nama = $(this).data('nama');

            activePenerimaRowEl.find('.penerima-display').val(nama); 
            activePenerimaRowEl.find('.penerima-hidden').val(nik);  
            penerimaModalInstance.hide();
        });

        $(document).on('click', '.btnOpenPenerimaModal', function() {
            activePenerimaRowEl = $(this).closest('tr.item-row');
            if (!penerimaModalInstance) {
                penerimaModalInstance = new bootstrap.Modal(document.getElementById('penerimaModal'));
            }
            document.getElementById('searchPenerimaModal').value = '';
            loadPenerima('');
            penerimaModalInstance.show();
        });

        document.getElementById('searchPenerimaModal').addEventListener('input', function() {
            loadPenerima(this.value);
        });

    </script>
@endpush