@extends("backend.layouts2.master")

@section("title")
    Dashboard - Sistem Informasi Klinik
@endsection

@push("css")
<style media="screen">
  .fc-toolbar-title {
    font-size: 16px!important;
  }
  .fc-button-group{
    font-size: 11px!important;

  }
  .fc-today-button{
    font-size: 11px!important;

  }

</style>
@endpush

@section ('content')

<!-- Begin Page Content -->
<div class="container-fluid">

    <!-- Page Heading -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <!-- <h1 class="h3 mb-0 text-gray-800">Dashboard</h1> -->
        <!-- <a href="#" class="d-none d-sm-inline-block btn btn-sm btn-primary shadow-sm"><i
                class="fas fa-download fa-sm text-white-50"></i> Generate Report
        </a> -->
    </div>

    <!-- Content Row -->
    <div class="row">

        <!-- Earnings (Monthly) Card Example -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                Pendaftaran (Hari ini)</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $pendaftar_today ?? 0 }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-calendar fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Earnings (Monthly) Card Example -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                Pemasukan (Hari ini)</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">Rp. {{ number_format($pemasukan_today ?? 0, 2) }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Earnings (Monthly) Card Example -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Periksa (Hari ini)
                            </div>
                            <div class="row no-gutters align-items-center">
                                <div class="col-auto">
                                    <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">{{floor($periksa_completed_today_percent) ?? 0}}%</div>
                                </div>
                                <div class="col">
                                    <div class="progress progress-sm mr-2">
                                        <div class="progress-bar bg-info" role="progressbar"
                                            style="width: {{$periksa_completed_today_percent ?? 0}}%" aria-valuenow="{{$periksa_completed_today_percent ?? 0}}" aria-valuemin="0"
                                            aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-clipboard-list fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Pending Requests Card Example -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                Periksa Tertunda (Hari ini)</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{count($periksa_pending_today) ?? 0}}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-comments fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">

        <!-- Earnings (Monthly) Card Example -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                Pendaftaran (Bulan Ini)</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $pendaftar_monthly ?? 0 }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-calendar fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Earnings (Monthly) Card Example -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                Pemasukan (Bulan Ini)</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">Rp. {{ number_format($pemasukan_monthly ?? 0, 2) }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-dollar-sign fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Earnings (Monthly) Card Example -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">Periksa (Bulan Ini)
                            </div>
                            <div class="row no-gutters align-items-center">
                                <div class="col-auto">
                                    <div class="h5 mb-0 mr-3 font-weight-bold text-gray-800">{{floor($periksa_completed_monthly_percent) ?? 0}}%</div>
                                </div>
                                <div class="col">
                                    <div class="progress progress-sm mr-2">
                                        <div class="progress-bar bg-info" role="progressbar"
                                            style="width: {{$periksa_completed_monthly_percent ?? 0}}%" aria-valuenow="{{$periksa_completed_monthly_percent?? 0}}" aria-valuemin="0"
                                            aria-valuemax="100"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-clipboard-list fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Pending Requests Card Example -->
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                Periksa Pending (Bulan Ini)</div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{$periksa_pending_monthly ?? 0}}</div>

                        </div>
                        <div class="col-auto">
                            <i class="fas fa-comments fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Content Row -->
    <div class="row mb-2">
      <div class="col-xl-6 col-lg-5">
        <div class="card shadow mb-4">
            <!-- Card Header - Dropdown -->
            <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between bg-success text-white">
                <h6 class="m-0 font-weight-bold text-white">Kalender</h6>

            </div>
            <!-- Card Body -->
            <div class="card-body">
              <div id='calendar'></div>
            </div>
        </div>
      </div>

      <div class="col-xl-6 col-lg-5">
        <div class="card shadow mb-4">
            <!-- Card Header - Dropdown -->
            <div
                class="card-header py-3 d-flex flex-row align-items-center justify-content-between bg-info text-white">
                <h6 class="m-0 font-weight-bold text-white">Pasien</h6>

            </div>
            <!-- Card Body -->
            <div class="card-body">
              <div class="chart">
                <canvas id="barChart" style="min-height: 250px; height: 410px; max-height: 500px; max-width: 100%;"></canvas>

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

    <div class="row">

        <!-- Area Chart -->
        <div class="col-xl-8 col-lg-7">
          <div class="card shadow mb-4">
              <!-- Card Header - Dropdown -->
              <div
                  class="card-header py-3 d-flex flex-row align-items-center justify-content-between bg-success text-white">
                  <h6 class="m-0 font-weight-bold "><a href="{{route('dashboard.appointment.appointment.index')}}" class="text-white"> Appointment (New)</a></h6>

              </div>
              <!-- Card Body -->
              <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered" id="table-index" width="100%" cellspacing="0">
                        <thead>
                            <tr>
                              <th>No</th>
                              <th>Nama</th>
                              <th>Tanggal</th>
                              <th>Waktu</th>
                              <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                          @foreach ($appointments as $key => $val)
                            <tr>
                              <td>{{ $key+1 }}</td>
                              <td>{{ $val->pasien->nama }}</td>
                              <td><label class="badge badge-primary-soft label-profile" style="background-color: rgba(40,110,251,.1)!important; color: #286efb!important; font-size: 90%!important;"><i class="fa fa-calendar"></i> {{$val->tgl_pendaftaran}}</label>
                              </td>
                              <td><label class="badge badge-primary-soft label-profile" style="background-color: rgba(40,110,251,.1)!important; color: #286efb!important; font-size: 90%!important;"><i class="fa fa-clock"></i> {{config('local.waktu')[$val->waktu]}}</label>
                              </td>
                              <td>
                                <label class="badge badge-primary-soft label-profile" style="background-color: rgb(160 8 8 / 10%)!important; color: #fb7e28!important; font-size: 90%!important;">Pending</label>
                              </td>
                            </tr>
                          @endforeach
                        </tbody>
                    </table>
                </div>
              </div>
          </div>


            <div class="card shadow mb-4">
                <!-- Card Header - Dropdown -->
                <div
                    class="card-header py-3 d-flex flex-row align-items-center justify-content-between bg-primary text-white">
                    <h6 class="m-0 font-weight-bold">Pendaftaran Hari Ini</h6>
                </div>
                <!-- Card Body -->
                <div class="card-body">
                  <div class="table-responsive">
                      <table class="table table-bordered" id="table-index" width="100%" cellspacing="0">
                          <thead>
                              <tr>
                                <th>No</th>
                                <th>Nama</th>
                                <th>No RM</th>
                                <th>Footprint</th>
                                <th>Nomor Antrian</th>
                              </tr>
                          </thead>
                          <tbody>
                            @foreach ($pendaftar_today_data as $key => $val)
                              <tr>
                                <td>{{ $key+1 }}</td>
                                <td>{{ $val->pasien->nama }}</td>
                                <td>{{ $val->no_rm }}</td>
                                <td>
                                  @if ($val->status == 0)
                                    <label class="badge badge-success-soft" style="background-color: #fdde7c!important; color: #856404!important;"><i class="fas fa-hourglass-start"></i> Antri Periksa
                                     </label>
                                  @elseif ($val->status == 1)
                                    <label class="badge badge-success-soft" style="background-color: rgba(40,167,69,.1)!important; color: #28a745!important;"><i class="fas fa-check"></i> Selesai Periksa
                                     </label>
                                  @elseif ($val->status == 2)
                                    <label class="badge badge-success-soft" style="background-color: rgba(40,110,251,.1)!important; color: #286efb!important;"><i class="fas fa-check"></i> Pembayaran Selesai
                                     </label>
                                  @endif
                                </td>
                                <td>
                                  @if ($val->type_register == 1)
                                    <label class="badge badge-success-soft label-profile" style="background-color: rgba(40,110,251,.1)!important; color: #286efb!important;">{{$val->antrian}}</label>
                                  @elseif ($val->type_register == 2)
                                    <label class="badge badge-success-soft label-profile" style="background-color: rgba(40,167,69,.1)!important; color: #28a745!important;">Appointment
                                    </label><br>
                                     <label class="badge badge-primary-soft label-profile" style="background-color: rgba(40,110,251,.1)!important; color: #286efb!important; font-size: 90%!important;"><i class="fa fa-clock"></i> {{config('local.waktu')[$val->waktu]}}</label>
                                  @endif
                                </td>
                              </tr>
                            @endforeach
                          </tbody>
                      </table>
                  </div>
                </div>
            </div>
        </div>

        <!-- Pie Chart -->
        <div class="col-xl-4 col-lg-5">

            <div class="card shadow mb-4">
                <!-- Card Header - Dropdown -->
                <div
                    class="card-header py-3 d-flex flex-row align-items-center justify-content-between bg-warning text-white">
                    <h6 class="m-0 font-weight-bold ">Periksa Tertunda (Hari ini)</h6>

                </div>
                <!-- Card Body -->
                <div class="card-body">
                  <div class="table-responsive">
                      <table class="table table-bordered" id="table-index" width="100%" cellspacing="0">
                          <thead>
                              <tr>
                                <th>No</th>
                                <th>Nama</th>
                              </tr>
                          </thead>
                          <tbody>
                            @foreach ($periksa_pending_today as $key => $val)
                              <tr>
                                <td>{{ $key+1 }}</td>
                                <td>{{ $val->pasien->nama }}</td>
                              </tr>
                            @endforeach
                          </tbody>
                      </table>
                  </div>
                </div>
            </div>

            <div class="card shadow mb-4">
                <!-- Card Header - Dropdown -->
                <div
                    class="card-header py-3 d-flex flex-row align-items-center justify-content-between bg-danger text-white">
                    <h6 class="m-0 font-weight-bold">Obat Habis</h6>

                </div>
                <!-- Card Body -->
                <div class="card-body">
                  <div class="table-responsive">
                      <table class="table table-bordered" id="table-index" width="100%" cellspacing="0">
                          <thead>
                              <tr>
                                <th>No</th>
                                <th>Nama</th>
                              </tr>
                          </thead>
                          <tbody>
                            @foreach ($obat_outstock as $key => $val)
                              <tr>
                                <td>{{ $key+1 }}</td>
                                <td>{{ $val->nama }}</td>
                              </tr>
                            @endforeach
                          </tbody>
                      </table>
                  </div>
                </div>
            </div>
        </div>
    </div>


