@extends('layouts.app')

        @section('styles')
            <style>
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #1c1c1c;
}

input:focus + .slider {
  box-shadow: 0 0 1px #1c1c1c;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
.parsley-min{
    color: #ff5c77;
    font-size: 12px;
    margin-top: 3px;
}

/*.color: red;*/
/*    border: 2px solid black;*/
/*    font-weight: bold;*/
/*    background: white;*/
/*    padding: 5px;*/

/*#bootstrap-duallistbox-nonselected-list_offer_products[] {*/
/*background: red;    */
/*}*/

 .offer_product_class option{
  /*.color: red;*/
  /*  border: 1px solid black;*/
  /*  font-weight: bold;*/
  /*  background: white;*/
  /*  padding: 5px;*/
  
  background-clip: padding-box;
    border: 1px solid #e9edf4;
    border-radius: 7px;
    display: block;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;
    padding: 0.475rem 0.75rem;
    
    
}
.moveall , .removeall{
    background: #115aa1;
}
</style>
        @endsection

            @section('content')

                             <!-- PAGE-HEADER -->
                            <div class="page-header">
                                <h1 class="page-title">Offers</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)">Products</a></li>
                                        <li class="breadcrumb-item active" aria-current="page">Offers</li>
                                    </ol>
                                </div>
                            </div>
                            <!-- PAGE-HEADER END -->

                            <!-- ROW-1 OPEN -->
                            @canany(['offer-create','offer-edit'])
                            <div class="row">
                                <div class="col-lg-12 col-md-12">
                                    <div class="card">
                                        <div class="card-header">
                                            <h3 class="card-title">Add Offer</h3>
                                        </div>
                                        <div class="card-body">
                                                <form method="POST" id="offerForm" class="myform" enctype="multipart/form-data">  
                                                    <input id="csrf_token" type="hidden" value="{{ csrf_token() }}">
                                                    <input id="offer_id" name="offer_id" type="hidden" value="">
                                                    
                                                    @csrf
                                                <div class="form-row">
                                                    <div class="col-xl-3 mb-3">
                                                        <label for="validationTooltip01">Offer Name *</label>
                                                        <input data-parsley-required-message="Offer Name Required" type="text" class="form-control" name="offer_name" id="offer_name"
                                                            value="" required>
                                                            
                                                    </div>
                                                    
                                                      <div class="col-xl-3 mb-3">
                                                        <label for="validationTooltip01">Offer For *</label>
                                                         <select data-parsley-required-message="Offer For Required" class="form-control" name="offer_for" id="offer_for"
                                                            value="" required>
                                                          <option value="">--  Offer For --</option>  
                                                          <option value="All">All</option>
                                                          <option value="Authorized">Authorized Cutsomer</option>
                                                        </select>
                                                            
                                                    </div>
                                                    
                                                    
                                                      <div class="col-xl-3 mb-3">
                                                        <label for="validationTooltip01">Offer From *</label>
                                                        <input data-parsley-required-message="Offer from Required" type="date" onchange="get_date_ch(this.value)" class="form-control" name="offer_from" id="offer_from"
                                                            value="" required>
                                                            
                                                    </div>
                                                    
                                                      <div class="col-xl-3 mb-3">
                                                        <label for="validationTooltip01">Offer To *</label>
                                                        <input data-parsley-required-message="Offer To Required" type="date" class="form-control" name="offer_to" id="offer_to"
                                                            value="" required>
                                                    </div>
                                                    
                                                     <div class="col-xl-3 mb-3">
                                                        <label for="validationTooltip01">Offer Type *</label>
                                                        
                                                            
                                                        <select data-parsley-required-message="Offer Type Required" class="form-control" name="offer_type" id="offer_type"
                                                            value="" required>
                                                          <option value="">-- Choose Offer Type --</option>  
                                                          <option value="Amount">Amount</option>
                                                          <option value="Percentage">Percentage</option>
                                                        </select>
                                                 
                                                    </div>
                                                    
                                                      <div class="col-xl-3 mb-3">
                                                        <label for="validationTooltip01">Choose Offer <span id="offer_type_label">Amount</span> *</label>
                                                        <input data-parsley-required-message="Offer Value Required" type="number" min="0" class="form-control" name="offer_value" id="offer_value"
                                                            value="" required>
                                                    </div>
                                                    
                                                     </div>
                                                     
        <!--###################################################Offer Product Choosing#######################################################-->
                                               
                                    <div class="card-header">
                                        <div class="card-title">Choose Offer Products</div>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-lg-12  col-xl-12 col-md-12">
                                                
                                                
    


    <select multiple="multiple" data-parsley-required-message="Offer Product Required" id="offer_products" required="required" class="offer_products" size="20" name="offer_products[]" title="offer_products[]">
    @foreach($data['products'] as $product)
    <option value="{{$product['product_id']}}">{{$product['product_name_en']}}</option>
    @endforeach
    </select>
   <link rel="stylesheet" type="text/css" href="{{asset('assets/plugins/duallistbox/bootstrap-duallistbox.css')}}">
   <script src="{{asset('assets/plugins/duallistbox/jquery-3.2.1.slim.min.js')}}"></script>
   <script src="{{asset('assets/plugins/duallistbox/jquery.bootstrap-duallistbox.js?v1')}}"></script>
 
 
 <script>
  var demo1 = $('.offer_products').bootstrapDualListbox({
    nonSelectedListLabel: 'Available Products',
    selectedListLabel: 'Selected Products',
    preserveSelectionOnMove: 'moved',
    moveAllLabel: 'Move all',
    removeAllLabel: 'Remove all'
  });

