@extends('layouts.master')

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

@section('content')

@component('components.breadcrumb')
@slot('li_1') Forms @endslot
@slot('title') Add New Customer @endslot
@endcomponent

<div class="row">
    
    <form  class="needs-validation" id="customer_form" action="{{ route('update_customer', ['id' => $user->id]) }}" 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" value="{{ $user->UserData->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" value="{{ $user->UserData->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." value="{{ $user->UserData->phone_number }}" 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" value="{{ $user->email }}"  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="address">User Type</label>
                                        <select name="user_type" class="form-select">
                                            <option value="Subscribers" {{ $user->UserData->user_type == 'Subscriber' ? 'selected' : '' }} >Subscriber/Rider</option>
                                            <option value="Corporate" {{ $user->UserData->user_type == 'Corporate' ? 'selected' : '' }} >Corporate</option>
                                            <option value="Driver" {{ $user->UserData->user_type == 'Driver' ? 'selected' : '' }} >Driver</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" value="{{ $user->UserData->last_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">
                                @if($userDocuments)
                                @foreach ($userDocuments as $userDocument)
                                <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_id" class="form-control"  value="{{ $userDocument['id'] }}" />
                                    <input type="text" name="doc_name" class="form-control" id="doc_name" placeholder="Enter Your Document Name." value="{{ $userDocument['doc_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"  value="{{ $userDocument['doc_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"  value="{{ $userDocument['doc_number'] }}" />
                                    </div>
                                    <div class="mb-3 col-lg-2 user-doc-field">
                                        <label for="doc">Document</label>
                                        <img src="{{ isset($userDocument['path']) ? $userDocument['path'] : '' }}" alt="{{ !isset($userDocuments['aadhaar_front']) ? 'Aadhar Doc' : '' }} ? " class="img-thumbnail"/>
                                        <input id="doc" name="doc" type="file" class="form-control userDoc">
                                    </div>

                                    <div class="mb-3 col-lg-2">
                                        <label for="doc">Description</label>
                                        <textarea id="doc" name="doc" type="file" name="description" class="form-control" row="2"> {{ $userDocument['description'] }}</textarea>
                                    </div>
                                    <div class="col-lg-2 align-self-center">
                                        <div class="d-grid">
                                        <div class="form-check  {{ $userDocument['verify'] == 1 ? 'form-check-success' : 'form-check-primary' }}  mb-3 user-verify-field" >
                                            <input class="form-check-input"  name="verify"  value="1" {{ $userDocument['verify'] == 1 ? 'checked' : '' }} type="checkbox" id="formCheckcolor1">
                                            <label class="form-check-label" for="formCheckcolor1">
                                                {{ $userDocument['verify'] == 1 ? 'Verified' : 'Verify' }}
                                            </label>
                                        </div>
                                            <input data-repeater-delete type="button" class="delete-kyc btn btn-primary" value="Delete" data-id="{{  $userDocument['id']  }}" />
                                        </div>
                                    </div>
                                </div>
                                @endforeach
                                @endif
                            </div>
                            <input data-repeater-create type="button" class="user-doc-add-btn 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"  value="{{ $user->UserData->wallet_amount }}" 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 Your Address"></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>
    
    <script src="{{ URL::asset('/assets/libs/parsleyjs/parsleyjs.min.js') }}"></script>

    <script src="{{ URL::asset('/assets/js/pages/form-validation.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 type="text/javascript">
    $(document).ready(function(){
        
        $('.userDoc').hide();
        $( ".disabled" ).addClass('done');
        $( ".done" ).removeClass('disabled'); 
        $(document).on('click', '.user-doc-add-btn', function(event) {
            event.preventDefault();
            var html ='';
            var total = $('.user-doc-field').length;
            console.log(total);
            $(".user-doc-field").each(function(index) {
                if (index === total - 1) {
                    img = $(this).children('img');
                    img.hide();
                }
            });
            $(".user-verify-field").each(function(index) {
                if (index === total - 1) {
                    $(this).addClass('form-check-primary');
                    $(this).removeClass('form-check-success');
                    verify = $(this).children('input');
                    verify.prop('checked', false);
                    verifyLabel = $(this).children('label');
                    verifyLabel.html('Verify')

                }
            });
            console.log(html);
        });
        $(document).on('click', '.delete-kyc', function(event) {
            event.preventDefault();
            id = $(this).attr('data-id');
            actionUrl = "/admin/users/delete-kyc"+id;
            $.ajax({
                type: "GET",
                url: actionUrl,
                success: function(data){ 
                    $(this).parent('.row').addClass('collapse');
                },
                error: function (data) {
                    
                },
            });
        });
        $(document).on('click', '[href="#finish"]', function(event) {
            event.preventDefault();
           // $( "#customer_form" ).submit();
            form = $( "#customer_form" );
            actionUrl = form.attr('action');
            $.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