@extends('layouts.private')

@section('content')
@section('breadcrumb')
<div class="c-subheader justify-content-between px-3 py-0 bg-white">
<ol class="breadcrumb border-0 m-0 px-0 py-0 px-md-3  col-sm-8 col-md-8">
       
        <li class="pt-3">
            <div class="btn-group">
                <a class="btn btn-md btn-dark border" href="javascript:;" onclick="openFilterPopup()" style="border-right: solid 1px #fff;">
                <i class="fas fa-plus-square" aria-hidden="true"></i>&nbsp;New</a> 
            </div>             
        </li>
        <li class="text-left px-3">
                <div class="sortingAction text-center p-0 m-0">                                        
                    <label class="p-0 m-0 small">My Contacts?</label><br/>
                    <label class="c-switch c-switch-label c-switch-opposite c-switch c-switch-success">                        
                        <input class="c-switch-input p-0 m-0" type="checkbox" checked name="user" value="true" onchange="updatePersonListing()" ><span class="c-switch-slider" data-checked="On" data-unchecked="Off"></span>
                    </label><br/>
                </div>
          
        </li>
       
      
    </ol> 
    <ol class="breadcrumb border-0 m-0 px-0 py-0 px-md-3 col-sm-4 col-md-4">
        <li class="pt-3 col-sm-11 col-md-12">
            <div class="text-right">
                <div  class="dataTables_filter">
                    <label class="col-md-10 mb-3"> 
                    <input type="text" id="search" onkeyup="updatePersonListing()" class="form-control p-3" placeholder="Search.." aria-controls="DataTables_Table_0">
                    </label>
                </div>
            </div>
        </li>
    </ol>
</div>
@endsection
<div class="card " style="overflow-x: auto;">
    
    <div class="card-body">
       
        <div class="row">
            <div class="col-sm-12" id="personListing">
                @include('private.person.indexTableListing')
             </div>
        </div>
</div>
 

<div class="persondrawer drawer drawer-right slide" tabindex="-1" role="dialog" aria-labelledby="drawer-1-title" aria-hidden="true" id="drawer-1">
    <div class="drawer-content drawer-content-scrollable" role="document">
        <div class="drawer-header">
            <h4 class="drawer-title" id="drawer-1-title">Add Contacts</h4>
        </div>
        <div class="drawer-body">
            <form id="contacts" autocomplete="off">
            @include('private.person.create', ['record' => '', 'prifix' => ''])
            </form>
        </div>
        <div class="drawer-footer">
            <div class="row">
                <div class="col-sm-6">
                    <button  class="btn btn-dark px-4 mt-3" type="button" onclick="saveRecords()">Save</button>
                    <button  class="btn btn-primary px-4 mt-3 enabled_partner_button" type="button" style="display:none">Send Invite</button>
                    <button  class="btn btn-primary px-4 mt-3 enabled_partner_button" type="button"style="display:none">Reset Password</button>
            </div>
            <div class="col-sm-6  text-right">
                    <button class="btn btn-dark px-4 mt-3" data-dismiss="drawer" type="button">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>
<link href="{{ asset('css/select2.min.css') }}" rel="stylesheet">
@section('css')
<style>

.select2-container .select2-selection--single {
        height: 32px !important;
    }
    .select2-container--default .select2-selection--single{
    border-color: #e4e7ea !important;
}
    .select2-container--default .select2-selection--multiple{
    border-color: #e4e7ea !important;
}
.drawer {
  width: 1000px !important;
}
    </style>




@section('script')



@endsection  
<script>

    function sortType(event){
        $('.sortValue').val($(event).find('i').data("sort"));
        $('.sortType').val($(event).find('i').data("name"));
        updatePersonListing();
    }
function updatePersonListing(url = ''){
        var search = $('#search').val();
        var getUrl = "{{route('contacts.contacts.index')}}?query="+search;
        if(url != ""){
            getUrl = url+"&query="+search;
        }
        var sortValue = $('.sortValue').val();
        var sortType = $('.sortType').val();
        var user = $('input[name="user"]:checked').val();
        $.get(getUrl+'&listing=true&user='+user+'&sortType='+sortType+'&sortValue='+sortValue, function(data) {
            $('#personListing').html(data.html);
         
         });
    }
  $('body').on('click', '#personPagination a', function(event){
    event.preventDefault();
    updatePersonListing($(this).attr('href'));
  });

  function openFilterPopup(){
    
    document.getElementById("contacts").reset();
        $('.country').val('').trigger('change');
        $('.state').val('').trigger('change');
        $('.company_name').val('').trigger('change');
        $('.persondrawer').drawer('show');
    } 
    function saveRecords(){
        var formData = $('#contacts').serializeArray();
        $.post("{{route('contacts.contacts.store')}}", formData, function(data) {
          toastr.success(data.message);
          $('.persondrawer').drawer('hide');
          updatePersonListing();
        }).fail(function(response) {
            var errors = response.responseJSON.errors;

            var msg = '';
            $.each(errors, function(index, value) {
                toastr.error(errors[index][0]);
            });

        }); 
    }
    function getDetail(url){
        $('.ajax-loader').css("visibility", "visible");
        
        $.get(url, function(data) {
            
           $('#detailPopup').find('.detailBody').html(data.html);
           $('#detailPopup').modal();
      
      //appending modal background inside the bigform-content
        $('.modal-backdrop').appendTo('.bigform-content');
      //removing body classes to able click events
      $('body').removeClass();
      $('body').addClass('detailPopup');

      $('body').removeAttr("style");
        $('.modal-backdrop.show').remove();
        
          
         setTimeout(function(){ window.scrollTo(0, 0);  $('.ajax-loader').css("visibility", "hidden"); }, 1000);

        });
    }
   
</script>

@endsection
@endsection