@extends('layouts.app')

@section('title', 'Abstractor')
@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 Unique Id</th>
                                    <th>Abstractor Name</th>
                                    <th>Email Id</th>
                                    <th>Contact Number</th>
                                    <th>Status</th>
                                    <th>Abs Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($abstractors as $k=>$abstractor)
                                <tr>
                                    <td>{{++$k}}</td>
                                    <td>{{$abstractor->abstractor_unique_id}}</td>
                                    <td>{{$abstractor->abstractor_name}}</td>
                                    <td>{{$abstractor->email_id}}</td>
                                    <td>{{$abstractor->contact_no}}</td>
                                    <td>
                                        @if($abstractor->status == 1)
                                            Onboarded
                                        @elseif($abstractor->status == 2)
                                            In Progress
                                        @elseif($abstractor->status == 3)
                                            On Hold
                                        @elseif($abstractor->status == 4)
                                            Rejected
                                        @else
                                            -
                                        @endif
                                    </td>
                                    <td>
										<div class="custom-control custom-switch">
											<input type="checkbox"  class="custom-control-input" id="customSwitch{{ $abstractor->id }}"  value="{{ $abstractor->id }}" onclick="abstractorStatus(this.value)" @if($abstractor->is_active==1) checked @endif>
											<label class="custom-control-label" for="customSwitch{{ $abstractor->id }}">@if($abstractor->is_active==1) Active @else Inactive @endif</label>
										</div>
									</td>
                                    <td><span class="edit_user ml-2" onclick="editAbstractor({{ $abstractor->id }})"><img class="menuicon" src="{{asset("app-assets/assets/images/edit.svg")}}">&nbsp;</span></td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- The Add Abstractor Modal -->
