<?php
// Koneksi ke database
$servername = "localhost";
$username = "root"; // Sesuaikan dengan username database kamu
$password = ""; // Sesuaikan dengan password database kamu
$database = "ayula_store"; // Sesuaikan dengan nama database kamu

$conn = new mysqli($servername, $username, $password, $database);

// Periksa koneksi
if ($conn->connect_error) {
  die("Koneksi gagal: " . $conn->connect_error);
}

// Query untuk mengambil data dari tabel barang
$sql = "SELECT b.id_barang, b.nama_barang, jb.nama_jenis, b.stok, b.harga, b.kode_barang, b.image 
        FROM barang b 
        JOIN jenis_barang jb ON b.id_jenis = jb.id_jenis"; // Join ke tabel jenis_barang

        
// Ambil parameter search jika ada
$search = isset($_GET['search']) ? $_GET['search'] : '';

$sql = "SELECT b.id_barang, b.nama_barang, jb.nama_jenis, b.stok, b.harga, b.kode_barang, b.image 
        FROM barang b 
        JOIN jenis_barang jb ON b.id_jenis = jb.id_jenis";

if (!empty($search)) {
    $sql .= " WHERE b.nama_barang LIKE '%$search%' OR jb.nama_jenis LIKE '%$search%'";
}

$result = $conn->query($sql);
if (isset($_GET['delete_id'])) {
  $id = $_GET['delete_id'];
  $sql = "DELETE FROM barang WHERE id_barang = '$id'";

  if ($conn->query($sql) === TRUE) {
      header("Location: productlist.php?success=1");
      exit();
  } else {
      header("Location: productlist.php?success=0");
      exit();
  }
}

?>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0, user-scalable=0" />
  <meta name="description" content="POS - Bootstrap Admin Template" />
  <meta
    name="keywords"
    content="admin, estimates, bootstrap, business, corporate, creative, invoice, html5, responsive, Projects" />
  <meta name="author" content="Dreamguys - Bootstrap Admin Template" />
  <meta name="robots" content="noindex, nofollow" />
  <title>Dreams Pos admin template</title>

  <link
    rel="shortcut icon"
    type="image/x-icon"
    href="/ayula-store/bootstrap/assets/img/favicon.jpg" />

  <link rel="stylesheet" href="/ayula-store/bootstrap/assets/css/bootstrap.min.css" />

  <link rel="stylesheet" href="/ayula-store/bootstrap/assets/css/animate.css" />

  <link rel="stylesheet" href="/ayula-store/bootstrap/assets/plugins/select2/css/select2.min.css" />

  <link rel="stylesheet" href="/ayula-store/bootstrap/assets/css/dataTables.bootstrap4.min.css" />

  <link
    rel="stylesheet"
    href="/ayula-store/bootstrap/assets/plugins/fontawesome/css/fontawesome.min.css" />
  <link rel="stylesheet" href="/ayula-store/bootstrap/assets/plugins/fontawesome/css/all.min.css" />

  <link rel="stylesheet" href="/ayula-store/bootstrap/assets/css/style.css" />
</head>

