@extends('layouts.backend')
@section('extraCss')
<style>
.site-footer {
    position: relative!important;
}
.tooltip {  
  opacity:1!important;
}
.tooltip .tooltiptext {
  visibility: hidden;
  
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px; 
    position: absolute;
  z-index: 1;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
@section('mainContentArea')
<div class="card card-default">
   
    <div class="card-body table-responsive">
        <div class="alert alert-default">
            <form action="">
                <h4>Customer</h4>
                <table class="table">
                    <tr>
                        
                        <td>Customer Name </td>
                        <td>Telephone</td>                                              
                        <td>City</td>                      
                        <td>SPS</td>                      
                        <td>ACTION</td>
                    </tr>
                    <tr>
                        <td>
                            <input name="customer" id="customer" class="form-control" value="{{ request('customer') }}">
                        </td>
                        <td>
                            <input name="telephone" id="telephone" class="form-control" value="{{ request('telephone') }}">
                        </td>                                                 
                        <td>
                            <input name="city" id="city" class="form-control" value="{{ request('city') }}">
                        </td>
                        <td>
                                                         
                                <select name="sps" id="sps" class="form-control">
                                <option value="">Select</option>                                
                                <option value="0">NO</option>
                                <option value="1">YES</option>
                                </select>
                               
                        </td>
                        <td><button class="btn btn-block btn-success"><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-details')}}';"><i class="fa fas fa-refresh"></i></button></td>
                    </tr>
                </table>
            </form>
        </div>
        <table class="table table-bordered data-table">
            <thead>
                <tr>
                    
                    <th>First Name</th>
                    <th>Email</th>
                    <th>telephone</th>                   
                    <th>Is SPS</th>                   
                    <th>City</th>                   
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @if($customers->count() > 0)
                   
                @foreach($customers as $customer)
                <tr>                               
                    <td>{{ empty($customer->firstname) ? 'N/A' : $customer->firstname }}</td>                   
                    <td>{{ empty($customer->email) ? 'N/A' : $customer->email }}</td>
                    <td>{{ empty($customer->telephone) ? 'N/A' : $customer->telephone }}</td>
                    <td>{{ !empty($customer->allSpsInfo->current) ? 'Yes' : 'No' }}</td>
                    <td>{{ !empty($customer->CityInfo) ? $customer->CityInfo->city : 'N/A'  }} </td>
                    <td>
                        <!--a href="{{ route('buying',['id' => $customer->customer_id]) }}" class="btn btn-sm btn-block btn-primary"><i class="fa fas fa-pencil"></i> Buying</a-->
                        <button type="button" class="btn btn-info" onclick="showDetails({{ $customer->customer_id }})"  data-toggle="modal"  data-target="#myModal"><i class="fa fas fa-eye"></i></button>        
                     
                        

                    </td>
                </tr>
                 
                @endforeach
                @else
                <tr>
                    <td colspan="8"><div class="alert alert-danger">No product found!</div></td>
                </tr>
                @endif
            </tbody>
        </table>
        <div class="text-right">
            @if($customers instanceof \Illuminate\Pagination\LengthAwarePaginator)
            {!! $customers->render() !!}
        @endif
        </div>
    </div>
</div>

<!-- The Modal -->
<div class="modal bd-example-modal-lg" id="myModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Customer Buying Details</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- Modal body -->
            <div class="modal-body">                
                    <div class="alert alert-default"> 
                    <h5 style="color:green">Note:hover/click on date </h5>  
                        <table class="table table-bordered data-table" id="buyer">
                        <thead>
                        <tr>
                        <td>Range </td>
                        <td>Frequency</td>                                              
                        <td>Type</td>                                               
                        <td>Timing</td>
                        <td>Discount</td>                       
                    </tr>
                    </thead>
                    <tbody class="dataRes">                      
                            
                    </tbody>
                </table>                                        
                </div>                
            </div>
            <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-----MODEL END ----->

@endsection

@section('extraJs')
<script>
    function showDetails(customer){ 
        var c = customer;
        //alert(c);
        $.ajax({            
                    url : 'customerdata?customer="+c',                   
                    type: 'GET',                    
                    data:{id:c},
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')                        
                    },
                    success:function(data){    
                        $('.dataRes').html(data)
                        
                    },
                    
        });
       
    }
    </script>   

@endsection