{{-- Modal Tambah Pinjaman --}}
<div class="modal fade" id="modalTambahPinjaman" tabindex="-1" role="dialog" aria-labelledby="modalTambahPinjamanLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
      <div class="modal-content">
        <!-- Header -->
        <div class="modal-header bg-primary text-white">
          <h5 class="modal-title">Pengajuan Pinjaman Koperasi</h5>
          <button type="button" class="close text-white" data-bs-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
  
        <!-- Form -->
        <form id="formTambahPinjaman" enctype="multipart/form-data">
          @csrf
          <div class="modal-body" style="max-height:70vh; overflow-y:auto;">
            <!-- LOGIN ID -->
            <div class="form-group">
                <label class="form-label">Pilih Karyawan</label>
                <select name="login_id" id="login_id" class="form-control" required>
                    <option value="">-- Pilih Karyawan --</option>
                </select>
            </div>

            <div class="row">
                <div class="col-md-4 mb-3">
                    <label class="form-label">Pokok Pinjaman</label>
                    <input type="number" name="pokok_pinjaman" class="form-control" required>
                </div>

                <div class="col-md-4 mb-3">
                    <label class="form-label">Lama Pinjaman (bulan)</label>
                    <input type="number" name="lama_pinjaman" class="form-control" required>
                </div>

                <div class="col-md-4 mb-3">
                    <label class="form-label">Tanggal Pencairan</label>
                    <input type="date" name="tgl_pencairan"
                           value="{{ date('Y-m-d') }}"
                           class="form-control" required>
                </div>
            </div>
            <!-- Pakai Jaminan -->
            <div class="form-group">
              <label>Pakai Jaminan?</label>
              <select id="pakai_jaminan" name="pakai_jaminan" class="form-control" onchange="toggleJaminan()">
                <option value="N">Tidak</option>
                <option value="Y">Ya</option>
              </select>
            </div>
  
            <!-- Input Nama Jaminan -->
            <div class="form-group" id="jaminan_box" style="display:none;">
              <label>Masukkan Jaminan</label>
              <input type="text" class="form-control" id="tambah_pakai_jaminan" name="tambah_pakai_jaminan">
            </div>
            <!-- Upload Gambar Jaminan -->
            <div id="uploadJaminanSection" style="display:none;">
              <label class="fw-bold mt-3 d-block">Upload Gambar Jaminan (4 foto wajib)</label>
              <div class="row">
                <div class="col-md-6 mb-3">
                  <label>BPKB / Surat yang dijaminkan</label>
                  <div class="upload-box">
                    <input type="file" name="foto_jaminan1" id="foto_jaminan1" accept="image/*">
                    <div class="preview-container">
                      <img id="previewJaminan1" class="preview-img">
                      <div id="uploadTextJaminan1" class="upload-text">
                        <i class="fa fa-file-image fa-2x mb-2"></i>
                        <p class="m-0">Upload gambar jaminan 1</p>
                      </div>
                    </div>
                  </div>
                </div>
  
                <div class="col-md-6 mb-3">
                  <label>STNK Depan/Belakang / Denah Rumah</label>
                  <div class="upload-box">
                    <input type="file" name="foto_jaminan2" id="foto_jaminan2" accept="image/*">
                    <div class="preview-container">
                      <img id="previewJaminan2" class="preview-img">
                      <div id="uploadTextJaminan2" class="upload-text">
                        <i class="fa fa-file-image fa-2x mb-2"></i>
                        <p class="m-0">Upload gambar jaminan 2</p>
                      </div>
                    </div>
                  </div>
                </div>
  
                <div class="col-md-6 mb-3">
                  <label>Tampak Depan</label>
                  <div class="upload-box">
                    <input type="file" name="foto_jaminan3" id="foto_jaminan3" accept="image/*">
                    <div class="preview-container">
                      <img id="previewJaminan3" class="preview-img">
                      <div id="uploadTextJaminan3" class="upload-text">
                        <i class="fa fa-file-image fa-2x mb-2"></i>
                        <p class="m-0">Upload gambar jaminan 3</p>
                      </div>
                    </div>
                  </div>
                </div>
  
                <div class="col-md-6 mb-3">
                  <label>Tampak Belakang</label>
                  <div class="upload-box">
                    <input type="file" name="foto_jaminan4" id="foto_jaminan4" accept="image/*">
                    <div class="preview-container">
                      <img id="previewJaminan4" class="preview-img">
                      <div id="uploadTextJaminan4" class="upload-text">
                        <i class="fa fa-file-image fa-2x mb-2"></i>
                        <p class="m-0">Upload gambar jaminan 4</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
  
          <!-- Footer -->
          <div class="modal-footer">
            <button type="button" class="btn btn-outline-secondary px-4" data-bs-dismiss="modal">
              <i class="bi bi-x-circle"></i> Tutup
            </button> 
            <button type="submit" class="btn btn-primary" id="btnKirimPengajuan">Kirim Pengajuan</button>
          </div>
        </form>
      </div>
    </div>
  </div>
  