<body>
  <div id="global-loader">
    <div class="whirly-loader"></div>
  </div>

  <div class="main-wrapper">
    <div class="header">
      <div class="header-left active">
        <a href="index.html" class="logo">
          <img src="/ayula-store/bootstrap/assets/img/logo.png" alt="" />
        </a>
        <a href="index.html" class="logo-small">
          <img src="/ayula-store/bootstrap/assets/img/logo-small.png" alt="" />
        </a>
        <a id="toggle_btn" href="javascript:void(0);"> </a>
      </div>

      <a id="mobile_btn" class="mobile_btn" href="#sidebar">
        <span class="bar-icon">
          <span></span>
          <span></span>
          <span></span>
        </span>
      </a>

      <ul class="nav user-menu">
    
        <li class="nav-item dropdown has-arrow main-drop">
          <a
            href="javascript:void(0);"
            class="dropdown-toggle nav-link userset"
            data-bs-toggle="dropdown">
            <span class="user-img"><img src="/ayula-store/bootstrap/assets/img/profiles/avator1.jpg" alt="" />
              <span class="status online"></span></span>
          </a>
          <div class="dropdown-menu menu-drop-user">
            <div class="profilename">
              <div class="profileset">
                <span class="user-img"><img src="/ayula-store/bootstrap/assets/img/profiles/avator1.jpg" alt="" />
                  <span class="status online"></span></span>
                <div class="profilesets">
                  <h6>John Doe</h6>
                  <h5>Admin</h5>
                </div>
              </div>
              <hr class="m-0" />
              <a class="dropdown-item" href="profile.html">
                <i class="me-2" data-feather="user"></i> My Profile</a>
              <a class="dropdown-item" href="generalsettings.html"><i class="me-2" data-feather="settings"></i>Settings</a>
              <hr class="m-0" />
              <a class="dropdown-item logout pb-0" href="signin.html"><img
                  src="/ayula-store/bootstrap/assets/img/icons/log-out.svg"
                  class="me-2"
                  alt="img" />Logout</a>
            </div>
          </div>
        </li>
      </ul>

      <div class="dropdown mobile-user-menu">
        <a
          href="javascript:void(0);"
          class="nav-link dropdown-toggle"
          data-bs-toggle="dropdown"
          aria-expanded="false"><i class="fa fa-ellipsis-v"></i></a>
        <div class="dropdown-menu dropdown-menu-right">
          <a class="dropdown-item" href="profile.html">My Profile</a>
          <a class="dropdown-item" href="generalsettings.html">Settings</a>
          <a class="dropdown-item" href="signin.html">Logout</a>
        </div>
      </div>
    </div>

    <div class="sidebar" id="sidebar">
            <div class="sidebar-inner slimscroll">
                <div id="sidebar-menu" class="sidebar-menu">
                    <ul>
                        <li>
                            <a href="/ayula-store/views/reporttt/report.php"><img src="../../bootstrap/assets/img/icons/dashboard.svg" alt="img" /><span>
                                    Dashboard</span>
                            </a>
                        </li>
                        <li class="submenu">
                            <a href="javascript:void(0);"><img src="../../bootstrap/assets/img/icons/product.svg" alt="img" /><span>
                                    Barang</span>
                                <span class="menu-arrow"></span></a>
                            <ul>
                                <li><a href="/ayula-store/views/barang/productlist.php" class="active">Daftar Barang</a></li>
                                <li><a href="/ayula-store/views/barang/addproduct.php">Tambah Barang</a></li>
                                <li><a href="categorylist.html">Daftar Kategori</a></li>
                                <li><a href="addcategory.html">Tambah Kategori</a></li>
                            </ul>
                        </li>
                        <li >
                            <a href="/ayula-store/views/barang/topsis_restock_view.php"><img src="../../bootstrap/assets/img/icons/sales1.svg" alt="img" /><span>
                                    Analisa Barang</span>
                            </a>    
                        </li>
                        
                        <li class="submenu">
                            <a href="javascript:void(0);"><img src="../../bootstrap/assets/img/icons/users1.svg" alt="img" /><span>
                                    Users</span>
                                <span class="menu-arrow"></span></a>
                            <ul>
                                <?php if (isset($userRole) && $userRole == 'admin') { ?>
                                    <li><a href="/ayula-store/views/users/add-user.php">New User </a></li>
                                <?php } ?>
                                <li><a href="/ayula-store/views/users/">Users List</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

    <div class="page-wrapper">
      <div class="content">
        <div class="page-header">
          <div class="page-title">
            <h4>Daftar Barang</h4>
            <h6>Kelola Barang</h6>
          </div>
          <div class="page-btn">
            <a href="addproduct.php" class="btn btn-added"><img
                src="/ayula-store/bootstrap/assets/img/icons/plus.svg"
                alt="img"
                class="me-1" />Tambah Barang</a>
          </div>
        </div>

        <div class="card">
          <div class="card-body">
            <div class="table-top">
              <div class="search-set">
                <div class="search-path">
                  <a class="btn btn-filter" id="filter_search">
                    <img src="/ayula-store/bootstrap/assets/img/icons/filter.svg" alt="img" />
                    <span><img src="/ayula-store/bootstrap/assets/img/icons/closes.svg" alt="img" /></span>
                  </a>
                </div>
                <div class="search-input" disable>
                  
                </div>
              </div>
              <div class="wordset">
                <ul>
                  <li>
                    <button id="bulkTransferBtn" class="btn btn-primary" disabled>
                      <img src="/ayula-store/bootstrap/assets/img/icons/transfer1.svg" alt="transfer" class="me-1" />
                      Pindah ke Kasir
                    </button>
                  </li>
                  <!-- New button for adding to report -->
                  <li>
                    <button id="addToReportBtn" class="btn btn-success" disabled>
                      <img src="/ayula-store/bootstrap/assets/img/icons/excel.svg" alt="report" class="me-1" />
                      Tambah ke Laporan
                    </button>
                  </li>
                  
                </ul>
              </div>
            </div>

            <div class="card mb-0" id="filter_inputs">
              <div class="card-body pb-0">
                <div class="row">
                  <div class="col-lg-12 col-sm-12">
                    <div class="row">
                      <div class="col-lg col-sm-6 col-12">
                        <div class="form-group">
                          <select class="select">
                            <option>Choose Product</option>
                            <option>Macbook pro</option>
                            <option>Orange</option>
                          </select>
                        </div>
                      </div>
                      <div class="col-lg col-sm-6 col-12">
                        <div class="form-group">
                          <select class="select">
                            <option>Choose Category</option>
                            <option>Computers</option>
                            <option>Fruits</option>
                          </select>
                        </div>
                      </div>
                      <div class="col-lg col-sm-6 col-12">
                        <div class="form-group">
                          <select class="select">
                            <option>Choose Sub Category</option>
                            <option>Computer</option>
                          </select>
                        </div>
                      </div>
                      
                      <div class="col-lg col-sm-6 col-12">
                        <div class="form-group">
                          <select class="select">
                            <option>Price</option>
                            <option>150.00</option>
                          </select>
                        </div>
                      </div>
                      <div class="col-lg-1 col-sm-6 col-12">
                        <div class="form-group">
                          <a class="btn btn-filters ms-auto"><img
                              src="/ayula-store/bootstrap/assets/img/icons/search-whites.svg"
                              alt="img" /></a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

           
            <!-- Tabel Data Barang -->
            <div class="table-responsive">
                <table class="table datanew">
                    <thead>
                        <tr>
                            <th>
                                <label class="checkboxs">
                                    <input type="checkbox" id="select-all">
                                    <span class="checkmarks"></span>
                                </label>
                            </th>
                            <th>Kode Barang</th>
                            <th>Nama Barang</th>
                            <th>Jenis</th>
                            
                            <th>Stok</th>
                            <th>Harga</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                    <tbody>

                    <?php
                    if ($result->num_rows > 0) {
                        while ($row = $result->fetch_assoc()) {
                            echo "<tr>
                                    <td>
                                        <label class='checkboxs'>
                                            <input type='checkbox' class='product-checkbox' 
                                                data-id='{$row['id_barang']}' 
                                                data-name='{$row['nama_barang']}' 
                                                data-stock='{$row['stok']}' 
                                                data-kode='{$row['kode_barang']}' 
                                                data-harga='{$row['harga']}' 
                                                data-image='{$row['image']}'>
                                            <span class='checkmarks'></span>
                                        </label>
                                    </td>
                                    <td>{$row['kode_barang']}</td>
                                    <td>{$row['nama_barang']}</td>
                                    <td>{$row['nama_jenis']}</td>
                                    <td>{$row['stok']}</td>
                                    <td>Rp " . number_format($row['harga'], 0, ',', '.') . "</td>
                                    <td>
                                        <a class='me-3' href='product_details.php?id={$row['id_barang']}'>
                                            <img src='/ayula-store/bootstrap/assets/img/icons/eye.svg' alt='Lihat Detail' />
                                        </a>
                                        <a class='me-3' href='editproduct.php?id={$row['id_barang']}'>
                                            <img src='/ayula-store/bootstrap/assets/img/icons/edit.svg' alt='Edit' />
                                        </a>
                                        <a class='me-3' href='javascript:void(0);' onclick='confirmDelete({$row['id_barang']})'>
                                            <img src='/ayula-store/bootstrap/assets/img/icons/delete.svg' alt='Hapus' />
                                        </a>
                                        <a href='javascript:void(0);' onclick='openTransferModal(\"{$row['id_barang']}\", \"{$row['nama_barang']}\", {$row['stok']})'>
                                            <img src='/ayula-store/bootstrap/assets/img/icons/transfer1.svg' alt='Pindah ke Kasir' title='Pindah ke Kasir' />
                                        </a>
                                    </td>
                                </tr>";
                        }
                    } else {
                        echo "<tr><td colspan='8' class='text-center'>Tidak ada data barang</td></tr>";
                    }
                    ?>

                    </tbody>
                </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
 <!-- Transfer Modal (Single Product) -->
 <div class="modal fade" id="transferModal" tabindex="-1" aria-labelledby="transferModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="transferModalLabel">Pindah Barang ke Kasir</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form id="transferForm">
            <input type="hidden" id="transferProductId" name="id_barang">
            <div class="mb-3">
              <label for="productName" class="form-label">Nama Barang</label>
              <input type="text" class="form-control" id="productName" readonly>
            </div>
            <div class="mb-3">
              <label for="availableStock" class="form-label">Stok Tersedia</label>
              <input type="text" class="form-control" id="availableStock" readonly>
            </div>
            <div class="mb-3">
              <label for="transferQuantity" class="form-label">Jumlah Pindah</label>
              <input type="number" class="form-control" id="transferQuantity" name="quantity" min="1" value="1" required>
            </div>
            <div class="alert alert-danger" id="transferError" style="display: none;"></div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
          <button type="button" class="btn btn-primary" id="submitTransfer">Pindahkan</button>
        </div>
      </div>
    </div>
  </div>

  <!-- Bulk Transfer Modal -->
  <div class="modal fade" id="bulkTransferModal" tabindex="-1" aria-labelledby="bulkTransferModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="bulkTransferModalLabel">Pindah Beberapa Barang ke Kasir</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form id="bulkTransferForm">
            <div class="table-responsive">
              <table class="table" id="selectedProductsTable">
                <thead>
                  <tr>
                    <th>ID Barang</th>
                    <th>Nama Barang</th>
                    <th>Stok Tersedia</th>
                    <th>Jumlah Pindah</th>
                  </tr>
                </thead>
                <tbody id="selectedProductsList">
                  <!-- Will be populated dynamically with JavaScript -->
                </tbody>
              </table>
            </div>
            <div class="alert alert-danger" id="bulkTransferError" style="display: none;"></div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
          <button type="button" class="btn btn-primary" id="submitBulkTransfer">Pindahkan Semua</button>
        </div>
      </div>
    </div>
  </div>

 <!-- Report Modal -->
