<!-- Main content -->
<section class="content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <div class="card">
          <div class="card-header">
            <div class="row">
              <div class="col-sm-6">
                <h2 class="card-title">Laporan Kas</h2>
              </div>
              <div class="col-sm-6">
              </div>
            </div>
          </div>
          <!-- /.card-header -->
          <div class="card-body">

<style>
    .table-responsive {
        overflow-x: hidden;
    }

    @media (max-width: 767px) { /* Untuk smartphone */
        .hide-on-mobile {
            display: none;
        }
    }

    @media (min-width: 768px) and (max-width: 1024px) { /* Untuk tablet */
        .hide-on-tablet {
            display: none;
        }
    }

    @media (min-width: 1024px) { /* Untuk laptop */
        .hide-on-laptop {
            display: none;
        }
    }
</style>

<div class="mb-1">
    <div class="row">
        <div class="col-4">
            <div class="dropdown dropright">
                <a href="excel/export.php" id="export-button" class="btn btn-success btn-sm mr-2">
                    <i class="fas fa-file-excel mr-2"></i>Export
                </a>
                <!-- <button type="submit" class="btn btn-success btn-sm mr-2"><i class="fas fa-file-excel mr-2"></i>Export</button> -->
                <!-- <button type="submit" class="btn btn-primary btn-sm mr-2"><i class="fas fa-file-excel mr-2"></i>Import</button> -->
                <a class="btn btn-warning btn-sm dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
                    Filter
                </a>
                <div class="dropdown-menu" style="width: 250px;">
                    <div class="m-2">
                        <form id="filter-form">
                            <div class="form-group m-1">
                                <label><small>Dari</small></label>
                                <input type="date" class="form-control form-control-sm" id="start-date" name="start_date">
                            </div>
                            <div class="form-group">
                                <label><small>Sampai</small></label>
                                <input type="date" class="form-control form-control-sm" id="end-date" name="end_date">
                            </div>
                            <button type="button" class="btn btn-primary btn-sm mt-2" id="apply-filter">Terapkan</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-8">
            <input type="text" id="search-input" placeholder="Cari..." class="form-control form-control-sm mb-2" style="width: 200px; float: right;">
        </div>
    </div>
</div>
<div class="table-responsive">
    <table class="table table-bordered table-striped" id="data-table">
        <thead>
            <tr>
                <th>No</th>
                <th>Nama Server</th>
                <th>Time</th>
                <th class="hide-on-mobile">Keterangan</th>
                <th class="hide-on-mobile">Kas Masuk</th>
                <th class="hide-on-mobile hide-on-tablet">Kas Keluar</th>
                <th class="hide-on-mobile hide-on-tablet">Jenis Kas</th>
                <th class="hide-on-mobile hide-on-tablet">Status</th>
            </tr>
        </thead>
        <tbody id="table-body">
            <!-- Data akan dimuat di sini -->
        </tbody>
    </table>
</div>

<div id="loader" style="display:none;">Loading...</div>

<!-- Modal -->
<div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="imageModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="imageModalLabel">Bukti Pembayaran</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <img id="modalImg" src="" class="img-fluid" alt="Bukti Pembayaran" />
      </div>
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
let offset = 0; // Offset untuk memuat data
const limit = 15; // Jumlah data per permintaan
let loading = false;

