go-zap/resources/views/admin/users/add_customer.blade.php

@extends('layouts.master')

@section('title') @lang('translation.Form_Wizard') @endsection

@section('content')

@component('components.breadcrumb')
@slot('li_1') Forms @endslot
@slot('title') Edit Customer @endslot
@endcomponent
<div class="row">
    
    <form  class="needs-validation" id="customer_form" action="{{ route('add_customer') }}" method="post" enctype="multipart/form-data">
    @csrf
    <div class="col-lg-12">
        <div class="card">
            <div class="card-body">
                <!-- <h4 class="card-title mb-4">Basic Wizard</h4> -->

                <div id="basic-example">
                    <!-- Seller Details -->
                    <h3>Customer Details</h3>
                        <section>
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label for="first_name" class="form-label">First name</label>
                                        <input type="text" name="first_name" class="form-control" id="first_name" placeholder="Enter Your First Name"  required>
                                        <div id="first_name_errors" class="invalid-feedback">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label for="last_name">Last name</label>
                                        <input type="text" name="last_name" class="form-control" id="last_name" placeholder="Enter Your Last Name" required>
                                        <div id="last_name_errors" class="invalid-feedback">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label for="phone_number">Phone</label>
                                        <input type="text" name="phone_number" class="form-control" id="phone_number" placeholder="Enter Your Phone No." required>
                                        <div id="phone_number_errors" class="invalid-feedback">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label for="email">Email</label>
                                        <input type="email" name="email" class="form-control" id="email" placeholder="Enter Your Email ID" required>
                                        <div id="email_errors" class="invalid-feedback">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label for="user_type">User Type</label>
                                        <select name="user_type" id="user_type" class="form-select">
                                            <option value="Subscribers">Subscribers/Rider</option>
                                            <option value="Corporate">Corporate</option>
                                            <option value="Driver">Angels</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label for="address">Address</label>
                                        <input type="text"  name="address" id="address" class="form-control" placeholder="Enter Your Address">
                                    </div>
                                </div>
                            </div>
                            <div class="row corporate-data" style="display:none">
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label for="business_name">Business Name</label>
                                        <input type="text"  name="business_name" id="business_name" class="form-control" placeholder="Enter Your Business Name">
                                    </div>
                                </div>
                            </div>
                    </section>

                    <!-- Company Document -->
                    <h3>KYC Document</h3>
                    <section>
                        <div class="row">
                        <div class="repeater" enctype="multipart/form-data">
                            <div data-repeater-list="user-docs">
                                <div data-repeater-item class="row">
                                    <div class="mb-3 col-lg-2">
                                    <label for="doc_name">Doc Name</label>
                                    <input type="text" name="doc_name" class="form-control" id="doc_name" placeholder="Enter Your Document Name.">
                                    </div>

                                    <div class="mb-3 col-lg-2">
                                        <label for="doc_page">Doc Page(Front/Back)</label>
                                        <input type="text" id="doc_page" name="doc_page" class="form-control" placeholder="Enter Your Document Page" />
                                    </div>

                                    <div class="mb-3 col-lg-2">
                                        <label for="doc_number">Doc Number</label>
                                        <input id="doc_number" name="doc_number" type="text" class="form-control" placeholder="Document Number">
                                    </div>
                                    <div class="mb-3 col-lg-2">
                                        <label for="doc">Document</label>
                                        <input id="doc" name="doc" type="file" class="form-control">
                                    </div>

                                    <div class="mb-3 col-lg-2">
                                        <label for="doc">Description</label>
                                        <textarea id="doc" name="doc" type="file" class="form-control" row="2"></textarea>
                                    </div>
                                    <div class="col-lg-2 align-self-center">
                                        <div class="d-grid">
                                        <!--<div class="form-check  form-check-primary mb-3" >
                                            <input class="form-check-input" name="verify"  value="1"  type="checkbox" id="formCheckcolor1">
                                            <label class="form-check-label" for="formCheckcolor1">Verify</label>
                                        </div>-->
                                            <input data-repeater-delete type="button" class="btn btn-primary" value="Delete" />
                                        </div>
                                    </div>
                                </div>

                            </div>
                            <input data-repeater-create type="button" class="btn btn-success mt-3 mt-lg-0" value="Add" />
                        </div>
                        </div>
                    </section>

                    <!-- Bank Details -->
                    <h3>Wallet Details</h3>
                    <section>
                        <div>
                            <div class="row">
                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label for="wallet_amount">Wallet Amount</label>
                                        <input type="text" name="wallet_amount" class="form-control" id="wallet_amount" placeholder="Wallet Amount">
                                    </div>
                                </div>

                                <div class="col-lg-6">
                                    <div class="mb-3">
                                        <label for="reason">Reason</label>
                                        <textarea id="Reason" name="reason" class="form-control" rows="2" placeholder="Enter Reason"></textarea>
                                    </div>
                                </div>
                            </div>
                    </section>

                    <!-- Confirm Details -->
                    <h3>Confirm Detail</h3>
                    <section>
                        <div class="row justify-content-center">
                            <div class="col-lg-6">
                                <div class="text-center">
                                    <div class="mb-4">
                                        <i class="mdi mdi-check-circle-outline text-success display-4"></i>
                                    </div>
                                    <div>
                                        <h5>Confirm Detail</h5>
                                        <p class="text-muted">If several languages coalesce, the grammar of the resulting</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                </div>

            </div>
            <!-- end card body -->
        </div>
        <!-- end card -->
    </div>
    </form>
    <!-- end col -->
</div>
<!-- end row -->

@endsection
@section('script')
    <!-- jquery step -->
    <script src="{{ URL::asset('/assets/libs/jquery-steps/jquery-steps.min.js') }}"></script>

    <!-- form wizard init -->
    <script src="{{ URL::asset('/assets/js/pages/form-wizard.init.js') }}"></script>
    <!-- form repeater js -->
    <script src="{{ URL::asset('/assets/libs/jquery-repeater/jquery-repeater.min.js') }}"></script>

    <script src="{{ URL::asset('/assets/js/pages/form-repeater.int.js') }}"></script>
    
    <script src="{{ URL::asset('/assets/libs/parsleyjs/parsleyjs.min.js') }}"></script>

    <script src="{{ URL::asset('/assets/js/pages/form-validation.init.js') }}"></script>

    <script type="text/javascript">
    $(document).ready(function(){
        
        $("#user_type").change(function() {
            if($('#user_type').find(":selected").val() == 'Corporate'){
                $('.corporate-data').show();
            }else{
                $('.corporate-data').hide();
            }
        });

        $(document).on('click', '[href="#finish"]', function(event) {
            event.preventDefault();
            //$( "#customer_form" ).submit();
            actionUrl = "{{ route('user.validate') }}";
            form = $( "#customer_form" );
            $.ajax({
                type: "POST",
                url: actionUrl,
                data: form.serialize(), // serializes the form's elements.
                success: function(data){
                    console.log(data);
                    $( "#customer_form" ).submit();
                    //window.location.href = "{{ route('admin.customers') }}";
                },
                error: function (data) {
                    console.log('An error occurred.');
                    console.log(data);
                    response = data.responseJSON;
                    if(response.status == false){
                        $.each(response.errors, function(i, item) {
                            $('#'+i+'_errors').html(response.errors[i]);
                            $('.needs-validation').addClass('was-validated');
                        });
                    }
                },
            });
        });
    });
    </script>
@endsection