@extends('layouts.master')

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

@section('css')
<!-- select2 css -->
<link href="{{ URL::asset('/assets/libs/select2/select2.min.css') }}" rel="stylesheet" type="text/css" />
<style>
    .nav-tabs .nav-link.active span.tab-title{
        color:#50DDE2;
    }
    .tab-title{
        color:#000;
    }
    .tab-header{
        margin-bottom: 50px;
    }
    .select2 {
        width: 100% !important;
    }
</style>
@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="create_form" action="{{ route('add_customer', ['slug' => $slug]) }}" method="post" enctype="multipart/form-data" novalidate>
    @csrf
    
        <div class="card">
            <div class="card-body">
                <h5>Rider Details</h5>
                <div class="mb-3 row">
                    <label for="name" class="col-md-2 col-form-label">{{ $slug }} Name<span class="req-sym">*</span></label>
                    <div class="col-md-6">
                        <input class="form-control" name="name" type="text" placeholder="Rider Name"  id="name" required/>
                        <div  id="name_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
                @if($slug == 'Corporate Client')
                
                <div class="mb-3 row">
                    <label for="business_location_id" class="col-md-2 col-form-label">Business Location</label>                    
                    <div class="col-md-6">
                        <select id="business_location_id" name="business_location_id" class="form-select" />
                            <option value=''>Select...</option>
                            @foreach($locationList as $location)
                                <option value="{{ $location->id }}">{{ $location->location}}</option>
                            @endforeach 
                        </select>
                    </div>
                </div> 
                @endif
                @if($slug == 'Corporate Rider')
                <div class="mb-3 row">
                    <label for="employee_id" class="col-md-2 col-form-label">Employee ID</label>
                    <div class="col-md-6">
                        <input class="form-control" name="employee_id" type="text" placeholder="Employee ID"  id="employee_id" />
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="b2b_client" class="col-md-2 col-form-label">B2B Client</label>
                    <div class="col-md-6">
                        <input class="form-control" name="b2b_client" type="text" placeholder="B2B Client"  id="b2b_client" />
                    </div>
                </div>
                @endif
                @if($slug == 'Staff')

                <div class="mb-3 row">
                    <label for="employee_id" class="col-md-2 col-form-label">Employee ID</label>
                    <div class="col-md-6">
                    <div class="mb-3 row">
                        <div class="col-md-2">
                            GZ
                        </div>
                        <div class="col-md-5">
                            <input class="form-control" name="contact_type" type="text" placeholder="Contact Type"  id="employee_id" />
                        </div>
                        <div class="col-md-5">
                            <input class="form-control" name="contact_type_number" type="text" placeholder="Type Number"  id="employee_id" />
                        </div>
                    </div>
                    </div>
                </div>

                <div class="mb-3 row"> 
                    <label for="designation" class="col-md-2 col-form-label">Designation<span class="req-sym">*</span></label>
                    <div class="col-md-6">
                        <select id="designation" name="designation" class="form-select">
                            <option value=''>Select...</option>
                                @foreach($designationList as $designation)
                                    <option value="{{ $designation->id }}">{{ $designation->designation}}</option>
                                @endforeach 
                        </select>
                        <div  id="designation_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
                @endif

                <div class="mb-3 row"> 
                    <label for="business_model_id" class="col-md-2 col-form-label">Business Model<span class="req-sym">*</span></label>
                    <div class="col-md-6">
                        <select id="business_model_id" name="business_model_id" class="form-select" required>
                            <option value=''>Select...</option>
                                @foreach($businessModelsList as $businessModels)
                                    <option value="{{ $businessModels->id }}">{{ $businessModels->business_model}}</option>
                                @endforeach 
                        </select>
                        <div  id="business_model_id_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <!-- <h4 class="card-title mb-4">Basic Wizard</h4> -->

                @if($slug != 'Staff' && $slug != 'Corporate Client')
                    
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-bs-toggle="tab" href="#contact_details" role="tab">
                            <span class="d-none d-sm-block tab-title">Contact Details</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#kyc_verification" role="tab">
                            <span class="tab-title d-none d-sm-block">KYC verification</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#subscription_plan" role="tab">
                            <span class="tab-title d-none d-sm-block">Subscription Plan</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-bs-toggle="tab" href="#payout_history" role="tab">
                            <span class="tab-title d-none d-sm-block">Payout History</span>
                        </a>
                    </li>
                </ul>
                @else

                <h5>Contact Details</h5>

                @endif

                <div class="tab-content p-3 text-muted">
                    <div class="tab-pane active" id="contact_details" role="tabpanel">
                        <!-- Contact Details -->
                        @if($slug != 'Staff'  && $slug != 'Corporate Client')
                        <div class="mb-3 row">
                            <label for="location_id" class="col-md-2 col-form-label">Location<span class="req-sym">*</span></label>
                            <div class="col-md-6">
                                <select id="location_id" name="location_id" class="form-select" required>
                                    <option value=''>Select...</option>
                                    @foreach($locationList as $location)
                                        <option value="{{ $location->id }}">{{ $location->location}}</option>
                                    @endforeach 
                                </select>
                                <div  id="location_id_errors"  class="invalid-feedback">
                                    Required
                                </div>
                            </div>
                        </div>
                        @endif
                        <div class="mb-3 row">
                            <label for="phone_number" class="col-md-2 col-form-label">Mobile Number<span class="req-sym">*</span></label>
                            <div class="col-md-6">
                                <input class="form-control" name="phone_number" type="text" placeholder="Mobile Number"  id="phone_number" required/>
                                <div  id="phone_number_errors"  class="invalid-feedback">
                                    Required
                                </div>
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label for="email" class="col-md-2 col-form-label">Email<span class="req-sym">*</span></label>
                            <div class="col-md-6">
                                <input class="form-control" name="email" type="text" placeholder="Mobile Number"  id="email" required/>
                                <div  id="email_errors"  class="invalid-feedback">
                                    Email Required
                                </div>
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label for="country" class="col-md-2 col-form-label">Country<span class="req-sym">*</span></label>
                            <div class="col-md-6">
                                <input class="form-control" name="country" type="text" placeholder="Country"  id="country" required/>
                                <div  id="email_errors"  class="invalid-feedback">
                                    Country Required
                                </div>
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label for="postal_code" class="col-md-2 col-form-label">Pin Code<span class="req-sym">*</span></label>
                            <div class="col-md-6">
                                <input class="form-control" name="postal_code" type="text" placeholder="Pin Code"  id="postal_code" required/>
                                <div  id="postal_code_errors"  class="invalid-feedback">
                                    Country Required
                                </div>
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label for="city_id" class="col-md-2 col-form-label">City<span class="req-sym">*</span></label>
                            <div class="col-md-6">
                                <select id="city_id" name="city_id" class="form-select" required>
                                    <option value=''>Select...</option>
                                    @foreach($cities as $city)
                                        <option value="{{ $city->id }}">{{ $city->city}}</option>
                                    @endforeach 
                                </select>
                                <div  id="city_id_errors"  class="invalid-feedback">
                                    Required
                                </div>
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label for="district_id" class="col-md-2 col-form-label">District<span class="req-sym">*</span></label>
                            <div class="col-md-6">
                                <select id="district_id" name="district_id" class="form-select" required>
                                    <option value=''>Select...</option>
                                </select>
                                <div  id="district_id_errors"  class="invalid-feedback">
                                    Required
                                </div>
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label for="state_id" class="col-md-2 col-form-label">State<span class="req-sym">*</span></label>
                            <div class="col-md-6">
                                <select id="state_id" name="state_id" class="form-select" required>
                                    <option value=''>Select...</option>
                                </select>
                                <div  id="state_id_errors"  class="invalid-feedback">
                                    Required
                                </div>
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label for="zone_id" class="col-md-2 col-form-label">Zone<span class="req-sym">*</span></label>
                            <div class="col-md-6">
                                <select id="zone_id" name="zone_id" class="form-select" required>
                                    <option value=''>Select...</option>
                                </select>
                                <div  id="zone_id_errors"  class="invalid-feedback">
                                    Required
                                </div>
                            </div>
                        </div>
                        <div class="mb-3 row">
                            <label for="address" class="col-md-2 col-form-label">Address</label>
                            <div class="col-md-6">
                                <input id="address" name="address" type="text" class="form-control" placeholder="Address" />
                            </div>
                        </div>
                        
                    </div>
                    <div class="tab-pane" id="kyc_verification" role="tabpanel">
                    @if($verificationParams)
                        @foreach($verificationParams as $verificationParam)
                            @if($verificationParam->role->name == 'Rider')
                            <div class="mb-3 row">
                                <label for="doc_number" class="col-md-2 col-form-label">{{ $verificationParam->verification_parameter }}</label>
                                <div class="col-md-6">
                                    <input type="hidden" name="doc_name[]" value="{{ $verificationParam->verification_parameter }}" />
                                    <input type="text" name="doc_number[]" class="form-control" id="doc_number" placeholder="{{ $verificationParam->verification_parameter }}"  />
                                </div>
                            </div>
                                @if($verificationParam->proof_required == 'Yes')
                                    <div class="mb-3 row">
                                        <label for="doc_front_page" class="col-md-2 col-form-label">Upload Image (Front)</label>
                                        <div class="col-md-6">
                                            <input type="file" name="doc_front_page[{{ $verificationParam->verification_parameter }}]" class="form-control" id="doc_front_page" />
                                        </div>
                                    </div>
                                    <div class="mb-3 row">
                                        <label for="doc_back_page" class="col-md-2 col-form-label">Upload Image (Back)</label>
                                        <div class="col-md-6">
                                            <input type="file" name="doc_back_page[{{ $verificationParam->verification_parameter }}]" class="form-control" id="doc_back_page"  />
                                        </div>
                                    </div>
                                @endif
                            @endif
                        @endforeach
                    @endif
                    </div> 

                    <div class="tab-pane" id="subscription_plan" role="tabpanel">
                        
                        <div class="repeater" enctype="multipart/form-data">
                            <div data-repeater-list="subscription_plan_list" class="subscription_plan_tab">

                                <div class="row">
                                <div class="col-md-12">
                                    <input data-repeater-create type="button"  class="add_subs_btn btn btn-primary waves-effect waves-light" value="Add Subscription Plan" style="float: right;" />
                                </div>
                                </div>
                                <div data-repeater-item class="row subscription_plan_item">
                                    <h4>Subscription Plan</h4>
                                    <div class="mb-3 row">
                                        <label for="subscription_plan_id" class="col-md-2 col-form-label">Subscription Plan<span class="req-sym">*</span></label>
                                        <div class="col-md-6">
                                            <select id="subscription_plan_id" name="subscription_plan_id" class="subscription_plan_id form-select">
                                                <option value=''>Select...</option>
                                                @foreach($subscriptionPlans as $subscriptionPlan)
                                                    <option value="{{ $subscriptionPlan->id }}">{{ $subscriptionPlan->plan_name}}</option>
                                                @endforeach 
                                            </select>
                                            <div  id="subscription_plan_id_errors"  class="invalid-feedback">
                                                Required
                                            </div>
                                        </div>
                                    </div> 
                                    <div class="mb-3 row">
                                        <label for="asset_type_id" class="col-md-2 col-form-label">Asset Type<span class="req-sym">*</span></label>
                                        <div class="col-md-6">
                                            <select id="asset_type_id" name="asset_type_id" class="asset_type_id form-select">
                                                <option value=''>Select...</option>
                                                @foreach($assetTypeList as $assetType)
                                                    <option value="{{ $assetType->id }}">{{ $assetType->product_type}}</option>
                                                @endforeach 
                                            </select>
                                            <div  id="asset_type_id_errors"  class="invalid-feedback">
                                                Required
                                            </div>
                                        </div>
                                    </div> 
                                    <div class="mb-3 row">
                                        <label for="asset_id" class="col-md-2 col-form-label">Vehicle Model<span class="req-sym">*</span></label>
                                        <div class="col-md-6">
                                            <select id="asset_id" name="asset_id" class="asset_id form-select" required>
                                                <option value=''>Select...</option>
                                            </select>
                                            <div  id="asset_id_errors"  class="invalid-feedback">
                                                Required
                                            </div>
                                        </div>
                                    </div> 
                                    <div class="mb-3 row">
                                        <label for="registration_number" class="col-md-2 col-form-label">Registration Number<span class="req-sym">*</span></label>
                                        <div class="col-md-6">
                                            <input class="registration_number form-control" id="registration_number" name="registration_number" type="text" placeholder="Registration Number"  id="cost" />
                                        </div>
                                    </div> 
                                    <div class="mb-3 row">
                                        <label for="battery" class="col-md-2 col-form-label">Batteries</label>
                                        <div class="col-md-6">
                                            <select id="battery" name="part_id[battery][]" class="battery select2 form-control select2-multiple" multiple />
                                                <option value=''>Select...</option>
                                            </select>
                                            <div  id="battery_errors"  class="invalid-feedback">
                                                Required
                                            </div>
                                        </div>
                                    </div>
                                    <div class="mb-3 row">
                                        <label for="charger" class="col-md-2 col-form-label">Charger</label>
                                        <div class="col-md-6">
                                            <select id="charger" name="part_id[charger]" class="charger select2 form-control" />
                                                <option value=''>Select...</option>
                                            </select>
                                            <div  id="charger_errors"  class="invalid-feedback">
                                                Required
                                            </div>
                                        </div>
                                    </div>
                                    <div class="mb-3 row">
                                        <label for="va_service_type_id" class="col-md-2 col-form-label">Value Added Service</label>
                                        <div class="col-md-6">
                                            <select id="va_service_type_id" name="[va_service_type_id][]" class="va_service_type_id form-select  select2 select2-multiple" multiple />
                                                <option value=''>Select...</option>
                                                @foreach($vAServiceTypeList as $vAServiceType)
                                                    <option value="{{ $vAServiceType->id }}">{{ $vAServiceType->va_service_type}}</option>
                                                @endforeach 
                                            </select>
                                            <div  id="va_service_type_id_errors"  class="invalid-feedback">
                                                Required
                                            </div>
                                        </div>
                                    </div>
                                    <div class="mb-3 row">
                                        <label for="cost" class="col-md-2 col-form-label">Cost<span class="req-sym">*</span></label>
                                        <div class="col-md-6">
                                            <input class="form-control" name="cost" type="text" placeholder="Cost"  id="cost" />
                                        </div>
                                    </div>
                                    <div class="mb-3 row billing_cycle_field">
                                        <label for="billing_cycle" class="col-md-2 col-form-label">Billing Cycle<span class="req-sym">*</span></label>
                                        <div class="col-md-6">
                                            <input class="form-control billing_cycle" name="billing_cycle" type="text" placeholder="Billing Cycle"  id="billing_cycle" />
                                            <small>Type in Days</small>
                                        </div>
                                    </div> 
                                    <div class="mb-3 row">
                                        <label for="billing_type_id" class="col-md-2 col-form-label">Billing Type<span class="req-sym">*</span></label>
                                        <div class="col-md-6">
                                            <select id="billing_type_id" name="billing_type_id" class="form-select" />
                                                <option value=''>Select...</option>
                                                @foreach($billingTypeList as $billingType)
                                                    <option value="{{ $billingType->id }}">{{ $billingType->billing_type}}</option>
                                                @endforeach 
                                            </select>
                                        </div>
                                    </div> 
                                </div>  
                            </div>  
                        </div>  
                    </div>  
                    <div class="tab-pane" id="payout_history" role="tabpanel">
                        
                        <div class="mb-3 row">
                            <label for="wallet_amount" class="col-md-2 col-form-label">Wallet Amount</label>
                            <div class="col-md-6">
                                <input class="form-control" name="wallet_amount" type="text" placeholder="Wallet Amount"  id="wallet_amount" />
                            </div>
                        </div> 
                        <div class="mb-3 row">
                            <label for="reason" class="col-md-2 col-form-label">Reason</label>
                            <div class="col-md-6">
                                <input class="form-control" name="reason" type="text" placeholder="Reason"  id="reason" />
                            </div>
                        </div> 
                    </div> 
                </div>

            </div>
            <!-- end card body -->
        </div>
        @if($slug == 'Staff')
        <div class="card">
            <div class="card-body">
                <h5>Assign Location</h5>
                <div class="repeater" enctype="multipart/form-data">
                    <div data-repeater-list="staff_location_list" class="staff_location_tab">

                        <div class="row">
                            <div class="col-md-12">
                                <input data-repeater-create type="button"  class=" btn btn-primary waves-effect waves-light" value="Add Location" style="float: right;" />
                            </div>
                        </div>
                        <div data-repeater-item class="row staff_location_item">
                            <div class="mb-3 row">
                                <label for="location_id" class="col-md-2 col-form-label">Location</label>                    
                                <div class="col-md-6">
                                    <select id="location_id" name="location_id" class="location_id form-select" />
                                        <option value=''>Select...</option>
                                        @foreach($locationList as $location)
                                            <option value="{{ $location->id }}">{{ $location->location}}</option>
                                        @endforeach 
                                    </select>
                                </div>
                            </div> 
                            <div class="mb-3 row">
                                <label for="wallet_amount" class="col-md-2 col-form-label">Location Classification</label>                    
                                <div class="col-md-6">
                                    <select id="location_classification_id" name="location_classification_id[]" class="location_classification_id form-select" />
                                        <option value=''>Select...</option>
                                        @foreach($locationClassificationList as $locationClassification)
                                            <option value="{{ $locationClassification->id }}">{{ $locationClassification->location_classification}}</option>
                                        @endforeach 
                                    </select>
                                </div>
                            </div> 
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif
        @if($slug == 'Corporate Client')
        
        <div class="card">
            <div class="card-body">
                <h5>Billing Details</h5>
                <div class="mb-3 row">
                    <label for="billing_cycle" class="col-md-2 col-form-label">Billing Type<span class="req-sym">*</span></label>
                    <div class="col-md-6">
                        <select id="billing_cycle" name="billing_cycle" class="form-select" />
                            <option value=''>Select...</option>
                            @foreach($durationList as $duration)
                                <option value="{{ $duration->id }}">{{ $duration->duration}}</option>
                            @endforeach 
                        </select>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="billing_type_id" class="col-md-2 col-form-label">Billing Type<span class="req-sym">*</span></label>
                    <div class="col-md-6">
                        <select id="billing_type_id" name="billing_type_id" class="form-select" />
                            <option value=''>Select...</option>
                            @foreach($billingTypeList as $billingType)
                                <option value="{{ $billingType->id }}">{{ $billingType->billing_type}}</option>
                            @endforeach 
                        </select>
                    </div>
                </div>
            </div>
        </div>
        @endif
        <div class="card">
            <div class="card-body">
                <div class="d-flex flex-wrap gap-2" style="float: right;">
                    <a href="{{ route('admin.customers', ['slug' => $slug]) }}" type="button" class="save_changes btn btn-secondary waves-effect waves-light">Cancel</a>
                    <button type="submit" class="save_changes btn btn-primary waves-effect waves-light">Save Changes</button>
                </div>
            </div>
        </div>
    </form>
    <!-- end col -->
