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

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

    <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 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>
                        <button type="button" class="btn btn-primary mb-0" onclick="submitForm()" id="btn-simpan">
                            <i class="fas fa-floppy-disk me-1"></i>
                            <span class="font-weight-bold">Simpan</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    @include('components.alert')
                    <div class="card-body">
                        <p class="text-uppercase text-sm">Edit {{ $title_menu }}</p>
                        <hr class="horizontal dark mt-0">
                        <form id="my-form" action="{{ route('formpp.update', $header->idtrans) }}" method="POST">
                            @csrf
                            @method('PUT')

                            <!-- Header -->
                            <div class="mb-3">
                                <label for="id" class="form-label">ID</label>
                                <input type="text" class="form-control" id="id" name="idtrans"
                                    value="{{ $header->idtrans }}" readonly>
                            </div>
                            <div class="mb-3">
                                <label for="department" class="form-label">Department</label>
                                <input type="text" class="form-control" id="department" name="department"
                                    value="{{ $header->department }}" readonly>
                            </div>
                            <div class="mb-3">
                                <label for="date" class="form-label">Tanggal</label>
                                <input type="date" max="{{ date('Y-m-d') }}" class="form-control" id="date"
                                    name="date" value="{{ $header->date }}">
                            </div>

                            <!-- Detail -->
                            <div class="col-md-12">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="row mt-4">
                                            <div class="col-md-auto">
                                                <button type="button" class="btn btn-warning" onclick="addRow()">
                                                    <i class="fa fa-plus me-2"></i>Tambah Barang
                                                </button>
                                            </div>
                                        </div>

                                        <div class="table-responsive mt-3">
                                            <table class="table table-bordered">
                                                <thead>
                                                    <tr style="text-align: center; background-color: #f8f9fa;">
                                                        <th rowspan="2" style="vertical-align: middle;">Aksi</th>
                                                        <th rowspan="2" style="vertical-align: middle;">No</th>
                                                        <th rowspan="2" style="vertical-align: middle;">Type Barang</th>
                                                        <th rowspan="2" style="vertical-align: middle;">Uraian Barang
                                                        </th>
                                                        <th rowspan="2" style="vertical-align: middle;">Jenis / Type /
                                                            Merk / Ukuran</th>
                                                        <th colspan="2">Jumlah</th>
                                                        <th rowspan="2" style="vertical-align: middle;">Keperluan</th>
                                                        <th rowspan="2" style="vertical-align: middle;">Tgl Dibutuhkan
                                                        </th>
                                                        <th colspan="2">Contoh Barang / Sample / Penawaran</th>
                                                        <th rowspan="2" style="vertical-align: middle;">Keterangan</th>
                                                        <th rowspan="2" style="vertical-align: middle;">Urgency</th>
                                                        <th rowspan="2" style="vertical-align: middle;">Status</th>


                                                    </tr>
                                                    <tr style="text-align: center; background-color: #f8f9fa;">
                                                        <th>QTY</th>
                                                        <th>Satuan</th>
                                                        <th>Ada</th>
                                                        <th>Tidak Ada</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="item-list">
                                                    @foreach ($details as $index => $detail)
                                                        <tr>
                                                            <td style="text-align: center;">
                                                                <button type="button" class="btn btn-danger"
                                                                    onclick="removeRow(this)">X</button>
                                                            </td>
                                                            <td style="text-align: center;">{{ $index + 1 }}</td>
                                                            <td>
                                                                <select name="detail[{{ $index }}][type_b]"
                                                                    class="form-select" data-item-id="{{ $detail->item_id ?? '' }}" data-uraian="{{ $detail->uraian ?? '' }}" onchange="onTypeChange(this, {{ $index }})">
                                                                    <option value="">Pilih Type</option>
                                                                    @foreach ($typeBrg as $t)
                                                                        <option value="{{ $t->value }}"
                                                                            {{ $detail->type_barang == $t->value ? 'selected' : '' }}>
                                                                            {{ $t->name }}
                                                                        </option>
                                                                    @endforeach
                                                                </select>
                                                            </td>
                                                            <td id="uraian-container-{{ $index }}">
                                                                <input type="text"
                                                                    name="detail[{{ $index }}][uraian]"
                                                                    class="form-control required-input"
                                                                    value="{{ $detail->uraian }}" required>
                                                                <input type="hidden" name="detail[{{ $index }}][item_id]" value="{{ $detail->item_id ?? '' }}">
                                                            </td>
                                                            <td><input type="text"
                                                                    name="detail[{{ $index }}][type]"
                                                                    class="form-control" value="{{ $detail->type }}"></td>
                                                            <td><input type="number"
                                                                    name="detail[{{ $index }}][quantity]"
                                                                    class="form-control required-input"
                                                                    value="{{ $detail->quantity }}">
                                                            </td>
                                                            <td>
                                                                <select name="detail[{{ $index }}][satuan]"
                                                                    class="form-select">
                                                                    @foreach ($satuan as $value => $name)
                                                                        <option value="{{ $value }}"
                                                                            {{ $detail->satuan == $value ? 'selected' : '' }}>
                                                                            {{ $name }}
                                                                        </option>
                                                                    @endforeach
                                                                </select>
                                                            </td>
                                                            <td><input type="text"
                                                                    name="detail[{{ $index }}][purpose]"
                                                                    class="form-control" value="{{ $detail->purpose }}">
                                                            </td>
                                                            <td><input type="date"
                                                                    name="detail[{{ $index }}][required_date]"
                                                                    class="form-control"
                                                                    value="{{ $detail->required_date }}"></td>
                                                            <td>
                                                                <div class="d-flex justify-content-center">
                                                                    <div class="form-check me-2">
                                                                        <input class="form-check-input" type="radio"
                                                                            name="detail[{{ $index }}][sample_available]"
                                                                            value="1"
                                                                            {{ $detail->sample_available == 1 ? 'checked' : '' }}>
                                                                    </div>
                                                                </div>
                                                            </td>
                                                            <td>
                                                                <div class="d-flex justify-content-center">
                                                                    <div class="form-check">
                                                                        <input class="form-check-input" type="radio"
                                                                            name="detail[{{ $index }}][sample_available]"
                                                                            value="0"
                                                                            {{ $detail->sample_available == 0 ? 'checked' : '' }}>
                                                                    </div>
                                                                </div>
                                                            </td>

                                                            <td>
                                                                <textarea name="detail[{{ $index }}][notes]" class="form-control">{{ $detail->notes }}</textarea>
                                                            </td>
                                                            @php
                                                                $i = $loop->index ?? 0; // index baris
                                                                // urgency disimpan sebagai '0'/'1'
                                                                $urg =
                                                                    old(
                                                                        "detail.$i.urgency",
                                                                        (string) ($detail->urgency ?? '0'),
                                                                    ) === '1';
                                                            @endphp

                                                            <td>
                                                                <div class="d-flex justify-content-center">
                                                                    {{-- default 0 saat tidak dicentang --}}
                                                                    <input type="hidden"
                                                                        name="detail[{{ $index }}][urgency]"
                                                                        value="0">

                                                                    <div class="form-check">
                                                                        <input class="form-check-input" type="checkbox"
                                                                            id="urgency_{{ $index }}"
                                                                            name="detail[{{ $index }}][urgency]"
                                                                            value="1" {{ $urg ? 'checked' : '' }}>
                                                                        <label class="form-check-label ms-1"
                                                                            for="urgency_{{ $index }}">Ya.
                                                                            Urgent</label>
                                                                    </div>
                                                                </div>
                                                            </td>

                                                            <td style="text-align: center">
                                                                @if ($detail->status === 'F')
                                                                    <span class="badge bg-success">Finish</span>
                                                                @elseif ($detail->status === 'C')
                                                                    <span class="badge bg-danger">Cancel</span>
                                                                @elseif ($detail->status === 'P')
                                                                    <span class="badge"
                                                                        style="background-color:  	#FF8C00;">Partial</span>
                                                                @elseif($detail->status === 'E')
                                                                    <span class="badge bg-primary">Entry</span>
                                                                @elseif($detail->status === 'CL')
                                                                    <span class="badge bg-info">Close</span>
                                                                @endif
                                                            </td>
                                                        </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <script>
            function submitForm() {
                const inputs = document.querySelectorAll('.required-input');
                let valid = true;

                // Periksa apakah semua input wajib diisi
                inputs.forEach(input => {
                    if (!input.value.trim()) {
                        valid = false;
                        input.classList.add('is-invalid'); // Tambahkan gaya untuk input yang kosong
                    } else {
                        input.classList.remove('is-invalid'); // Hapus gaya jika input diisi
                    }
                });

                if (!valid) {
                    Swal.fire(
                        'Gagal!',
                        'Harap lengkapi semua isian wajib.',
                        'error'
                    );
                    return;
                }

                Swal.fire({
                    title: 'Apakah Anda yakin?',
                    text: "Data akan disimpan ke dalam sistem.",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Ya, Simpan!',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {
                        // Tampilkan alert sukses setelah validasi berhasil
                        Swal.fire({
                            title: 'Berhasil!',
                            text: 'Data berhasil disimpan.',
                            icon: 'success',
                            timer: 2000,
                            showConfirmButton: false
                        }).then(() => {
                            document.getElementById('my-form').submit(); // Kirim form setelah alert selesai
                        });
                    }
                });
            }

            let itemIndex = {{ count($details) }};
            const satuanOptions = @json($satuan);
            const typeBOptions = @json($typeB);
            const typeBrgOptions = @json($typeBrg);
            const categoryCpu = @json($category_cpu);
            const hardware = @json($hardware);
            const stkStokit = @json($stk_stokit);

            document.addEventListener('DOMContentLoaded', function() {
                const selects = document.querySelectorAll('select[name$="[type_b]"]');
                selects.forEach((select, index) => {
                    const itemId = select.getAttribute('data-item-id') || '';
                    const uraian = select.getAttribute('data-uraian') || '';
                    onTypeChange(select, index, itemId, uraian);
                });
            });

            function addRow() {
                const tableBody = document.getElementById('item-list');
                const newRow = document.createElement('tr');

                newRow.innerHTML = `
                 <td style="text-align: center;"><button type="button" class="btn btn-danger" onclick="removeRow(this)">X</button></td>
                    <td style="text-align: center;">${itemIndex + 1}</td>
                         <td>
                            <select name="detail[${itemIndex}][type_b]" class="form-select" onchange="onTypeChange(this, ${itemIndex})">
                                <option value="">Pilih Type</option>
                                ${typeBrgOptions.map(t => `<option value="${t.value}">${t.name}</option>`).join('')}
                            </select>
                        </td>
                    <td id="uraian-container-${itemIndex}">
                        <input type="text" name="detail[${itemIndex}][uraian]" class="form-control required-input" required>
                        <input type="hidden" name="detail[${itemIndex}][item_id]" value="">
                    </td>
                    <td><input type="text" name="detail[${itemIndex}][type]" class="form-control"></td>
                    <td><input type="number" name="detail[${itemIndex}][quantity]" class="form-control required-input" required value="1" min="1"></td>
                    <td>
                        <select name="detail[${itemIndex}][satuan]" class="form-select">
                            ${Object.entries(satuanOptions)
                                .map(([value, name]) => `<option value="${value}">${name}</option>`)
                                .join('')}
                        </select>
                    </td>
                                <td><input type="text" name="detail[${itemIndex}][purpose]" class="form-control"></td>
                                <td><input type="date" name="detail[${itemIndex}][required_date]" class="form-control"></td>
                    <td>
                        <div class="d-flex justify-content-center">
                            <div class="form-check me-2">
                                <input class="form-check-input" type="radio"
                                    name="detail[${itemIndex}][sample_available]"
                                    id="sampleAvailableYes_0" value="1">
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="d-flex justify-content-center">
                            <div class="form-check">
                                <input class="form-check-input" type="radio"
                                    name="detail[${itemIndex}][sample_available]"
                                    id="sampleAvailableNo_0" value="0" checked>
                            </div>
                        </div>
                    </td>
                    <td><textarea name="detail[${itemIndex}][notes]" class="form-control"></textarea></td>
                   <td>
                        <div class="d-flex justify-content-center">
                            <!-- default 0 saat tidak dicentang -->
                            <input type="hidden" name="detail[${itemIndex}][urgency]"
                                value="0">

                            <div class="form-check">
                                <input class="form-check-input" type="checkbox"
                                    name="detail[${itemIndex}][urgency]" id="urgency_0"
                                    value="1">
                                <label class="form-check-label ms-1"
                                    for="urgency_0">Ya. Urgent</label>
                            </div>
                        </div>
                    </td>
                `;
                tableBody.appendChild(newRow);
                itemIndex++;
            }

            function onTypeChange(selectElem, index, existingItemId = '', existingUraian = '') {
                const container = document.getElementById(`uraian-container-${index}`);
                const selectedText = selectElem.options[selectElem.selectedIndex].text.toLowerCase();
                const namePrefix = `detail[${index}]`;

                let html = '';
                
                if (selectedText.includes('stock') && !selectedText.includes('non')) {
                    html = `
                        <select name="${namePrefix}[item_id]" class="form-select select2-stock" onchange="updateUraianName(this, ${index})" required>
                            <option value="">-- Pilih Stock IT --</option>
                            ${stkStokit.map(item => `<option value="${item.id}" data-name="${item.name}" ${existingItemId == item.id ? 'selected' : ''}>${item.name}</option>`).join('')}
                        </select>
                        <input type="hidden" name="${namePrefix}[uraian]" id="uraian-hidden-${index}" value="${existingUraian}">
                    `;
                } else if (selectedText.includes('asset')) {
                    html = `
                        <select name="${namePrefix}[item_id]" class="form-select select2-asset" onchange="updateUraianName(this, ${index})" required>
                            <option value="">-- Pilih Asset --</option>
                            <optgroup label="Standar">
                                <option value="" data-name="Monitor" ${existingUraian == 'Monitor' ? 'selected' : ''}>Monitor</option>
                                <option value="" data-name="Printer" ${existingUraian == 'Printer' ? 'selected' : ''}>Printer</option>
                                <option value="" data-name="Scanner" ${existingUraian == 'Scanner' ? 'selected' : ''}>Scanner</option>
                                <option value="" data-name="Switch" ${existingUraian == 'Switch' ? 'selected' : ''}>Switch</option>
                            </optgroup>
                            <optgroup label="CPU">
                                ${categoryCpu.map(item => `<option value="" data-name="${item.name}" ${existingUraian == item.name ? 'selected' : ''}>${item.name}</option>`).join('')}
                            </optgroup>
                            <optgroup label="Other Hardware">
                                ${hardware.map(item => `<option value="" data-name="${item.name}" ${existingUraian == item.name ? 'selected' : ''}>${item.name}</option>`).join('')}
                            </optgroup>
                        </select>
                        <input type="hidden" name="${namePrefix}[uraian]" id="uraian-hidden-${index}" value="${existingUraian}">
                    `;
                } else {
                    html = `
                        <input type="text" name="${namePrefix}[uraian]" class="form-control required-input" value="${existingUraian}" required>
                        <input type="hidden" name="${namePrefix}[item_id]" value="${existingItemId}">
                    `;
                }
                
                container.innerHTML = html;
                
                if(window.jQuery && $.fn.select2) {
                    $(`#uraian-container-${index} .select2-stock`).select2({ width: '100%', dropdownAutoWidth: true });
                    $(`#uraian-container-${index} .select2-asset`).select2({ width: '100%', dropdownAutoWidth: true });
                }
            }

            function updateUraianName(selectElem, index) {
                const hiddenInput = document.getElementById(`uraian-hidden-${index}`);
                if(hiddenInput && selectElem.selectedIndex >= 0) {
                    hiddenInput.value = selectElem.options[selectElem.selectedIndex].getAttribute('data-name') || selectElem.options[selectElem.selectedIndex].text;
                }
            }

            function removeRow(button) {
                Swal.fire({
                    title: 'Yakin ingin menghapus?',
                    text: "Data yang dihapus tidak dapat dikembalikan!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Ya, Hapus!',
                    cancelButtonText: 'Batal'
                }).then((result) => {
                    if (result.isConfirmed) {

                        const row = button.closest('tr');
                        row.remove();

                        const rows = document.querySelectorAll("#item-list tr");

                        rows.forEach((row, index) => {
                            // Nomor urut ada di kolom ke-2 (index kolom 1)
                            if (row.cells.length > 1) {
                                row.cells[1].textContent = index + 1;
                            }
                        });

                        itemIndex = rows.length;

                        Swal.fire(
                            'Dihapus!',
                            'Baris berhasil dihapus.',
                            'success'
                        );
                    }
                });
            }
        </script>
    @endsection