@extends('irban.irban-template')
@section('title', $title)
@section('css')
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
@endsection

@section('content')

  <div class="content-wrapper">

    <div class="dashboard-header d-flex flex-column grid-margin">
      <div class="d-flex align-items-center justify-content-between flex-wrap border-bottom pb-3 mb-3">
        <div class="d-flex align-items-center">
          <h4 class="mb-0 font-weight-bold">{{$title}}</h4>
          <div class="d-none ml-3 mt-2 d-md-flex">
            <p class="text-muted mb-0 tx-13 cursor-pointer">Home</p>
            <i class="mdi mdi-chevron-right text-muted"></i>
            <p class="text-muted mb-0 tx-13 cursor-pointer">Export Excel Laporan</p>
          </div>
        </div>
        <div class="button-wrapper d-flex align-items-center mt-md-3 mt-xl-0">
          
        </div>
      </div>
    </div>


    <div class="row">
        <div class="col-lg-12 grid-margin stretch-card">
            <div class="card">
              <div class="card-body">
                <form action="{{route('irban.export.laporan')}}" method="post">@csrf
                  <div class="row">
                    <div class="col-6">
                      <input type="text" name="daterange" class="form-control" value="{{date("m/d/Y", strtotime($from))}} - {{date("m/d/Y", strtotime($to))}}"/>
                    </div>
                    <div class="col-6">
                      <button type="submit" class="btn btn-primary btn-block">Export Laporan</button>
                    </div>
                  </div>
                </form>
               <hr>
               @include('exports.export-laporan')

               <hr>
               <div class="text-center">
                {{$laporans->appends(request()->input())->links()}}
              </div>
              </div>
            </div>
        </div>
    </div>
  </div>
@endsection

@section('script')
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<script>
  
$('input[name="daterange"]').daterangepicker({
    ranges: {
      'Today': [moment(), moment()],
      'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
      'Last 7 Days': [moment().subtract(6, 'days'), moment()],
      'Last 30 Days': [moment().subtract(29, 'days'), moment()],
      'This Month': [moment().startOf('month'), moment().endOf('month')],
      'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    }
}, function(start, end, label) {
      var service = $('#service').val();
      var status = $('#status').val();
      var url = "{{url()->current()}}?from="+start.format('YYYY-MM-DD')+ "&to=" + end.format('YYYY-MM-DD');

      window.location.replace(url);
});



</script>
@endsection