@extends('layouts.app')
@section('title', 'Abstractor Contacts')
@section('content')
    <div class="container-fluid mt-1">
        @include('settings.common_tabs')
            <div class="col-lg-12">
                <div class="card ">
                    <div class="card-body">
                    <div class="p-0">
                        <table id="datatable" class="table table-bordered mb-0" style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                            <thead>
                                <tr>
                                    <th>Sl No</th>
                                    <th>Abstractor</th>
                                    <th>First Name</th>
                                    <th>Last Name</th>
                                    <th>Email</th>
                                    <th>Contact Number</th>
                                    <th>Description</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
																@foreach($abstractorscontacts as $abscontacts)
									<tr>
										<td>{{ $i++ }}</td>
										<td>{{ $abscontacts->abstractor_name}}</td>
										<td>{{ $abscontacts->first_name}}</td>
										<td>{{ $abscontacts->last_name}}</td>
										<td>{{ $abscontacts->email}}</td>
										<td>{{ $abscontacts->contact}}</td>
										<td>{{ $abscontacts->description}}</td>
										<td> <span   class="edit_user ml-2 "  data-id="{{ $abscontacts->id }}" onclick="editContacts({{ $abscontacts->id }})"><img class="menuicon tbl_editbtn" src="{{asset('app-assets/assets/images/edit.svg')}}" >&nbsp;</span>
									</td>
									<!--<td>
									<span="javascript:void(0);" onclick="editContacts({{ $abscontacts->id }})" style="cursor:pointer"><img class="menuicon" src="{{asset('app-assets/assets/images/edit.svg')}}" height="30" width="20">&nbsp;</span></td>-->
									</tr>
								@endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- The Modal -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
    <form id="contactForm" name="contactForm" method="post" role="form" enctype="multipart/form-data">
    @csrf  
    <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Add Abstractor Contacts</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        <div class="row">
				<div class="col-lg-4">
                        <label for="name-input" class="col-form-label">Abstractor<span class="text-danger"> * <span></label>
                            <select id="abstractor_id" name="abstractor_id" type="text" class="form-control" autocomplete="off" required>
								<option value="">Select Abstractor</option>
								@foreach($abstractorsmasters as $absmaster)
								<option value="{{ $absmaster->id }}">{{ $absmaster->abstractor_name }}</option>
								@endforeach
							</select>
                </div>
                <div class="col-lg-4">
                        <label for="name-input" class="col-form-label">First Name<span class="text-danger"> * <span></label>
                            <input id="firstname" name="firstname" type="text" class="form-control" autocomplete="off" placeholder="Enter First Name"  required data-parsley-trigger="focusout" data-parsley-trigger="keyup" data-parsley-pattern="^[A-Za-z ][A-Za-z ]*$">
                </div>
				
				<div class="col-lg-4">
                        <label for="name-input" class="col-form-label">Last Name<span class="text-danger">  <span></label>
                            <input id="lastname" name="lastname" type="text" class="form-control" autocomplete="off" placeholder="Enter Last Name"  data-parsley-trigger="focusout" data-parsley-trigger="keyup" data-parsley-pattern="^[A-Za-z ][A-Za-z ]*$">
                </div>
		</div>
		<div class="row mt-1">			
                <div class="col-lg-4">
                        <label for="name-input" class="col-form-label">Contact Number<span class="text-danger"> * <span></label>
                        <input required data-parsley-type="number" data-parsley-trigger="change" data-parsley-minlength="10" data-parsley-maxlength="15" data-parsley-minlength-message="This value should have minimum 10 characters" data-parsley-maxlength-message="This value should have maximum 15 characters" 
                            id="contact_no" name="contact_no" type="text" class="form-control" autocomplete="off" placeholder="Enter Contact Number" >
                </div>
				
				<div class="col-lg-4">
				   <label for="name-input" class="col-form-label">Email<span class="text-danger"> * <span></label>
						<input id="email" name="email" type="email" class="form-control" autocomplete="off" placeholder="Enter Email" required data-parsley-type="email" data-parsley-trigger="focusout" data-parsley-checkemail>
			</div> 
			 <div class="col-lg-4">
                       <label for="name-input" class="col-form-label">Description<span class="text-danger">  <span></label>
					   <textarea type="text" name="description" id="description" class="form-control" placeholder="Enter Description"></textarea>
                </div>
		</div>
        </div>

      <!-- Modal footer -->
      <div class="modal-footer">
	  <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary" name="submit" id="submit" onclick="contactVal();">Submit</button>
        
      </div>
      </form>
    </div>
  </div>
