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

<?php include(__DIR__ . '/../../layouts/header.php'); ?>
<style>
  .modal-body {
    max-height: 400px;
    overflow-y: auto;
  }
</style>

<body>
  <div class="wrapper">
    <?php include(__DIR__ . '/../../layouts/sidebar.php'); ?>

    <div class="main-panel">
      <?php include(__DIR__ . '/../../layouts/navbar.php'); ?>

      <div class="container">
        <div class="page-inner">
          <div class="page-header">
            <h3 class="fw-bold mb-3">Laporan Pendapatan</h3>
            <ul class="breadcrumbs mb-3">
              <li class="nav-home">
                <a href="#">
                  <i class="icon-home"></i>
                </a>
              </li>
              <li class="separator">
                <i class="icon-arrow-right"></i>
              </li>
              <li class="nav-item">
                <a href="#">Laporan</a>
              </li>
              <li class="separator">
                <i class="icon-arrow-right"></i>
              </li>
              <li class="nav-item">
                <a href="#">Pendapatan</a>
              </li>
            </ul>
            <!--
            <div class="ms-md-auto py-2 py-md-0">
              <button class="btn btn-primary btn-round" id="lihatData">Lihat Data</button>
            </div>
            -->
          </div>

          <div class="row">
            <div class="col-md-12">
              <div class="card">
                <div class="card-body">
                  <h4 class="text-center">Perkiraan Total Keseluruhan</h4>
                  <h2 class="text-center text-success fw-bold" id="totalPendapatan">
                    Rp 0
                  </h2>
                  <h5 class="text-center text-danger mt-3" id="totalPengeluaran">
                    Total Pengeluaran: Rp 0
                  </h5>
                </div>
              </div>
            </div>

            <div class="col-md-12">
              <div class="card">
                <div class="card-body">
                  <div class="table-responsive">
                    <table id="pendapatanTbl" class="display table table-striped table-hover">
                      <thead>
                        <tr>
                          <th>Tanggal</th>
                          <th>Total Pendapatan</th>
                          <th>Biaya Admin</th>
                          <th>Perkiraan Pendapatan Bersih</th>
                        </tr>
                      </thead>
                      <tbody id="pendapatanTbody">
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-md-12 mt-4">
              <div id="jsonModal" class="modal" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title">Data JSON</h5>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                    <div class="modal-body">
                      <pre id="jsonData" style="white-space: pre-wrap;"></pre>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>

      <?php include(__DIR__ . '/../../layouts/footer.php'); ?>
    </div>
  </div>

  <?php include(__DIR__ . '/../../layouts/script.php'); ?>

<script>
  const fetchData = () => {
    $.getJSON('data-json', (data) => {
      const pendapatanData = data.pendapatan;
      const pengeluaranData = data.pengeluaran;
      let totalPendapatan = 0;
      let totalPengeluaran = pengeluaranData[0]?.pengeluaran?.reduce((sum, val) => sum + parseInt(val), 0) || 0;
      let tableRows = '';

      pendapatanData.forEach(item => {
        const totalPendapatanHariIni = item.pendapatan.reduce((sum, val) => sum + (parseInt(val) || 0), 0);
        const pendapatanBersih = totalPendapatanHariIni - item.admin;
        totalPendapatan += pendapatanBersih;

        tableRows += `
          <tr>
            <td>${item.tanggal}</td>
            <td>Rp ${totalPendapatanHariIni.toLocaleString()}</td>
            <td>Rp ${item.admin.toLocaleString()}</td>
            <td>Rp ${pendapatanBersih.toLocaleString()}</td>
          </tr>
        `;
      });

      const totalPendapatanSetelahPengeluaran = totalPendapatan - totalPengeluaran;
      $('#totalPendapatan').text(`Rp ${totalPendapatanSetelahPengeluaran.toLocaleString()}`);
      $('#totalPengeluaran').text(`Total Pengeluaran: Rp ${totalPengeluaran.toLocaleString()}`);
      $('#pendapatanTbody').html(tableRows);
      $('#pendapatanTbl').DataTable();
    }).fail((error) => {
      console.error('Terjadi kesalahan:', error);
    });
  };

  $('#lihatData').on('click', () => {
    $.getJSON('data-json', (data) => {
      $('#jsonData').text(JSON.stringify(data, null, 2));
      $('#jsonModal').modal('show');
    }).fail((error) => {
      console.error('Error fetching JSON:', error);
    });
  });

  fetchData();
</script>

</body>
</html>