<div class="modal fade" id="addAbstractorModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
	        <form method="post" name="addAbstractorForm" id="addAbstractorForm" role="form" enctype="multipart/form-data" autocomplete="off" data-parsley-validate>
	            @csrf
                <!-- Modal Header -->
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Add Abstractor</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</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 Name<span class="text-danger"> * <span></label>
                            <input required name="abstractor_name" value="" id="abstractor_name" type="text" class="form-control" placeholder="Enter Abstractor Name" required data-parsley-trigger="keyup" data-parsley-pattern="^[A-Za-z .][A-Za-z_ .]*$" />
                        </div>
                        <div class="col-lg-4">
                            <label for="address-input" class="col-form-label">Address</label>
                            <input name="address" value="" id="address" type="text" class="form-control" placeholder="Enter Customer Address" />
                        </div>
                        <div class="col-lg-4">
                            <label for="city-input" class="col-form-label">City</label>
                            <input name="city" value="" id="city" type="text" class="form-control" placeholder="Enter City" 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="state_select" class="col-form-label"> State</label>
                            <select class="form-control" name="state" id="state">
                                <option value="">Select State</option>
                                @foreach($states as $state)
                                    <option value="{{ $state->id }}">{{ $state->short_code }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-lg-4">
                            <label for="zip-input" class="col-form-label">Zip</label>
                            <input name="zip" value="" id="zip" type="text" class="form-control" placeholder="Enter Zip" data-parsley-type="integer" data-parsley-trigger="keyup" data-parsley-type-message ="This value should be a valid number" />
                        </div>
                        <div class="col-lg-4">
                            <label for="phone-no-input" class="col-form-label"> Contact Number </label>
                            <input name="contact_no" id="contact_no" type="text" value="" class="form-control" placeholder="Enter Contact Number" data-parsley-type="number" data-parsley-minlength="10" data-parsley-maxlength="15" data-parsley-trigger="change" data-parsley-minlength-message="This value should have minimum 10 characters" data-parsley-maxlength-message="This value should have maximum 15 characters" />
                        </div>
                    </div>
                    <div class="row mt-1">
                        <div class="col-lg-4">
                            <label for="email-input" class="col-form-label"> Email Id </label>
                            <input name="email_id" id="email_id" type="text" class="form-control" placeholder="Enter Email Id" data-parsley-type="email" data-parsley-trigger="keyup" />
                        </div>
                        <div class="col-lg-4">
                            <label for="email-input" class="col-form-label"> Status <span class="text-danger"> * <span> </label>
                            <select required class="form-control" name="status" id="status">
                                <option value="" selected disabled>Select Status</option>
                                <option value="1" >Onboarded</option>
                                <option value="2" >In Progress</option>
                                <option value="3" >On Hold</option>
                                <option value="4" >Rejected</option>
                            </select>
                        </div>
                        <div class="col-lg-4">
                            <label for="active-input" class="col-form-label">Is Active ?</label><br>
                            <input type="checkbox" id="is_active" name="is_active" value="1" checked>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    <input type="submit" value="Submit" name="submit" id="submit" class="btn btn-primary" onclick="saveAbstractorMaster();">
                </div>
	        </form>
        </div>
    </div>
</div>
<!-- End Modal -->

<!-- The Edit Abstractor Modal -->
<div class="modal fade" id="editAbstractorModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
	        <form method="post" name="editAbstractorForm" id="editAbstractorForm" role="form" enctype="multipart/form-data" onsubmit="return abstractorUpdate()" autocomplete="off" data-parsley-validate>
	            @csrf
                <input type="hidden" name="abstractor_id" id="abstractor_id">
                <!-- Modal Header -->
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Edit Abstractor</h5>
					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
                </div>
                <!-- Modal body -->
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-4">
                            <label for="unique-id-input" class="col-form-label"> Abstractor Unique Id </label>
                            <input name="abstractor_uid" id="abstractor_uid" type="text" class="form-control" readonly />
                        </div>
                        <div class="col-lg-4">
                            <label for="name-input" class="col-form-label">Abstractor Name<span class="text-danger"> * <span></label>
                            <input required name="abstractor_name" value="" id="edit_abstractor_name" type="text" class="form-control" placeholder="Enter Abstractor Name" required data-parsley-trigger="keyup" data-parsley-pattern="^[A-Za-z .][A-Za-z_ .]*$" />
                        </div>
                        <div class="col-lg-4">
                            <label for="address-input" class="col-form-label">Address</label>
                            <input name="address" value="" id="edit_address" type="text" class="form-control" placeholder="Enter Address" />
                        </div>
                    </div>
                    <div class="row mt-1">
                        <div class="col-lg-4">
                            <label for="city-input" class="col-form-label">City</label>
                            <input name="city" value="" id="edit_city" type="text" class="form-control" placeholder="Enter City" data-parsley-trigger="keyup" data-parsley-pattern="^[A-Za-z ][A-Za-z_ ]*$" />
                        </div>
                        <div class="col-lg-4">
                            <label for="state_select" class="col-form-label"> State</label>
                            <select class="form-control" name="state" id="edit_state">
                                <option value="">Select State</option>
                                @foreach($states as $state)
                                    <option value="{{ $state->id }}">{{ $state->short_code }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-lg-4">
                            <label for="zip-input" class="col-form-label">Zip</label>
                            <input name="zip" value="" id="edit_zip" type="text" class="form-control" placeholder="Enter Zip" data-parsley-type="integer" data-parsley-trigger="keyup" data-parsley-type-message ="This value should be a valid number" />
                        </div>
                    </div>
                    <div class="row mt-1">
                        <div class="col-lg-4">
                            <label for="phone-no-input" class="col-form-label"> Contact Number </label>
                            <input name="contact_no" id="edit_contact_no" type="text" value="" class="form-control" placeholder="Enter Contact Number" data-parsley-type="number" data-parsley-minlength="10" data-parsley-maxlength="15" data-parsley-trigger="change" data-parsley-minlength-message="This value should have minimum 10 characters" data-parsley-maxlength-message="This value should have maximum 15 characters" />
                        </div>
                        <div class="col-lg-4">
                            <label for="email-input" class="col-form-label"> Email Id </label>
                            <input name="email_id" id="edit_email_id" type="text" class="form-control" placeholder="Enter Email Id" data-parsley-type="email" data-parsley-trigger="keyup" />
                        </div>
                        <div class="col-lg-4">
                            <label for="email-input" class="col-form-label"> Status <span class="text-danger"> * <span></label>
                            <select required class="form-control" name="status" id="edit_status">
                                <option value="" selected disabled>Select Status</option>
                                <option value="1" >Onboarded</option>
                                <option value="2" >In Progress</option>
                                <option value="3" >On Hold</option>
                                <option value="4" >Rejected</option>
                            </select>
                        </div>
                    </div>
                    <div class="row mt-1">
                        <div class="col-lg-4">
                            <label for="active-input" class="col-form-label">Is Active ?</label><br>
                            <input type="checkbox" id="edit_is_active" name="is_active" value="1" checked>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    <input type="submit" value="Update" name="submit" id="edit_submit" class="btn btn-primary" onclick="updateAbstractor();">
                </div>
	        </form>
        </div>
    </div>
</div>
<!-- End Modal -->

<script>
$(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
});

function abstractorStatus(value)
{
    window.location.href = '/abstractormasterStatus/' + value;
}

function saveAbstractorMaster() {
    if ($("#addAbstractorForm").parsley()) {
        if ($("#addAbstractorForm").parsley().validate()) {
            event.preventDefault();
            if ($("#addAbstractorForm").parsley().isValid()) {
                $.ajax({
                    type: "POST",
                    cache:false,
                    async: false,
                    url: "{{ route('abstractor_master_add') }}",
                    data: new FormData($("#addAbstractorForm")[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
                        });
                    }
                });
            }
        }
    }
}