<div class="modal fade" id="reportModal" tabindex="-1" aria-labelledby="reportModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="reportModalLabel">Tambah ke Laporan</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="reportForm" enctype="multipart/form-data">
          <!-- Selected Products -->
          <div class="mb-3">
            <div class="d-flex justify-content-between align-items-center mb-2">
              <h5 class="mb-0">Data Barang</h5>
              <span class="text-muted small">Klik ikon <i class="fas fa-times text-danger"></i> untuk menghapus item</span>
            </div>
            <div class="table-responsive">
              <table class="table table-bordered" id="reportProductsTable">
                <thead class="table-light">
                  <tr>
                    <th width="15%">ID Barang</th>
                    <th width="35%">Nama Barang</th>
                    <th width="20%">Jumlah</th>
                    <th width="20%">Harga</th>
                    <th width="10%">Aksi</th>
                  </tr>
                </thead>
                <tbody id="reportProductsList">
                  <!-- Will be populated dynamically -->
                </tbody>
              </table>
            </div>
          </div>
          
          <!-- Nota/Receipt Image Upload -->
          <div class="mb-3">
            <label for="receiptImage" class="form-label">Upload Gambar Nota</label>
            <input type="file" class="form-control" id="receiptImage" name="receipt_image" accept="image/*" required>
            <small class="text-muted">Upload gambar nota/kwitansi sebagai bukti transaksi untuk semua barang yang dipilih.</small>
          </div>
          
          <div class="alert alert-danger" id="reportError" style="display: none;"></div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
        <button type="button" class="btn btn-primary" id="submitReport">Simpan</button>
      </div>
    </div>
  </div>
