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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Laporan</title>
  <!-- Favicon -->
  <link rel="shortcut icon" href="{{url('design/img/svg/Logo_Original.png')}}">
  <!-- Bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <!-- Fontawesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
  <!-- Custom styles -->
  <link rel="stylesheet" href="{{url('design/css/style.min.css')}}">
  <link rel="stylesheet" href="{{url('design/fonts/stylesheet.css')}}">
  <!-- DataTables -->
  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap5.min.css">
  <!-- Flatpicker -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
  <!-- Project Style -->
  <link rel="stylesheet" href="{{url('design/css/project-style.css')}}">

</head>

<body>
  <div class="layer"></div>
  <!-- ! Body -->
  <div class="page-flex">
    <!-- ! Sidebar -->
    @include('component.sidebar')
    <div class="main-wrapper">
      <!-- ! Main nav -->
      @include('component.navbar')
      <!-- ! Main -->
      <main class="main users chart-page position-relative">
        <div class="preloader">
          <div class="loading">
            <div class="spinner-border" role="status">
              <span class="sr-only">Loading...</span>
            </div>
          </div>
        </div>
        <div class="container">
          <h2 class="main-title">Laporan</h2>
          <div class="row">
            <div class="col-lg-12">
              <div class="white-block">
                <form action="{{url('laporan')}}" method="POST">
                  @csrf
                  <div class="row">
                    <p class="fw-bolder">Filter pada Tanggal</p>
                    <div class="col-6">
                      <label class="form-label-wrapper">
                        <p class="form-label">Tanggal Awal</p>
                        <input class="form-input awal" type="text" name="tgl_awal" placeholder="Masukan Tanggal Awal" value="{{$DSAwal}}" required>
                      </label>
                    </div>
                    <div class="col-6">
                      <label class="form-label-wrapper">
                        <p class="form-label">Tanggal Akhir</p>
                        <input class="form-input akhir" type="text" name="tgl_akhir" placeholder="Masukan Tanggal Akhir" value="{{$DSAkhir}}">
                      </label>
                    </div>
                  </div>
                  <button class="primary-default-btn transparent-btn float-end">Cari</button>
                </form>
              </div>
            </div>
          </div>
          <div class="row stat-cards mb-3">
            <div class="col-6">
              <article class="stat-cards-item">
                <div class="stat-cards-icon success">
                  <i data-feather="dollar-sign" aria-hidden="true"></i>
                </div>
                <div class="stat-cards-info">
                  <p class="stat-cards-info__num" style="font-size: 24px;">Rp. {{ number_format($totalPendapatan, 2) }}</p>
                  <p class="stat-cards-info__title">Pendapatan</p>
                </div>
              </article>
            </div>
            <div class="col-6">
              <article class="stat-cards-item">
                <div class="stat-cards-icon primary">
                  <i data-feather="user" aria-hidden="true"></i>
                </div>
                <div class="stat-cards-info">
                  <p class="stat-cards-info__num" style="font-size: 24px;">
                    @if ($totalPasien != null)
                    {{$totalPasien}}
                    @else
                    0
                    @endif
                  </p>
                  <p class="stat-cards-info__title">Jumlah Pasien</p>
                </div>
              </article>
            </div>
          </div>
          <div class="row">
            <div class="col-lg-12">
              <div class="white-block position-relative">
                <h5 class="stat-cards-info__num mb-3">Data Periksa</h5>
                <table class="table table-striped table-hover" id="data-laporan">
                  <thead>
                    <tr>
                      <th style="width: 5%;" scope="col">#</th>
                      <th style="width: 30%;" scope="col">Nama</th>
                      <th scope="col">Terapi</th>
                      <th style="width: 15%;" scope="col">Biaya</th>
                    </tr>
                  </thead>
                  <tbody>
                    <?php $i = 0 ?>
                    @foreach ($dataLaporanPasien as $dlp)
                    <?php $i++ ?>
                    <tr>
                      <th scope="row">{{$i}}</th>
                      <td>{{$dlp->dataPasien->dp_nama}}</td>
                      <td>
                        <div class="overflow-auto" style="max-height: 100px; min-height: 35px">
                          <?php echo $dlp->rm_terapi; ?>
                        </div>
                      </td>
                      <td>Rp. {{number_format($dlp->rm_pembayaran, 2) }}</td>
                    </tr>
                    @endforeach
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </main>
      <!-- ! Footer -->
      @include('component.footer')
    </div>
  </div>
  <!-- jQuery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js" integrity="sha256-DI6NdAhhFRnO2k51mumYeDShet3I8AKCQf/tf7ARNhI=" crossorigin="anonymous"></script>
  <!-- Bootstrap -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  <!-- Chart library -->
  <script src="{{url('design/plugins/chart.min.js')}}"></script>
  <!-- Icons library -->
  <script src="{{url('design/plugins/feather.min.js')}}"></script>
  <!-- Custom scripts -->
  <script src="{{url('design/js/script.js')}}"></script>
  <!-- Flatpicker -->
  <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
  <!-- DataTables -->
  <script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap5.min.js"></script>

  <script>
    $("#laporan").addClass("active");

    $(document).ready(function() {
      $(".preloader").fadeOut(800);
    });

    $(document).ready(function() {
      $(".awal").flatpickr({
        dateFormat: "d-m-Y"
      });
      $(".akhir").flatpickr({
        dateFormat: "d-m-Y"
      });

      $('#data-laporan').DataTable({
        'language': {
          search: '<div class="search-wrapper float-end"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search" aria-hidden="true"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg> <input type="text" placeholder="Cari ..." required=""> </div>',
          searchPlaceholder: 'Cari',
        }
      });
    });
  </script>
</body>

</html>