// Fungsi untuk memuat data
function loadMoreData(searchTerm = '', startDate = '', endDate = '', idS = <?php echo "'".$SvId."'"; ?>) {
    if (loading) return; // Jangan panggil lagi jika sedang memuat
    loading = true;
    $('#loader').show();

    // Buat cookieData sesuai format yang diinginkan
    const urlData = `search=${encodeURIComponent(searchTerm)}&start_date=${encodeURIComponent(startDate)}&end_date=${encodeURIComponent(endDate)}&ids=${idS}`;
    var link = document.getElementById('export-button');
    link.href = "excel/export.php?" + urlData;

    $.ajax({
        url: 'list_data/load_table.php',
        type: 'GET',
        data: { offset: offset, search: searchTerm, start_date: startDate, end_date: endDate, ids: idS }, // Tambahkan parameter pencarian dan filter
        success: function(response) {
            const result = JSON.parse(response);
            const data = result.data;

            if (data.length > 0) {
                data.forEach((server, index) => {
                    // Data yang akan ditampilkan
                    let truncatedData = {
                        nama_server: server.nama_server,
                        start_time: server.start_time,
                        keterangan: server.keterangan,
                        pemasukan: server.pemasukan,
                        pengeluaran: server.pengeluaran,
                        metode_pembayaran: server.metode_pembayaran,
                        status: server.status,
                        bukti_pembayaran: server.bukti_pembayaran,
                        nama: server.nama,
                    };

                    let row = `
                        <tr>
                            <td>
                                ${offset + index + 1}
                                <br>
                                <button type="button" class="btn collapsed btn-sm m-0 p-0 hide-on-laptop" data-toggle="collapse" data-target="#collapse-row-${offset + index}" aria-expanded="false" onclick="toggleCollapse(this, '${offset + index}')">
                                    <i class="fas fa-plus-circle text-primary"></i>
                                </button>
                            </td>
                            <td>${truncatedData.nama_server}</td>
                            <td>${truncatedData.start_time}</td>
                            <td class="hide-on-mobile">${truncatedData.keterangan} ${truncatedData.nama ? `(${truncatedData.nama})` : ''}</td>
                            <td class="hide-on-mobile">
                                ${truncatedData.pemasukan ? 'Rp. ' + Number(truncatedData.pemasukan).toLocaleString() : ''}
                                ${truncatedData.bukti_pembayaran ? `<img src="img/user/${truncatedData.bukti_pembayaran}" height="35px" class="thumbnail ml-3" data-toggle="modal" data-target="#imageModal" data-fullsize="img/user/${truncatedData.bukti_pembayaran}">` : ''}
                            </td>
                            <td class="hide-on-mobile hide-on-tablet">${truncatedData.pengeluaran ? 'Rp. ' + Number(truncatedData.pengeluaran).toLocaleString() : ''}</td>
                            <td class="hide-on-mobile hide-on-tablet">${truncatedData.metode_pembayaran}</td>
                            <td class="hide-on-mobile hide-on-tablet">${truncatedData.status}</td>
                        </tr>
                        <tr class="collapse hide-on-laptop" id="collapse-row-${offset + index}">
                            <td colspan="5" class="p-0">
                                <table class="table table-borderless" width="100%">
                                    <tbody>
                                        <tr class="hide-on-tablet hide-on-laptop">
                                            <th>Keterangan</th>
                                            <td>${truncatedData.keterangan} ${truncatedData.nama ? `(${truncatedData.nama})` : ''}</td>
                                        </tr>
                                        <tr class="hide-on-tablet hide-on-laptop">
                                            <th>Kas Masuk</th>
                                            <td>
                                                ${truncatedData.pemasukan ? 'Rp. ' + Number(truncatedData.pemasukan).toLocaleString() : ''}
                                                ${truncatedData.bukti_pembayaran ? `<img src="img/user/${truncatedData.bukti_pembayaran}" height="35px" class="thumbnail ml-3" data-toggle="modal" data-target="#imageModal" data-fullsize="img/user/${truncatedData.bukti_pembayaran}">` : ''}
                                            </td>
                                        </tr>
                                        <tr class="hide-on-laptop">
                                            <th>Kas Keluar</th>
                                            <td>${truncatedData.pengeluaran ? 'Rp. ' + Number(truncatedData.pengeluaran).toLocaleString() : ''}</td>
                                        </tr>
                                        <tr class="hide-on-laptop">
                                            <th>Jenis Kas</th>
                                            <td>${truncatedData.metode_pembayaran}</td>
                                        </tr>
                                        <tr class="hide-on-laptop">
                                            <th>Status</th>
                                            <td>${truncatedData.status}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>`;

                    $('#table-body').append(row);
                });
                offset += data.length; // Update offset
            }
            $('#loader').hide();
            loading = false; // Set loading ke false
        },
        error: function() {
            $('#loader').hide();
            loading = false;
            alert('Error loading data');
        }
    });
}

// Fungsi untuk toggle collapse dan mengubah ikon
function toggleCollapse(button, index) {
    const $target = $(`#collapse-row-${index}`);
    const isCollapsed = $target.hasClass('show');

    // Toggle collapse
    $target.collapse('toggle');

    // Ubah ikon
    if (isCollapsed) {
        $(button).find('i').removeClass('fa-minus-circle text-danger').addClass('fa-plus-circle text-primary');
    } else {
        $(button).find('i').removeClass('fa-plus-circle text-primary').addClass('fa-minus-circle text-danger');
    }
}

// Fungsi untuk menangani input pencarian
$('#search-input').on('input', function() {
    const searchTerm = $(this).val();
    offset = 0; // Reset offset saat pencarian
    $('#table-body').empty(); // Kosongkan tabel
    loadMoreData(searchTerm, $('#start-date').val(), $('#end-date').val()); // Muat data berdasarkan pencarian dan filter
});

// Fungsi untuk menerapkan filter berdasarkan tanggal
$('#apply-filter').on('click', function() {
    const startDate = $('#start-date').val();
    const endDate = $('#end-date').val();
    offset = 0; // Reset offset saat filter diterapkan
    $('#table-body').empty(); // Kosongkan tabel
    loadMoreData($('#search-input').val(), startDate, endDate); // Muat data berdasarkan filter
});

// Panggil fungsi saat scroll
$(window).scroll(function() {
    if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
        loadMoreData($('#search-input').val(), $('#start-date').val(), $('#end-date').val()); // Panggil dengan parameter pencarian dan filter
    }
});

// Muat data pertama kali saat halaman dimuat
$(document).ready(function() {
    loadMoreData();
});

// Gunakan event delegation untuk menangani gambar yang diklik
$(document).on('click', 'img.thumbnail', function(event) {
    var fullsizeImage = $(this).data('fullsize'); // Ambil data gambar penuh dari atribut data-fullsize
    var modalImg = $('#modalImg'); // Elemen gambar di dalam modal

    // Set gambar besar ke modal
    modalImg.attr('src', fullsizeImage); 

    // Tampilkan modal
    $('#imageModal').modal('show');
});

</script>


</div>
        </div>
        <!-- /.card -->
      </div>
      <!-- /.col -->
    </div>
    <!-- /.row -->
  </div>
  <!-- /.container-fluid -->
</section>
<!-- /.content -->
