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

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

    <div class="card shadow-lg mx-4 mt-3">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        <a href="{{ url($url_menu) }}" class="btn btn-secondary mb-0">
                            <i class="fas fa-circle-left me-1"></i>
                            <span class="font-weight-bold">Kembali</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid py-4">

        <form action="{{ url($url_menu) }}" method="POST" id="formPrapr" enctype="multipart/form-data">
            @csrf

            <div class="row">
                <div class="col-12">
                    {{-- Alert Error --}}
                    @if (session('error'))
                        <div class="alert alert-danger alert-dismissible fade show text-white" role="alert">
                            <span class="alert-icon"><i class="fas fa-exclamation-triangle"></i></span>
                            <span class="alert-text"><strong>Error!</strong> {{ session('error') }}</span>
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endif

                    @if ($errors->any())
                        <div class="alert alert-danger text-white mb-4">
                            <ul class="mb-0">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    {{-- MAIN CARD --}}
                    <div class="card shadow-lg border-0">
                        {{-- Card Header --}}
                        <div class="card-header bg-white pb-0 pt-4 border-bottom">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <div>
                                    <h5 class="font-weight-bolder mb-0 text-dark">{{ $title_menu }}</h5>
                                    <p class="text-sm text-secondary mb-0">Isi formulir di bawah ini untuk membuat
                                        permintaan baru.</p>
                                </div>
                            </div>
                        </div>

                        <div class="card-body">
                            {{-- SECTION 1: HEADER INFO --}}
                            <div class="bg-gray-100 border-radius-lg p-4 mb-4">
                                <h6 class="text-uppercase text-secondary text-xs font-weight-bolder mb-3">Informasi Dasar
                                </h6>
                                <div class="row g-3">
                                    <div class="col-md-4">
                                        <label class="form-label">No PRA PR <span class="text-danger">*</span></label>
                                        <div class="input-group">
                                            <span class="input-group-text"><i class="fas fa-hashtag"></i></span>
                                            {{-- Tambahkan readonly, bg-light, dan placeholder --}}
                                            <input type="text" name="no_prapr"
                                                class="form-control fw-bold text-dark px-2 bg-light"
                                                value="{{ old('no_prapr', $no_prapr ?? '') }}" placeholder="[Auto Generate]"
                                                readonly>
                                        </div>
                                        {{-- Tambahkan keterangan di bawah input --}}
                                        <small class="text-muted fst-italic mt-1 d-block" style="font-size: 11px;">
                                            <i class="fas fa-info-circle me-1"></i> Nomor di-generate secara otomatis
                                        </small>
                                    </div>

                                    <div class="col-md-4">
                                        <label class="form-label">Departemen Peminta <span
                                                class="text-danger">*</span></label>
                                        <div class="input-group">
                                            <span class="input-group-text"><i class="fas fa-building"></i></span>
                                            {{-- Tambahkan bg-light agar terlihat konsisten sebagai field terkunci --}}
                                            <input type="text" class="form-control px-2 bg-light" name="nama_departemen"
                                                value="{{ $departemen->nama_departemen ?? 'Belum Terdaftar' }}" readonly>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">Tanggal Pengajuan <span
                                                class="text-danger">*</span></label>
                                        <div class="input-group">
                                            <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
                                            <input type="date" name="tanggal_pengajuan" class="form-control px-2"
                                                value="{{ old('tanggal_pengajuan', date('Y-m-d')) }}" required>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {{-- SECTION 2: DETAIL ITEMS --}}
                            <div class="mb-4">
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <h6 class="text-uppercase text-secondary text-xs font-weight-bolder mb-0">Rincian Barang
                                        & Material</h6>
                                    <button type="button" id="add-item"
                                        class="btn btn-icon btn-3 btn-primary btn-sm mb-0">
                                        <span class="btn-inner--icon"><i class="fas fa-plus"></i></span>
                                        <span class="btn-inner--text">Tambah Item</span>
                                    </button>
                                </div>

                                <div id="items-container">
                                    {{-- Item Row Template (Default Item 1) --}}
                                    <div class="item-row card border shadow-xs mb-3">
                                        <div class="card-body p-3">
                                            <div class="row g-3 align-items-start">
                                                {{-- Kolom Kiri: Input Utama --}}
                                                <div class="col-lg-11">
                                                    <div class="row g-3">
                                                        <div class="col-md-2">
                                                            <label class="form-label text-xs font-weight-bold mb-1">Jenis
                                                                Referensi <span class="text-danger">*</span></label>
                                                            <select name="items[0][jenis_referensi]"
                                                                class="form-control form-select jenis-referensi-select" required>
                                                                <option value="order" selected>Order</option>
                                                                <option value="aset">Aset</option>
                                                            </select>
                                                        </div>
                                                        <div class="col-md-3 ref-no-order">
                                                            <label class="form-label text-xs font-weight-bold mb-1">No
                                                                Order</label>
                                                            <input type="text" name="items[0][no_order]"
                                                                class="form-control input-no-order"
                                                                placeholder="Contoh: ORD-001">
                                                        </div>
                                                        <div class="col-md-3 ref-no-aset" style="display:none;">
                                                            <label class="form-label text-xs font-weight-bold mb-1">No
                                                                Aset</label>
                                                            <input type="text" name="items[0][no_aset]"
                                                                class="form-control input-no-aset" placeholder="Contoh: AST-099">
                                                        </div>
                                                        <div class="col-md-7">
                                                            <label
                                                                class="form-label text-xs font-weight-bold mb-1">Deskripsi</label>
                                                            <input type="text" name="items[0][deskripsi]"
                                                                class="form-control input-deskripsi"
                                                                placeholder="Warna, Ukuran, Merk, dll (Opsional)">
                                                        </div>
                                                        <div class="col-md-4">
                                                            <label class="form-label text-xs font-weight-bold mb-1">Nama
                                                                Barang <span class="text-danger">*</span></label>
                                                            <input type="text" name="items[0][nama_barang]"
                                                                class="form-control"
                                                                placeholder="Contoh: Laptop Dell Latitude" required>
                                                        </div>
                                                        <div class="col-md-2 col-6">
                                                            <label class="form-label text-xs font-weight-bold mb-1">Qty
                                                                <span class="text-danger">*</span></label>
                                                            <input type="number" name="items[0][qty]"
                                                                class="form-control qty-input" min="1"
                                                                placeholder="0" inputmode="numeric" required>
                                                        </div>
                                                        <div class="col-md-2 col-6">
                                                            <label class="form-label text-xs font-weight-bold mb-1">Satuan
                                                                <span class="text-danger">*</span></label>
                                                            <select name="items[0][id_satuan]"
                                                                class="form-control form-select custom-select satuan-select"
                                                                data-width="100%" required>
                                                                <option value="" disabled selected>Pilih Satuan
                                                                </option>
                                                                @foreach ($satuans as $satuan)
                                                                    <option value="{{ $satuan->id }}">
                                                                        {{ $satuan->nama }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                        <div class="col-md-4">
                                                            <label class="form-label text-xs font-weight-bold mb-1">Tgl
                                                                Dibutuhkan <span class="text-danger">*</span></label>
                                                            <input type="date" name="items[0][tanggal_dibutuhkan]"
                                                                class="form-control"
                                                                value="{{ old('items.0.tanggal_dibutuhkan') }}" required>
                                                        </div>

                                                        {{-- Baris Kedua --}}
                                                        <div class="col-md-12">
                                                            <label
                                                                class="form-label text-xs font-weight-bold mb-1">Lampiran
                                                                File <span class="text-muted text-xxs fw-normal">(Opsional,
                                                                    Maks 3 MB. Format: JPG, PNG, PDF, DOC/X,
                                                                    XLS/X)</span></label>
                                                            <input type="file" name="items[0][lampiran][]"
                                                                class="form-control" multiple
                                                                accept=".pdf,.doc,.docx,.jpg,.jpeg,.png,.xls,.xlsx">
                                                        </div>
                                                    </div>
                                                </div>

                                                {{-- Kolom Kanan: Tombol Aksi --}}
                                                <div
                                                    class="col-lg-1 text-end d-flex flex-column align-items-center justify-content-center h-100 pt-md-4 gap-2">
                                                    <button type="button"
                                                        class="btn btn-link text-primary text-gradient px-3 mb-0 duplicate-ref-item"
                                                        title="Duplikasi Referensi (No Order & Deskripsi Saja)">
                                                        <i class="fas fa-copy fa-lg"></i>
                                                    </button>
                                                    <button type="button"
                                                        class="btn btn-link text-danger text-gradient px-3 mb-0 remove-item"
                                                        style="display:none;" title="Hapus Baris Ini">
                                                        <i class="far fa-trash-alt fa-lg"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                {{-- Empty State / Helper Text --}}
                                <p class="text-xs text-muted fst-italic mt-2 ms-1">
                                    <i class="fas fa-info-circle me-1"></i> Klik tombol "Tambah Item" di atas untuk
                                    menambahkan lebih banyak barang.
                                </p>
                            </div>

                            <hr class="horizontal dark my-4">

                            {{-- SECTION 3: ACTION BUTTONS --}}
                            <div class="d-flex justify-content-end align-items-center gap-2">
                                <button type="submit" name="submit_type" value="draft"
                                    class="btn btn-outline-warning mb-0" id="btn-simpan-draft">
                                    <i class="fas fa-save me-1"></i> Simpan Draft
                                </button>
                                <button type="submit" name="submit_type" value="post"
                                    class="btn bg-gradient-primary mb-0" id="btn-posting-now">
                                    <i class="fas fa-paper-plane me-1"></i> Posting Sekarang
                                </button>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@push('js')
    <script>
        @if(session('success'))
            Swal.fire({
                icon: 'success',
                title: 'Berhasil!',
                text: "{{ session('success') }}",
                timer: 3000,
                showConfirmButton: false
            });
        @endif

        @if(session('error'))
            Swal.fire({
                icon: 'error',
                title: 'Gagal!',
                text: "{{ session('error') }}",
                confirmButtonColor: '#dc3545'
            });
        @endif

        let itemIndex = 1;

        // Fungsi Tambah Item
        $('#add-item').click(function() {
            const newItem = `
            <div class="item-row card border shadow-xs mb-3 slide-in-right">
                <div class="card-body p-3">
                    <div class="row g-3 align-items-start">
                        <div class="col-lg-11">
                            <div class="row g-3">
                                <div class="col-md-2">
                                    <label class="form-label text-xs font-weight-bold mb-1">Jenis Referensi <span class="text-danger">*</span></label>
                                    <select name="items[${itemIndex}][jenis_referensi]" class="form-control form-select jenis-referensi-select" required>
                                        <option value="order" selected>Order</option>
                                        <option value="aset">Aset</option>
                                    </select>
                                </div>
                                <div class="col-md-3 ref-no-order">
                                    <label class="form-label text-xs font-weight-bold mb-1">No Order</label>
                                    <input type="text" name="items[${itemIndex}][no_order]" class="form-control input-no-order" placeholder="Contoh: ORD-001">
                                </div>
                                <div class="col-md-3 ref-no-aset" style="display:none;">
                                    <label class="form-label text-xs font-weight-bold mb-1">No Aset</label>
                                    <input type="text" name="items[${itemIndex}][no_aset]" class="form-control input-no-aset" placeholder="Contoh: AST-099">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label text-xs font-weight-bold mb-1">Deskripsi</label>
                                    <input type="text" name="items[${itemIndex}][deskripsi]" class="form-control input-deskripsi" placeholder="Deskripsi tambahan (Opsional)">
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label text-xs font-weight-bold mb-1">Nama Barang <span class="text-danger">*</span></label>
                                    <input type="text" name="items[${itemIndex}][nama_barang]" class="form-control" placeholder="Contoh: Barang X" required>
                                </div>
                                <div class="col-md-2 col-6">
                                    <label class="form-label text-xs font-weight-bold mb-1">Qty <span class="text-danger">*</span></label>
                                    <input type="number" name="items[${itemIndex}][qty]" class="form-control qty-input" min="1" placeholder="0" inputmode="numeric" required>
                                </div>
                                <div class="col-md-2 col-6">
                                    <label class="form-label text-xs font-weight-bold mb-1">Satuan <span class="text-danger">*</span></label>
                                    <select name="items[${itemIndex}][id_satuan]" class="form-control form-select custom-select satuan-select" data-width="100%" required>
                                        <option value="" disabled selected>Pilih Satuan</option>
                                        @foreach ($satuans as $satuan)
                                            <option value="{{ $satuan->id }}">{{ $satuan->nama }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-4">
                                    <label class="form-label text-xs font-weight-bold mb-1">Tgl Dibutuhkan <span class="text-danger">*</span></label>
                                    <input type="date" name="items[${itemIndex}][tanggal_dibutuhkan]" class="form-control" required>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label text-xs font-weight-bold mb-1">Lampiran File <span class="text-muted text-xxs fw-normal">(Opsional, Maks 3 MB. Format: JPG, PNG, PDF, DOC/X, XLS/X)</span></label>
                                    <input type="file" name="items[${itemIndex}][lampiran][]" class="form-control" multiple accept=".pdf,.doc,.docx,.jpg,.jpeg,.png,.xls,.xlsx">
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-1 text-end d-flex flex-column align-items-center justify-content-center h-100 pt-md-4 gap-2">
                            <button type="button" class="btn btn-link text-primary text-gradient px-3 mb-0 duplicate-ref-item" title="Duplikasi Referensi (No Order & Deskripsi Saja)">
                                <i class="fas fa-copy fa-lg"></i>
                            </button>
                            <button type="button" class="btn btn-link text-danger text-gradient px-3 mb-0 remove-item" title="Hapus Baris Ini">
                                <i class="far fa-trash-alt fa-lg"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>`;

            $('#items-container').append(newItem);
            itemIndex++;
            // Inisialisasi Select2 untuk dropdown satuan yang baru ditambahkan
            $('#items-container .satuan-select').last().select2();
            updateRemoveButtons();
        });

        // Fungsi Duplikasi Item


        // Fungsi Duplikasi Referensi Item (No Order & Deskripsi Saja)
        $(document).on('click', '.duplicate-ref-item', function() {
            const currentRow = $(this).closest('.item-row');

            // Ambil nilai dari baris saat ini
            const jenisRef = currentRow.find('.jenis-referensi-select').val();
            const noOrder = currentRow.find('.input-no-order').val();
            const noAset = currentRow.find('input[name$="[no_aset]"]').val();
            const deskripsi = currentRow.find('.input-deskripsi').val();

            // Tambahkan baris kosong baru
            $('#add-item').click();

            // Pilih baris yang baru saja ditambahkan (baris terakhir)
            const newRow = $('.item-row').last();

            // Isi nilai-nilai ke baris baru
            newRow.find('.jenis-referensi-select').val(jenisRef).trigger('change');
            if (jenisRef === 'order') {
                newRow.find('.input-no-order').val(noOrder);
            } else {
                newRow.find('input[name$="[no_aset]"]').val(noAset);
            }
            newRow.find('.input-deskripsi').val(deskripsi);

            Swal.fire({
                toast: true,
                position: 'top-end',
                icon: 'success',
                title: 'Referensi (No Order & Deskripsi) diduplikasi',
                showConfirmButton: false,
                timer: 1500
            });
        });

        // Fungsi Hapus Item
        $(document).on('click', '.remove-item', function() {
            $(this).closest('.item-row').fadeOut(300, function() {
                $(this).remove();
                updateRemoveButtons();
            });
        });

        // Update Visibility Tombol Hapus
        function updateRemoveButtons() {
            if ($('.item-row').length > 1) {
                $('.remove-item').show();
            } else {
                $('.remove-item').hide();
            }
        }

        // Batasi input Qty hanya angka (0-9)
        $(document).on('input', '.qty-input', function() {
            this.value = this.value.replace(/[^0-9]/g, '');
        });

        // Toggle tampilan No Order / No Aset berdasarkan Jenis Referensi
        function toggleReferensiFields(selectEl) {
            const row = $(selectEl).closest('.item-row');
            const val = $(selectEl).val();
            if (val === 'aset') {
                row.find('.ref-no-order').hide().find('input').val('');
                row.find('.ref-no-aset').show();
            } else {
                row.find('.ref-no-aset').hide().find('input').val('');
                row.find('.ref-no-order').show();
            }
        }

        // Delegated event untuk semua select jenis referensi (termasuk item dinamis)
        $(document).on('change', '.jenis-referensi-select', function() {
            toggleReferensiFields(this);
        });

        // Inisialisasi Select2 untuk dropdown satuan awal
        $(document).ready(function() {
            $('.satuan-select').select2();

            // Inisialisasi toggle untuk item yang sudah ada saat halaman dimuat
            $('.jenis-referensi-select').each(function() {
                toggleReferensiFields(this);
            });

            $(document).on('input', '.input-no-order, .input-no-aset', function() {
                let inputField = $(this);
                let noOrder = inputField.val().trim();

                // Cari kolom deskripsi yang berada SEJAJAR (di dalam satu blok row) dengan input no_order ini
                let deskripsiField = inputField.closest('.row').find('.input-deskripsi');
                clearTimeout(inputField.data('debounceTimer'));

                if (noOrder !== '') {
                    // Tampilkan pesan loading visual untuk UX
                    deskripsiField.val('Mencari data ke SAP...');

                    let timer = setTimeout(function() {
                        $.ajax({
                            url: '{{ route('ajax.sap.order') }}',
                            type: 'GET',
                            data: {
                                no_order: noOrder
                            },
                            success: function(response) {
                                if (response.status === 'success' && response.data) {
                                    let deskripsiText = "";

                                    if (response.data.ET_ZVNOORDER && Array.isArray(response.data
                                            .ET_ZVNOORDER) && response.data.ET_ZVNOORDER.length >
                                        0) {
                                        deskripsiText = response.data.ET_ZVNOORDER[0]
                                            .KTEXT; // Struktur spesifik SAP
                                    } else if (Array.isArray(response.data) && response.data
                                        .length > 0) {
                                        deskripsiText = response.data[0]
                                            .KTEXT; // Jika bentuknya Array
                                    } else if (response.data.KTEXT) {
                                        deskripsiText = response.data
                                            .KTEXT; // Jika bentuknya Object langsung
                                    }

                                    // Masukkan data ke kolom
                                    if (deskripsiText) {
                                        deskripsiField.val(deskripsiText);
                                    } else {
                                        deskripsiField.val(
                                            '');
                                    }
                                } else {
                                    deskripsiField.val('Format data SAP tidak sesuai');
                                }
                            },
                            error: function(xhr) {
                                console.error("AJAX Error:", xhr);
                                deskripsiField.val('Error: Gagal terhubung ke server');
                            }
                        });
                    }, 500);
                    inputField.data('debounceTimer', timer);
                } else {
                    // Jika No Order dihapus sampai kosong, kosongkan juga deskripsinya
                    deskripsiField.val('');
                }
            });
        });

        // $('#btn-simpan-draft').on('click', function(e) {
        //     e.preventDefault();

        //     const form = $('#formPrapr');

        //     if (typeof Swal === 'undefined') {
        //         const ok = confirm('Simpan permintaan ini sebagai draft?');
        //         if (!ok) return;
        //         form.append('<input type="hidden" name="submit_type" value="draft">');
        //         form.submit();
        //         return;
        //     }

        //     Swal.fire({
        //         title: 'Simpan sebagai Draft?',
        //         text: 'Data akan disimpan dan belum diajukan ke tahapan selanjutnya.',
        //         icon: 'question',
        //         showCancelButton: true,
        //         confirmButtonText: 'Ya, Simpan',
        //         cancelButtonText: 'Batal',
        //         reverseButtons: true,
        //     }).then((result) => {
        //         if (!result.isConfirmed) return;

        //         Swal.fire({
        //             title: 'Menyimpan...',
        //             text: 'Mohon tunggu sebentar',
        //             allowOutsideClick: false,
        //             didOpen: () => Swal.showLoading()
        //         });

        //         form.append('<input type="hidden" name="submit_type" value="draft">');
        //         form.submit();
        //     });
        // });

        // Konfirmasi SweetAlert untuk tombol Posting Sekarang
        $('#btn-posting-now').on('click', function(e) {
            e.preventDefault();

            const form = $('#formPrapr');

            if (typeof Swal === 'undefined') {
                const ok = confirm(
                    'Apakah Anda yakin ingin memposting permintaan ini? Data tidak dapat diubah setelah diposting.'
                );
                if (!ok) return;
                form.append('<input type="hidden" name="submit_type" value="post">');
                form.submit();
                return;
            }

            Swal.fire({
                title: 'Posting permintaan?',
                text: 'Data tidak dapat diubah setelah diposting.',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Ya, Posting',
                cancelButtonText: 'Batal',
                reverseButtons: true,
            }).then((result) => {
                if (!result.isConfirmed) return;

                Swal.fire({
                    title: 'Memproses...',
                    text: 'Mohon tunggu sebentar',
                    allowOutsideClick: false,
                    didOpen: () => Swal.showLoading()
                });

                form.append('<input type="hidden" name="submit_type" value="post">');
                form.submit();
            });
        });
    </script>

    <style>
        /* Animasi Slide Masuk untuk Item Baru */
        .slide-in-right {
            animation: slideIn 0.3s ease-out forwards;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Style Input Form agar lebih modern */
        .form-control {
            border: 1px solid #e2e5e8;
            padding: 0.5rem 0.75rem;
        }

        .form-control:focus {
            border-color: #5e72e4;
            box-shadow: 0 0 0 2px rgba(94, 114, 228, 0.1);
        }

        .input-group-text {
            border: 1px solid #e2e5e8;
            background-color: #f8f9fa;
        }
    </style>
@endpush