</div>
<!-- /.container-fluid -->

@endsection

@push('js')
<script src='{{url("https://cdn.jsdelivr.net/npm/fullcalendar@6.1.1/index.global.min.js")}}'></script>
<script src="{{asset('adminlte/plugins/chart.js/Chart.min.js')}}"></script>
<!-- AdminLTE App -->
<script src="{{asset('adminlte/dist/js/adminlte.min.js')}}"></script>
<!-- AdminLTE for demo purposes -->
<script src="{{asset('adminlte/dist/js/demo.js')}}"></script>
<script>



$(function () {
  /* ChartJS
   * -------
   * Here we will create a few charts using ChartJS
   */

   //-------------
   //- BAR CHART -
   //-------------
   $.ajax({
         url: "{{route('dashboard.chart')}}",
         method: "GET",
         success: function(data) {
           console.log(data);
           var areaChartData = {
             labels  :  data.label,
             datasets: [
               {
                 label               : 'Pasien',
                 backgroundColor     : 'rgba(60,141,188,0.9)',
                 borderColor         : 'rgba(60,141,188,0.8)',
                 pointRadius          : false,
                 pointColor          : '#3b8bba',
                 pointStrokeColor    : 'rgba(60,141,188,1)',
                 pointHighlightFill  : '#fff',
                 pointHighlightStroke: 'rgba(60,141,188,1)',
                 data                : data.data
               },
               // {
               //   label               : 'Total Pasien',
               //   backgroundColor     : 'rgba(210, 214, 222, 1)',
               //   borderColor         : 'rgba(210, 214, 222, 1)',
               //   pointRadius         : false,
               //   pointColor          : 'rgba(210, 214, 222, 1)',
               //   pointStrokeColor    : '#c1c7d1',
               //   pointHighlightFill  : '#fff',
               //   pointHighlightStroke: 'rgba(220,220,220,1)',
               //   data                :  data.data
               // },
             ]
           }
           var barChartCanvas = $('#barChart').get(0).getContext('2d')
           var barChartData = $.extend(true, {}, areaChartData)
           // var temp0 = areaChartData.datasets[0]
           // var temp1 = areaChartData.datasets[1]
           // barChartData.datasets[0] = temp1
           // barChartData.datasets[1] = temp0

           var barChartOptions = {
             responsive              : true,
             maintainAspectRatio     : false,
             datasetFill             : false
           }

           new Chart(barChartCanvas, {
             type: 'bar',
             data: barChartData,
             options: barChartOptions
           })
         }
   })

  })

      document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
          initialView: 'dayGridMonth',
          themeSystem: 'bootstrap5',
          headerToolbar: {
            left: 'prevYear,prev,next,nextYear today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
          },

          eventSources: [
              {
                  url: '{{route("dashboard.calendar")}}',
                  type: "GET",
                  success: function (res) {
                    console.log(res);
                      // url: res.event;
                  },
                  error: function () {
                      alert("there was an error while fetching events!");
                  },
                  // color: 'yellow',   // a non-ajax option
                  // textColor: 'black' // a non-ajax option
              },
          ],
          eventClick: function (info) {
              info.jsEvent.preventDefault(); // don't let the browser navigate

              if (info.event.url != "") {
                  window.open(info.event.url);
              } else {
                  return false;
              }
          },
          dayClick: function(seldate,jsEvent,view) {
            alert('Clicked on: ' + date.format());

          }
            },

          weekNumbers: true,
          dayMaxEvents: true, // allow "more" link when too many events
          eventTimeFormat: {
              hour: '2-digit',
              minute: '2-digit',
              hour12:false
          }
        });
        calendar.render();
      });

    </script>
@endpush