</div>

  <script src="/ayula-store/bootstrap/assets/js/jquery-3.6.0.min.js"></script>

  <script src="/ayula-store/bootstrap/assets/js/feather.min.js"></script>

  <script src="/ayula-store/bootstrap/assets/js/jquery.slimscroll.min.js"></script>

  <script src="/ayula-store/bootstrap/assets/js/jquery.dataTables.min.js"></script>
  <script src="/ayula-store/bootstrap/assets/js/dataTables.bootstrap4.min.js"></script>

  <script src="/ayula-store/bootstrap/assets/js/bootstrap.bundle.min.js"></script>

  <script src="/ayula-store/bootstrap/assets/plugins/select2/js/select2.min.js"></script>

  <script src="/ayula-store/bootstrap/assets/plugins/sweetalert/sweetalert2.all.min.js"></script>
  <script src="/ayula-store/bootstrap/assets/plugins/sweetalert/sweetalerts.min.js"></script>

  <script src="/ayula-store/bootstrap/assets/js/script.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  <script>


// Function to confirm product deletion
function confirmDelete(id) {
    Swal.fire({
        title: "Apakah Anda yakin?",
        text: "Data yang dihapus tidak bisa dikembalikan!",
        icon: "warning",
        showCancelButton: true,
        confirmButtonColor: "#d33",
        cancelButtonColor: "#3085d6",
        confirmButtonText: "Ya, hapus!",
        cancelButtonText: "Batal"
    }).then((result) => {
        if (result.isConfirmed) {
            window.location.href = "productlist.php?delete_id=" + id;
        }
    });
}

// Check for success/failure message
const urlParams = new URLSearchParams(window.location.search);
if (urlParams.has('success')) {
    let success = urlParams.get('success');
    if (success == '1') {
        Swal.fire({
            icon: 'success',
            title: 'Berhasil!',
            text: 'Barang berhasil dihapus.',
            showConfirmButton: false,
            timer: 2000
        });
    } else {
        Swal.fire({
            icon: 'error',
            title: 'Gagal!',
            text: 'Barang gagal dihapus.',
            showConfirmButton: true
        });
    }
    // Remove parameter from URL
    window.history.replaceState({}, document.title, window.location.pathname);
}

// Function to open transfer modal for single product
function openTransferModal(id, name, stock) {
    // Set values in the modal
    document.getElementById('transferProductId').value = id;
    document.getElementById('productName').value = name;
    document.getElementById('availableStock').value = stock;
    document.getElementById('transferQuantity').value = 1;
    document.getElementById('transferQuantity').max = stock;
    
    // Hide any previous error messages
    document.getElementById('transferError').style.display = 'none';
    
    // Open the modal
    const transferModal = new bootstrap.Modal(document.getElementById('transferModal'));
    transferModal.show();
}