</div>
<div class="modal fade" id="myModalEdit">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
   
    <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Edit Abstractor Contact</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
      <form id="contactUpdateForm" name="contactUpdateForm" method="post" role="form" enctype="multipart/form-data">
		@csrf
		<div id="ramalist"></div>   
	  </div>
      <!-- Modal footer -->
      <div class="modal-footer">
	          <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      <button type="button" class="btn btn-primary" name="submit" id="submit"  onclick="contactUpdate();">Update</button>
      </div>
      </form>

    </div>
  </div>
</div>
    <script type="text/javascript">
	$(function () {
				@if(Session::has('success'))
				new PNotify({
				title: 'Success',
				delay: 500,
				text:  "{{Session::get('success')}}",
				type: 'success'
				});
						
				@endif
				@if ($errors->any())
				var err = "";
				@foreach ($errors->all() as $error)
				
					new PNotify({
					title: 'Error',
					text: "{{$error}}",
					delay: 800,
					type: 'error'
					});
					@endforeach
				@endif
			});
       $(document).ready(function()
        {
			var $tabid=  'tab12';
			$(".odtabs").not("#tab12").addClass('btn-outline-secondary');
			$("#tab12").addClass('btn-secondary');

            $('.modal').on('hidden.bs.modal', function() {
                $(this).find('form')[0].reset();
                $(this).find('form').parsley().reset();
            });

			window.ParsleyValidator
			.addValidator('fileextension', function (value, requirement) {
			var tagslistarr = requirement.split(',');
            var fileExtension = value.split('.').pop();
            var arr=[];
            $.each(tagslistarr,function(i,val){
            arr.push(val);
            });
            if(jQuery.inArray(fileExtension, arr)!='-1') {
              return true;
            } else {
              return false;
            }
        }, 32)
        .addMessage('en', 'fileextension', 'The extension doesn\'t match the required');
		$("form").parsley();
            var table = $('#datatable').DataTable({
                responsive: true,
                dom: 'l<"toolbar">Bfrtip',
				buttons: [
					'excel'
				],
                initComplete: function(){
                    $("div.toolbar").html('<button id="addContacts" type="button" class="ml-2 btn btn-primary" data-toggle="modal" data-target="#myModal"><img class="menuicon" src="{{asset("app-assets/assets/images/add.svg")}}">&nbsp;Add Abstractor Contacts</button><br />');           
                } 
            });
        }); 
        function getCompany(){
            window.location.href = "/company";
        }
        function contactVal(){
            if ($("#contactForm").parsley()) {
                if ($("#contactForm").parsley().validate()) {
                    event.preventDefault();
                    if ($(contactForm).parsley().isValid()) {
                        $.ajax({	
                        type: "POST",
                        cache:false,
                        async: false,
                        url: "{{ url('/contactInsert') }}",
                        data: new FormData($("#contactForm")[0]),
                        processData: false,
                        contentType: false,
                        success: function(response) {
							if(response.msg=="Abstractor Contacts Added Successfully!"){
                                new PNotify({
                                title: 'Success',
                                text:  response.msg,
                                type: 'success'
                                });
                                setTimeout(function(){  location.reload(); }, 1000);
                            } else {
								new PNotify({
                                title: 'Error',
                                text:  response.msg,
                                type: 'error'
                                });
								return false;
							}
                        },
                        error:function(response) {
                            var err = "";
                            $.each(response.responseJSON.errors,function(field_name,error){
                                err = err+error;
                            });
                            new PNotify({
                                title: 'Error',
                                text:err,
                                type: 'error',
                                delay: 1000
                            });
                        }
                        });
                    }
                }
            }
        }
    function companyStatus(value) {
        window.location.href = '/companyStatus/' + value;
    }
    function editContacts(contactId){
        $("#removeData").remove();
        $.ajax({
            url: "/editContact/" + contactId,
            success: function(data) {
                $("#ramalist").empty();
                $("#ramalist").append(data.data);
                $('#myModalEdit').modal('show'); 
            }
        })
    }
    function contactUpdate(){
        if ($("#contactUpdateForm").parsley()) {
        if ($("#contactUpdateForm").parsley().validate()) {
            event.preventDefault();
            if ($(contactUpdateForm).parsley().isValid()) {
			$.ajax({	
			type: "POST",
			cache:false,
			async: false,
			url: "{{ url('/updateContact') }}",
			data: new FormData($("#contactUpdateForm")[0]),
			processData: false,
			contentType: false,
			success: function(response) {
						new PNotify({
								title: 'Success',
								text:  response.msg,
								type: 'success'
							});
						setTimeout(function(){  location.reload(); }, 800);
					},
					error:function(response) {
						var err = "";
						$.each(response.responseJSON.errors,function(field_name,error){
							err = err +'<br>' + error;
						});
						new PNotify({
							title: 'Error',
							text:err,
							type: 'error',
							delay: 2000
						});
					}
			});
			}
		}
	}
	return false;
    }
    </script>
@endsection