<script>
    function previewImage(input, previewId, textId) {
    const file = input.files[0];
    const preview = document.getElementById(previewId);
    const text = document.getElementById(textId);
  
        if (file) {
            const reader = new FileReader();
            reader.onload = e => {
            preview.src = e.target.result;
            preview.style.display = 'block';
            text.style.display = 'none';
            };
            reader.readAsDataURL(file);
        } else {
            preview.style.display = 'none';
            text.style.display = 'block';
        }
    }
  
    // === Event Upload Preview ===
    ['Jaminan1', 'Jaminan2', 'Jaminan3', 'Jaminan4'].forEach(id => {
        document.getElementById(`foto_${id.toLowerCase()}`).addEventListener('change', function() {
            previewImage(this, `preview${id}`, `uploadText${id}`);
        });
    });
  
    // === Tampilkan form & preview jaminan ===
    function toggleJaminan() {
        const pakai = document.getElementById("pakai_jaminan").value;
        const jaminanBox = document.getElementById("jaminan_box");
        const uploadSection = document.getElementById("uploadJaminanSection");
  
        if (pakai === "Y") {
            jaminanBox.style.display = "block";
            uploadSection.style.display = "block";
            for (let i = 1; i <= 4; i++) {
            document.getElementById(`foto_jaminan${i}`).setAttribute("required", "required");
            }
        } else {
            jaminanBox.style.display = "none";
            uploadSection.style.display = "none";
            for (let i = 1; i <= 4; i++) {
            document.getElementById(`foto_jaminan${i}`).removeAttribute("required");
            document.getElementById(`previewJaminan${i}`).style.display = "none";
            document.getElementById(`uploadTextJaminan${i}`).style.display = "block";
            }
        }
    }
</script>
  {{-- Previews Jaminan --}}
<script>
    $(document).ready(function () {
    
        // 🔹 Buka Modal
        $('#tambahPinjaman').on('click', function () {
            $('#modalTambahPinjaman').modal('show');
            loadKaryawan();
        });
    
        // 🔹 Load karyawan
        function loadKaryawan() {
            $('#login_id').html('<option>Loading...</option>');
    
            $.get('/o/api/karyawan/data-ttl-karyawan', function (res) {
                let html = '<option value="">-- Pilih Karyawan --</option>';
    
                if (res.success) {
                    $.each(res.data_karyawan, function (i, row) {
                        html += `
                            <option value="${row.login_id}">
                                ${row.nm_panggilan} - ${row.role_level} - ${row.email}
                            </option>
                        `;
                    });
                }
    
                $('#login_id').html(html);
            });
        }
    
        // 🔹 Toggle Jaminan
        $('#pakai_jaminan').on('change', function () {
            if ($(this).val() === 'YA') {
                $('#areaJaminan').removeClass('d-none');
                $('#nama_jaminan').prop('required', true);
                $('.fotoJaminan').prop('required', true);
            } else {
                $('#areaJaminan').addClass('d-none');
                $('#nama_jaminan').prop('required', false);
                $('.fotoJaminan').prop('required', false);
            }
        });
    
        // 🔹 Preview Gambar
        $(document).on('change', '.fotoJaminan', function () {
            const file = this.files[0];
            const preview = $(this).next('.preview');

            if (file) {
                preview
                    .attr('src', URL.createObjectURL(file))
                    .removeClass('d-none');

                // 🛠 pastikan modal tetap scroll normal
                const modalBody = $('#modalTambahPinjaman .modal-body');
                modalBody.scrollTop(modalBody[0].scrollHeight);
            }
        });
    
        // 🔹 Submit Form
        $('#formTambahPinjaman').on('submit', function (e) {
            e.preventDefault();
    
            Swal.fire({
                title: 'Mohon Tunggu...',
                text: 'Data Sedang di Proses...',
                allowOutsideClick: false,
                didOpen: () => Swal.showLoading()
            });
    
            $.ajax({
                url: '/o/opr/koperasi/karyawan/simpan-pinjaman',
                type: 'POST',
                data: new FormData(this),
                processData: false,
                contentType: false,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function (res) {
                    Swal.close();
    
                    Swal.fire({
                        icon: res.success ? 'success' : 'error',
                        title: res.success ? 'Berhasil' : 'Gagal',
                        text: res.message,
                        timer: 2000,
                        showConfirmButton: false
                    });
    
                    if (res.success) {
                        $('#modalTambahPinjaman').modal('hide');
    
                        // Reload semua DataTable
                        $('.dataTable').each(function () {
                            if ($.fn.DataTable.isDataTable(this)) {
                                $(this).DataTable().ajax.reload(null, false);
                            }
                        });
                        loadTtAktifKaryawan(true);
                        loadsaldoAktifKaryawan(true);
                        loadAllMenuBadges();
                    }
                },
                error: function () {
                    Swal.close();
                    Swal.fire('Error', 'Terjadi kesalahan server', 'error');
                }
            });
        });
    
    });
</script>