@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 shadow-lg">
		<div class="card-header card_header" >
			<h4 class="mt-2 ml-2"> Customer Details</h4>
		</div></br>
		<div class="card-body p-0 ">
            <div class="d-flex flex-row-reverse bd-highlight ml-2" >
				<div class="text-right mx-4">
					<span class="edit_customer_profile" style="cursor:pointer;"><i class="fa-solid fa-pen-to-square"></i>&nbsp; Edit</span>
                </div>
            </div>
			<div class="row mt-3 display_div mx-3">
				<div class="col-lg-12">
					<div class="card mb-4">
						<div class="card-body">
                            <div class="row">
								<div class="col-sm-2">
									<p class="mb-0 mt-2"><b>Customer Unique Id</b></p>
								</div>
								<div class="col-sm-4">
									<p class="text-muted mb-0 mt-2"><b>{{$get_customer->customer_unique_id}}</b></p>
								</div>
                                <div class="col-sm-2">
									<p class="mb-0 mt-2"><b>Customer Name</b></p>
								</div>
								<div class="col-sm-4">
									<p class="text-muted mb-0 mt-2"><b>{{$get_customer->customer_name}}</b></p>
								</div>
							</div>
							<hr>
							<div class="row mt-1">
								<div class="col-sm-2">
									<p class="mb-0 mt-2"><b>Company Name</b></p>
								</div>
								<div class="col-sm-4">
									<p class="text-muted mb-0 mt-2"><b>@if(isset($get_customer->getCompany['company_name'])){{$get_customer->getCompany['company_name']}}@endif</b></p>
								</div>
                                <div class="col-sm-2">
									<p class="mb-0 mt-2"><b>Email</b></p>
								</div>
								<div class="col-sm-4">
									<p class="text-muted mb-0 mt-2"><b>{{$get_customer->email_id}}</b></p>
								</div>
							</div>
							<hr>
							<div class="row mt-1">
                                <div class="col-sm-2">
                                    <p class="mb-0"><b>Contact Number</b></p>
                                </div>
                                <div class="col-sm-4">
                                    <p class="text-muted mb-0">{{$get_customer->phone_no}}</p>
                                </div>
                                <div class="col-sm-2">
									<p class="mb-0 mt-2"><b>Address</b></p>
								</div>
								<div class="col-sm-4">
									<p class="text-muted mb-0 mt-2"><b>{{$get_customer->address}}</b></p>
								</div>
							</div>
							<hr>
							<div class="row mt-1">
                                <div class="col-sm-2">
									<p class="mb-0"><b>City</b></p>
								</div>
								<div class="col-sm-4">
									<p class="text-muted mb-0"><b>{{$get_customer->city}}</b></p>
								</div>
                                <div class="col-sm-2">
									<p class="mb-0"><b>State</b></p>
								</div>
								<div class="col-sm-4">
									<p class="text-muted mb-0"><b>{{$get_customer->state}}</b></p>
								</div>
							</div>
                            <hr>
							<div class="row mt-1">
                                <div class="col-sm-2">
                                    <p class="mb-0"><b>Zip</b></p>
                                </div>
                                <div class="col-sm-4">
                                    <p class="text-muted mb-0"><b>{{$get_customer->zip}}</b></p>
                                </div>
                                <div class="col-sm-2">
									<p><b>Status</b></p>
								</div>
								<div class="col-sm-4">
									<p class="text-muted"><b>@if($get_customer->is_active == 1) Active @else Inactive @endif</b></p>
								</div>
							</div>
                            <hr>
							<div class="row mt-1">
                                <div class="col-sm-2">
                                    <p class="mb-0"><b>Logo</b></p>
                                </div>
                                <div class="col-sm-4">
                                    @if(isset($get_customer->logo))<img src="data:image;base64,{{base64_encode($get_customer->logo)}}" style="width:20%;height:80%;opacity:1;">@endif
                                </div>
							</div>
						</div>
					</div>
				</div>
			</div>
            <div class="mt-3 edit_div d-none mx-3" >
                <form id="update_customer_profile" method="POST" action="{{route('update_customer_profile')}}" enctype="multipart/form-data" data-parsley-validate>
                    @csrf
                    <input type="hidden" name="id" value="{{$get_customer->id}}">
                    <div class="row">
                        <div class="col-lg-12">	
                            <div class="card mb-4">	
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-sm-2">
                                            <p class="mb-0 mt-2">Customer Name<span class="text-danger"> * <span></p>
                                        </div>
                                        <div class="col-sm-3">
                                            <input id="customer_name" name="customer_name" type="text" class="form-control" autocomplete="off" placeholder="Enter Customer Name" value="{{$get_customer->customer_name}}" required data-parsley-trigger="keyup" data-parsley-pattern="^[A-Za-z _ .]*$">
                                        </div>
                                        <div class="col-sm-2">
                                            <p class="mb-0 mt-2">Company Name<span class="text-danger"> * <span></p>
                                        </div>
                                        <div class="col-sm-3">
                                            <input id="company_id" name="company_id" type="text" class="form-control" autocomplete="off" placeholder="Enter Company Name" value="{{$get_customer->getCompany['company_name']}}" readonly>
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="row">
                                        <div class="col-sm-2">
                                            <p class="mb-0 mt-2">Email</p>
                                        </div>
                                        <div class="col-sm-3">
                                            <input id="email" name="email" type="email" class="form-control" value="{{$get_customer->email_id}}" autocomplete="off" placeholder="Enter Email" >
                                        </div>
                                        <div class="col-sm-2">
                                            <p class="mb-0 mt-2">Contact Number</p>
                                        </div>
                                        <div class="col-sm-3">
                                            <input data-parsley-type="number" data-parsley-trigger="change" data-parsley-minlength="10" data-parsley-maxlength="15" value="{{$get_customer->phone_no}}" id="contact_no" name="contact_no" type="text" class="form-control" autocomplete="off" placeholder="Enter Contact Number" data-parsley-minlength-message="This value should have minimum 10 characters" data-parsley-maxlength-message="This value should have maximum 15 characters" >
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="row">
                                        <div class="col-sm-2">
                                            <p class="mb-0 mt-2">Address</p>
                                        </div>
                                        <div class="col-sm-3">
                                            <input id="address" name="address" type="text" class="form-control" autocomplete="off" value="{{$get_customer->address}}" placeholder="Enter Address" >
                                        </div>
                                        <div class="col-sm-2">
                                            <p class="mb-0 mt-2">City</p>
                                        </div>
                                        <div class="col-sm-3">
                                            <input id="city" name="city" type="text" class="form-control" autocomplete="off" placeholder="Enter City" value="{{$get_customer->city}}" data-parsley-trigger="focusout" data-parsley-trigger="keyup" data-parsley-pattern="^[A-Za-z ][A-Za-z ]*$">
                                        </div>
                                    </div>
                                        <hr>
                                    <div class="row">
                                        <div class="col-sm-2 ">
                                            <p class="mb-0 mt-2">State</p>
                                        </div>
                                        <div class="col-sm-3">
                                            <input id="state" name="state" type="text" class="form-control" autocomplete="off" placeholder="Enter State" value="{{$get_customer->state}}"  data-parsley-trigger="focusout" data-parsley-trigger="keyup" data-parsley-pattern="^[A-Za-z ][A-Za-z ]*$">
                                        </div>
                                        <div class="col-sm-2">
                                            <p class="mb-0 mt-2">Zip</p>
                                        </div>
                                        <div class="col-sm-3">
                                            <input data-parsley-type="integer" data-parsley-trigger="keyup" id="zipcode" name="zipcode" value="{{$get_customer->zip}}" type="text" class="form-control" autocomplete="off" placeholder="Enter Zipcode" data-parsley-type-message ="This value should be a valid number">
                                        </div>
                                    </div>
                                    <hr>
                                    <div class="row">
                                        <div class="col-sm-2">
                                            <p class="mb-0 mt-2">Logo</p>
                                        </div>
                                        <div class="col-sm-3">
                                            <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 class="col-sm-2">
                                            <p class="mb-0 mt-2">Status</p>
                                        </div>
                                        <div class="col-sm-3 mt-2">
                                            <input id="isactive" name="isactive" type="checkbox" data-toggle="toggle" data-on="Yes" data-off="No" @if($get_customer->is_active ==1) checked @endif> Is Active?</label>
                                        </div>	
                                    </div>		
                                </div>
                            </div>
                            <div class=" text-center mb-4">
                                <a href="{{ route('customer_view') }}"><button type="button" class="btn btn-danger btn-sm cancel_btn">Cancel</button></a>
                                <button type="submit" class="btn btn-success btn-sm submit_btn">Update</button>
                            </div>	
				        </div>
                    </div>
				</form>
			</div>
		</div>
	</div>
