@extends('layouts.backend')

@section('extraCss')

@endsection

@section('mainContentArea')
@php 
$prices = [ 1 => '0-1499' , 2 => '1500-2499' , 3 => '2500-4999', 4 => '5000-7499' , 5 => '7500-9999', 6 => '10000 - above'];
$frequency = [ 1 => '1 - 10 days' , 2 => '11 - 15 days' , 3 => '16 - 30 days', 4 => '31 - 60 days' , 5 => '61 - 90 days' , 6 => '91 - above days'];
$timing = [ 1 => '9 - 12 am' , 2 => '12 - 6 pm' , 3 => '6 - 12 pm'];

@endphp
<div class="card card-default">
    <div class="card-header">
        <h4> Customer Reports </h4>
    </div>     

    <div class="alert alert-default" style="overflow-x:auto;">
            <form action="{{ route('customer-reports') }}" id="spscustomerreport">
                <h4>Filter  </h4>             

                <table class="table filterPosSo">
                    
                    <tr>
                        <td >Bill Range</td>
                        <td >Category</td>
                        <!-- <td >Frequancy</td>                        
                        <td >Timing </td>  -->  
                        <td>Article</td>    
                        <td>Color</td>                                    
                        <td colspan="2">ACTION</td>
                    </tr>
                    <tr>  
                         <td>
                            <select name="prices[]" id="prices" class="input-md" >  
                            <option value='' >Select</option>                              
                                @foreach($prices as $key => $price)
                                <option value="{{ $key }}" {{ ( !empty(request("prices")) && in_array($key, request("prices")) ? "selected" : "") }}>{{ $price }}</option>
                                @endforeach
                            </select>
                        </td>

                         <td>
                            <select name="subsections[]" id="subsections" class="input-md"  multiple="multiple"> 
                                <option value='' >Select</option>                                
                                @foreach($subsections as $key => $subsection)
                                <option value="{{ $subsection->subsection }}" {{ ( !empty(request("subsections")) && in_array($subsection->subsection, request("subsections")) ? "selected" : "") }}>{{ $subsection->subsection }}</option>
                                @endforeach
                            </select>
                        </td> 

                        <td>
                            <select name="article[]" id="article" class="input-md" multiple="multiple">
                                
                                 @foreach($ListArticle as $articles)
                                <option value="{{ $articles->article }}" {{ ( !empty(request("article")) && in_array($articles->article, request("article")) ? "selected" : "") }}>{{ $articles->article  }}</option>
                           
                                 @endforeach
                            </select>
                        </td>

                        <td>
                            <input name="color" id="color" class="form-control" value="{{ request('color') }}" >
                        </td>

                        <!-- <td>
                            <select name="frequency[]" id="frequency" class="input-md"  >
                               <option value='' >Select</option>                                 
                                @foreach($frequency as $key => $frequen)
                                <option value="{{ $key }}" {{ ( !empty(request("frequency")) && in_array($key, request("frequency")) ? "selected" : "") }}>{{ $frequen }}</option>
                                @endforeach
                            </select>
                        </td>
                                         
                        <td>
                            <select name="timing[]" id="timing" class="input-md"  >  
                                <option value='' >Select</option>                               
                                @foreach($timing as $key => $time)
                                <option value="{{ $key }}" {{ ( !empty(request("timing")) && in_array($key, request("timing")) ? "selected" : "") }}>{{ $time }}</option>
                                @endforeach
                            </select>
                        </td>  -->                       
                      
                       
                        <td><button class="btn btn-block btn-success" id="submit" ><i class="fa fas fa-search"></i></button></td>
                        <td><button class="btn btn-block btn-warning" type="button" onclick="window.location.href='{{ route('customer-reports') }}';"><i class="fa fas fa-refresh"></i></button></td>
                    </tr>
                </table>
            </form>
    </div> 

    <div class="d-flex justify-content-center">
       <div class="spinner-border text-primary " role="status" id="loader_div">
        <span class="sr-only">Loading...</span>
      </div>
     </div> 
            
        <div class="card-body table-responsive" >
            <table class="table table-striped table-bordered " id="salesSumarryTable">
                <thead>
                   
                    <tr>
                        <th> S.No</th>
                        <th>Customer Name</th>
                        <th>Mobile Number</th>
                        <th>Email</th>
                        <th>Registration Date</th>
                        <th>SPS Plan</th>
                        <th>City</th>                       
                        <th>view</th>  
                              
                    </tr>
                </thead>
                @php  $i= 1;@endphp
                @if(!empty($orders))
                <tbody>
                   
                    @foreach($orders as $key => $order)  
                    
                            <tr>
                                <td>{{ $i}}</td>
                                <td >{{$order['name']}}</td>
                                <td >{{$order['mobile_number']}}</td>
                               
                                <td >{{$order['email']}}</td>
                                <td >{{$order['plan_date']}}</td>
                                <td >{{$order['plan']}}</td>
                                <td >{{ $order['city'] }}</td>  
                                <td> @if(!empty($order['customer_id']))<button class="btn btn-block btn-warning" type="button" data-customer="@php echo $order['customer_id']; @endphp"
                                 data-toggle="modal" data-target="#myModal">
                                 <i class="fa fa-eye"></i></button>@endif </td>                            
                                       
                            </tr>
                            @php $i++; @endphp
                    @endforeach
                </tbody> 
               
                
                @endif
            </table>
        </div>
  