function editAbstractor(id) {
    // var url = '/abstractormaster/edit/'+id;
    // $.ajax({
    //     url:url,
    //     dataType:"json",
    //     success:function(data) {
    //         $('#editAbstractorModal').modal('show'); 
    //         $("#abstractor_id").val(data.result.id);
    //         $("#abstractor_uid").val(data.result.abstractor_unique_id);
    //         $("#edit_abstractor_name").val(data.result.abstractor_name);
    //         $("#edit_address").val(data.result.address);
    //         $("#edit_city").val(data.result.city);
    //         $("#edit_state").val(data.result.state);
    //         $("#edit_zip").val(data.result.zip);
    //         $("#edit_contact_no").val(data.result.contact_no);
    //         $("#edit_email_id").val(data.result.email_id);
    //         $("#edit_status").val(data.result.status);
    //         if(data.result.is_active == 1){
    //             $("#edit_is_active").attr("checked", "checked");
    //         }else {
    //             $("#edit_is_active").removeAttr("checked", "");
    //         }
    //     }
    // });
    // return false;

    window.location.href = '/update_abstractor/'+id ;

}

function updateAbstractor(){
	var id = $('#abstractor_id').val();
	var url = '{{ route("abstractor_master_update", ":id") }}';
	url = url.replace(':id', id);
    if ($("#editAbstractorForm").parsley()) {
		if ($("#editAbstractorForm").parsley().validate()) {
			event.preventDefault();
			if ($("#editAbstractorForm").parsley().isValid()) {
				$.ajax({
					type: "POST",
					cache:false,
					async: false,
					url: url,
					data: new FormData($("#editAbstractorForm")[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
						});
					}
				});
			}
		}
	}
}

$(document).ready(function() {
	$(".odtabs").not("#tab5").addClass('btn-outline-secondary');
	$("#tab5").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="addAbstractor" type="button" class="ml-2 btn btn-primary" onclick="add_records();"><img class="menuicon" src="{{asset("app-assets/assets/images/add.svg")}}">&nbsp;Add Abstractor</button><br />');
		}, 
	   'columnDefs': [ {
			'targets': [6],
			'orderable': false,
		}]
    });
});

function add_records()
{
    window.location.href = '/add_abstractors/' ;
}

</script>
@endsection