@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>Unique Id</th>
                                <th>Name</th>
                                <th>Product Name</th>
                                <th>Eta</th>
                                <th>Abstract cost</th>
                                <th>Copy Cost</th>
                                <th>Is Active</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                                                <tbody>
                            @foreach($abstractors as $abstractor)
                            <tr>
                                <td>{{$i++}}</td>
                                <td>{{$abstractor->abstractor_unique_id}}</td>
                                <td>{{$abstractor->abstractor_name}}</td>
                                <td>@if(isset($abstractor->product_name)){{$abstractor->product_name->product_name}}@endif</td>
                                <td>{{$abstractor->eta}}</td>
                                <td>{{$abstractor->abstract_cost}}</td>
                                <td>{{$abstractor->copy_cost}}</td>
                                <td>@if($abstractor->is_active == 1) Yes @else No @endif</td>
                                <td><button class="edit_user form-control btn-sm " onclick="editAbstractor({{ $abstractor->id }})"><img class="menuicon" src="{{asset("app-assets/assets/images/edit.svg")}}" height="15" width="15"></button></td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </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">
                    <h6 class="modal-title" style="text-align: left;font: normal normal bold 16px/13px Poppins;letter-spacing: 0.8px;color: #323232;opacity: 1;"></i>Add Abstractor</h6>
                    <button type="button" class="close" data-dismiss="modal">×</button> 
                </div>
                <!-- Modal body -->
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-3">
                            <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-3">
                            <label for="product_select" class="col-form-label">Product Name<span class="text-danger"> * <span></label>
                            <select required class="form-control" name="product_id" id="product_id">
                                <option value="">Select Product</option>
                                @foreach($products as $product)
                                    <option value="{{ $product->id }}">{{ $product->product_name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-lg-3">
                            <label for="state_select" class="col-form-label"> State <span class="text-danger"> * <span></label>
                            <select required 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-3">
                            <label for="county_select" class="col-form-label"> County <span class="text-danger"> * <span></label>
                            <select required class="form-control" name="county" id="county">
                                <option value="">Select County</option>
                                @foreach($counties as $county)
                                    <option value="{{ $county->id }}">{{ $county->county_name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="row mt-1">
                        <div class="col-lg-3">
                            <label for="eta-input" class="col-form-label"> Eta </label>
                            <input autocomplete="off"  name="eta" id="eta" type="text" class="form-control" placeholder="Enter Eta" data-parsley-type="number" data-parsley-trigger="change" />
                        </div>
                        <div class="col-lg-3">
                            <label for="abstract-cost-input" class="col-form-label"> Abstract Cost </label>
                                <input name="abstract_cost" id="abstract_cost" type="text" value="" class="form-control" placeholder="Enter Abstract Cost" data-parsley-type="number" data-parsley-trigger="change" />
                        </div>
                        <div class="col-lg-3">
                            <label for="copy-cost-input" class="col-form-label"> Copy Cost </label>
                                <input name="copy_cost" id="copy_cost" type="text" value="" class="form-control" placeholder="Enter Copy Cost" data-parsley-type="number" data-parsley-trigger="change" />
                        </div>
                        <div class="col-lg-2">
                            <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 class="row">
                        <div class="col-lg-5"></div>  
                        <div class="col-lg-6" style="margin-top:37px;">
                            <input type="submit" value="Submit" name="submit" id="submit" class="btn btn-gradient-primary" onclick="saveAbstractor();">
                        </div>
                    </div>
                </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">
                    <h6 class="modal-title" style="text-align: left;font: normal normal bold 16px/13px Poppins;letter-spacing: 0.8px;color: #323232;opacity: 1;"></i>Edit Abstractor</h6>
                    <button type="button" class="close" data-dismiss="modal">×</button> 
                </div>
                <!-- Modal body -->
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-3">
                            <label for="name-input" class="col-form-label">Abstractor Unique Id</label>
                            <input required name="abstractor_uid" value="" id="abstractor_uid" type="text" class="form-control" readonly/>
                        </div>
                        <div class="col-lg-3">
                            <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-3">
                            <label for="product_select" class="col-form-label">Product Name<span class="text-danger"> * <span></label>
                            <select required class="form-control" name="product_id" id="edit_product_id">
                                <option value="">Select Product</option>
                                @foreach($products as $product)
                                    <option value="{{ $product->id }}">{{ $product->product_name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-lg-3">
                            <label for="state_select" class="col-form-label"> State <span class="text-danger"> * <span></label>
                            <select required 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>
                    <div class="row mt-1">
                        <div class="col-lg-3">
                            <label for="county_select" class="col-form-label"> County <span class="text-danger"> * <span></label>
                            <select required class="form-control" name="county" id="edit_county">
                                <option value="">Select County</option>
                                @foreach($counties as $county)
                                    <option value="{{ $county->id }}">{{ $county->county_name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-lg-2">
                            <label for="eta-input" class="col-form-label"> Eta </label>
                            <input autocomplete="off"  name="eta" id="edit_eta" type="text" class="form-control" placeholder="Enter Eta" data-parsley-type="number" data-parsley-trigger="change" />
                        </div>
                        <div class="col-lg-3">
                            <label for="abstract-cost-input" class="col-form-label"> Abstract Cost </label>
                                <input name="abstract_cost" id="edit_abstract_cost" type="text" value="" class="form-control" placeholder="Enter Abstract Cost" data-parsley-type="number" data-parsley-trigger="change" />
                        </div>
                        <div class="col-lg-3">
                            <label for="copy-cost-input" class="col-form-label"> Copy Cost </label>
                                <input name="copy_cost" id="edit_copy_cost" type="text" value="" class="form-control" placeholder="Enter Copy Cost" data-parsley-type="number" data-parsley-trigger="change" />
                        </div>
                        <div class="col-lg-1">
                            <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 class="row">
                        <div class="col-lg-5"></div>  
                        <div class="col-lg-6" style="margin-top:37px;">
                            <input type="submit" value="Submit" name="submit" id="edit_submit" class="btn btn-gradient-primary" onclick="updateAbstractor();">
                        </div>
                    </div>
                </div>
	        </form>
        </div>
    </div>
</div>
<!-- End Modal -->

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

    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" data-toggle="modal" data-target="#addAbstractorModal"><img class="menuicon" src="{{asset("app-assets/assets/images/add.svg")}}">&nbsp;Add Abstractor</button><br />');           
                } 
            });
});
function saveAbstractor() {
    if ($("#addAbstractorForm").parsley()) {
        if ($("#addAbstractorForm").parsley().validate()) {
            event.preventDefault();
            if ($("#addAbstractorForm").parsley().isValid()) {
                $.ajax({
                    type: "POST",
                    cache:false,
                    async: false,
                    url: "{{ route('abstractor_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(); }, 2000);
                    },
                    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 = '/abstractor/edit/'+id;
    $.ajax({
        url:url,
        dataType:"json",
        success:function(data) {
            $('#editAbstractorModal').modal('show'); 
            $("#abstractor_uid").val(data.result.abstractor_unique_id);
            $("#abstractor_id").val(data.result.id);
            $("#edit_abstractor_name").val(data.result.abstractor_name);
            $("#edit_product_id").val(data.result.product_name_id);
            $("#edit_state").val(data.result.state);
            $("#edit_county").val(data.result.county);
            $("#edit_eta").val(data.result.eta);
            $("#edit_abstract_cost").val(data.result.abstract_cost);
            $("#edit_copy_cost").val(data.result.copy_cost);
            if(data.result.is_active == 1){
                $("#edit_is_active").attr("checked", "checked");
            }else {
                $("#edit_is_active").removeAttr("checked", "");
            }
        }
    });
    return false;
}

function updateAbstractor(){
	var id = $('#abstractor_id').val();
	var url = '{{ route("abstractor_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(); }, 2000);
					},
					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
						});
					}
				});
			}
		}
	}
}

</script>
@endsection