@extends('layouts/pos_layout')
@section('title', '| Guarantor List')
@section('content')
@include('successMsg')

<div class="row">
<div class="col-md-12">
<div class="" style="">
    <div class="">
      <div class="panel panel-default" style="background-color:#708090;">
        <div class="panel-heading" style="padding-bottom:0px">
          <div class="panel-options">
              <a href="{{url('pos/addGuarantor/')}}" class="btn btn-info pull-right addViewBtn"><i class="glyphicon glyphicon-plus-sign addIcon"></i>Add Guarantor</a>
          </div>
          <h1 align="center" style="font-family: Antiqua;letter-spacing: 2px"><font color="white">GUARANTOR LIST</font></h1>
        </div>
        <div class="panel-body panelBodyView"> 
        <div>
          <script type="text/javascript">
          jQuery(document).ready(function($)
          {

            $("#proGroupView").dataTable().yadcf([
              
            ]);
          });
          </script>
        </div>
          <table class="table table-striped table-bordered" id="proGroupView">
            <thead>
                <tr>
                    <th width="30">SL#</th>
                    <th>Customer Id</th>
                    <th>Customer Name</th>
                    <th>Guarantor Name</th>
                    <th>Father Name</th>
                    <th>Spouse Name</th>
                    <th>Email</th>
                    <th>Phone</th>
                    <th>Relation</th>
                    <th>National Id</th>
                    <th>Action</th>
                </tr>
                  {{ csrf_field() }}
                </thead>
                <tbody id="tableBodySection">
                                    @if(!empty($guarantors))
                    @foreach($guarantors as $guarantor)
                      <tr class="item{{$guarantor->id}}">
                        <td class="text-center slNo">{{++$no}}</td>
                        <td class="text-center">{{ $guarantor->customer->customer_id_no ?? '' }}</td>
                        <td class="text-center">{{ $guarantor->customer->name ?? '' }}</td>
                        <td class="text-center">{{ $guarantor->name ?? ''}}</td>
                        <td class="text-center">{{ ($guarantor->father_name) ? $guarantor->father_name : 'N/A' }}</td>
                        <td class="text-center">{{ ($guarantor->spouse_name) ? $guarantor->spouse_name : 'N/A' }}</td>
                        <td class="text-center">{{ ($guarantor->email) ? $guarantor->email : 'N/A' }}</td>
                        <td class="text-center">{{ ($guarantor->phone) ? $guarantor->phone : 'N/A' }}</td>
                        <td class="text-center">{{ ($guarantor->relation) ? $guarantor->relation : 'N/A' }}</td>
                        <td class="text-center">{{ ($guarantor->national_id) ? $guarantor->national_id : 'N/A' }}</td>
                        <td class="text-center" width="100">
                            <a href="javascript:;" class="form5" data-token="" data-id="{{$guarantor->id}}">
                                <span class="fa fa-eye"></span>
                            </a>&nbsp
                            <a id="editIcone" href="{{url('pos/editGuarantor/'.$guarantor->id)}}">
                              <span class="glyphicon glyphicon-edit"></span>
                            </a>&nbsp
                            <a id="deleteIcone" href="javascript:;" class="delete-modal" data-id="{{$guarantor->id}}">
                                <span class="glyphicon glyphicon-trash"></span>
                            </a>
                        </td>
                      </tr>
                    @endforeach
                  @endif
                </tbody> 
          </table>
        </div>
      </div>
  </div>
  </div>
</div>
</div>

<div id="myModal" class="modal fade" style="margin-top:3%">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
         <h4 class="modal-title" style="clear:both"></h4>
      </div>
      <div class="modal-body">
        <div class="deleteContent" style="padding-bottom:20px;">
            <h4>You are about to delete this item this procedure is irreversible !</h4>
            <h4>Do you want to proceed ?</h4> 
            <span class="hidden id"></span>
        </div>
        <div class="modal-footer">
            <p id="MSG" class="pull-left" style="color:red"></p>
            <p id="MSGS" class="pull-left" style="color:green"></p>
          {!! Form::button('<span id=""></span>', ['class' => 'btn actionBtn', 'id' => 'footer_action_button'] ) !!}
          {!! Form::button('<span id=""></span>', ['class' => 'btn actionBtn',  'data-dismiss' => 'modal', 'id' => 'footer_action_button2'] ) !!}
         
          {!! Form::button('<span id=""> Close</span>',['class' => 'btn btn-warning', 'data-dismiss' => 'modal' , 'id' => 'footer_action_button_dismis'] ) !!}
          
        </div>
      </div>
    </div>
  </div>
</div>

