@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($peminjaman->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 PEMINJAMAN 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="{{ $peminjaman->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 Pengajuan</label>
                                    <input type="date" class="form-control" name="tanggal_pengajuan"
                                        value="{{ old('tanggal_pengajuan', $peminjaman->tanggal_pengajuan ?? 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 ?? ($peminjaman->status ?? 'entry'))) }}"
                                        readonly>
                                    <input type="hidden" name="status"
                                        value="{{ old('status', $status_default ?? ($peminjaman->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:200px;">Penerima</th>
                                            <th style="min-width:240px;">Keterangan</th>
                                            <th style="width:110px;">Jumlah</th>
                                            <th style="width:110px;">Tanggal Pinjam</th>
                                            <th style="width:110px;">Tanggal Kembali</th>
                                            <th style="width:80px; text-align:center;">Jangka Panjang</th>
                                        </tr>
                                    </thead>

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

                                        @for ($i = 0; $i < $rowCount; $i++)
                                            @php
                                                $dbRow = $dbItems->get($i);
                                                $itemName        = old('item_name.' . $i, $dbRow->nama_barang ?? '');
                                                $penerimaHidden  = old('penerima.' . $i, $dbRow->penerima_nik ?? '');      
                                                $penerimaDisplay = old('penerima_display.' . $i, $dbRow->penerima_nama ?? '');
                                                $jumlah          = old('jumlah.' . $i, $dbRow->qty_diminta ?? 1);
                                                $tanggal_pinjam  = old('tanggal_pinjam.' . $i,
                                                                    ($dbRow && $dbRow->tanggal_pinjam)
                                                                        ? \Carbon\Carbon::parse($dbRow->tanggal_pinjam)->format('Y-m-d')
                                                                        : '');
                                                $tanggal_kembali = old('tanggal_kembali.' . $i,
                                                                    ($dbRow && $dbRow->tanggal_kembali)
                                                                        ? \Carbon\Carbon::parse($dbRow->tanggal_kembali)->format('Y-m-d')
                                                                        : '');
                                                $ketItem         = old('keterangan_item.' . $i, $dbRow->keterangan ?? '');
                                                $isJangkaPanjang = empty($tanggal_kembali); 
                                            @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_name[]" class="item-name-hidden"
                                                        value="{{ old('item_name.' . $i, $dbRow->nama_barang ?? '') }}">

                                                    <div class="input-group mb-0">
                                                        <input type="text" class="form-control item-name"
                                                            value="{{ old('item_name.' . $i, $dbRow->nama_barang ?? '') }}"
                                                            placeholder="Ketik Barang atau Pilih Barang ..."
                                                            onfocus="focused(this)" onfocusout="defocused(this)"
                                                            oninput="$(this).closest('td').find('.item-name-hidden').val($(this).val())"
                                                            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_name.' . $i)
                                                        <div class="text-danger text-xs mt-1">{{ $message }}</div>
                                                    @enderror
                                                </td>

                                                <td>
                                                    <input type="hidden" name="penerima[]" class="penerima-hidden"
                                                        value="{{ $penerimaHidden }}">  {{-- NIK --}}
                                                    <div class="input-group flex-nowrap w-100 mb-0">
                                                        <input type="text" class="form-control penerima-display"
                                                            placeholder="Pilih Penerima..."
                                                            value="{{ $penerimaDisplay }}"  {{-- Nama --}}
                                                            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="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>
                                                <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>
                                                    @if ($is_super_admin ?? false)
                                                        <input type="date" name="tanggal_pinjam[]"
                                                            class="form-control item-tanggal_pinjam"
                                                            value="{{ $tanggal_pinjam }}">
                                                    @else
                                                        <input type="date" name="tanggal_pinjam[]"
                                                            class="form-control item-tanggal_pinjam"
                                                            value="{{ $tanggal_pinjam }}"
                                                            min="{{ date('Y-m-d') }}">
                                                    @endif
                                                    @error('tanggal_pinjam.' . $i)
                                                        <div class="text-danger text-xs mt-1">{{ $message }}</div>
                                                    @enderror
                                                </td>
                                                <td>
                                                    @if ($is_super_admin ?? false)
                                                        <input type="date" name="tanggal_kembali[]"
                                                            class="form-control item-tanggal_kembali"
                                                            value="{{ $tanggal_kembali }}"
                                                            {{ $isJangkaPanjang ? 'readonly style="background:#e9ecef"' : '' }}>
                                                    @else
                                                        <input type="date" name="tanggal_kembali[]"
                                                            class="form-control item-tanggal_kembali"
                                                            value="{{ $tanggal_kembali }}"
                                                            min="{{ date('Y-m-d') }}"
                                                            {{ $isJangkaPanjang ? 'readonly style="background:#e9ecef"' : '' }}>
                                                    @endif
                                                    @error('tanggal_kembali.' . $i)
                                                        <div class="text-danger text-xs mt-1">{{ $message }}</div>
                                                    @enderror
                                                </td>
                                                <td style="text-align:center; vertical-align:middle;">
                                                    <input type="hidden" name="batas_waktu_unknown[{{ $i }}]" value="0">
                                                    <input type="checkbox" name="batas_waktu_unknown[{{ $i }}]"
                                                        class="chk-unknown-date"
                                                        value="1"
                                                        {{ $isJangkaPanjang ? 'checked' : '' }}>
                                                </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-name="{{ $b->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>
    #itemsTable {
        font-size: 12px;
    }

    #itemsTable th {
        font-size: 12px;
        padding: 6px 8px;
    }

    #itemsTable td {
        padding: 6px 8px;
    }

    #itemsTable input {
        font-size: 12px;
        padding: 4px 6px;
        height: 30px;
    }

    #itemsTable .badge {
        font-size: 11px;
        padding: 4px 8px;
    }

    #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;
    }

    .opacity-50 {
        opacity: 0.5;
    }
    .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;
    }
    .picker-list-item .btn-select-item {
        min-width: 70px;
    }
