@extends('layouts.app')

@section('content')
{{ App::setLocale(Cookie::get('my_locale')) }}
 <!--  BEGIN CONTENT AREA  -->
    <div class="content-header" style="margin-top:-30px;">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1 class="m-0 text-dark">{{__('messages.monthreport')}}</h1>
          </div><!-- /.col -->
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <!-- <li class="breadcrumb-item"><a href="#">Home</a></li>
              <li class="breadcrumb-item active">Transactions</li> -->
            </ol>
          </div><!-- /.col -->
        </div><!-- /.row -->
      </div><!-- /.container-fluid -->
    </div>
  

    <section class="content">
      <div class="container-fluid">
       
      <div class="row">
          <div class="col-md-12">
            <div class="card">
              <div class="card-header">
                <h5 class="card-title">{{__('messages.monthreport')}}</h5>

                <div class="card-tools">
                  <!-- <button type="button" class="btn btn-tool" data-card-widget="collapse">
                    <i class="fas fa-minus"></i>
                  </button> -->
                  <div class="btn-group">
                    <button type="button" class="btn btn-tool dropdown-toggle" data-toggle="dropdown">
                      <i class="fas fa-wrench"></i>
                    </button>
                    <div class="dropdown-menu dropdown-menu-right" role="menu">
                      <a href="#" class="dropdown-item" data-toggle="modal" data-target="#month_modal">{{__('messages.choosemonth')}}</a>
                      
                    </div>
                  </div>
                  <!-- <button type="button" class="btn btn-tool" data-card-widget="remove">
                    <i class="fas fa-times"></i>
                  </button> -->
                </div>
              </div>
              <!-- /.card-header -->
              <div class="card-body">
                <div class="row">
                  <div class="col-md-8">
                    <p class="text-center">
                      <strong>{{__('messages.transactions')}}: <a id="daterange"></a></strong>
                    </p>

                    <div class="chart">
                      <!-- Sales Chart Canvas -->
                      <canvas id="salesChart" height="180" style="height: 180px;"></canvas>
                    </div>
                    <!-- /.chart-responsive -->
                  </div>
                  <!-- /.col -->
                  <div class="col-md-4">
                    <p class="text-center">
                      <strong>{{__('messages.Completion rate')}}</strong>
                    </p>

                    <div class="progress-group">
                      {{__('messages.incomings')}}
                      <span id="inall" class="float-right"></span>
                      <div class="progress progress-sm">
                        <div id="inallprogress" class="progress-bar bg-primary" style="width: 180%"></div>
                      </div>
                    </div>
                    <!-- /.progress-group -->

                    <div class="progress-group">
                      {{__('messages.outgoings')}}
                      <span id="outall" class="float-right"></span>
                      <div class="progress progress-sm">
                        <div id="outallprogress" class="progress-bar bg-danger" style="width: 100%"></div>
                      </div>
                    </div>

                    <!-- /.progress-group -->
                    <div class="progress-group">
                      <span class="progress-text">{{__('messages.internal transactions')}}</span>
                      <span id="internalall" class="float-right"></span>
                      <div class="progress progress-sm">
                        <div id="internalallprogress" class="progress-bar bg-success" style="width: 100%"></div>
                      </div>
                    </div>

                    <!-- /.progress-group -->
                    <div class="progress-group">
                      {{__('messages.archived')}}
                      <span id="archiveall" class="float-right"></span>
                      <div class="progress progress-sm">
                        <div id="archiveallprogress" class="progress-bar bg-warning" style="width: 100%"></div>
                      </div>
                    </div>
                    <!-- /.progress-group -->
                  </div>
                  <!-- /.col -->
                </div>
                <!-- /.row -->
              </div>
              <div class="modal fade" id="month_modal">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header bg-success">
                            <h4 class="modal-title">{{__('messages.choosemonth')}}</h4>
                            <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body text-center">
                            <p><h4>{{__('messages.surechoosemonthe')}}</h4></p>
                            <p>
                              <input type="month"
                                    name="month1" id="month1"
                                    class="form-control ">
                              <input type="month"
                                    name="month2" id="month2"
                                    class="form-control ">
                            </p>
                        </div>
                        <div class="modal-footer justify-content-between">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">{{__('messages.cancel')}}</button>
                            <a onclick="changeresult()" class="btn btn-success" data-dismiss="modal">{{__('messages.ok')}}</a>
                        </div>
                    </div>
                </div>
              </div>
              <!-- ./card-body -->
              <div class="card-footer">
                <div class="row">
                  <div class="col-sm-3 col-6">
                    <div class="description-block border-right">
                      <span id="sincelastmonthpercent" class="description-percentage "><i class="fas fa-caret-up"></i></span>
                      <h5 id="sincelastmonth" class="description-header"></h5>
                      <span class="description-text">{{__('messages.sincelastmonth')}}</span>
                    </div>
                    <!-- /.description-block -->
                  </div>
                  <!-- /.col -->
                  <div class="col-sm-3 col-6">
                    <div class="description-block border-right">
                      <span id="externalpercent" class="description-percentage "><i class="fas fa-caret-down"></i></span>
                      <h5 id="externalpercentthis" class="description-header"></h5>
                      <span class="description-text">{{__('messages.externaltransactions')}}</span>
                    </div>
                    <!-- /.description-block -->
                  </div>
                  <!-- /.col -->
                  <div class="col-sm-3 col-6">
                    <div class="description-block border-right">
                      <span id="internalpercent" class="description-percentage "><i class="fas fa-caret-up"></i></span>
                      <h5 id="internalpercentthis" class="description-header"></h5>
                      <span class="description-text">{{__('messages.internaltransactions')}}</span>
                    </div>
                    <!-- /.description-block -->
                  </div>
                  <!-- /.col -->
                  {{-- <div class="col-sm-3 col-6">
                    <div class="description-block">
                      <span class="description-percentage text-danger"><i class="fas fa-caret-down"></i> 18%</span>
                      <h5 class="description-header">41</h5>
                      <span class="description-text">{{__('messages.vacations')}}</span>
                    </div>
                  </div> --}}

                </div>
                <!-- /.row -->
              </div>
              <!-- /.card-footer -->
            </div>
            <!-- /.card -->
          </div>
          <!-- /.col -->
        </div>
        

      </div>
    </section>
  
    <script src="{{ asset('plugins/chart.js/Chart.min.js') }}"></script>
    <!-- <script src="{{ asset('dist/js/pages/dashboard2.js') }}"></script> -->

    <script src="{{ asset('plugins/moment/moment-with-locales.min.js') }}"></script>
    <script src="{{ asset('plugins/tempusdominus-bootstrap-4/js/tempusdominus-bootstrap-4.min.js') }}"></script>
    <!-- <script src="{{ asset('dist/js/pages/dashboard.js') }}"></script> -->

<script>

changeresult();

  function changeresult(){
    var month1, month2;
      if($('#month1').val() == ''){
        month1 = 'this';
      }else{
        month1 = $('#month1').val();
      }
      if($('#month2').val() == ''){
        month2 = 'last';
      }else{
        month2 = $('#month2').val();
      }
      // alert('{{ url("reports.month") }}'+ '/'+month1+'/'+month2);
      //-----------------------
      //- MONTHLY SALES CHART -
      //-----------------------

      // Get context with jQuery - using jQuery's .get() method.
      var salesChartCanvas = $('#salesChart').get(0).getContext('2d')
// alert('{{ url("reports.month") }}'+ '/'+month1+'/'+month2);
      var array, days = [];
      $.ajax({
          type:'GET',
          async: false,
          url:'{{ url("reports.month") }}'+ '/'+month1+'/'+month2,
          data:'_token =