// Handle select all checkbox
document.getElementById('select-all').addEventListener('change', function() {
    const isChecked = this.checked;
    const checkboxes = document.querySelectorAll('.product-checkbox');
    
    checkboxes.forEach(checkbox => {
        checkbox.checked = isChecked;
    });
    
    // Update bulk buttons state
    updateBulkButtonsState();
});

// Handle individual checkbox changes
document.addEventListener('change', function(e) {
    if (e.target && e.target.classList.contains('product-checkbox')) {
        updateBulkButtonsState();
        
        // Check if "select all" should be checked or unchecked
        const totalCheckboxes = document.querySelectorAll('.product-checkbox').length;
        const checkedCheckboxes = document.querySelectorAll('.product-checkbox:checked').length;
        document.getElementById('select-all').checked = (totalCheckboxes === checkedCheckboxes);
        document.getElementById('select-all').indeterminate = (checkedCheckboxes > 0 && checkedCheckboxes < totalCheckboxes);
    }
});

// Function to update bulk buttons state
function updateBulkButtonsState() {
    const checkedCheckboxes = document.querySelectorAll('.product-checkbox:checked');
    const bulkTransferBtn = document.getElementById('bulkTransferBtn');
    const addToReportBtn = document.getElementById('addToReportBtn');
    
    if (checkedCheckboxes.length > 0) {
        bulkTransferBtn.removeAttribute('disabled');
        addToReportBtn.removeAttribute('disabled');
        
        // Update the button text based on selection count
        if (checkedCheckboxes.length === 1) {
            bulkTransferBtn.innerHTML = `<img src="/ayula-store/bootstrap/assets/img/icons/transfer1.svg" alt="transfer" class="me-1" /> Pindah ke Kasir`;
            addToReportBtn.innerHTML = `<img src="/ayula-store/bootstrap/assets/img/icons/excel.svg" alt="report" class="me-1" /> Tambah ke Laporan`;
        } else {
            bulkTransferBtn.innerHTML = `<img src="/ayula-store/bootstrap/assets/img/icons/transfer1.svg" alt="transfer" class="me-1" /> Pindah ${checkedCheckboxes.length} Barang ke Kasir`;
            addToReportBtn.innerHTML = `<img src="/ayula-store/bootstrap/assets/img/icons/excel.svg" alt="report" class="me-1" /> Tambah ${checkedCheckboxes.length} Barang ke Laporan`;
        }
    } else {
        bulkTransferBtn.setAttribute('disabled', 'disabled');
        addToReportBtn.setAttribute('disabled', 'disabled');
        
        // Reset button text
        bulkTransferBtn.innerHTML = `<img src="/ayula-store/bootstrap/assets/img/icons/transfer1.svg" alt="transfer" class="me-1" /> Pindah ke Kasir`;
        addToReportBtn.innerHTML = `<img src="/ayula-store/bootstrap/assets/img/icons/excel.svg" alt="report" class="me-1" /> Tambah ke Laporan`;
    }
}

// Handle single product transfer form submission
document.getElementById('submitTransfer').addEventListener('click', function() {
    const id_barang = document.getElementById('transferProductId').value;
    const quantity = document.getElementById('transferQuantity').value;
    const availableStock = parseInt(document.getElementById('availableStock').value);
    
    // Validate quantity
    if (quantity <= 0) {
        document.getElementById('transferError').textContent = 'Jumlah harus lebih dari 0';
        document.getElementById('transferError').style.display = 'block';
        return;
    }
    
    if (quantity > availableStock) {
        document.getElementById('transferError').textContent = 'Jumlah melebihi stok tersedia';
        document.getElementById('transferError').style.display = 'block';
        return;
    }
    
    // Show loading indicator
    document.getElementById('transferError').style.display = 'none';
    document.getElementById('submitTransfer').disabled = true;
    document.getElementById('submitTransfer').textContent = 'Sedang Memproses...';
    
    // Use FormData for simpler approach
    const formData = new FormData();
    formData.append('id_barang', id_barang);
    formData.append('quantity', quantity);
    
    // Send AJAX request
    fetch('transfer.php', {
        method: 'POST',
        body: formData
    })
    .then(response => {
        console.log('Response status:', response.status);
        // Try to get the response text first
        return response.text();
    })
    .then(text => {
        console.log('Raw response:', text);
        
        // Try to parse as JSON
        try {
            return JSON.parse(text);
        } catch (e) {
            throw new Error('Invalid JSON response: ' + text);
        }
    })
    .then(data => {
        console.log('Parsed data:', data);
        
        // Reset button state
        document.getElementById('submitTransfer').disabled = false;
        document.getElementById('submitTransfer').textContent = 'Pindahkan';
        
        if (data.success) {
            // Close modal
            bootstrap.Modal.getInstance(document.getElementById('transferModal')).hide();
            
            // Show success message
            Swal.fire({
                icon: 'success',
                title: 'Berhasil!',
                text: data.message,
                showConfirmButton: false,
                timer: 2000
            }).then(() => {
                // Reload page to refresh stock display
                window.location.reload();
            });
        } else {
            // Show error message
            document.getElementById('transferError').textContent = data.message || 'Terjadi kesalahan pada server';
            document.getElementById('transferError').style.display = 'block';
        }
    })
    .catch(error => {
        console.error('Error:', error);
        
        // Reset button state
        document.getElementById('submitTransfer').disabled = false;
        document.getElementById('submitTransfer').textContent = 'Pindahkan';
        
        // Show error message
        document.getElementById('transferError').textContent = 'Terjadi kesalahan: ' + error.message;
        document.getElementById('transferError').style.display = 'block';
    });
});

