@extends('admin.layouts.admin_layout')
@section('content')
<style type="text/css">
    .table td, .table th {
        font-size: 12px;
        line-height: 2.42857 !important;
    }
    #experience_range_text, #degree_date_range_text, #jobs_applied_date_range_text {
      border: none;
    }
    #filters_wrapper {
      height: 0px;
      overflow: hidden;
      transition: .5s ease;
      border-bottom: 1px solid black;
      box-shadow: inset 0px -5px 10px -6px rgba(0,0,0,.2);
    }
    #toggle_filters {
      cursor: pointer;
    }
    #filters_wrapper.toggled {
      height: 450px;
      padding: 5px;
    }
    #filtered_results {
      margin-top: 20px;
    }
    @media (max-width: 767px) {
      #filters_wrapper {
          overflow-y: auto;
      }
    }
    .table-scrollable {
      overflow-x: visible;
      overflow-y: visible;
    }
    .table-scrollable .dropdown-menu {
      left: auto;
      right: 0;
    }
    .table-scrollable .dropdown-menu::before, .table-scrollable .dropdown-menu::after {
      left: auto;
      right: 9px;
    }
</style>
<div class="page-content-wrapper">
    <!-- BEGIN CONTENT BODY -->
    <div class="page-content">
        <!-- BEGIN PAGE HEADER-->
        <!-- BEGIN PAGE BAR -->
        <div class="page-bar">
            <ul class="page-breadcrumb">
                <li> <a href="{{ route('admin.home') }}">Home</a> <i class="fa fa-circle"></i> </li>
                <li> <span>Profile Filter</span> </li>
            </ul>
        </div>
        <!-- END PAGE BAR -->
        <!-- global error -->
        @if ($errors->any())
          <div class="alert alert-danger global-error">
            @foreach ($errors->all() as $error)
              {{$error}}
            @endforeach
          </div>
        @endif
        <div class="alert alert-danger global-error" style="display:none;"></div>
        <!-- </end global error -->
        <!-- END PAGE HEADER-->
        <div class="row">
          <div class="col-xs-12">
            <div class="row portlet light portlet-fit">
              <div class="portlet-title col-xs-12">
                <div class="caption"> <i class="fa fa-filter font-dark"></i> <span class="caption-subject font-dark sbold uppercase">Profiles Filter</span> </div>
                <div class="actions">
                  <i id="toggle_filters" class="fa fa-arrow-up"></i>
                </div>
              </div>
            </div>
            <div class="row portlet-body toggled" id="filters_wrapper">
              <div class="col-xs-12 col-md-3">
                <form id="country_filter" class="filters-wrap row" method="post">
                  <div class="col-xs-12">
                    <label>Country: </label>
                    <label for="country_or">Or</label> <input id="country_or" type="radio" checked disabled name="country_condition" value="or">
                    <select id="country" multiple class="form-control select2-multiple" placeholder="Countries" name="country[]">
                      @foreach ($countries as $country)
                        <option value="{{$country->id}}">{{$country->country}}</option>
                      @endforeach
                    </select>
                  </div>
                </form>
                <form id="gender_filter" class="filters-wrap row" method="post">
                  <div class="col-xs-12">
                    <label>Genders: </label>
                    <label for="gender_or">Or</label> <input id="gender_or" type="radio" checked disabled name="gender_condition" value="or">
                    <select id="gender" multiple class="form-control select2-multiple" placeholder="Select Gender" name="gender[]">
                      @foreach ($genders as $gender)
                        <option value="{{$gender->id}}">{{$gender->gender}}</option>
                      @endforeach
                    </select>
                  </div>
                </form>
                <form id="marital_status_filter" class="filters-wrap row" method="post">
                  <div class="col-xs-12">
                    <label>Marital Status: </label>
                    <label for="marital_status_or">Or</label> <input id="marital_status_or" disabled type="radio" checked name="marital_status_condition" value="or">
                    <select id="marital_status" multiple class="form-control select2-multiple" placeholder="Select Status" name="marital_status[]">
                      @foreach ($marital_statuses as $status)
                        <option value="{{$status->id}}">{{$status->marital_status}}</option>
                      @endforeach
                    </select>
                  </div>
                </form>
                <form id="military_service_filter" class="filters-wrap row" method="post">
                  <div class="col-xs-12">
                    <label>Military Service: </label>
                    <label for="military_service_or">Or</label> <input id="military_service_or" checked disabled type="radio" name="military_service_condition" value="or">
                    <select id="military_service" multiple class="form-control select2-multiple" placeholder="Military Services" name="military_service[]">
                      @foreach ($military_services as $service)
                        <option value="{{$service->id}}">{{$service->status}}</option>
                      @endforeach
                    </select>
                  </div>
                </form>
                <form id="uae_visa_filter" class="filters-wrap row" method="post">
                  <div class="col-xs-12">
                    <label for="uae_visa">Has UAE Visa or been to UAE? </label>
                    <input type="checkbox" id="uae_visa" class="form-control" name="uae_visa" value="1">
                  </div>
                </form>
              </div>
              <div class="col-xs-12 col-md-3">
                <form id="skills_filter" class="filters-wrap row" method="post">
                  <div class="col-xs-12">
                    <label>Skills: </label>
                    <label for="skills_and">And
                      <input id="skills_and" type="radio" checked name="skills_condition" value="and">
                    </label>
                    <label for="skills_or">Or
                      <input id="skills_or" type="radio" name="skills_condition" value="or">
                    </label>
                    <select id="skills" multiple class="form-control select2-multiple" placeholder="Select Skills" name="skills[]">
                      @foreach ($skills as $skill)
                        <option value="{{$skill->id}}">{{$skill->job_skill}}</option>
                      @endforeach
                    </select>
                  </div>
                </form>
                <form id="languages_filter" class="filters-wrap row" method="post">
                  <div class="col-xs-12">
                    <label>Languages: </label>
                    <label for="languages_and">And
                      <input id="languages_and" type="radio" checked name="languages_condition" value="and">
                    </label>
                    <label for="languages_or">Or
                      <input id="languages_or" type="radio" name="languages_condition" value="or">
                    </label>
                    <select id="languages" multiple class="form-control select2-multiple" placeholder="Select Languages" name="languages[]">
                      @foreach ($languages as $language)
                        <option value="{{$language->id}}">{{$language->lang}}</option>
                      @endforeach
                    </select>
                  </div>
                </form>
                <form id="applied_jobs_filter" class="filters-wrap row" method="post">
                  <div class="col-xs-12">
                    <label>Applied Jobs: </label>
                    <label for="applied_jobs_or">Or</label> <input id="applied_jobs_or" checked disabled type="radio" name="applied_jobs_condition" value="or">
                    <select id="applied_jobs" multiple class="form-control select2-multiple" placeholder="Applied Jobs" name="applied_jobs[]">
                      @foreach ($jobs as $job)
                        <option value="{{$job->id}}">{{$job->title}}</option>
                      @endforeach
                    </select>
                  </div>
                </form>
                <form id="jobs_applied_date_filter" style="opacity:1;transition:.5s ease;" class="filters-wrap row" method="post">
                  <div class="col-xs-12">
                    <label>Jobs applying date: </label>
                    <label for="jobs_applied_date_or">Or</label> <input id="jobs_applied_date_or" checked disabled type="radio" name="jobs_applied_date_condition" value="or">
                    <br>
                    <label>Start Date</label>
                    <input class="form-control" id="jobs_applied_start_date" type="date" name="jobs_applied_start_date" value="">
                    <label>End Date</label>
                    <input class="form-control" id="jobs_applied_end_date" type="date" name="jobs_applied_end_date" value="">
                    <input hidden id="jobs_applied_date" type="text" name="jobs_applied_date[]" value="">
                  </div>
                </form>
              </div>
              <div class="col-xs-12 col-md-3">
                <form id="industry_filter" class="filters-wrap row" method="post">
                  <div class="col-xs-12">
                    <label>Industries: </label>
                    <label for="industries_or">Or</label> <input id="industries_or" checked disabled type="radio" name="industry_condition" value="or">
                    <select id="industry" multiple class="form-control select2-multiple" placeholder="Industries" name="industry[]">
                      @foreach ($industries as $industry)
                        <option value="{{$industry->id}}">{{$industry->industry}}</option>
                      @endforeach
                    </select>
                  </div>
                </form>
                <form id="functional_area_filter" class="filters-wrap row" method="post">
                  <div class="col-xs-12">
                    <label>Functional Areas: </label>
                    <label for="functional_area_or">Or</label> <input id="functional_area_or" type="radio" checked disabled name="functional_area_condition" value="or">
                    <select id="functional_area" multiple class="form-control select2-multiple" placeholder="Functional Areas" name="functional_area[]">
                      @foreach ($functional_areas as $area)
                        <option value="{{$area->id}}">{{$area->functional_area}}</option>
                      @endforeach
                    </select>
                  </div>
                </form>
                <form id="career_level_filter" class="filters-wrap row" method="post">
                  <div class="col-xs-12">
                    <label>Career Levels: </label>
                    <label for="career_level_or">Or</label> <input id="career_level_or" checked disabled type="radio" name="career_level_condition" value="or">
                    <select id="career_level" multiple class="form-control select2-multiple" placeholder="Career Levels" name="career_level[]">
                      @foreach ($career_levels as $level)
                        <option value="{{$level->id}}">{{$level->career_level}}</option>
                      @endforeach
                    </select>
                  </div>
                </form>
                <div class="row">
                  <div class="col-xs-12">
                    <label for="enable_experience">Enable Experiences</label>
                    <input checked type="checkbox" id="enable_experience">
                  </div>
                </div>
                <form id="experience_filter" style="opacity:1;transition:.5s ease;" class="filters-wrap row" method="post">
                  <div class="col-xs-12">
                    <label>Experiences: </label>
                    <label for="experience_or">Or</label> <input id="experience_or" checked disabled type="radio" name="experience_condition" value="or">
                    <div class="slider-box">
                      <input type="text" id="experience_range_text" readonly>
                      <div id="experience_range" class="slider"></div>
                    </div>
                    <input hidden id="experience" type="text" name="experience[]" value="">
                  </div>
                </form>
              </div>
              <div class="col-xs-12 col-md-3">
                <form id="education_location_filter" class="filters-wrap row" method="post">
                  <div class="col-xs-12">
                    <label>Education Location: </label>
                    <label for="education_location_and">And
                      <input id="education_location_and" checked type="radio" name="education_location_condition" value="and">
                    </label>
                    <label for="education_location_or">Or
                      <input id="education_location_or" type="radio" name="education_location_condition" value="or">
                    </label>
                    <select id="education_location" multiple class="form-control select2-multiple" placeholder="Countries" name="education_location[]">
                      @foreach ($countries as $country)
                        <option value="{{$country->id}}">{{$country->country}}</option>
                      @endforeach
                    </select>
                  </div>
                </form>
                <form id="degree_level_filter" class="filters-wrap row" method="post">
                  <div class="col-xs-12">
                    <label>Degree Level: </label>
                    <label for="degree_level_and">And
                      <input id="degree_level_and" checked type="radio" name="degree_level_condition" value="and">
                    </label>
                    <label for="degree_level_or">Or
                      <input id="degree_level_or" type="radio" name="degree_level_condition" value="or">
                    </label>
                    <select id="degree_level" multiple class="form-control select2-multiple" placeholder="Levels" name="degree_level[]">
                      @foreach ($education_levels as $level)
                        <option value="{{$level->id}}">{{$level->degree_level}}</option>
                      @endforeach
                    </select>
                  </div>
                </form>
                <form id="degree_type_filter" class="filters-wrap row" method="post">
                  <div class="col-xs-12">
                    <label>Degree Type: </label>
                    <label for="degree_type_and">And
                      <input id="degree_type_and" checked type="radio" name="degree_type_condition" value="and">
                    </label>
                    <label for="degree_type_or">Or
                      <input id="degree_type_or" type="radio" name="degree_type_condition" value="or">
                    </label>
                    <select id="degree_type" multiple class="form-control select2-multiple" placeholder="Types" name="degree_type[]">
                      @foreach ($education_types as $type)
                        <option value="{{$type->id}}">{{$type->degree_type}}</option>
                      @endforeach
                    </select>
                  </div>
                </form>
                <div class="row">
                  <div class="col-xs-12">
                    <label for="enable_education_date">Enable Education Date</label>
                    <input checked type="checkbox" id="enable_education_date">
                  </div>
                </div>
                <form id="education_date_filter" style="opacity:1;transition:.5s ease;" class="filters-wrap row" method="post">
                  <div class="col-xs-12">
                    <label>Degree Date: </label>
                    <label for="education_date_or">Or
                      <input id="education_date_or" type="radio" checked disabled name="education_date_condition" value="or">
                    </label>
                    <div class="slider-box">
                      <input type="text" id="degree_date_range_text" readonly>
                      <div id="degree_date_range" class="slider"></div>
                    </div>
                    <input hidden id="education_date" type="text" name="education_date[]" value="">
                  </div>
                </form>
              </div>
              <div class="col-xs-12">
                <input id="apply_filter_on_users"  class="btn btn-large btn-primary" type="submit" name="submit" value="Submit">
              </div>
            </div>
          </div>
          <div id="filtered_results" class="col-xs-12">
            <!-- Begin: life time stats -->
            <div class="portlet light portlet-fit portlet-datatable bordered">
                <div class="portlet-title">
                    <div class="caption"> <i class="icon-user font-dark"></i> <span class="caption-subject font-dark sbold uppercase">Profiles</span> </div>
                    <div class="actions">
                      <form id="export_results_form" action="{{route('export.users.profiles')}}" method="post">
                        @csrf
                        <input id="exportable_users_ids" hidden type="text" name="ids" value="">
                        <input id="filtering_critera" hidden type="text" name="filtering_critera" value="">
                        <input class="form-control" type="text" name="contact_phone" value="" placeholder="Contact Phone">
                        <input class="form-control" type="text" name="domain" value="" placeholder="Domain">
                        <button style="width:100%;" id="export_results_profiles" class="btn btn-primary" type="submit" name="submit">
                          Export Results Profiles
                        </button>
                      </form>
                    </div>
                </div>
                <div class="portlet-body">
                    <div class="table-container">
                      <table class="table table-striped table-bordered table-hover" id="user_datatable_ajax">
                          <thead>
                              <tr role="row" class="heading">
                              </tr>
                          </thead>
                          <tbody>
                          </tbody>
                      </table>
                    </div>
                </div>
            </div>
          </div>
        </div>
    </div>
    <!-- END CONTENT BODY -->