</div>

<div class="modal fade bd-example-modal-lg" id="myModal" role="dialog"  data-keyboard="false" data-backdrop="static">
    <div class="modal-dialog modal-lg">
    
      <!-- Modal content-->
      <div class="modal-content" >
        <div class="modal-header" >
          <h5> Bill's Description</h5>
          <button type="button" class="close" data-dismiss="modal">&times;</button>         
        </div>
        <div class="modal-body" >              


            <div class="table-responsive" style="margin-top:20px; " id='posdiv'>
                   <table class="table table-striped table-bordered" id='compersion' >

                        <thead>
                            <tr >
                               <th>Name</th>
                               <th>Number</th>
                               <th>Bill Date</th>
                               <th>Total MRP</th>
                               <th>Total Items</th>
                               <th>Total Clearnace</th>
                               <th>Total Other Discount</th>
                               <th>Total voucher Discount</th>
                               <th>Total SPS Discount</th>
                               <th>Total Amount</th>
                            </tr>
                        </thead>

                         <tbody>


                         </tbody>


                    </table>
            </div>
             
            
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" id='close' data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
</div>
@endsection

@section('extraJs')
<script type="text/javascript">
$(document).ready(function() {
$('#salesSumarryTable').DataTable( {
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],         
          dom: 'Bfrtip',
          buttons: ['colvis'],         
          colReorder: true, 
          paging: false 

            } );     
          } );

   jQuery("#loader_div").hide();
   $("#submit").click(function () {

   if (($('#prices').val() == '') && ($('#subsections').val() == '') && ($('#article').val() == '') && ($('#color').val() == '')) 
   {
            alert("Please Select Option for filter");
           
            $("#spscustomerreport").attr("disabled", "disabled");

            return false;
  }
  else{
        jQuery("#loader_div").show();
    }
    
});

$(function () {
  $('#myModal').on('show.bs.modal', function (event) {
    jQuery("#loader_div").show();
   $('#compersion tbody').html(''); 
   
    var button = $(event.relatedTarget); // Button that triggered the modal
    var customer = button.data('customer'); // Extract info from data-* attributes   
    var price = {!! json_encode($pricefilter) !!};
    var product = {!! json_encode($productfilter) !!};
    var article = {!! json_encode($articlefilter) !!};
    var color = {!! json_encode($color) !!};
    
    var _token   = $('meta[name="csrf-token"]').attr('content');

    console.log(price);

    $.ajax({
    url:"{{ route('customer-orders-reports') }}",
    method:"get",
    data:{customer: customer,prices:price,product:product,article:article,color:color, _token:_token},
    dataType: "json",
    success: function(response) {  
           jQuery("#loader_div").hide();
           $('#compersion tbody').html('');  
           console.log(response);
           $.each(response, function(propNames, propVal) {
              console.log(propNames, propVal); 
              console.log(propVal); 
               
               $('#compersion tbody').append("<tr><td>" + propVal.name  + "</td><td>" +  propVal.telephone + "</td><td>" + propVal.bill_date + "</td><td>" + propVal.total_mrp + "</td><td>" + propVal.total_items + 
                "</td><td>" + propVal.total_clearance + "</td><td>" + propVal.total_discount + "</td><td>" + propVal.total_voucher_discount + "</td><td>" + propVal.total_sps_discount + "</td><td>" + propVal.final_amt + 
                 "</td></tr>");
                  
            });  
        },
    error: function(response) {
          console.log(response.responseJSON);
    }
    

   })
   
  });
});
</script>
@endsection