// Handle bulk transfer button click
document.getElementById('bulkTransferBtn').addEventListener('click', function() {
    const selectedProducts = [];
    const checkboxes = document.querySelectorAll('.product-checkbox:checked');
    
    checkboxes.forEach(checkbox => {
        selectedProducts.push({
            id: checkbox.dataset.id,
            name: checkbox.dataset.name,
            stock: parseInt(checkbox.dataset.stock),
            kode: checkbox.dataset.kode,
            harga: checkbox.dataset.harga,
            image: checkbox.dataset.image
        });
    });
    
    if (selectedProducts.length === 1) {
        // If only one product, use the single transfer modal
        const product = selectedProducts[0];
        openTransferModal(product.id, product.name, product.stock);
    } else {
        // Otherwise use the bulk transfer modal
        openBulkTransferModal(selectedProducts);
    }
});

// Function to open bulk transfer modal
function openBulkTransferModal(products) {
    // Clear previous products
    const productsList = document.getElementById('selectedProductsList');
    productsList.innerHTML = '';
    
    // Calculate total items
    let totalItems = 0;
    
    // Add selected products to the table
    products.forEach(product => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${product.id}</td>
            <td>${product.name}</td>
            <td>${product.stock}</td>
            <td>
                <input type="hidden" name="product_ids[]" value="${product.id}">
                <input type="number" class="form-control bulk-quantity" 
                       name="quantities[]" min="1" max="${product.stock}" 
                       value="1" required 
                       data-stock="${product.stock}"
                       oninput="updateBulkTotal()">
            </td>
        `;
        productsList.appendChild(row);
        totalItems++;
    });
    
    // Add a total row if more than one product
    if (products.length > 1) {
        const footerRow = document.createElement('tr');
        footerRow.className = 'table-info';
        footerRow.innerHTML = `
            <td colspan="2" class="text-end"><strong>Total:</strong></td>
            <td id="totalSelectedItems">${products.length} barang</td>
            <td id="totalTransferQuantity">${products.length} item</td>
        `;
        productsList.appendChild(footerRow);
    }
    
    // Hide any previous error messages
    document.getElementById('bulkTransferError').style.display = 'none';
    
    // Open the modal
    const bulkTransferModal = new bootstrap.Modal(document.getElementById('bulkTransferModal'));
    bulkTransferModal.show();
    
    // Update the totals after modal is shown
    if (products.length > 1) {
        updateBulkTotal();
    }
}

// Function to update bulk transfer totals
function updateBulkTotal() {
    const quantityInputs = document.querySelectorAll('.bulk-quantity');
    let totalQuantity = 0;
    
    quantityInputs.forEach(input => {
        totalQuantity += parseInt(input.value) || 0;
    });
    
    const totalElement = document.getElementById('totalTransferQuantity');
    if (totalElement) {
        totalElement.textContent = totalQuantity + ' item';
    }
}

// Handle bulk transfer form submission
document.getElementById('submitBulkTransfer').addEventListener('click', function() {
    // Validate all quantities
    let isValid = true;
    const quantityInputs = document.querySelectorAll('.bulk-quantity');
    
    quantityInputs.forEach(input => {
        const quantity = parseInt(input.value);
        const availableStock = parseInt(input.dataset.stock);
        
        if (quantity <= 0 || quantity > availableStock) {
            isValid = false;
        }
    });
    
    if (!isValid) {
        document.getElementById('bulkTransferError').textContent = 'Ada jumlah yang tidak valid. Pastikan semua jumlah lebih dari 0 dan tidak melebihi stok tersedia.';
        document.getElementById('bulkTransferError').style.display = 'block';
        return;
    }
    
    // Prepare form data
    const formData = new FormData(document.getElementById('bulkTransferForm'));
    
    // Show loading state
    document.getElementById('bulkTransferError').style.display = 'none';
    document.getElementById('submitBulkTransfer').disabled = true;
    document.getElementById('submitBulkTransfer').textContent = 'Sedang Memproses...';
    
    // Send AJAX request
    fetch('transfer.php', {
        method: 'POST',
        body: formData
    })
    .then(response => {
        console.log('Response status:', response.status);
        return response.text();
    })
    .then(text => {
        console.log('Raw response:', text);
        
        try {
            return JSON.parse(text);
        } catch (e) {
            throw new Error('Invalid JSON response: ' + text);
        }
    })
    .then(data => {
        // Reset button state
        document.getElementById('submitBulkTransfer').disabled = false;
        document.getElementById('submitBulkTransfer').textContent = 'Pindahkan Semua';
        
        if (data.success) {
            // Close modal
            bootstrap.Modal.getInstance(document.getElementById('bulkTransferModal')).hide();
            
            // Show success message
            Swal.fire({
                icon: 'success',
                title: 'Berhasil!',
                text: data.message,
                showConfirmButton: false,
                timer: 2000
            }).then(() => {
                // Reload page to refresh stock display
                window.location.reload();
            });
        } else {
            // Show error message
            document.getElementById('bulkTransferError').textContent = data.message;
            document.getElementById('bulkTransferError').style.display = 'block';
        }
    })
    .catch(error => {
        console.error('Error:', error);
        
        // Reset button state
        document.getElementById('submitBulkTransfer').disabled = false;
        document.getElementById('submitBulkTransfer').textContent = 'Pindahkan Semua';
        
        // Show error message
        document.getElementById('bulkTransferError').textContent = 'Terjadi kesalahan: ' + error.message;
        document.getElementById('bulkTransferError').style.display = 'block';
    });
});

// Handle "Add to Report" button
document.getElementById('addToReportBtn').addEventListener('click', function() {
    // Get selected products
    const selectedProducts = [];
    const checkboxes = document.querySelectorAll('.product-checkbox:checked');
    
    // Now we allow multiple products for report
    if (checkboxes.length === 0) {
        Swal.fire({
            icon: 'warning',
            title: 'Perhatian',
            text: 'Silakan pilih minimal satu barang untuk laporan.',
            confirmButtonText: 'OK'
        });
        return;
    }
    
    checkboxes.forEach(checkbox => {
        // Get product data from the table row
        const row = checkbox.closest('tr');
        const id = checkbox.dataset.id;
        const name = row.cells[2].textContent;
        const price = row.cells[5].textContent.replace('Rp ', '').replace(/\./g, '');
        
        selectedProducts.push({
            id: id,
            name: name,
            price: price
        });
    });
    
    // Open the report modal
    openReportModal(selectedProducts);
});

// Function to open report modal - updated for multiple products
function openReportModal(products) {
    // Clear previous products
    const productsList = document.getElementById('reportProductsList');
    productsList.innerHTML = '';
    
    // Add selected products to the table
    products.forEach((product, index) => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${product.id}
                <input type="hidden" name="id_barang[]" value="${product.id}">
            </td>
            <td>${product.name}</td>
            <td>
                <input type="number" class="form-control report-quantity" 
                      name="jumlah[]" min="1" value="1" required>
            </td>
            <td>
                <input type="text" class="form-control report-price" 
                      name="harga[]" value="${product.price}" required>
            </td>
            <td>
                <button type="button" class="btn btn-sm btn-danger remove-report-item">
                    <i class="fas fa-times"></i>
                </button>
            </td>
        `;
        productsList.appendChild(row);
    });
    
    // Add a total row
    if (products.length > 1) {
        const footerRow = document.createElement('tr');
        footerRow.className = 'table-info';
        footerRow.innerHTML = `
            <td colspan="2" class="text-end"><strong>Total:</strong></td>
            <td id="totalReportQuantity">0 item</td>
            <td id="totalReportPrice">Rp 0</td>
            <td></td>
        `;
        productsList.appendChild(footerRow);
        
        // Update totals
        updateReportTotals();
    }
    
    // Reset form elements
    document.getElementById('receiptImage').value = '';
    
    // Hide any previous error messages
    document.getElementById('reportError').style.display = 'none';
    
    // Open the modal
    const reportModal = new bootstrap.Modal(document.getElementById('reportModal'));
    reportModal.show();
    
    // Bind events to the quantity and price inputs
    bindReportEvents();
}