</div>
@endsection
@push('scripts')
<script>
    $(function () {
       //
       const dayInterval = 1000 * 60 * 60 * 24; // 1 day
       //
      $('#jobs_applied_start_date').on('change', function() {
        let startDate = new Date($(this).val());
        let endDateInputValue = $('#jobs_applied_end_date').val();
        let endDate =  endDateInputValue == '' ? new Date() : new Date(endDateInputValue);
        let dates = getDates(startDate, endDate, dayInterval);
        let datesStr = '';
        dates = dates.map(date => datesStr += date.toLocaleDateString('en-us') + ',');
        $('#jobs_applied_date').val(datesStr);
      });
      //
      $('#jobs_applied_end_date').on('change', function() {
        let endDate = new Date($(this).val());
        let startDateInputValue = $('#jobs_applied_start_date').val();
        let startDate =  startDateInputValue == '' ? new Date() : new Date(startDateInputValue);
        let dates = getDates(startDate, endDate, dayInterval);
        let datesStr = '';
        dates = dates.map(date => datesStr += date.toLocaleDateString('en-us') + ',');
        $('#jobs_applied_date').val(datesStr);
      });
      //
      $('.select2-multiple').select2({
        placeholder: $(this).attr('placeholder'),
        allowClear: true
      });
      //
      // experiences range bar
      $("#experience_range").slider({
        range: true,
        min: 0,
        max: 50,
        values: [5, 20],
        slide: function(event, ui) {
          var experiences = [];
          for (var i = ui.values[0]; i <= ui.values[1]; i++) {
              experiences.push(i);
          }
          $('#experiences').val(experiences);
          $("#experience_range_text").val(ui.values[0] + " Years - " + ui.values[1] + " Years");
        }
      });
      $("#experience_range_text").val($("#experience_range").slider("values", 0) + " Years - " + $("#experience_range").slider("values", 1) + " Years");
      // default values for experiences
      var experiences = [];
      for (var i = $("#experience_range").slider("values", 0); i <= $("#experience_range").slider("values", 1); i++) {
          experiences.push(i);
      }
      $('#experience').val(experiences);
      //
      // current year for max values for date range bar
      var current_year = new Date();
      current_year = Number(current_year.getFullYear());
      //
      // education date range bar
      $("#degree_date_range").slider({
        range: true,
        min: 1850,
        max: current_year,
        values: [1995, current_year],
        slide: function(event, ui) {
          var dates = [];
          for (var i = ui.values[0]; i <= ui.values[1]; i++) {
              dates.push(i);
          }
          $('#education_date').val(dates);
          $("#degree_date_range_text").val(ui.values[0] + " Years - " + ui.values[1] + " Years");
        }
      });
      $("#degree_date_range_text").val($("#degree_date_range").slider("values", 0) + " Years - " + $("#degree_date_range").slider("values", 1) + " Years");
      // default values for dates
      var dates = [];
      for (var i = $("#degree_date_range").slider("values", 0); i <= $("#degree_date_range").slider("values", 1); i++) {
          dates.push(i);
      }
      $('#education_date').val(dates);
      //
      /*
        * availableFilters ---
        * NOTE
        * must be compatible with the form div id="{filter_name}_filter"
        * must be compatible with the form element id that holds values id="{filter_name}"
        * must be compatible with the form condition element id="{filter_name}_condition"
      */
      const availableFilters = [
        "industry", "functional_area", "career_level", "experience", "country",
        "skills", "languages", "education_location", "degree_level", "degree_type",
        "education_date", "gender", "marital_status", "military_service", "applied_jobs",
        "jobs_applied_date", "uae_visa"
      ];
      // admin wants to filter and submitted the critera, lets get this rolling!
      $('#apply_filter_on_users').on('click', function(e) {
        e.preventDefault();
        // lets scroll to the table element top
        $('body,html').animate({
          scrollTop: $('#filtered_results').offset().top - 50
        });
        //
        // lets structure each of our filters object and have the each object in the filters array
        // this is essential structure for our backend code
        let filters = [];
        $.each(availableFilters, function(i, filterName) {
          // checkbox filter value
          if ($('#'+filterName).attr('type') == 'checkbox') {
            if ($('#'+filterName).prop('checked')) {
              var filterValues = [1];
            } else {
              var filterValues = [];
            }
          } else { // array filter value
            var filterValues = $('#'+filterName).val();
          }
          // values that come from number range are pasrsed as string with "," delimiter
          if (typeof filterValues == 'string') {
            if (filterValues) {
              filterValues = filterValues.split(',');
            } else {
              filterValues = [];
            }
          }
          //
          let condition = $('#'+filterName+'_filter').find('input[name="'+filterName+'_condition"]:checked').val(); // and || or
          filters.push({
            "type": filterName,
            "values": filterValues,
            "condition": condition
          });
        });
        //
        // function responsible for sending the filters object through an ajax request
        applyFiltersOnUsers(filters, function(users) {// custom callback function that has the ajax response (users) object as argument
          // since the filter is ajax based, we need to re-initialize the DataTable
          if ($.fn.dataTable.isDataTable("#user_datatable_ajax")) {
            oTable.clear().draw().destroy();
          }
          // emptying DataTable headers because they are dynamically put depending on chosen filters
          $('#user_datatable_ajax .heading').empty();
          //
          //
          var filteringCritera = {};
          var oTableHeader = ''; // the table header html we'll be appending into html table
          var columns = [ // the columns that we'll pass to the DataTable initializing
            {data: 'id', name: 'id'},
            {data: 'name', name: 'name'},
            {data: 'email', name: 'email'},
            {data: 'country'},
          ];
          oTableHeader += '<th>ID</th><th>Name</th><th>Email</th><th>Country</th>';
          $.each(filters, function(i, filter) {
            if (filter.values.length > 0) {
              // adding the dynamic columns to the columns array defined previously
              columns.push({
                data: filter.type,
                name: filter.type
              });
              // adding the dynamic columns to the header html defined previously
              oTableHeader += '<th>'+filter.type.replace('_', ' ')+'</th>';
              // passing the filtering critera to the export for the readme file
              filteringCritera[filter.type] = {}
              let uncounted = users.map(user => user[filter.type]);
              uncounted.forEach(function(x) { filteringCritera[filter.type][x] = (filteringCritera[filter.type][x] || 0)+1; });
            }
          });
          //
          $('#filtering_critera').val(JSON.stringify(filteringCritera));
          //
          columns.push({data: 'action', name:'action', orderable: false, searchable:false})
          oTableHeader += '<th>Actions</th>';
          //
          $('#user_datatable_ajax .heading').append(oTableHeader);
          // initializing the DataTable
          oTable = $('#user_datatable_ajax').DataTable({
              aLengthMenu: [
                  [25, 50, 100, -1],
                  [25, 50, 100, "All"]
              ],
              processing: false,
              serverSide: false,
              stateSave: false,
              searching: false,
              columns: columns
          });
          // time to add our data from the ajax response..
          oTable.clear().draw();
          // fetching user role to prevent rendering forbidden action buttons
          let isAllowed = "{{APAuthHelp::check(['SUP_ADM', 'SUB_ADM'])}}";
          let isSupAdmin = "{{APAuthHelp::check(['SUP_ADM'])}}";
          //
          $.each(users, function(i, user) {
            if (isAllowed != '')
            {
              // structuring the actions dropdown
              if (user.is_active)
              {
                var active_action = 'make_not_active('+user.id+')';
                var active_text = 'Make InActive';
                var active_icon = '<i class="fa fa-check-square-o" aria-hidden="true"></i>';
              } else
              {
                var active_action = 'make_active('+user.id+')';
                var active_text = 'Make Active';
                var active_icon = '<i class="fa fa-square-o" aria-hidden="true"></i>';
              }
              if (user.verified)
              {
                var verify_action = 'make_not_verified('+user.id+')';
                var verify_text = 'Verified';
                var verify_icon = '<i class="fa fa-check-square-o" aria-hidden="true"></i>';
              } else
              {
                var verify_action = 'make_verified('+user.id+')';
                var verify_text = 'Not Verified';
                var verify_icon = '<i class="fa fa-square-o" aria-hidden="true"></i>';
              }
              //
              var actions =
              '<div class="btn-group" style="position:relative">\
  			         <button class="btn blue dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action\
  				             <i class="fa fa-angle-down"></i>\
  			          </button>\
        					<ul class="dropdown-menu">\
                    <li>\
                      <a target="_blank" href="/admin/show-user/'+user.id+'"><i class="fa fa-eye" aria-hidden="true"></i>View</a>\
                    </li>\
        						<li>\
        							<a href="/admin/edit-user/'+user.id+'"><i class="fa fa-pencil" aria-hidden="true"></i>Edit</a>\
        						</li>';
                    if (isSupAdmin) {
                      actions += '<li>\
                      <a href="javascript:void(0);" onclick="delete_user('+user.id+');" class=""><i class="fa fa-trash-o" aria-hidden="true"></i>Delete</a>\
        						</li>';
                    }
                    actions += '<li>\
        						<a href="javascript:void(0);" onclick="'+active_action+';" id="onclick_active_'+user.id+'">'+active_icon+active_text+'</a>\
        						</li>\
        						<li>\
        						<a href="javascript:void(0);" onclick="'+verify_action+';" id="onclick_verified_'+user.id+'">'+verify_icon+verify_text+'</a>\
        						</li>\
        					</ul>\
      				 </div>\
               <label for="export_user_'+user.id+'">Export</label><input data-user-id="'+user.id+'" checked id="export_user_'+user.id+'" type="checkbox" value="true" name="export_user">';
            } else
            {
              var actions =
              '<div class="btn-group" style="position:relative">\
  			         <button class="btn blue dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action\
  				             <i class="fa fa-angle-down"></i>\
  			          </button>\
        					<ul class="dropdown-menu">\
                    <li>\
                      <a target="_blank" href="/admin/show-user/'+user.id+'"><i class="fa fa-eye" aria-hidden="true"></i>View</a>\
                    </li>\
        					</ul>\
      				 </div>\
               <label for="export_user_'+user.id+'">Export</label><input data-user-id="'+user.id+'" checked id="export_user_'+user.id+'" type="checkbox" value="true" name="export_user">';
            }
            //
            // always visible data
            var row = {};
            // dynamically adding the user's data depending on the column
            // this has to be compatible with the returned response properties
            $.each(columns, function(i, column) {
              if (user[column.data] === undefined) {
                row[column.data] = '';
              } else {
                row[column.data] = user[column.data];
              }
            });
            row.action = actions;
            oTable.row.add(row);
          });
          oTable.draw();
        });
      });
      //
      // enabling or disabling eduaction date range bar
      $('#enable_education_date').on('change', function(e) {
        if ($(this).prop('checked')) {
          $('#education_date_filter').css('opacity', '1');
          var dates = [];
          for (var i = $("#degree_date_range").slider("values", 0); i <= $("#degree_date_range").slider("values", 1); i++) {
              dates.push(i);
          }
          $('#education_date').val(dates);
        } else {
          $('#education_date_filter').css('opacity', '0');
          var dates = [];
          $('#education_date').val(dates);
        }
      });
      // enabling or disabling experience range bar
      $('#enable_experience').on('change', function(e) {
        if ($(this).prop('checked')) {
          $('#experience_filter').css('opacity', '1');
          var experiences = [];
          for (var i = $("#experience_range").slider("values", 0); i <= $("#experience_range").slider("values", 1); i++) {
              experiences.push(i);
          }
          $('#experience').val(experiences);
        } else {
          $('#experience_filter').css('opacity', '0');
          var experiences = [];
          $('#experience').val(experiences);
        }
      });
      //
      $('#export_results_form').on('submit', function() {
        let export_elements = $('input[name="export_user"]:checked');
        let ids = '';
        $.each(export_elements, function(i, element) {
          ids += $(element).attr('data-user-id')+',';
        });
        $('#exportable_users_ids').val(ids);
      });
      // filters accordion action
      $('#toggle_filters').on('click', function(e) {
          e.preventDefault();
          //
          $(this).hasClass('fa-arrow-up') ? $(this).removeClass('fa-arrow-up').addClass('fa-arrow-down') : $(this).removeClass('fa-arrow-down').addClass('fa-arrow-up');
          $('#filters_wrapper').toggleClass('toggled');
        });
    });
    //
    function delete_user(id) {
        if (confirm('Are you sure! you want to delete?')) {
            $.post("{{ route('delete.user') }}", {id: id, _method: 'DELETE', _token: '{{ csrf_token() }}'})
                    .done(function (response) {
                        if (response == 'ok')
                        {
                            var table = $('#user_datatable_ajax').DataTable();
                            table.row('user_dt_row_' + id).remove().draw(false);
                        } else
                        {
                            alert('Request Failed!');
                        }
                    });
        }
    }
    function make_active(id) {
        $.post("{{ route('make.active.user') }}", {id: id, _method: 'PUT', _token: '{{ csrf_token() }}'})
                .done(function (response) {
                    if (response == 'ok')
                    {
                        $('#onclick_active_' + id).attr("onclick", "make_not_active(" + id + ")");
                        $('#onclick_active_' + id).html("<i class=\"fa fa-check-square-o\" aria-hidden=\"true\"></i>Make InActive");
                    } else
                    {
                        alert('Request Failed!');
                    }
                });
    }
    function make_not_active(id) {
        $.post("{{ route('make.not.active.user') }}", {id: id, _method: 'PUT', _token: '{{ csrf_token() }}'})
                .done(function (response) {
                    if (response == 'ok')
                    {
                        $('#onclick_active_' + id).attr("onclick", "make_active(" + id + ")");
                        $('#onclick_active_' + id).html("<i class=\"fa fa-square-o\" aria-hidden=\"true\"></i>Make Active");
                    } else
                    {
                        alert('Request Failed!');
                    }
                });
    }
    function make_verified(id) {
        $.post("{{ route('make.verified.user') }}", {id: id, _method: 'PUT', _token: '{{ csrf_token() }}'})
                .done(function (response) {
                    if (response == 'ok')
                    {
                        $('#onclick_verified_' + id).attr("onclick", "make_not_verified(" + id + ")");
                        $('#onclick_verified_' + id).html("<i class=\"fa fa-check-square-o\" aria-hidden=\"true\"></i>Verified");
                    } else
                    {
                        alert('Request Failed!');
                    }
                });
    }
    function make_not_verified(id) {
        $.post("{{ route('make.not.verified.user') }}", {id: id, _method: 'PUT', _token: '{{ csrf_token() }}'})
                .done(function (response) {
                    if (response == 'ok')
                    {
                        $('#onclick_verified_' + id).attr("onclick", "make_verified(" + id + ")");
                        $('#onclick_verified_' + id).html("<i class=\"fa fa-square-o\" aria-hidden=\"true\"></i>Not Verified");
                    } else
                    {
                        alert('Request Failed!');
                    }
                });
    }
    //
    function getDates(startDate, endDate, interval)
    {
      const duration = endDate - startDate;
      const steps = duration / interval;
      return Array.from({length: steps+1}, (v,i) => new Date(startDate.valueOf() + (interval * i)));
    }
    function applyFiltersOnUsers(filters, callback)
    {
      let requestUrl = "{{route('profile_filter.apply_filters_on_users')}}";
      //
      $.ajax({
        type: 'post',
        url: requestUrl,
        data: {
          filters: filters
        },
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success:function(response)
        {
          callback(response)
        },
        error: function(response)
        {
          flashGlobalError(response.statusText);
        }
      })
    }
    function flashGlobalError(message)
    {
      $('.global-error').html(message).fadeIn().delay(3000).fadeOut();
    }
    function refreshToken()
    {
      $.ajax({
        type: 'post',
        url: '/admin/refresh-token',
        headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success: function(data)
        {
          $('meta[name="csrf-token"]').attr('content', data);
        },
        error: function(response)
        {
          flashGlobalError(response.statusText);
        }
      });
    }
    setInterval(refreshToken, 3600000); // 1 hour
</script>
@endpush