@extends('layouts.admin_layout')

@section('title', 'Dashboard')

@section('content')
<div class="container-fluid my-3">
  <div class="dashboard-data">
    <div class="d-flex row">
      <div class="col-md-12 col-lg-7 p-sm-0 p-md-auto">
        <div class="row h-100">
                    <x-dashboard-card :title="'Total Bill Amount Collected'" :backgroundColor="'#b8ffb9'" :icon="'icon-money'" iconBackgroundColor="'#035904'" :total="$data_one" />
          <x-dashboard-card :title="'Total Bill Generated'" :backgroundColor="'#d7ceff'" :icon="'icon-receipt'" iconBackgroundColor="'#0f014d'" :total="$data_two" />
          <x-dashboard-card :title="'Total Bill Amount Collected Today'" :backgroundColor="'#b8fdff'" :icon="'icon-history'" iconBackgroundColor="'#035904'" :total="$data_three" />
          <x-dashboard-card :title="'Total Bill Generated Today'" :backgroundColor="'#b8e6ff'" :icon="'icon-bullhorn'" iconBackgroundColor="'#035904'" :total="$data_four" />
          <x-dashboard-card :title="'Total Customers'" :backgroundColor="'#ffb8b8'" :icon="'icon-person'" iconBackgroundColor="'#450000'" :total="$data_five" />
          <x-dashboard-card :title="'Total Collectors'" :backgroundColor="'#ffceb8'" :icon="'icon-group'" iconBackgroundColor="'#632103'" :total="$data_six" />
          <x-dashboard-card :title="'Total Bill Returned Amount'" :backgroundColor="'#b8ffb9'" :icon="'icon-money'" iconBackgroundColor="'#632103'" :total="$data_seven" />
          <x-dashboard-card :title="'Total Bill Returned Amount Today'" :backgroundColor="'#d7ceff'" :icon="'icon-receipt'" iconBackgroundColor="'#0f014d'" :total="$data_eigth" />
          <div class="col-md-12 pb-2">
            <div class="card border-left-primary shadow h-100 bar-chart-wrapper">
              <div class="card-header text-primary d-flex align-items-center justify-content-between w-100 py-2">
                <div>Total Due and Collected Amount</div>
                <div class="float-right">
                  <form action="">
                    <div class="form-group m-0">
                      <select class="custom-select form-control" name="year" id="year">
                        @for ($y=2020; $y<=2035; $y++) <option value="{{ $y }}" {{ $y == \Carbon\Carbon::now()->year ? 'selected' : '' }}>{{ $y }}</option>
                          @endfor
                      </select>
                    </div>
                  </form>
                </div>
              </div>
              <div class="card-body">
                <div id="no_data" class="text-center h-100 m-auto" height="100" style="display: none">
                  <h5 class="text-danger d-flex flex-column justify-content-center h-100  "><span><i class="icon icon-exclamation-triangle" style="font-size: 55px;"></i></span><span class="pt-3">Data Not Found</span> </h5>
                </div>
                <canvas id="bar-chart" height="100"></canvas>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="col-md-12 col-lg-5">
        <div class="row">
          <div class="col-md-12 pb-2">
            <div class="card border-left-primary shadow h-100">
              <div class="card-header text-primary">
                Category Wise Collected Amount
              </div>
              <div id="no_collected_data" class="text-center h-100 m-auto" height="100" style="display: none">
                <h5 class="text-danger d-flex flex-column justify-content-center h-100  "><span><i class="icon icon-exclamation-triangle" style="font-size: 55px;"></i></span><span class="pt-3">Data Not Found</span> </h5>
              </div>
              <div class="card-body">
                <canvas id="doughnut-chart" class="doughnut-chart" height="250"></canvas>
              </div>
            </div>
          </div>
          <div class="col-md-12">
            <div class="card border-left-primary shadow h-100 line-chart-custom line-chart-wrapper" style="">
              <div class="card-header text-primary d-flex align-items-center justify-content-between w-100 py-2 text-white">
                Month Wise Bill Generated
                <div class="float-right">
                  <form action="">
                    <div class="form-group m-0">
                      <select class="custom-select form-control" id="bill_year">
                        @for ($y=2020; $y<=2035; $y++) <option value="{{ $y }}" {{ $y == \Carbon\Carbon::now()->year ? 'selected' : '' }}>{{ $y }}</option>
                          @endfor
                      </select>
                    </div>
                  </form>
                </div>
              </div>
              <div class="card-body">
                <div id="no_bill_data" class="text-center h-100 m-auto" style="display: none">
                  <h5 class="text-danger d-flex flex-column justify-content-center h-100  "><span><i class="icon icon-exclamation-triangle" style="font-size: 55px;"></i></span><span class="pt-3 text-white">Data Not Found</span> </h5>
                </div>
                <canvas id="line-chart" class="line-chart" height="125"></canvas>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="card my-3 shadow no-b r-0 dt-filter">
    <div class="card-header white">
      <h6>Dashboard</h6>
    </div>
    <div class="card-body pb-0 pt-2">
      <div class="row">
        <div class="col-md-12 form-inline">
          <form class="">
            <div class="row align-items-end">
              <div class="col-md-2">
                <div class="form-group date-picker">
                  <label class="">From: </label>
                  <input type="text" placeholder="Select Date..." class="input-sm form-control nepali-datepicker datepicker" name="from" id="from" readonly />
                </div>
              </div>
              <div class="col-md-2">
                <div class="form-group date-picker">
                  <label class="">To: </label>
                  <input type="text" placeholder="Select Date..." class="input-sm form-control nepali-datepicker" name="to" id="to" readonly />
                </div>
              </div>
              @if(Auth::user()->user_type == 'super admin')
              <div class="col-md-3">
                <div class="form-group">
                  <label class="">Branch: </label>
                  <select class="input-sm form-control" name="branch_id" id="branch_id">
                    <option value="">Select branch</option>
                    @foreach($all_branch as $branch)
                    <option value="{{$branch->id}}">{{$branch->branch_title}}</option>
                    @endforeach
                  </select>
                </div>
              </div>
              <div class="col-md-3">
                <div class="form-group">
                  <label class="">User: </label>
                  <select class="input-sm form-control" name="user_id">
                    <option value="">Select user</option>
                  </select>
                </div>
              </div>
              @endif
              @if(Auth::user()->user_type == 'branch admin')
              <div class="col-md-3">
                <div class="form-group">
                  <label class="">User: </label>
                  <select class="input-sm form-control" name="user_id">
                    <option value="">Select user</option>
                    @foreach($my_users as $users)
                    <option value="{{$users->id}}">{{$users->name}}</option>
                    @endforeach
                  </select>
                </div>
              </div>
              @endif
              <div class="col-md-2"><button type="button" id="dateSearch" class="btn btn-sm btn-primary">Search</button></div>
            </div>
          </form>
        </div>
        <div>

        </div>
      </div>
    </div>
    <!-- </div> -->
    <br>
    <div class="card-body pt-0">
      <div class="table-responsive">
        <table id="myTable" class=" display wrap table table-striped table-hover r-0 data-table">
          <thead>
            <tr class="no-b">
              <th class="visible-on-export" style="width: 50px;">SN</th>
              <th class="visible-on-export">Staff Name</th>
              <th class="visible-on-export">Monthly fee</th>
              <th class="visible-on-export">Festival Charges</th>
              <th class="visible-on-export">Registration Charges</th>
              <th class="visible-on-export">Card</th>
              <th class="visible-on-export">Other</th>
              <th class="visible-on-export">Total</th>
            </tr>
          </thead>
          <tbody>
          </tbody>
          <tfoot>
            <tr>
              <th></th>
              <th></th>
              <th></th>
              <th></th>
              <th></th>
              <th></th>
              <th></th>
              <th id="total"></th>
            </tr>
          </tfoot>
        </table>
      </div>
    </div>
  </div>