// Function to update report totals
function updateReportTotals() {
    const quantityInputs = document.querySelectorAll('.report-quantity');
    const priceInputs = document.querySelectorAll('.report-price');
    
    let totalQuantity = 0;
    let totalPrice = 0;
    
    quantityInputs.forEach((input, index) => {
        const quantity = parseInt(input.value) || 0;
        const price = parseInt(priceInputs[index].value.replace(/\D/g, '')) || 0;
        
        totalQuantity += quantity;
        totalPrice += (quantity * price);
    });
    
    // Update the total elements if they exist
    const totalQuantityElement = document.getElementById('totalReportQuantity');
    const totalPriceElement = document.getElementById('totalReportPrice');
    
    if (totalQuantityElement) {
        totalQuantityElement.textContent = totalQuantity + ' item';
    }
    
    if (totalPriceElement) {
        totalPriceElement.textContent = 'Rp ' + totalPrice.toLocaleString('id-ID');
    }
}

// Function to bind events to report items
function bindReportEvents() {
    // Event for quantity and price changes
    document.querySelectorAll('.report-quantity, .report-price').forEach(input => {
        input.addEventListener('input', updateReportTotals);
    });
    
    // Event for remove buttons
    document.querySelectorAll('.remove-report-item').forEach(button => {
        button.addEventListener('click', function() {
            const row = this.closest('tr');
            row.remove();
            
            // Check if we still have products
            const remainingRows = document.querySelectorAll('#reportProductsList tr:not(.table-info)');
            if (remainingRows.length === 0) {
                // Close modal if no products left
                bootstrap.Modal.getInstance(document.getElementById('reportModal')).hide();
                
                Swal.fire({
                    icon: 'warning',
                    title: 'Tidak Ada Produk',
                    text: 'Semua produk telah dihapus dari laporan.',
                    confirmButtonText: 'OK'
                });
            } else {
                // Update totals
                updateReportTotals();
                
                // If only one product left, remove the total row
                if (remainingRows.length === 1) {
                    const totalRow = document.querySelector('#reportProductsList tr.table-info');
                    if (totalRow) {
                        totalRow.remove();
                    }
                }
            }
        });
    });
}

