@extends('layouts.app')

@section('title', 'Customer')
@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>Customer Unique Id</th>
                                    <th>Customer Name</th>
                                    <th>Company Name</th>
                                    <th>Email Id</th>
                                    <th>Contact Number</th>
                                    <th>Logo</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($customers as $k=>$customer)
                                <tr>
                                    <td>{{++$k}}</td>
                                    <td>{{$customer->customer_unique_id}}</td>
                                    <td>{{$customer->customer_name}}</td>
                                    <td>@if(isset($customer->getCompany['company_name'])){{$customer->getCompany['company_name']}}@endif</td>
                                    <td>{{$customer->email_id}}</td>
                                    <td>{{$customer->phone_no}}</td>
                                    <td>@if(isset($customer->logo))<img src="data:image;base64,{{base64_encode($customer->logo)}}" style="width:30%;height:30%;opacity:1;">@endif</td>
                                    <td>
										<div class="custom-control custom-switch">
											<input type="checkbox"  class="custom-control-input" id="customSwitch{{ $customer->id }}"  value="{{ $customer->id }}" onclick="customerStatus(this.value)" @if($customer->is_active==1) checked @endif>
											<label class="custom-control-label" for="customSwitch{{ $customer->id }}">@if($customer->is_active==1) Active @else Inactive @endif</label>
										</div>
									</td>
                                    <td><span class="edit_user ml-2" onclick="editCustomer({{ $customer->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 Customer Modal -->
<div class="modal fade" id="addCustomerModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
	        <form method="post" name="addCustomerForm" id="addCustomerForm" 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 Customer</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="company_select" class="col-form-label">Company<span class="text-danger"> * <span></label>
                            <select required class="form-control" name="company_id" id="company_id">
                                <option value="">Select Company</option>
                                @foreach($companies as $company)
                                    <option value="{{ $company->id }}">{{ $company->company_name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-lg-4">
                            <label for="name-input" class="col-form-label">Customer Name<span class="text-danger"> * <span></label>
                            <input required name="customer_name" value="" id="customer_name" type="text" class="form-control" placeholder="Enter Customer Name" required data-parsley-trigger="keyup" data-parsley-pattern="^[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>
                    <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="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-input" class="col-form-label">State</label>
                            <input name="state" value="" id="state" type="text" class="form-control" placeholder="Enter State" data-parsley-trigger="keyup" data-parsley-pattern="^[A-Za-z ][A-Za-z_ ]*$" />
                        </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-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="email-input" class="col-form-label"> Email Id </label>
                            <input name="email_id" id="email_id" type="email" class="form-control" placeholder="Enter Email Id" data-parsley-type="email" data-parsley-trigger="keyup" />
                        </div>
                        <div class="col-lg-4">
                            <label for="phone-no-input" class="col-form-label"> Contact Number </label>
                            <input name="phone_no" id="phone_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="logo-input" class="col-form-label"> Logo </label>
                            <input id="logo" name="logo" type="file" class="form-control" accept="image/*" data-parsley-trigger="keyup"  data-parsley-fileextension="jpg,png,svg,jpeg">
                        </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="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="saveCustomer();">
                </div>
	        </form>
        </div>
    </div>
</div>
<!-- End Modal -->

<!-- The Edit Customer Modal -->
<div class="modal fade" id="editCustomerModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
	        <form method="post" name="editCustomerForm" id="editCustomerForm" role="form" enctype="multipart/form-data" autocomplete="off" data-parsley-validate>
	            @csrf
                <!-- Modal Header -->
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Edit Customer</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 id="append_edit_customer"></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="updateCustomer();">
                </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
});

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

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

function saveCustomer() {
    if ($("#addCustomerForm").parsley()) {
        if ($("#addCustomerForm").parsley().validate()) {
            event.preventDefault();
            if ($("#addCustomerForm").parsley().isValid()) {
                $.ajax({
                    type: "POST",
                    cache:false,
                    async: false,
                    url: "{{ route('customer_add') }}",
                    data: new FormData($("#addCustomerForm")[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 editCustomer(id){
    $("#removeAppendedData").remove();
	$.ajax({
		url: "/customer/edit/" + id,
		success: function(data) {
            $("#append_edit_customer").empty();
			$("#append_edit_customer").append(data.data);
            $('#editCustomerModal').modal('show'); 
            $('.select2').select2({
                width: '100%',
                placeholder: "Select an Option",
                allowClear: true
            });
        }
	});
}

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

</script>

@endsection