</div>
</div>
<script type="text/javascript">
$(function () {
    @if(Session::has('success'))
    new PNotify({
    title: 'Success',
    text:  "{{Session::get('success')}}",
    type: 'success'
    });
            
    @endif
    @if ($errors->any())
        
        @foreach ($errors->all() as $error)
        
        new PNotify({
        title: 'Error',
        text:  "{{ $error }}",
        type: 'error'
        });
        @endforeach
        
    @endif
});

$(document).ready(function()
{
    $(".odtabs").not("#tab2").addClass('btn-outline-secondary');
    $("#tab2").addClass('btn-secondary');

    $(".edit_customer_profile").click(function()
    {
        $(".display_div").addClass('d-none');
        $(".edit_div").removeClass('d-none');
        $(".edit_customer_profile").addClass('d-none');
    });

    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();

        $('#update_customer_profile').parsley();
        $('#update_customer_profile').on('submit', function(event){
        event.preventDefault();
        if($('#update_customer_profile').parsley().isValid())
        {
            var url = '{{ route("update_customer_profile") }}';
            $.ajax({
                type: "post",
                url: url,
                data: new FormData($("#update_customer_profile")[0]),
                processData: false,
                contentType: false,
                success: function(response) 
                {
                    if(response.data =='success')
                    {
                        new PNotify({
                            title: 'Success',
                            text:  response.msg,
                            type: 'success'
                            });
                            setTimeout(function(){  location.reload(); }, 1000);                    }
                    else
                    {
                        new PNotify({
                        title: 'Error',
                        text:  response.msg,
                        type: 'error',
                        delay: 1000
                        });
                    }
                    
                    
                },
                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: 1000
                    });
                },	
            });
        }
    });
});
</script>
@endsection