// Handle report form submission
document.getElementById('submitReport').addEventListener('click', function() {
    // Get form data
    const form = document.getElementById('reportForm');
    const formData = new FormData(form);
    
    // Add action parameter
    formData.append('action', 'create_report');
    
    // Check if we have any products
    const productIds = formData.getAll('id_barang[]');
    if (productIds.length === 0) {
        document.getElementById('reportError').textContent = 'Tidak ada produk yang dipilih.';
        document.getElementById('reportError').style.display = 'block';
        return;
    }
    
    // Validate quantities and prices
    let isValid = true;
    let errorMsg = '';
    
    const quantities = document.querySelectorAll('.report-quantity');
    const prices = document.querySelectorAll('.report-price');
    
    quantities.forEach((input, index) => {
        const quantity = parseInt(input.value) || 0;
        const price = parseInt(prices[index].value.replace(/\D/g, '')) || 0;
        
        if (quantity <= 0) {
            isValid = false;
            errorMsg = 'Semua jumlah harus lebih dari 0.';
        }
        
        if (price <= 0) {
            isValid = false;
            errorMsg = 'Semua harga harus lebih dari 0.';
        }
    });
    
    if (!isValid) {
        document.getElementById('reportError').textContent = errorMsg;
        document.getElementById('reportError').style.display = 'block';
        return;
    }
    
    // Check if receipt image is uploaded
    const receiptImage = document.getElementById('receiptImage').files[0];
    if (!receiptImage) {
        document.getElementById('reportError').textContent = 'Gambar nota harus diunggah.';
        document.getElementById('reportError').style.display = 'block';
        return;
    }
    
    // Show loading state
    document.getElementById('reportError').style.display = 'none';
    document.getElementById('submitReport').disabled = true;
    document.getElementById('submitReport').textContent = 'Sedang Menyimpan...';
    
    // Send AJAX request
    fetch('report_handler.php', {
        method: 'POST',
        body: formData
    })
    .then(response => {
        // Try to get the response text first
        return response.text();
    })
    .then(text => {
        console.log('Raw response:', text);
        
        // Try to parse as JSON
        try {
            return JSON.parse(text);
        } catch (e) {
            throw new Error('Invalid JSON response: ' + text);
        }
    })
    .then(data => {
        // Reset button state
        document.getElementById('submitReport').disabled = false;
        document.getElementById('submitReport').textContent = 'Simpan';
        
        if (data.success) {
            // Close modal
            bootstrap.Modal.getInstance(document.getElementById('reportModal')).hide();
            
            // Show success message
            let message = data.message;
            if (data.product_count > 1) {
                message += ` (${data.product_count} produk)`;
            }
            
            Swal.fire({
                icon: 'success',
                title: 'Berhasil!',
                text: message,
                showConfirmButton: false,
                timer: 2000
            });
            
            // Uncheck all checkboxes
            document.querySelectorAll('.product-checkbox:checked').forEach(checkbox => {
                checkbox.checked = false;
            });
            
            // Update select all checkbox
            document.getElementById('select-all').checked = false;
            document.getElementById('select-all').indeterminate = false;
            
            // Update bulk buttons state
            updateBulkButtonsState();
        } else {
            // Show error message
            document.getElementById('reportError').textContent = data.message;
            document.getElementById('reportError').style.display = 'block';
        }
    })
    .catch(error => {
        console.error('Error:', error);
        
        // Reset button state
        document.getElementById('submitReport').disabled = false;
        document.getElementById('submitReport').textContent = 'Simpan';
        
        // Show error message
        document.getElementById('reportError').textContent = 'Terjadi kesalahan: ' + error.message;
        document.getElementById('reportError').style.display = 'block';
    });
});

// Initialize Select2 for better dropdown UI and update bulk buttons state on page load
$(document).ready(function() {
    $('.select2').select2({
        dropdownParent: $('#reportModal')
    });
    
    updateBulkButtonsState();
});
</script>
</body>

</html>