<!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="lihatDataJson">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="totalPendapatanKeseluruhan">
                    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="pendapatan-table" 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="pendapatanTableBody">
                      </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>
    fetch('data-json')
      .then(response => response.json())
      .then(data => {
        const pendapatanData = data.pendapatan;
        const pengeluaranData = data.pengeluaran;

        let totalPendapatanKeseluruhan = 0;
        let totalPengeluaranKeseluruhan = 0;

        if (pengeluaranData[0] && pengeluaranData[0].pengeluaran) {
          totalPengeluaranKeseluruhan = pengeluaranData[0].pengeluaran.reduce((sum, value) => sum + parseInt(value), 0);
        }

        let tableRows = '';

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

          totalPendapatanKeseluruhan += 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 = totalPendapatanKeseluruhan - totalPengeluaranKeseluruhan;
        document.getElementById('totalPendapatanKeseluruhan').textContent = `Rp ${totalPendapatanSetelahPengeluaran.toLocaleString()}`;
        document.getElementById('totalPengeluaran').textContent = `Total Pengeluaran: Rp ${totalPengeluaranKeseluruhan.toLocaleString()}`;
        document.getElementById('pendapatanTableBody').innerHTML = tableRows;

        $('#pendapatan-table').DataTable();
      })
      .catch(error => {
        console.error('Terjadi kesalahan:', error);
      });

    document.getElementById('lihatDataJson').addEventListener('click', function() {
      fetch('data-json')
        .then(response => response.json())
        .then(data => {
          const formattedJson = JSON.stringify(data, null, 2);
          document.getElementById('jsonData').textContent = formattedJson;
          $('#jsonModal').modal('show');
        })
        .catch(error => {
          console.error('Error fetching JSON:', error);
        });
    });
  </script>
</body>
</html>