@extends('loader')
@extends('layouts.app')
@extends('layouts.master')
<style>
#packageList thead tr {
  cursor: pointer;
  outline: none;
}
#packageList thead tr th::after { 
  content: '▼';
  font-size: 12px;
  margin-left: 5px;
}
#packageList #no-sort::after { 
  content: '';
}
</style>
@section('content')
<div class="main-panel dashboard"> 
    <div class="content-wrapper">

    <div class="row">
            <div class="col-md-12 grid-margin">
                <div class="row">
                    <div class="col-md-4">
                        <!-- <form method="get" class="search_form_keys" id="search_form_keys" action=""> -->
                          <div class="input-group rounded-bar">
                              <div class="input-group-prepend hover-cursor" id="navbar-search-icon">
                                <button type="submit"><span class="input-group-text" id="search">
                                  <i class="ti-search"></i>
                                </span></button>
                                
                              </div>
                              <input type="text" name="search" class="form-control search_key" id="navbar-search-input" placeholder="{{ trans('language.search') }}" aria-label="search" aria-describedby="search" value="">
                            </div>
                          <!-- </form> -->
                    </div>

                    <div class="col-md-3">
            <div class="form-group">
                        <!-- <label>{{trans('language.status')}}</label> -->
                          <select class="form-control"  id="status">
                              <option value="">{{ trans('language.all') }}</option>
                              <option value="active">{{ trans('language.active') }}</option>
                              <option value="inactive">{{ trans('language.inactive') }}</option>
                          </select>
                      </div></div>

                      <div class="col-md-5">
                        <button class="btn btn-primary btn-icon-text" onclick="search()">
                                <i class="ti-search btn-icon-prepend"></i>{{ trans('language.submit') }}
                        </button>&nbsp;&nbsp;
                        <button class="btn btn-primary btn-icon-text" data-toggle="modal" data-target="#packageModal">
                                <i class="ti-plus btn-icon-prepend"></i>{{ trans('language.add_new') }}
                        </button>
                    </div>

                </div>
            </div>
        </div>

        <div class="row" id="tableBody"></div>

    </div>
</div>

<div class="modal fade" id="delete_package" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"></h5>
        <button type="button" class="close" data-dismiss="modal"  aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
    <div class="modal-body">
            {{ trans('language.do_you_want_to_delete') }}
    </div>
      <div class="modal-footer text-center">
            <input type="hidden" name="" value="" id="area_id"> 
            <button type="button" class="btn btn-secondary btn-rounded"  data-dismiss="modal">{{ trans('language.close') }}</button>
            <a href="" id="delete_btn" class="btn btn-primary" >{{ trans('language.delete') }} </a>
        </div>
    </div>
  </div>
</div>

@extends('add_edit_group')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>

    var page=1; // initial page in the list
    var sortorder = "DESC";
    var sortcolumn = "created_at";
    var tab = "";

$(document).ready(function(){

    $('#packageModalTitle').html("{{trans('language.add_group')}}");
    fetchGroup();

     // event for catching click on pagination links
     $(document).on('click', '.pagination a', function(event){

      event.preventDefault(); 
      page = $(this).attr('href').split('page=')[1];
      fetchGroup(page,sortcolumn,sortorder);

    });
    // event for catching click on pagination links ends

});

// ajax function to fetch group data
function fetchGroup(page=1,field="created_at",sort="DESC"){
        
        sortcolumn = field;
        sortorder = sort;
        showorhideloader();

        $.ajax({
            url:"{{url('/getGroupAjax')}}",
            data:{'page':page,'field_to_sort':field,'sort':sort,'search' : $('#navbar-search-input').val(),
            'status':$('#status').val()},
            success:function(data) 
            {
               if(data == ""){
                window.location = "{{url('/login')}}";
               }
                $('#tableBody').html(data);
                showorhideloader('hide');
            },error: function (responseData, textStatus, errorThrown) {
                console.log(responseData+" "+textStatus+" "+errorThrown);
            },
        });
        
    }
    // ajax function to fetch group data ends

function sortorderchange(field,sort){
  if(sort == "ASC"){
    sort = "DESC";
  }
  else{
    sort = "ASC";
  }
  fetchGroup(page,field,sort);
}

function numberValidator(id) {

var name = $('#'+id).val();
const regex = /^([0-9-]+)$/;
if(name.match(regex)){
  
}
else
{
  str = name.substring(0, name.length - 1);
  $("#"+id).val(str);
  if($("#"+id).val() != ""){
    phoneValidator(id);
  }
}
}

function validate(){

if($('#group_id').val() == "" || $('#group_name').val() == "" ){
    swal('{{trans("language.mandatory_fields_msg")}}');
    return false;
}

}

// search submit button click handler function
function search(){
        page =1;
        // var sortcolumn = getSortColumn('areasortcolumn');
        fetchGroup(page,sortcolumn,sortorder);
    }
     // search submit button click handler function ends

     // function to populate data for editing in modal
  function loadDataToEdit(dataobj){
        $('#packageModalTitle').html('