@extends('main')
@section('css')
    <style>
        html{
            font-size: 80%;
        }
    </style>
@endsection
@section('content')

    <section class="content-header">
        <div class="container-fluid">
            <div class="card-header">
                <h6 style="text-align:center;">{{$vars['title']}}</h6>
            </div>
            <form method="POST"   class="prevent-resubmit-form" id="general_reports" enctype="multipart/form-data" >
                <div class="row">
                    @csrf
                    @include('areas.inputForm.inputZone',['colDiv'=>'col-md-2', ])
                    @include('areas.inputForm.inputRegion',['colDiv'=>'col-md-2', ])
                    @include('areas.inputForm.inputDistrict',['colDiv'=>'col-md-2', ])
                    @include('areas.inputForm.inputWard',['colDiv'=>'col-md-2', ])
                    @include('areas.inputForm.inputVillage',['colDiv'=>'col-md-1', ])
                    <div class="col-md-1">
                        <label>From Month</label>
                        <input name="from_month" type="month" id="from_month_input" value="" max="{{ date('Y-m') }}" class="form-control" >
                    </div>
                    <div class="col-md-1">
                        <label>End Month</label>
                        <input name="end_month" type="month" id="end_month_input" value="" max="{{ date('Y-m') }}" class="form-control" >
                    </div>
                    <div class="col-md-1">
                        <button type="submit" style="margin-top: 30px;" class="btn btn-success" >Filter</button>
                    </div>

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

    </section>
    <section class="content">
        <div class="container-fluid">
            <div class="card card-outline card-orange">
                <div id="general_reports_details" class="general_reports_details">
                </div>
                <div id="general_reports_factory" class="general_reports_factory">
                </div>
            </div>

            <div class="row">
                <div  class=" col-md-6 col-sm-6 col-12">
                    <div id="factory_production_append" class="card" style="padding-left: 2px; padding-right: 2px">
                    </div>

            </div>
                <div  class=" col-md-6 col-sm-6 col-12">
                    <div id="general_reports_blender" class="card" style="padding-left: 2px; padding-right: 2px">
                    </div>
                </div>
            </div>

        </div><!-- /.container-fluid -->
    </section>
@endsection



@section('js')

@include('areas.script')
  <script type="text/javascript">

      let factoryProduction;
      @if(isset($vars['period']))
      $(document).ready(function() {
          var title = "{{\App\Models\SysConfig:: set()['owner_full_name']}}\n{{ \App\Models\SysConfig::set()['address']." "  }}\n Mob. {{ \App\Models\SysConfig::set()['mob_no'] }} \n E-mail: {{ \App\Models\SysConfig::set()['email'] }}  \n{{$vars['title']}}";

          $('#made_tea_table_here_populate').DataTable( {
              dom: 'Bfrtip',
              responsive: false,
              destroy: true,
              "ordering": false,
              "paging":   false,
              buttons: [{
                  text: 'copy',
                  extend: "copy",
                  className: 'btn bg-navy margin',
                  title: title,
                  exportOptions: {
                      columns: "thead th:not(.noExport)"
                  },
              }, {
                  text: 'csv',
                  extend: "csv",
                  className: 'btn bg-navy margin',
                  title: title,
                  exportOptions: {
                      columns: "thead th:not(.noExport)"
                  },
              }, {
                  text: 'excel',
                  extend: "excel",
                  className: 'btn bg-navy margin',
                  title: title,
                  exportOptions: {
                      columns: "thead th:not(.noExport)"
                  },
              }, {
                  text: 'pdf',
                  extend: "pdf",
                  className: 'btn bg-navy margin',
                  title: title,
                  exportOptions: {
                      columns: "thead th:not(.noExport)"
                  },
              }, {
                  text: 'print',
                  extend: "print",
                  className: 'btn bg-navy margin',
                  title: '<h3 style="font-weight: bold; text-align: center; margin-top: 7px; color: #000"> {{\App\Models\SysConfig:: set()['owner_full_name']}}  <br>{{ \App\Models\SysConfig::set()['address']." "  }} <br> </h3> <h4 style=" font-weight: bold; text-align: center; margin-top: -10px; color: #000" >Mob. {{ \App\Models\SysConfig::set()['mob_no'] }} <br>E-mail: {{ \App\Models\SysConfig::set()['email'] }}</h4><hr style="border: 2px solid #160840;"><h4 style=" font-weight: bold; text-align: center; margin-top: -10px; color: #000" > {{$vars['title']}}</h4>',
                  exportOptions: {
                      columns: "thead th:not(.noExport)"
                  },
              }],
          });
      } );
      @endif

    $(document).on("change","#from_month_input",function () {
          var from = $(this).val();
        var from = from+"-01";
        var myDate = new Date(from);
        myDate.setMonth(myDate.getMonth()+1);
        var minDate = myDate.toLocaleDateString('en-us', { month:"numeric",year:"numeric",});
        var res = minDate.split("/");
        var newDate = res[1]+"-"+res[0];
        document.getElementById("end_month_input").setAttribute("min", newDate);
    })

    $(document).on("submit","#general_reports",function (e) {
          e.preventDefault()
          var from = $("#from_month_input").val();
          var from = from+"-01";
          let end = $("#end_month_input").val();
           end = end+"-01";
          if(from == end){return;}
          var fromDate = new Date(from);
          var endDate = new Date(end);

          if(monthDiff(fromDate,endDate) == 0){
              $("#end_month_input").addClass("is-invalid");
              $("#from_month_input").addClass("is-invalid");
              snackbartext("danger","Please Select Valid Month Range");
              return;
          }
          var formdata = new FormData(this);

          loadDetailReport(formdata,'general_reports_details','bounce');
          loadDetailReport(formdata,'general_reports_factory','win8_linear');
          loadDetailReport(formdata,'general_reports_blender','win8');
          // $('.display_when_ready').toggle('slow');
      })

    $(document).on("change","#from_month_input",function () {
          if($(this).hasClass("is-invalid")){
              $(this).removeClass("is-invalid");
          }
    })

    $(document).on("change","#end_month_input",function () {
        if($(this).hasClass("is-invalid")){
            $(this).removeClass("is-invalid");
        }
    })

    function monthDiff(d1, d2) {
        var months;
        months = (d2.getFullYear() - d1.getFullYear()) * 12;
        months -= d1.getMonth();
        months += d2.getMonth();
        return months <= 0 ? 0 : months;
    }

    $(document.body).addClass('sidebar-collapse');

    const loadDetailReport = (formdata,idElement,loader)=>{
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            type: "POST",
            url: `/${idElement}`,
            processData: false,
            cache: false,
            contentType: false,
            data: formdata,
            beforeSend: function () {
                run_waitMe(`${loader}`, `${idElement}`, 'Fetching');
            },
            complete: function () {
                $(`#${idElement}`).waitMe("hide");
            },
            success: function (data) {
                $(`#${idElement}`).replaceWith(data.view)
                if(typeof data.factory !== 'undefined'){
                    $(`#factory_production_append`).replaceWith(data.factory);
                }
                if(typeof data.blender !== 'undefined'){
                    $(`#general_reports_blender`).replaceWith(data.blender);
                }
            },
            error: function (xhr, ajaxOptions, thrownError){
                $('#general_reports_details').append('<h3 class="text-danger">Something Went Wrong Please Search Again</h3>')
            }
        });
    }
  </script>

@endsection