</div>
<!-- end row -->

@endsection
@section('script')
    <!-- select 2 plugin -->
    <script src="{{ URL::asset('/assets/libs/select2/select2.min.js') }}"></script>
    <!-- init js -->
    <script src="{{ URL::asset('/assets/js/pages/ecommerce-select2.init.js') }}"></script>
    <!-- init js -->
    <script src="{{ URL::asset('/assets/libs/parsleyjs/parsleyjs.min.js') }}"></script>

    <script src="{{ URL::asset('/assets/js/pages/form-validation.init.js') }}"></script>
    <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/js/custom.js') }}"></script>

    <script type="text/javascript">
    $(document).ready(function(){
            var token = "{{ csrf_token() }}";
        $('#city_id').on('change', function() {
            actionUrl = "{{ route('city') }}";
            updateStateOptions(actionUrl, token);
            updateDistrictOptions(actionUrl, token);
            updateZoneOptions(actionUrl, token);
        });
        
        $(document).on("change", ".location_id", function(){
            parentDiv = $(this).parents('.staff_location_item');
            location_classification_idField = parentDiv.find("select.location_classification_id");
            console.log(location_classification_idField);
            location_classification_idField.select2();
        }

        $(document).on("change", ".subscription_plan_id", function(){
            subscription_plan_id = $(this).val();
            
            parentDiv = $(this).parents('.subscription_plan_item');
            billing_cycle = parentDiv.find("input.billing_cycle");
            
            let total = $('select.va_service_type_id').length;
            if(total > 1){
                console.log(total);
                name = 'subscription_plan_list[' + (total - 1) + '][va_service_type_id][]';
                vaServiceField = parentDiv.find("select.va_service_type_id");
                if(vaServiceField.attr('name') == name){
                    vaServiceField.next().removeClass();
                    vaServiceField.next().html('');
                    vaServiceField.select2();
                }
                console.log(name);
                console.log(vaServiceField.attr('name'));
            }
            $.ajax({
                type: "POSt",
                url: "{{ route('subscription-plan.vehicle.plan-data') }}",
                data: {
                    "subscription_plan_id" : subscription_plan_id,
                    "_token": token
                },
                success: function(data){ 
                    if(data['data']){
                        let response = data['data'];
                        if(response.base_plan){
                            if(response.base_plan.duration){
                                billing_cycle.val(response.base_plan.duration.days) ;
                            }else{
                                billing_cycle.val('') ;
                            }
                        }else{
                            billing_cycle.val('') ;
                        }
                    }
                },
                error: function (data) {
                    console.log(' Failes.');
                },
            });
        });
        $(document).on("change", ".asset_type_id", function(){

            parentDiv = $(this).parents('.subscription_plan_item');
            sel = parentDiv.find("select.asset_id");
            sel.find('option').remove().end();

            registerNumField = parentDiv.find("input.registration_number");

            actionUrl = "{{ route('asset.vehicle.list-by-type') }}";
            let asset_type_id =  $(this).val();
            if(asset_type_id){
                $.ajax({
                    type: "POSt",
                    url: actionUrl,
                    data: {
                        "asset_type_id" : asset_type_id,
                        "_token": token
                    },
                    success: function(data){ 
                        if(data['data']){
                            dataSelected = sel.attr('data-selected');
                            sel.find('option').remove().end();
                            if (data['data'].length === 0) {
                                sel.append('<option value="">No item Found...</option>');
                            }else{
                                sel.append('<option value="">Select...</option>');
                                $.each(data['data'], function(index, item) {
                                    console.log(item);
                                    selected ='';
                                    if(dataSelected == item.id ){
                                        selected = 'selected';
                                    }
                                    if(item.station_dealer != ''){
                                        sel.append('<option value="'+ item.id +'" registration_number="'+ item.registeration_number +'"' +selected+'>'+ item.model_name +'</option>');
                                    }
                                });
                                
                            sel.trigger("change");
                            }
                        }
                    },
                    error: function (data) {
                        console.log(actionUrl+' Failes.');
                    },
                });
            }
            registerNumField.val('');
        });
        $(document).on("change", ".asset_id", function(){
            
            parentDiv = $(this).parents('.subscription_plan_item');
            batterySel = parentDiv.find("select.battery");
            batterySel.find('option').remove().end();
            chargerSel = parentDiv.find("select.charger");
            chargerSel.find('option').remove().end();

            registerNumField = parentDiv.find("input.registration_number");
            
            actionUrl = "{{ route('asset.vehicle.part-list-by-asset') }}";
            updateAssetPartsByAssetId($(this), batterySel);
            updateAssetPartsByAssetId($(this), chargerSel);

            let registration_number = $(this).find("option:selected").attr('registration_number');
            registerNumField.val(registration_number);

        });
        //$(document).on('click', '[href="#finish"]', function(event) {
        $( "#create_form" ).submit(function( event ) {
            event.preventDefault();
            actionUrl = "{{ route('user.validate') }}";
            form = $( "#create_form" );
            $.ajax({
                type: "POST",
                url: actionUrl,
                data: form.serialize(), // serializes the form's elements.
                success: function(data){
                    console.log(data);
                    form.unbind().submit();
                },
                error: function (data) {
                    console.log('An error occurred.');
                    response = data.responseJSON;
                    if(response.mode == false){
                        $.each(response.errors, function(i, item) {
                            html = $('input[name=""]')
                             $('#'+i+'_errors').html(response.errors[i]); 
                            $('#'+i+'_errors').css('display', 'block');
                        });
                    }
                },
            });
        });
    });
      
    function updateAssetPartsByAssetId(ele, sel){
        console.log(sel);
        actionUrl = "{{ route('asset.vehicle.part-list-by-asset') }}";
        let token = "{{ csrf_token() }}";
        console.log('updateAssetPartsByAssetId');
        let asset_id =  ele.find("option:selected").val();
        if(asset_id != ''){
            $.ajax({
                type: "POSt",
                url: actionUrl,
                data: {
                    "asset_id" : asset_id,
                    "_token": token
                },
                success: function(data){ 
                    if(data['data']){
                        dataSelected = sel.attr('data-selected');
                        sel.find('option').remove().end();
                        if (data['data'].length === 0) {
                            sel.append('<option value="">No item Found...</option>');
                        }else{
                            sel.append('<option value="">Select...</option>');
                            $.each(data['data'], function(index, item) {
                                selected ='';
                                if(item.station_dealer != ''){
                                    sel.append('<option value="'+ item.id +'"' +selected+'>'+ item.product.product_type +'</option>');
                                }
                            });
                            if (sel.hasClass("select2")) {
                                sel.next().removeClass();
                                sel.next().html('');
                                sel.select2();
                            }
                        sel.trigger("change");
                        }
                    }
                },
                error: function (data) {
                    console.log(actionUrl+' Failes.');
                },
            });
        }
        
    }
    </script>
@endsection