@include('pos/tools/guarantor/guarantorDetails')
@include('dataTableScript')
@endsection

<script src="{{asset('js/jquery-1.11.1.min.js')}}"></script>
  <script type="text/javascript">
  $( document ).ready(function() {
        
      //delete function
      $(document).on('click', '.delete-modal', function() {
          if(hasAccess('pos/deleteGuarantorItem')){
            $('#MSGE').empty();
            $('#MSGS').empty();
            $('#footer_action_button2').text(" Yes");
            $('#footer_action_button2').removeClass('glyphicon glyphicon-check');
            $('#footer_action_button_dismis').text(" No");
            $('#footer_action_button_dismis').removeClass('glyphicon glyphicon-remove');
            $('.actionBtn').removeClass('edit');
            $('.actionBtn').removeClass('btn-success');
            $('.actionBtn').addClass('btn-danger');
            $('.actionBtn').addClass('delete');
            $('.modal-title').text('Delete');
            $('.modal-header').css({"background-color":"black", "color":"white", "padding":"10px"});
            $('.modal-dialog').css('width','50%');
            $('.id').text($(this).data('id'));
            $('.deleteContent').show();
            $('.form-horizontal').hide();
            $('#footer_action_button2').show();
            $('#footer_action_button').hide();
            $('.title').html($(this).data('uname'));
            $('#myModal').modal('show');
        }
      });

      $('.modal-footer').on('click', '.delete', function() {
        $.ajax({
          type: 'post',
          url: './deleteGuarantorItem',
          data: {
            '_token': $('input[name=_token]').val(),
            'id': $('.id').text()
          },
          success: function(_response) {

            if(_response.responseTitle == 'success')
            {
              toastr.success(_response.responseText);
              
              $("#tableBodySection").load(location.href + " #tableBodySection>*", "");
              
              setTimeout(function(){
                window.location.reload(1);
              }, 1000);

            }
            else toastr.error(_response.responseText);
          
          }
        });
      });

       //Customer details model
       $(document).on('click', '.form5', function() {
            if(hasAccess('pos/guarantorDetails')){
                $('#imageShow3').empty();
                var id = ($(this).data('id'));
                var crsf = ($(this).data('token'));
                //alert(id);alert(crsf);
                $.ajax({
                    type: 'post',
                    url: './guarantorDetails',
                    data: {
                        '_token': $('input[name=_token]').val(),
                        'id': id
                    },
                    dataType: 'json',
                    success: function( _response ){

                      $.each(_response.data, function( index, value )
                      {
                          $('#customer_id_no').text(_response.data.customer_id_no);
                          $('#customer_name').text(_response.data.customer_name);
                          $('#guarantor_name').text(_response.data.guarantor_name);
                          $('#father_name').text(_response.data.father_name);
                          $('#Spouse_name').text(_response.data.Spouse_name);
                          $('#email').text(_response.data.email);
                          $('#phone').text(_response.data.phone);
                          $('#relation').text(_response.data.relation);
                          $('#national_id').text(_response.data.national_id);
                          $('#date_of_birth').text(_response.data.date_of_birth);
                          $('#marital_status').text(_response.data.marital_status);
                          $('#yearly_income').text(_response.data.yearly_income);
                          $('#description').text(_response.data.description);

                          $('#present_devision').text(_response.data.present_devision);
                          $('#present_district').text(_response.data.present_district);
                          $('#present_upazila').text(_response.data.present_upazila);
                          $('#present_union').text(_response.data.present_union);
                          $('#present_village').text(_response.data.present_village);
                          $('#present_remark').text(_response.data.present_remark);

                          $('#permanent_devision').text(_response.data.permanent_devision);
                          $('#permanent_district').text(_response.data.permanent_district);
                          $('#permanent_upazila').text(_response.data.permanent_upazila);
                          $('#permanent_union').text(_response.data.permanent_union);
                          $('#permanent_village').text(_response.data.permanent_village);
                          $('#permanent_remark').text(_response.data.permanent_remark);

                      });

                        var imageName = _response.data.image_path;
                        
                        if(imageName) $('#imageShow3').append('<img src="{{ asset("images/pos/guarantor/") }}'+ '/' + imageName +'" width="300" height="300" class="amni"/>');
                        $('.modal-title').text('Customer Details');
                        $('.modal-header').css({"background-color":"black", "color":"white", "padding":"10px"});
                        $('.modal-dialog').css('width','90%');
                        $('.deleteContent').hide();
                        $('.modal-footer').hide();
                        $('.form-horizontal').show();
                        $('#myModal2').modal('show');

                    },
                    error: function( data ){
                        alert();
                    }
                });
            }

        });


});//ready function end
</script>