@extends('layouts.app')

        @section('styles')
<style>
    .ui-menu-item{
        background: white !important; 
        color: black !important;
    }
    .ui-menu-item:hover{
        background: white !important; 
    }
    .ui-menu-item-wrapper{
         background: white !important; 
          color: black !important;
         
    }
    
    .ui-autocomplete {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  list-style: none;
  font-size: 14px;
  text-align: left;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  background-clip: padding-box;
}

.ui-autocomplete > li > div {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #333333;
  white-space: nowrap;
}

.ui-state-hover,
.ui-state-active,
.ui-state-focus {
  text-decoration: none;
  color: #262626;
  background-color: #f5f5f5;
  cursor: pointer;
}

.ui-helper-hidden-accessible {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
</style>
        @endsection

            @section('content')
            
            

                             <!-- PAGE-HEADER -->
                            <div class="page-header">
                                <h1 class="page-title">Coupons</h1>
                                <div>
                                    <ol class="breadcrumb">
                                        <li class="breadcrumb-item"><a href="javascript:void(0)">Home</a></li>
                                         <li class="breadcrumb-item"><a href="javascript:void(0)">Coupons</a></li>
                                        <li class="breadcrumb-item active" aria-current="page">Add Coupons</li>
                                    </ol>
                                </div>
                            </div>
                            <!-- PAGE-HEADER END -->

                            <!-- ROW-1 OPEN -->
                            @canany(['coupon-create','coupon-edit'])
                            <div class="row">
                                <div class="col-lg-12 col-md-12">
                                    <div class="card">
                                        <div class="card-header">
                                            <h3 class="card-title">Add Coupon</h3>
                                        </div>
                                        <div class="card-body">
                                                <form method="POST" id="createForm" class="myform" enctype="multipart/form-data">  
                                                    <input id="csrf_token" type="hidden" value="{{ csrf_token() }}">
                                                    <input id="coupon_id" name="coupon_id" type="hidden" value="">
                                                    
                                                    @csrf
                                        <input type="hidden" name="customer_id" value="" id="customer_id">         
                                                <div class="form-row">
                                            
                                                    <div class="col-xl-3 mb-3">
                                                        <label for="validationTooltip01">Coupon  *</label>
                                                        <input data-parsley-required-message="Coupon  Required" type="text" class="form-control" name="coupon_name" id="coupon_name"
                                                            value="" required>
                                                            
                                                    </div>
                                                   
                                                   
                                                        <div class="col-xl-3 mb-3">
                                                        <label for="validationTooltip01">Coupon Code   *</label>
                                                        <input data-parsley-required-message="Coupon Code Required" type="text" class="form-control" name="coupon_code" id="coupon_code"
                                                            value="" required>    
                                                    </div>
                                                         <div class="col-xl-3 mb-3">
                                                        <label for="validationTooltip01">Description *</label>
                                                        <textarea class="form-control" name="description" id="description" required="required" data-parsley-required-message="Description Required" value="" > </textarea>   
                                                    </div>
                                                    
                                        <div class="col-xl-3 mb-3">
                                                        <label for="validationTooltip01">Choose Customer Name *</label>
                                                        <input  type="text" class="form-control" required="required" data-parsley-required-message="Customer Required" name="customer_name" id="customer_name" value="" >    
                                                    </div>
                                                    
                                                    
                                        <div class="col-xl-3 mb-3 review_id_list d-none">
                                            
                                            
                                        <label for="validationTooltip01">Review Id </label>
                                                        
                                       <select  class="form-control change_review_id"  
                                        name="review_id" id="review_id"  >
                                                
                                        <option data-id="" value=""> Choose Review ID </option>
                                                
                                            </select>
                                        </div>
                                        
                                                                                <div class="col-xl-1 mt-5 view_review_div d-none">
                                                                                
                                      <button type="button" class="btn btn-icon  btn-primary view_review_btn"><i class="fe fe-eye"></i></button>   
                                            
                                        </div>
                                        
                                        
                                        
                                                      
                                          
                                                 
                                                </div>
                                                @can('coupon-create')
                                                <a id="create_btn" href="#" onclick="createOrUpdate('add_coupon', 'createForm', '', 'table_datatable','')" class="btn btn-primary"><i class="fa fa-save"></i> Save</a>
                                                @endcan
                                                @can('coupon-edit')
                                                <a  id="update_btn" style="display: none" href="#" onclick="createOrUpdate('update_coupon', 'createForm', '', 'table_datatable','')" class="btn btn-primary"><i class="fa fa-save"></i> Update</a>
                                                @endcan
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                             @endcanany
                            <!-- /ROW-1 CLOSED -->

                               <!-- Row -->
                        @can('coupon-list')
                        <div class="row row-sm">
                            <div class="col-lg-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h3 class="card-title">View Coupons</h3>
                                    </div>
                                    <div class="card-body">
                                        <div class="table-responsive">
                                             <table  class="table table-bordered text-nowrap border-bottom " style="width: 100% !important;" id="table_datatable">
                                                <thead class="text-center">
                                                    <tr>
                                                        <th class="wd-15p border-bottom-0">#</th>
                                                        <th class="wd-15p border-bottom-0">Coupon Name</th>
                                                        <th class="wd-15p border-bottom-0">Coupon Code</th>
                                                <th class="wd-15p border-bottom-0">Customer Name</th>
                                                        <th class="wd-15p border-bottom-0">Review Id</th>
                                            <th class="wd-15p border-bottom-0">Status</th>
                                                        <th class="wd-15p border-bottom-0">Added By</th>
                                                        <th class="wd-10p border-bottom-0">Actions</th>
                                                    </tr>
                                                </thead>
                                               
                                            </table>
                                    
                                            <div class="col-sm-12 col-md-12">                                             
                                        </div>
                                        </div>
                                    </div>
                        

                                </div>
                               
                            </div> 
                        </div> 
                        @endcan
                        <!-- End Row -->

                         <!-- Modal -->
               


                        <div class="modal  fade" id="smallmodal" tabindex="-1" role="dialog">
                            <div class="modal-dialog modal-sm" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title">Delete</h5>
                                        <button class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">×</span>
                                            </button>
                                    </div>
                                    <div class="modal-body">
                                        <p>Do you want to delete the Coupon ?</p>
                                    </div>
                                    <div class="modal-footer">
                                        <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                                        <button onclick="delete_item()" class="btn btn-primary">Delete</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
              {{-- ############View Modal######################### --}}
        
           <div class="modal fade" id="scrollingmodal" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-lg " role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">View Coupons</h5>
                        <button class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                    </div>
                    <div class="modal-body" id="view_modal_body">
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <!--<button class="btn btn-primary">Save changes</button>-->
                    </div>
                </div>
            </div>
        </div>
        
    {{-- ####################End Of View Modal############ --}}
    
    
                            
        {{-- ############View Modal######################### --}}
        
           <div class="modal fade" id="review_scrollingmodal" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-lg " role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Customer Feedback</h5>
                        <button class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                    </div>
                    <div class="modal-body" id="review_view_modal_body">
                      
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <!--<button class="btn btn-primary">Save changes</button>-->
                    </div>
                </div>
            </div>
        </div>
        
    {{-- ####################End Of View Modal############ --}}
    

                        
                        

            @endsection
              @section('scripts')  
{{-- ################################Jquery Datatable########################### --}}
   <script src="{{asset('assets/jquery-datatable/jquery.min.js')}}"></script>
   <link rel="stylesheet" type="text/css" href="{{asset('assets/jquery-datatable/jquery.dataTables.css')}}">
   <script src="{{asset('assets/jquery-datatable/jquery.dataTables.js')}}"></script>
 {{-- ########################################################################## --}}
 
  
    
 <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"
      integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    
{{--             
    <link rel="stylesheet" type="text/css" href="{{asset('jqueryui/jquery-ui.min.css')}}">

    <!-- Script -->
    <script src="{{asset('jquery-3.3.1.min.js')}}" type="text/javascript"></script>
    <script src="{{asset('jqueryui/jquery-ui.min.js')}}" type="text/javascript"></script> --}}
    
    
    

        <script>
    var public_url="{{url('/')}}/{{env('ADMIN_PANEL_ROUTE')}}";
    var token = $("meta[name=csrf-token]").attr("content");  
    var datatable_name="table_datatable";
    var coloumn_data=['coupon_id','coupon_name','coupon_code','customer_name','coupon_review_id','coupon_claim_status','name','coupon_id'];
    var coloumn_array=[];
    for (let i = 0; i <coloumn_data.length; i++) {
        coloumn_array.push({"data": ""+coloumn_data[i]+"", "name": ""+coloumn_data[i]+""});
    }
    $('#table_datatable').DataTable({
        "responsive": true,
       "serverSide": true,
       "ordering": true,
       "searching": true,
       "bLengthChange": false,
       "info":false,
       "bSort": true,
       "order": [
           [0, 'desc']
       ],
       "columnDefs": [{
               "targets": [0,coloumn_data.length-1],
               "orderable": false
           },
           {"className": "text-center", "targets": [0,2,4,5,6,7]},
           {"className": "text-left", "targets": [1,3]},
           {"orderable": false, "targets": [7]}
           
       ],
       "displayLength":10,
       "ajax": {
           "url":  public_url+"/coupon_datatable",
           "type": "post",
           "data": function (data) {
                data._token = token;
              
               return data;
  
           }
       }, "AutoWidth": true,
       "columns":coloumn_array,
      
      "fnCreatedRow": function (nRow, aData, iDataIndex) {
          var info = this.dataTable().api().page.info();
          var page = info.page;
          var length = info.length;
          var index = (page * length + (iDataIndex + 1));
          var action="";
          var created_at=aData.created_at.substring(0, 10);
            //View Function
            var action=action+'&nbsp;<button title="View"  onclick=View('+aData.coupon_id+') id="bEdit" type="button" class="btn btn-sm custom-btn-success"><span class="fe fe-eye"> </span></button>';
            //Edit Action 
            @can('customer-edit')
            var action=action+'&nbsp;<button title="Edit"  onclick=edit('+aData.coupon_id+') id="bEdit" type="button" class="btn btn-sm custom-btn-info"><span class="fe fe-edit"> </span></button>';
            @endcan
            //Delete Action
            @can('customer-delete')
            var action=action+'&nbsp;<button title="Delete" onclick="delete_modal('+aData.coupon_id+')" id="bDel" type="button" class="btn  btn-sm custom-btn-danger"><span class="fe fe-trash-2"> </span></button>';
            @endcan
            
            if(aData.coupon_claim_status==0){
                var cliam_status='<span class="badge bg-warning-gradient badge-sm  me-1 mb-1 mt-1">Not Claimed</span>';
                
            }
            else{
                var cliam_status='<span class="badge bg-success-gradient badge-sm  me-1 mb-1 mt-1">Claimed</span>';
            }
            
            $('td:eq(0)', nRow).html(index);
            $('td:eq(5)', nRow).html(cliam_status).addClass('text-center');
            $('td:eq(7)', nRow).html(action).addClass('text-center');
         
 }
 });

//        // #################### Edit Section ############################
                function edit(id){
                $.ajax({
                    type: 'POST',
                    data: {"_token": token,"id": id},
                    url: public_url+'/edit_coupon',
                    success: function (data) {
                        var result=data.coupon;
                        var customer_reviews=data.customer_reviews;
                        console.log(customer_reviews);
                        $('#coupon_id').val(result.coupon_id);
                        $('#coupon_name').val(result.coupon_name);
                        $('#coupon_code').val(result.coupon_code);
                        $('#description').val(result.coupon_desc);
                        $('#customer_name').val(result.customer_name+'-'+result.customer_mob);
                        $('#customer_id').val(result.customer_id);
                       // $('#review_id').val(result.coupon_review_id);
                        //Review_id Add Section
                        if(result.coupon_review_id){
                             $('#review_id').html('<option data-id="0" value="">Choose Review ID</option>');
                            $('.review_id_list').removeClass('d-none');
                                                            // alert(result.coupon_review_id);

                            for(var i=0;i<customer_reviews.length;i++){
                                // alert(customer_reviews[i].form_data_unique_id);
                                if(customer_reviews[i].form_data_unique_id==result.coupon_review_id){ var selected="selected"; }else{ var selected=""; }
                                $('#review_id').append('<option '+selected+' data-id="'+customer_reviews[i].form_data_id+'" value="">'+customer_reviews[i].form_data_unique_id+'</option>');
                            }
                        }
                        //End Of Review ID Add Section
                        $('#create_btn').hide();
                        $('#update_btn').show();
                        $('#back-to-top').click();
                        }
                })
                }
//       // #################### End Of Edit Section ####################
//      // #################### Delete Section ##########################
                    function delete_modal(id){
                    $('#coupon_id').val(id);
                    $('#smallmodal').modal('show');
                    }
                    function delete_item(){
                    var id=$('#coupon_id').val();
                    $.ajax({
                        type: 'POST',
                        data: {"_token": token,"id": id},
                        url: public_url+'/delete_coupon',
                        success: function (result) {
                        $('#smallmodal').modal('hide');
                        toast(result,datatable_name);
                        }
                    })
                    }
//      // #################### End Of Delete Section ##################

        // #########################View Section ##########################
        function View(id){
            $.ajax({
                        type: 'POST',
                        data: {"_token": token,"id": id},
                        url: public_url+'/view_coupons',
                        success: function (result) {    
                           $('#view_modal_body').html(result);
                           $('#scrollingmodal').modal('show');
                        }
                    })
        }
        // ###############################################################



// AUTOCOMPLETE
    $(document).ready(function(){

      $( "#customer_name" ).autocomplete({
        source: function( request, response ) {
          // Fetch data
          $.ajax({
            url:public_url+"/get_coupon_customer",
            type: 'post',
            dataType: "json",
            data: {
               _token: token,
               search: request.term
            },
            success: function( data ) {
               response( data );
            }
          });
        },
        select: function (event, ui) {
           // Set selection
           $('#customer_name').val(ui.item.label); // display the selected text
           $('#customer_id').val(ui.item.value); // save selected id to input
           
           var customer_review=ui.item.customer_review_id;
       
       $('#review_id').html('');
        
        if(customer_review.length==0){
            $('.review_id_list').addClass('d-none');
            $('.view_review_div').addClass('d-none');
            $('#review_id').append('<option value="">Reviews Not Available</option>');
        }
        else{
            $('.review_id_list').removeClass('d-none');
            
            $('.view_review_btn').attr('id', '0');
             $('#review_id').html('<option data-id="0" value="">Choose Review ID</option>');
          for(var j=0;j<customer_review.length;j++){
              
            

            $('#review_id').append('<option data-id='+ customer_review[j].form_data_id +' value='+customer_review[j].form_data_unique_id+'>'+customer_review[j].form_data_unique_id+'</option>');
               
          }
        }
           
           return false;
        }
      });

    });
    
    //END OF AUTO COMPLETE
    
    //CLAIM COUPON
    function cliam_coupon(coupon_id){
         $.ajax({
                        type: 'POST',
                        data: {"_token": token,"id": coupon_id},
                        url: public_url+'/claim_coupon',
                        success: function (result) {    
                           toast(result,datatable_name);
                           $('#scrollingmodal').modal('hide');
                        }
                    })
    }
    

    
    $('.view_review_btn').click(function(){
        
       var id=$(this).attr('id');
          $.ajax({
                        type: 'POST',
                        data: {"_token": token,"id": id},
                        url: public_url+'/view_reviews',
                        success: function (result) {    
                           $('#review_view_modal_body').html(result);
                           $('#review_scrollingmodal').modal('show');
                        }
                    })
    });
    
    
    $('.change_review_id').change(function(){
        
        var optionDataId = $(this).find('option:selected').data('id');
        if(optionDataId==0){
            $('.view_review_div').addClass('d-none');
        }
        else{
            $('.view_review_div').removeClass('d-none');
        }
        $('.view_review_btn').attr('id', optionDataId);
    });
    
    
    //END OF CLAIM COUPON
    </script>
    
        @endsection