</div>
{{-- <script src="{{ asset('assets/charts/dashboard-doughnut-chart.js') }}"></script> --}}

<script type="text/javascript">
  $(document).ready(function() {
    //store chart data
    window.cBarData = JSON.parse(``);
    if (window.cBarData.record_count == 0) {
      $('#bar-chart').hide();
      $('#no_data').show();
    }

    window.cDoughnutData = ``;
    if (window.cDoughnutData.record_count == 0) {
      $('#doughnut-chart').hide();
      $('#no_collected_data').show();
    }

    window.cLineData = JSON.parse(``);
    if (window.cLineData.record_count == 0) {
      $('#line-chart').hide();
      $('#no_bill_data').show();
    }


    $('#year').on('change', function() {
      var year = $(this).val();
      $.ajax({
        url: "{{url('/dashboard/ajaxbarchart')}}/" + year,
        type: "GET",
        dataType: "json",
        success: function(data) {
          window.cBarData = data;
          window.chart2.destroy();
          $('#barchart').remove();
          $.getScript("{{ asset('assets/charts/dashboard-bar-chart.js') }}", function() {
            $('script:last').attr('id', 'barchart');
          });
          if (data.record_count == 0) {
            $('#bar-chart').hide();
            $('#no_data').show();
          } else {
            $('#bar-chart').show();
            $('#no_data').hide();
          }
        }
      });
    });

    $('#bill_year').on('change', function() {
      var year = $(this).val();
      $.ajax({
        url: "{{url('/dashboard/ajaxlinechart')}}/" + year,
        type: "GET",
        dataType: "json",
        success: function(data) {
          window.cLineData = data;
          window.chart3.destroy();
          $('#linechart').remove();
          $.getScript("{{ asset('assets/charts/dashboard-line-chart.js') }}", function() {
            $('script:last').attr('id', 'linechart');
          });
          if (data.record_count == 0) {
            $('#line-chart').hide();
            $('#no_bill_data').show();
          } else {
            $('#line-chart').show();
            $('#no_bill_data').hide();
          }
        }
      });
    });

    $('select[name="branch_id"]').on('change', function() {
      var branchId = $(this).val();
      if (branchId) {
        $.ajax({
          url: "{{url('/dashboard/ajaxuser')}}/" + branchId,
          type: "GET",
          dataType: "json",
          success: function(data) {


            $('select[name="user_id"]').empty();
            $('select[name="user_id"]').append('<option value="">Select user</option>');
            $.each(data, function(key, value) {
              $('select[name="user_id"]').append('<option value="' + value.id + '">' + value.name + '</option>');
            });


          }
        });
      } else {
        $('select[name="user_id"]').empty();
        $('select[name="user_id"]').append('<option value="">' + 'Select user' + '</option>');
      }
    });
  });
