@extends('template.index')

@section('css')
<!-- DataTables -->
<link rel="stylesheet" href="{{ asset('template/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('template/plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('template/plugins/datatables-buttons/css/buttons.bootstrap4.min.css') }}">
<style type="text/css">/* Chart.js */
  @keyframes chartjs-render-animation{from{opacity:.99}to{opacity:1}}.chartjs-render-monitor{animation:chartjs-render-animation 1ms}.chartjs-size-monitor,.chartjs-size-monitor-expand,.chartjs-size-monitor-shrink{position:absolute;direction:ltr;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1}.chartjs-size-monitor-expand>div{position:absolute;width:1000000px;height:1000000px;left:0;top:0}.chartjs-size-monitor-shrink>div{position:absolute;width:200%;height:200%;left:0;top:0}
</style>
@endsection

@section('content')

<section class="content profile-content">

  <div class="container-fluid">
    <div class="row">
      <div class="col-md-3">
        <div class="small-box bg-info">
          <div class="inner">
            <h3 class="text-white">{{ $male_count }}</h3>
            <p class="text-white">Male</p>
            <div class="icon">
              <i class="fas fa-mars"></i>
            </div>
          </div>
        </div>
      </div>
          
      <div class="col-md-3">
        <div class="small-box bg-danger">
          <div class="inner">
            <h3 class="text-white">{{ $female_count }}</h3>
            <p class="text-white">Female</p>
            <div class="icon">
              <i class="fas fa-venus"></i>
            </div>
          </div>
        </div>
      </div>
       
      <div class="col-md-3">
        <div class="small-box bg-warning">
          <div class="inner">
            <h3 class="text-white">{{ $non_binary_count }}</h3>
            <p class="text-white">Non-binary</p>
            <div class="icon">
              <i class="fas fa-venus-mars"></i>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-3">
        <div class="small-box bg-success">
          <div class="inner">
            <h3 class="text-white">{{ $male_count + $female_count + $non_binary_count }}</h3>
            <p class="text-white">Total Patients</p>
            <div class="icon">
              <i class="fas fa-chart-bar"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-6">
        <div class="card card-primary card-outline">
          <div class="card-header">
            <div class="row">
              <h3 class="card-title col-md-4">Inventory Stocks Notifications</h3>
              <div class="col-md-4"></div>
              <select id="branch" name="branch" class="form-control select2bs4 col-md-4" >
                
              </select>
            </div>
          </div>
          <div id="notif_stocks" class="card-body" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%; flex-wrap: wrap; overflow: auto; overflow-y: scroll;">
            @if (!empty($notifications))
              @if (!empty($notifications['notif_stocks']))
                @foreach ( $notifications['notif_stocks'] as $notif_stock)
                <div class="{{ "stock_branch_".$notif_stock->branch_id }} border-bottom mb-3">
                  <p>
                    <b>{{ $notif_stock->branch }}</b><br>
                    {{ $notif_stock->name }} {{" - P" . $notif_stock->price .": " }} <b> {{ $notif_stock->total_remaining }} </b> {{ " stock/s left" }}
                  </p>
                </div>
                @endforeach
              @else
                <div class="border-bottom mb-3">
                  <p>
                    <b>No new notifications</b><br>
                  </p>
                </div>
              @endif
              
            @endif
          </div>
          <!-- /.card-body -->
        </div>
        <!-- /.card -->
      </div>

      <div class="col-lg-6">
        <div class="card card-primary card-outline">
          <div class="card-header">
            <div class="row">
              <h3 class="card-title col-md-4">Inventory Expiration Notifications</h3>
              <div class="col-md-4"></div>
              <select id="branch_exp" name="branch_exp" class="form-control select2bs4 col-md-4" >
                
              </select>
            </div>
          </div>
          <div id="notif_exp" class="card-body" style="min-height: 250px; height: 250px; max-height: 250px; max-width: 100%; flex-wrap: wrap; overflow: auto; overflow-y: scroll;">
            @if (!empty($notifications))
              @if (!empty($notifications['notif_exp']))
                @foreach ( $notifications['notif_exp'] as $notif_exp)
                <div class="{{ "exp_branch_".$notif_exp->branch_id }} border-bottom mb-3">
                  <p>
                    <b>{{ $notif_exp->branch }}</b><br>
                    {{ $notif_exp->name }} {{" - P" . $notif_exp->price .": " }} <b> {{ $notif_exp->remaining }} </b> {{ " stock/s is about to expire" }} <br>
                    On <b> {{ date('F Y', strtotime($notif_exp->expiration)) }} </b> 
                  </p>
                </div>
                @endforeach
              @else
                <div class="border-bottom mb-3">
                  <p>
                    <b>No new notifications</b><br>
                  </p>
                </div>
              @endif
            @endif
          </div>
          <!-- /.card-body -->
        </div>
        <!-- /.card -->
      </div>
    </div>

    <div class="row">
      <div class="col-lg-12">
        <div class="card card-primary card-outline">
          <div class="card-header">
            <h3 class="card-title">Patient's Location</h3>
          </div>
          <div class="card-body">
            <table id="top_provinces_table" class="table table-striped table-valign-middle">
              <thead>
              <tr>
                <th>Province</th>
                <th>Count</th>
              </tr>
              </thead>
              <tbody>
                
              </tbody>
            </table>
          </div>
        </div>
        <!-- /.card -->
      </div>
    </div>

    <div class="row">
      <div class="col-lg-6">
        <div class="card card-primary card-outline">
          <div class="card-header">
            <h3 class="card-title">Patient's Age</h3>
          </div>
          <div class="card-body">
            <div class="chart">
              <canvas id="donutChart" style="min-height: 497px; height: 497px; max-height: 497px; max-width: 100%;"></canvas>
            </div>
          </div>
          <!-- /.card-body -->
        </div>
        <!-- /.card -->
      </div>

      <div class="col-lg-6">
        <div class="card card-primary card-outline">
          <div class="card-header border-0">
            <h3 class="card-title">Top 10 Diseases</h3>
          </div>
          <div class="card-body table-responsive p-0">
            <table class="table table-striped table-valign-middle">
              <thead>
                <tr>
                  <th>Disease</th>
                  <th>Count</th>
                </tr>
              </thead>
              <tbody>
              @if (!empty($top_diseases))
                @foreach ($top_diseases as $top_disease)
                <tr>
                  <td>{{ $top_disease->disease }}</td>
                  <td>{{ $top_disease->total }}</td>
                </tr>
                @endforeach
              @else
                <tr>
                  <td>No data</td>
                  <td></td>
                </tr>
              @endif
              
              </tbody>
            </table>
          </div>
        </div>
        <!-- /.card -->
      </div>
    </div>


    <div class="row">
      <div class="col-lg-6">
        <div class="card card-primary card-outline">
          <div class="card-header border-0">
            <h3 class="card-title">Top 10 Procedures</h3>
          </div>
          <div class="card-body table-responsive p-0">
            <table class="table table-striped table-valign-middle">
              <thead>
              <tr>
                <th>Procedure</th>
                <th>Count</th>
              </tr>
              </thead>
              <tbody>
                @if (!empty($top_procedures))
                  @foreach ($top_procedures as $top_procedure)
                  <tr>
                    <td>{{ $top_procedure->procedure }}</td>
                    <td>{{ $top_procedure->count }}</td>
                  </tr>
                  @endforeach
                @else
                  <tr>
                    <td>No data</td>
                    <td></td>
                  </tr>
                @endif
                
              </tbody>
            </table>
          </div>
        </div>
        <!-- /.card -->
      </div>

      <div class="col-lg-6">
        <div class="card card-primary card-outline">
          <div class="card-header border-0">
            <h3 class="card-title">Top 10 Treatments</h3>
          </div>
          <div class="card-body table-responsive p-0">
            <table class="table table-striped table-valign-middle">
              <thead>
              <tr>
                <th>Product</th>
                <th>Count</th>
              </tr>
              </thead>
              <tbody>
                @if (!empty($top_treatments))
                  @foreach ($top_treatments as $top_treatment)
                  <tr>
                    <td>{{ $top_treatment->name }}</td>
                    <td>{{ $top_treatment->total }}</td>
                  </tr>
                  @endforeach
                @else
                  <tr>
                    <td>No data</td>
                    <td></td>
                  </tr>
                @endif
              </tbody>
            </table>
          </div>
        </div>
        <!-- /.card -->
      </div>
    </div>

  </div>

</section>

@endsection

@section('js')
<!-- DataTables  & Plugins -->
<script src="{{ asset('template/plugins/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('template/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
<script src="{{ asset('template/plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
<script src="{{ asset('template/plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>
<script src="{{ asset('template/plugins/datatables-buttons/js/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('template/plugins/datatables-buttons/js/buttons.bootstrap4.min.js') }}"></script>
<script src="{{ asset('template/plugins/jszip/jszip.min.js') }}"></script>
<script src="{{ asset('template/plugins/pdfmake/pdfmake.min.js') }}"></script>
<script src="{{ asset('template/plugins/pdfmake/vfs_fonts.js') }}"></script>
<script src="{{ asset('template/plugins/datatables-buttons/js/buttons.html5.min.js') }}"></script>
<script src="{{ asset('template/plugins/datatables-buttons/js/buttons.print.min.js') }}"></script>
<script src="{{ asset('template/plugins/datatables-buttons/js/buttons.colVis.min.js') }}"></script>
<script src="{{ asset('template/plugins/chart.js/Chart.min.js') }}"></script>
<script src="{{ asset('js/dashboard/dashboard.js') }}"></script>
@endsection