@extends('admin.layout.master')

@section('content')
<style>
#loader:before{
      content: attr(data-wordLoad);
      color: #000;
      position: absolute;
      top: calc(50% + 50px);
    //   left: calc(50% - 90px);
        width: 100%;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
      font-size: 1.5rem;
}
  #qtyloader {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    text-align: center;
    background: url(https://i.imgur.com/Cn9MC39.gif) 50% 50% no-repeat rgba(255,255,255,0.9);
    vertical-align: middle;
    color: #000;
    background-size: 80px;
    background-position: center;

}
#qtyloader p{
    position: fixed;
    top: calc(50% + 90px);
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    text-align: center;

    vertical-align: middle;
    color: #000;

}
#qtyloader:before{
      content: attr(data-wordLoad);
      color: #000;
      position: absolute;
      top: calc(50% + 50px);
    //   left: calc(50% - 90px);
        width: 100%;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
      font-size: 1.5rem;
}
</style>
<div id="qtyloader" class="chkoutLoader" style="display: none" data-wordLoad="Loading...">
    <!-- <h3>Your order is processing...</h3> -->
</div>
    <!-- Content Header (Page header) -->
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0">Customer Sales Rep Report</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">Customer Sales Rep Report</li>
                </ol>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->

    <div class="card">
        <div class="card-body">
            <form action="{{ route('admin.custsalerep-report') }}" id="frm_search" method="get">
                <div class="row mb-1">
                    @if(auth()->check() && empty(auth()->user()->salesrep_customerid))
                       <div class="col-2">
                           <label for="form-label">Sales Rep ID</label>
                           <select name="sales_rep_id" class="form-control" id="sales_rep_id" onchange="salesrepidsubmit()">
                               <option value=""> Select ID </option>
                               @foreach($users as $u)
                                   <option value="{{ $u->sales_rep_id }}" @if ($u->sales_rep_id == $sales_rep_id) selected @endif>{{ $u->name }} ({{ $u->sales_rep_id }})</option>
                               @endforeach
                           </select>
                       </div>
                   @endif
                    <div class="col-2">
                        <label for="form-label">Start Date</label>
                        <input type="date" class="form-control" id="start_date" value="{{ $start_date }}" name="start_date" placeholder="Start Date">
                    </div>
                    <div class="col-2">
                        <label for="form-label">End Date</label>
                        <input type="date" class="form-control" id="end_date" value="{{ $end_date }}" name="end_date" placeholder="End Date">
                    </div>
                    
                    <div class="col-2">
                        <button class="btn btn-success submitSearch" type="button" style="margin-top: 30px !important;" onclick="salesrepidsubmit()">Search</button>
                        <a class="btn btn-warning" href="{{ route('admin.custsalerep-report') }}" style="margin-top: 30px !important;">Reset</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
        
  <!-- Main content -->
  <section class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-12">
          <div class="card">
            <!-- /.card-header -->
            <div class="card-body">
              <table id="ReportList" class="table table-bordered table-striped">
                <thead class="thead-dark">
                <tr>
                  <th>No.</th>
                  <th>Customerid</th>
                  <th>Customer</th>
                  <th>Sales</th>
                  <th>Orders</th>
                  <th>Order Date</th>
                </tr>
                </thead>
                <tbody>
                    @foreach ($customers as $u)
                        <tr>
                            <td>{{ $loop->index+1}}</td>
                            <td>{{ $u->customerid }}</td>
                            <td>{{ $u->Customer }}</td>
                            <td>${{ number_format($u->Sales,2); }}</td>
                            <td>{{ $u->Orders }}</td>
                            <td>{{ date('n/d/Y g:i A',strtotime($u->orderdate)) }}</td>
                        </tr>
                    @endforeach
                </tbody>

              </table>
            </div>
            <!-- /.card-body -->
          </div>
          <!-- /.card -->
        </div>
        <!-- /.col -->
      </div>
      <!-- /.row -->
    </div>
    <!-- /.container-fluid -->
  </section>
  <!-- /.content -->

  <script>
     function salesrepidsubmit(){
            $('#qtyloader').show();
                    $('#frm_search').submit();
    }
    $(function () {



      var table = $("#ReportList").DataTable({
            "responsive": true,
            "lengthChange": false,
            "autoWidth": false,
            "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]
        });
      
     
    });
  </script>
@endsection