@extends('dashboard.base')

@section('content')
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css" rel="stylesheet"/>


        <div class="container-fluid">
          <div class="animated fadeIn">
            <div class="row">
              <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
                <div class="card">
                  <div class="card-header">
                    @if(session()->has('success'))
                    <div class="alert alert-success" role="alert">
                      <strong></strong> {{ session()->get('success') }}
                      <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                    @endif
                    <i class="fa fa-align-justify"></i>{{ __('Advertisement Management') }}
                      
                    <a href="{{env('APP_URL','')}}/add-advertisement" class="btn btn-xs btn-info pull-right"  id="addDevicesBtn">Create Advertisement</a>
                    <br/> <br/>  
                    <div class="row">
                      
                      <div class="col-md-3 sel_interest " >
                        <select  class="form-control select2-single" id="adv_interest" name="adv_interest" >
                          <option value = '0'>Select Interests</option>
                          @if ($interests->count())
                            @foreach($interests as $interest)
                              <option value="{{ $interest->id }}" >{{ $interest->name }}</option>    
                            @endforeach
                          @endif

                        </select>
                      </div>
                      <div class="col-md-3  sel_feature " >
                        <select  class="form-control select2-single" id="adv_feature" name="adv_feature" >
                          <option value = '0'>Select Features</option>
                          <option value="1">Age</option>
                          <option value="2">Gender</option>
                          <option value="3">Occupation</option>
                          <option value="4">Religion</option>
                          <option value="5">Location</option>
                        </select>
                      </div>
                      <div class="col-md-2 feature_div hide">

                        <input onchange="handleChange(this);"  maxlength = "3" name = "age_from" id = "age_from" placeholder = "From" type= "text" class="form-control">
                        <span class="span_age error hide">Choose Age From First!</span>
                      </div>
                      <div class="col-md-2 feature_div hide"> 
                        <input onchange="handleChange(this);"  maxlength = "3" id = "age_to" name = "age_to" placeholder= "To" type="text" class ="form-control">
                      </div>
                      <div class = "col-md-3 feature_dropdown hide">
                        <select class = "form-control feature_sel_dropdown" name= "feature_selection">
                        </select>
                        <span class = "feature_span error hide">Choose value for feature!</span>
                      </div>
                      <div class = "col-md-3 feature_location hide">
                        <select class = "form-control feature_loc_dropdown" name = "country">
                        </select>
                        <span class = "feature_span error hide">Choose value for feature!</span>

                      </div>
                      <div class = "col-md-3 feature_cities hide" >
                        <select class = "form-control city_dropdown" name = "location">
                        </select>
                        <span class = "city_span error hide">Choose City value!</span>

                      </div>
                      
                    <a class= "filter_search btn btn-success" href ="javascript:void(0);">Search</a>
                   
                    </div>
                  </div>
                  <div class="card-body">
                    <div class="container">
                      <table class="table table-bordered display " id="userdoatatable">
                        @csrf
                        <thead>
                          <tr>
                            <th>Sr. No.</th>
                            <th>Advertisement Name</th>
                            <th>Advertisement Price</th>
                            <th>Advertisement <br>Priority</th>
                            <th>Advertisement Pricing<br> Model</th>
                            <th>Advertisment<br> Date</th>
                            <th class = "org_action">Action</th>
                          </tr>
                        </thead>
                      </table>
                    </div>
                    <link  href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet">
                    <link  href="https://cdn.datatables.net/responsive/2.2.4/css/responsive.dataTables.min.css" rel="stylesheet">
                    <style> 
                      #userdoatatable {
                        width: 100% !important;
                      }
                      .org_action{
                        width:235px !important;
                      }
                    </style>
                    <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
                    <script src="https://cdn.datatables.net/responsive/2.2.4/js/dataTables.responsive.min.js"></script>
                    <script>
                      $(document).ready( function () {
                          $("#adv_interest,#adv_feature").select2({
                              allowClear:false
                             // placeholder: "Select Interests"
                          });

                          $('#adv_feature').on('change',function(){
                            var val = this.value;
                            if(val == 0){ // age input field
                              $('.feature_dropdown').addClass('hide');
                              $('.feature_location').addClass('hide');
                              $('.feature_cities').addClass('hide');
                              
                              $('.feature_div').addClass('hide');
                          
                            }else if(val == 1){ // age input field
                              $('.feature_dropdown').addClass('hide');
                              $('.feature_location').addClass('hide');
                              $('.feature_cities').addClass('hide');
                              
                              $('.feature_div').removeClass('hide');
                              $('.feature_div').focus();
                            }else{// dropdown field
                              $('.feature_div').addClass('hide');
                              $('.feature_location').addClass('hide');
                              $('.feature_cities').addClass('hide');
                              $('.feature_dropdown').removeClass('hide');

                                if(val == 2){ // append gender option in the dropdown...
                                  var genderoptn = [{'id':'1','gender':'Female'},{'id':'2','gender':'Male'}];
                                  console.log(gender);
                                  var gender   = "<option value='0'>Select Gender</option>";
                                  $(genderoptn).each(function (key,value) {
                                       console.log(value);
                                      // console.log(value);
                                     gender += '<option value = '+value.id+'>'+value.gender+'</option>';

                                   //Add the Option element to DropDownList.
                                  });
                               
                                  $('.feature_sel_dropdown').html(gender).select2();

                                }

                                if(val == 3){ // fetch occupation option in the dropdown...
                                  $.ajax({
                                   type: "POST",
                                   url: "{{ url('fetch_occupation')  }}",
                                   data:{name:val,"_token": "{{ csrf_token() }}",},
                                   async: true,
                                   success: function(response){
                                   console.log(response);
                                      var occupation = "<option value='0'>Select Occupation</option>";
                                      $(response).each(function(key,value){
                                        occupation += "<option value='"+value.id+"'>"+value.Occuption_ame+"</option>";
                                      });
                                      $('.feature_div').addClass('hide');
                                      $('.feature_location').addClass('hide');
                                      $('.feature_cities').addClass('hide');
                                
                                      $('.feature_sel_dropdown').html(occupation).select2();
                              
                                   }
                                  });
                                }
                                if(val == 4){ // fetch religions option in the dropdown...
                                  $.ajax({
                                   type: "POST",
                                   url: "{{ url('fetch_religion')  }}",
                                   data:{name:val,"_token": "{{ csrf_token() }}",},
                                   async: true,
                                   success: function(response){
                                   console.log(response);
                                      var occupation = "<option value='0'>Select Religion</option>";
                                      $(response).each(function(key,value){
                                        occupation += "<option value='"+value.id+"'>"+value.Religion_name+"</option>";
                                      });
                                      $('.feature_div').addClass('hide');
                                      $('.feature_location').addClass('hide');
                                      $('.feature_cities').addClass('hide');
                                
                                      $('.feature_sel_dropdown').html(occupation).select2();
                              
                                   }
                                  });
                                }
                                if(val == 5){ // fetch location option in the dropdown...
                                  $.ajax({
                                   type: "POST",
                                   url: "{{ url('fetch_countries')  }}",
                                   data:{name:val,"_token": "{{ csrf_token() }}",},
                                   async: true,
                                   success: function(response){
                                   console.log(response);
                                      var country = "<option value='0'>Select Country</option>";
                                      $(response).each(function(key,value){
                                        country += "<option value='"+value.country+"'>"+value.country+"</option>";
                                      });
                                    $('.feature_div').addClass('hide');
                                    $('.feature_dropdown').addClass('hide');
                                    $('.feature_location').removeClass('hide');
                                    $('.feature_loc_dropdown').html(country).select2();
                              
                                   }
                                  });
                                }


                            }
                            
                            $('.feature_loc_dropdown').on('change',function(){ // on select county , fetch cities
                              var val = $(this).val();

                          
                              $.ajax({
                               type: "POST",
                               url: "{{ url('fetch_cities')  }}",
                               data:{name:val,"_token": "{{ csrf_token() }}",},
                               async: true,
                               success: function(response){

                                  var city = "<option value='0'>Select City</option>";
                                  $(response).each(function(key,value){
                                    city += "<option value='"+value.id+"'>"+value.city+' - '+value.admin_name+"</option>";
                                  });
                                  $('.feature_div').addClass('hide');
                                  $('.feature_dropdown').addClass('hide');
                                  $('.feature_cities').removeClass('hide');
                              
                                  $('.city_dropdown').html(city).select2();
                               }
                              });    
                            });

                          });   


                          $(".alert-success").delay(5000).slideUp(300); // hide success alert messages...
                          var adv_interest =  $('#adv_interest').val();
                          var adv_feature  =  $('#adv_feature').val();
                          if(adv_feature == 2){
                            var feature_selection = $('.feature_sel_dropdown').val();
                          }
                          fill_datatable();
                          function fill_datatable(adv_interest='',adv_feature='',feature_selection='',city_selection='',from_age='',from_to='')
                          {
                            console.log('interest:'+adv_interest);
                            console.log('feature:'+adv_feature);
                            console.log('feature selection:'+feature_selection);
                            console.log('city'+city_selection);
                            console.log('age from'+from_age);
                            console.log('age to'+from_to);
                            $.fn.dataTable.ext.errMode = 'throw';
                            var dataTable = $('#userdoatatable').DataTable({
                                              "oLanguage": {
                                                "sEmptyTable": "No Data Available"
                                              },

                                              processing: true,
                                              serverSide: true,
                                              responsive: true,
                                              ajax:{
                                                type: "POST",
                                                url: "{{ url('advertisement-list')  }}",
                                                data:{"_token": "{{ csrf_token() }}",'adv_interest':adv_interest,'adv_feature':adv_feature,'feature_selection':feature_selection,'city_selection':city_selection,'from_age':from_age,'from_to':from_to}
                                              },
                                              columns: [
                                                { data: 'DT_RowIndex', name: 'DT_RowIndex' },
                                                { data: 'adv_name', name: 'adv_name' },
                                                { data: 'adv_price', name: 'adv_price' },
                                                { data: 'adv_priority', name: 'adv_priority' },
                                                { data: 'adv_model', name: 'adv_model' },
                                                { data: 'created_at', name: 'created_at' },
                                                { data: 'action', name: 'action', orderable: false, searchable: false}
                                              ],
                                              columnDefs: [
                                                {
                                                  
                                                  targets:1,
                                                  render: function ( data, type, row, meta ) {
                                                    if(type === 'display'){
                                                      data = '<a href="{{env("APP_URL",'')}}/adv-view/' + row.id + '">' + data + '</a>';
                                                    }
                                                    return data;
                                                  }
                                                }
                                              ],

                                });
                                 
                              }

                              $('.filter_search').on('click',function(){
                                  var adv_interest      = $('#adv_interest').val();
                                  var adv_feature       = $('#adv_feature').val();
                                  var feature_selection = $('.feature_sel_dropdown').val();
                                  var country_selection = $('.feature_loc_dropdown').val();
                                  var city_selection    = $('.city_dropdown').val();
                                  var from_to           = $('#age_to').val(); 
                                  var from_age          = $('#age_from').val(); 

                                  $('table#userdoatatable').DataTable().destroy();
                                  fill_datatable(adv_interest,adv_feature,feature_selection,city_selection,from_age,from_to);
                                  
                                });
                                $('#adv_feature').on('change',function(){
                                  var adv_feature = $('#adv_feature').val();
                                   if(adv_feature == 5){
                                    $('#feature_loc_dropdown').focus();
                                    $('.city_span').removeClass('hide');                                 
                                    
                                  }else if(adv_feature != 1){

                                    $('#age_from').val('');
                                    $('#age_to').val('');
                                    $('.feature_span').remove();
                                  }else{

                                    $('.feature_selection').focus();
                                    // $('select[name="feature_selection"]').hide();
                                    // $('.feature_span error').hide();

                                    $('.feature_span').removeClass('hide');                                 
                                  }
  
                                });

                                $('.feature_sel_dropdown').on('change',function(){
                                  $('.feature_span').addClass('hide');
                                

                                  
                                });
                                $('.feature_loc_dropdown').on('change',function(){
                                  $('.feature_span').addClass('hide');
                                  
                                });
                                $('.city_dropdown').on('change',function(){
                                  $('.city_span').addClass('hide');
                                  
                                });   
                              
                                $('#age_from').on('change',function(){
                                  $('.span_age').addClass('hide');
                                                                });
                                $('#age_to').on('change',function(){
                                  var from_age = $('#age_from').val(); 
                                  if(from_age == ''){
                                    $('.span_age').removeClass('hide');
                                   }else {
                                    $('.span_age').addClass('hide');
                                    
                                    }
                                }); 
                                
                                $(document).on('click',".cil-x-circle", function(){
                                  return confirm('Are you sure you want to delete this Advertisement?');
                                });

                               /*$("#userdoatatable tbody tr").each(function(i){
                                    $(this).prepend("<td>"+i+"</td>");  
                               });*/
                          });
                          $('div.alert').not('.alert-important').delay(4000).fadeOut(500);
                          function handleChange(input) {
                           // alert(input.name);
                            if (input.value < 0) input.value = 0;
                            if (input.value > 100) input.value = 100;
                            if(input.name == 'age_to'){
                              var age_to_val   = input.value;
                              var age_from_val = $('input[name="age_from"]').val();
                             
                              if(age_to_val < age_from_val){
                                alert("Age must be choosen greater than from' Age from' field.");
                                 $('input[name="age_from"]').val('').focus();
                              }
                            }
                          }
 
                        </script>
                    </div>
                </div>
             </div>
            </div>
          </div>
        </div>




@endsection


@section('javascript')

@endsection