</script>


                                 
                                            </div>
                                       
                                        </div>
                                    </div>
                             
                                                    
 <!--###################################################End of Offer Product Choosing#######################################################-->
                                          
                            
                                
                                
                                                    
                                      
                                                
                                               
                                                @can('offer-create')
                                                <a id="create_btn" href="#" onclick="createOrUpdate('{{url('/admin/add_offer')}}', 'offerForm', '', 'table_datatable','')" class="btn custom-btn-success"><i class="fa fa-save"></i> Save</a>
                                                @endcan
                                                @can('offer-edit')
                                                <a  id="update_btn" style="display: none" href="#" onclick="createOrUpdate('{{url('/admin/update_offer')}}', 'offerForm', '', 'table_datatable','')" class="btn custom-btn-success"><i class="fa fa-save"></i> Update</a>
                                                @endcan
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                             @endcanany
                            <!-- /ROW-1 CLOSED -->

                               <!-- Row -->
                        @can('offer-list')
                        <div class="row row-sm">
                            <div class="col-lg-12">
                                <div class="card">
                                    <div class="card-header">
                                        <h3 class="card-title">View Offers</h3>
                                    </div>
                                    <div class="card-body">
                                        <div class="table-responsive">
                                             <table  class="table table-bordered text-nowrap border-bottom dataTable no-footer " 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">Offer Name</th>
                                                        <th class="wd-15p border-bottom-0">From</th>
                                                        <th class="wd-15p border-bottom-0">To</th>
                                                        <th class="wd-15p border-bottom-0">Offer</th>
                                                        <th class="wd-15p border-bottom-0">Status</th>
                                                        <th class="wd-10p border-bottom-0">Added By </th>
                                                        <th class="wd-10p border-bottom-0">Action</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 text-danger" 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 Offer ?</p>
                                    </div>
                                    <div class="modal-footer">
                                        <button class="btn custom-btn-warning" data-bs-dismiss="modal">Close</button>
                                        <button onclick="delete_item()" class="btn custom-btn-danger">Delete</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        
                        {{-- #########################View Modal################################### --}}
            <div class="modal fade" id="scrollingmodal" tabindex="-1" style="display: none;" aria-hidden="true">
            <div class="modal-dialog modal-dialog-scrollable" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" style="font-weight: bold;" id="view_modal_title">View Offer Details</h5>
                        <button class="btn-close text-danger" 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 custom-btn-warning" data-bs-dismiss="modal">Close</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?v3')}}">
   <script src="{{asset('assets/jquery-datatable/jquery.dataTables.js')}}"></script>
 {{-- ########################################################################## --}}
 
 

               

 <!--###################################Multiple Select#############################-->

    
    
    
   <script>
    var token = $("meta[name=csrf-token]").attr("content");  
    var datatable_name="table_datatable";
    $('#table_datatable').DataTable({
        "responsive": true,
      "serverSide": true,
      "ordering": true,
      "searching": true,
      "bLengthChange": true,
      "info":false,
      "bSort": true,
      "order": [
          [0, 'desc']
      ],
      "columnDefs": [{
              "targets": [0,4],
              "orderable": true
          },
          {"className": "text-center", "targets": [0,2,3,5,6]},
          {"className": "text-left", "targets": []},
          {"className": "text-end", "targets": [4]}
           
      ],
      "displayLength":10,
      "ajax": {
          "url":  "/admin/offer_datatable",
          "type": "post",
          "data": function (data) {
                data._token = token;
              
              return data;
  
          }
      }, "AutoWidth": true,
      "columns": [
                  {"data": "offer_id", "name": "offer_id"},
                  {"data": "offer_name", "name": "offer_name"},
                  {"data": "offer_from", "name": "offer_from"},
                  {"data": "offer_to", "name": "offer_to"},
                  {"data": "offer_id", "name": "offer_id"},
                  {"data": "offer_id", "name": "offer_id"},
                  {"data": "name", "name": "name"},
                  {"data": "offer_id", "name": "offer_id"},
                  ],
      
      "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 offer_value="";
          
          if(aData.offer_type=="Amount"){
              $('td:eq(4)', nRow).html(Number(aData.offer_value).toFixed(2));
          }
          else{
               var offer_value=aData.offer_value+'%';
              $('td:eq(4)', nRow).html(offer_value);
          }
          
           if(aData.offer_active_status==0){
                var checked="checked";
            }
            else{
                 var checked="";
            }
            
          
          
          var action="";
         //view Action
            @can('offer-list')
            var action=action+'&nbsp;<button title="Edit"  onclick=view('+aData.offer_id+') id="bEdit" type="button" class="btn btn-sm custom-btn-success"><span class="fe fe-eye"> </span></button>';
            @endcan
            //Edit Action
            @can('offer-edit')
            var action=action+'&nbsp;<button title="Edit"  onclick=edit('+aData.offer_id+') id="bEdit" type="button" class="btn btn-sm custom-btn-info"><span class="fe fe-edit"> </span></button>';
            @endcan
            //Delete Action
            @can('offer-delete')
            var action=action+'&nbsp;<button title="Delete" onclick="delete_modal('+aData.offer_id+')" id="bDel" type="button" class="btn  btn-sm custom-btn-danger"><span class="fe fe-trash-2"> </span></button>';
            @endcan
            $('td:eq(0)', nRow).html(index);
            $('td:eq(5)', nRow).html('<label class="switch"><input onchange="change_active_status('+aData.offer_id+','+aData.offer_active_status+')"  type="checkbox" '+checked+'><span class="slider round"></span></label>');
            $('td:eq(7)', nRow).html(action);
 }
 });

//       // #################### Edit Section ############################
                function edit(id){
                    

        
                $.ajax({
                    type: 'POST',
                    data: {"_token": token,"id": id},
                    url: '/admin/edit_offer',
                    success: function (result) {
                        $('#offer_id').val(result.offer_id);
                        $('#offer_name').val(result.offer_name);
                        $('#offer_for').val(result.offer_for);
                        $('#offer_from').val(result.offer_from);
                        $('#offer_to').val(result.offer_to);
                        $('#offer_type').val(result.offer_type);
                        $('#offer_value').val(result.offer_value);
                        
                        if(result.offer_type=="Amount"){
                         $('#offer_type_label').text('Amount');
                        }
                        else{
                             $('#offer_type_label').text('Percentage');
                        }
                        
                        var offer_products=result.offer_products;
                        
                        $("#offer_products option").removeAttr('selected', 'selected');
                         demo1.bootstrapDualListbox('refresh');
                        
                        for(let i=0;i<offer_products.length;i++){
                            
                            $("#offer_products option[value='" + offer_products[i] + "']").attr('selected', 'selected');
                            
                        }
                        
                        demo1.bootstrapDualListbox('refresh');
                        
                        $('#create_btn').hide();
                        $('#update_btn').show();
                        $('#back-to-top').click();
                        
                        }
                })
                }
      // #################### End Of Edit Section ####################
//      // #################### Delete Section ##########################
                    function delete_modal(id){
                    $('#offer_id').val(id);
                    $('#smallmodal').modal('show');
                    }
                    function delete_item(){
                    var id=$('#offer_id').val();
                    $.ajax({
                        type: 'POST',
                        data: {"_token": token,"id": id},
                        url: '/admin/delete_offer',
                        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: '/admin/view_offer',
                        success: function (result) {
                         $('#view_modal_body').html(result);
                          $('#scrollingmodal').modal('show');
                        
                        }
                    }) 
        
        
    }
    
    
    //#############################End Of View Section############
    
    //#######################Offfer Active Status Change###########

    function change_active_status(id,active_status){
     
              $.ajax({
                    type: 'POST',
                    data: {"_token": token,"id": id,"active_status":active_status},
                    url: '/admin/change_offer_active_status',
                    success: function (result) {
                     toast(result,datatable_name);
                    
                    }
                })
                
     
    }
//#######################End Of Offer Active Status ##########

$('#offer_type').change(function(){
    if($(this).val()=="Amount"){
        $('#offer_type_label').text('Amount');
    }
    else{
         $('#offer_type_label').text('Percentage');
    }
});



function get_date_ch(seldate){
    var dtToday = new Date(seldate);
    
    var month = dtToday.getMonth() + 1;
    var day = dtToday.getDate();
    var year = dtToday.getFullYear();
    if(month < 10)
        month = '0' + month.toString();
    if(day < 10)
        day = '0' + day.toString();
    
    var maxDate = year + '-' + month + '-' + day;

    // or instead:
    // var maxDate = dtToday.toISOString().substr(0, 10);

    $('#offer_to').attr('min', maxDate);
}

</script>
        @endsection