</style>

@push('js')
    <script>
        const isSuperAdmin = {{ isset($is_super_admin) && $is_super_admin ? 'true' : 'false' }};
        const defaultPenerimaHidden = @json($default_penerima_nik ?? '');
        const defaultPenerimaDisplay = @json($default_penerima_nama ?? '');
        let activeRowEl = null;

        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 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>
                <input type="hidden" name="item_name[]" class="item-name-hidden" value="">
                    <div class="input-group mb-0">
                        <input type="text" class="form-control item-name" placeholder="Ketik Barang atau Pilih Barang ..." value=""
                        oninput="$(this).closest('td').find('.item-name-hidden').val($(this).val())"
                        onfocus="focused(this)" onfocusout="defocused(this)" 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>
                </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="text" name="keterangan_item[]" class="form-control" value="" placeholder="Keterangan"></td>
                <td><input type="number" min="1" name="jumlah[]" class="form-control" value="1"></td>
                <td>
                    <input type="date" name="tanggal_pinjam[]" class="form-control item-tanggal_pinjam" value="" ${isSuperAdmin ? '' : `min="${new Date().toISOString().split('T')[0]}"`}>
                </td>
                <td>
                    <input type="date" name="tanggal_kembali[]" class="form-control item-tanggal_kembali" value="" ${isSuperAdmin ? '' : `min="${new Date().toISOString().split('T')[0]}"`}>
                </td>
                <td style="text-align:center; vertical-align:middle;">
                    <input type="hidden" name="batas_waktu_unknown[${index}]" value="0">
                    <input type="checkbox" name="batas_waktu_unknown[${index}]"
                        class="chk-unknown-date"
                        value="1">
                </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');
                const modal = new bootstrap.Modal(document.getElementById('barangModal'));
                
                const selectedItems = new Set();
                $('#itemsTbody tr.item-row').each(function() {
                    const itemName = $(this).find('.item-name-hidden').val();
                    if (itemName) {
                        selectedItems.add(itemName.trim());
                    }
                });
                
                $('#barangTable tbody tr').each(function() {
                    const btnSelectBarang = $(this).find('.btnSelectBarang');
                    const itemName = btnSelectBarang.data('name');
                    
                    if (selectedItems.has(itemName.trim())) {
                        btnSelectBarang.prop('disabled', true).addClass('opacity-50');
                    } else {
                        btnSelectBarang.prop('disabled', false).removeClass('opacity-50');
                    }
                });
                
                modal.show();
            });

            $(document).on('click', '.btnSelectBarang', function() {
                if (!activeRowEl) 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();
                
                const modalEl = document.getElementById('barangModal');
                if (modalEl.classList.contains('show')) {
                    const selectedItems = new Set();
                    $('#itemsTbody tr.item-row').each(function() {
                        const itemName = $(this).find('.item-name-hidden').val();
                        if (itemName) {
                            selectedItems.add(itemName.trim());
                        }
                    });
                    
                    $('#barangTable tbody tr').each(function() {
                        const btnSelectBarang = $(this).find('.btnSelectBarang');
                        const itemName = btnSelectBarang.data('name');
                        
                        if (selectedItems.has(itemName.trim())) {
                            btnSelectBarang.prop('disabled', true).addClass('opacity-50');
                        } else {
                            btnSelectBarang.prop('disabled', false).removeClass('opacity-50');
                        }
                    });
                }
            });
        });
        $(document).on('change', '.chk-unknown-date', function () {
            const td = $(this).closest('tr').find('.item-tanggal_kembali');
            if ($(this).is(':checked')) {
                td.val('').prop('readonly', true).css('background', '#e9ecef');
                td.removeAttr('required');
            } else {
                td.prop('readonly', false).css('background', '');
            }
        });

        function confirmUpdate(event) {
            event.preventDefault();

            Swal.fire({
                title: 'Konfirmasi',
                text: 'Apakah Anda yakin ingin mengupdate data peminjaman 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('trpjbr/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" data-nik="${p.nik}" data-nama="${p.nama}">
                    <td><button type="button" class="btn btn-sm bg-primary text-light fw-bold btn-select-penerima mb-0">Pilih</button></td>
                    <td>${p.nama}</td>
                    <td class="text-muted">${p.nama_departemen ?? '-'}</td>
                </tr>`
            ).join('');
        }

        $(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);
        });

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

            activePenerimaRowEl.find('.penerima-display').val(nama);
            activePenerimaRowEl.find('.penerima-hidden').val(nik);   
            penerimaModalInstance.hide();
        });
    </script>
@endpush