</script>
<script type="text/javascript">
  $(document).ready(function() {
    var columns = [{
        data: 'DT_RowIndex',
        name: 'DT_RowIndex',
        orderable: false,
        searchable: false,
      },
      {
        data: 'user_name',
        name: 'user_name'
      },
      {
        data: 'monthly',
        name: 'monthly'
      },
      {
        data: 'festival_charges',
        name: 'festival_charges'
      },
      {
        data: 'registration_fee',
        name: 'registration_fee'
      },
      {
        data: 'card',
        name: 'card'
      },
      {
        data: 'Others',
        name: 'Others'
      },

      {
        data: 'total',
        name: 'total'
      }
    ];

    var d = $().fetchDataTableContent({
      url: "{{ route('dashboard.report') }}",
      columns: columns,
      tableId: 'myTable',
      data: function(d) {
        d.from = $('input[name=from]').val();
        d.to = $('input[name=to]').val();
        d.user_id = $('select[name=user_id]').val();
        d.branch_id = $('select[name=branch_id]').val();
      },
      footerCallback: function(row, data) {
        var api = this.api(),
          data;
        var intVal = function(i) {
          return typeof i === 'string' ?
            i.replace(/[\$,]/g, '') * 1 :
            typeof i === 'number' ?
            i : 0;
        };

        totals = api.column(7, {
            page: 'current'
          })
          .data().reduce(function(a, b) {
            return intVal(a) + intVal(b);
          }, 0)
        $(api.column(7).footer()).html(
          'Total:' + totals.toFixed(2).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
        )
      }
    });
    $('#dateSearch').on('click', function() {
      d.draw();
    });
  });
</script>
<script type="text/javascript">
  $(document).ready(function() {
    let current = NepaliFunctions.GetCurrentBsDate();
    const disable = `${current.year}-${current.month}-${current.day}`;
    $('#to').nepaliDatePicker({
      disableAfter: disable,
    });
    $('#from').nepaliDatePicker({
      onChange: function() {
        $('#to').nepaliDatePicker({
          disableBefore: $('#from').val(),
          disableAfter: disable,
        });
      }
    });
  })
</script>
<script src="{{ asset('assets/charts/dashboard-doughnut-chart.js') }}"></script>
<script id="barchart" src="{{ asset('assets/charts/dashboard-bar-chart.js') }}"></script>
<script id="linechart" src="{{ asset('assets/charts/dashboard-line-chart.js') }}"></script>
@endsection