@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') Add New Customer @endslot
@endcomponent

<div class="row">
    <form  class="needs-validation" id="edit_form" action="{{ route('update_customer', ['id' => $user->id,  'slug' =>  $slug]) }}" method="post" enctype="multipart/form-data" novalidate>
    @csrf
    <input  name="id" type="hidden"value="{{ $user->id }}" />
        <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">Rider 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" value="{{ $user->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 }}" {{ $user->userCorporate->business_location_id == $location->id ? 'selected' : ''}}>{{ $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"  value="{{ $user->userData->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" value="{{ $user->userData->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_id" class="col-md-2 col-form-label">Designation<span class="req-sym">*</span></label>
                    <div class="col-md-6">
                        <select id="designation_id" name="designation_id" class="form-select">
                            <option value=''>Select...</option>
                                @foreach($designationList as $designation)
                                    <option value="{{ $designation->id }}"  {{ $user->userData->designation_id == $designation->id ? 'selected' : ''}}>{{ $designation->designation}}</option>
                                @endforeach 
                        </select>
                        <div  id="designation_id_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 }}" {{ $user->userData->business_model_id == $businessModels->id ? 'selected' : ''}}>{{ $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 }}" {{ $user?->address?->location_id == $location->id ? 'selected' : '' }}>{{ $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" value="{{ $user->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" value="{{ $user->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"  value="{{ $user->address?->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"  value="{{ $user->address?->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 }}" {{ $user->address?->city_id == $city->id ? 'selected' : ''  }}>{{ $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"  value="{{ $user->address?->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 == $slug)
                            <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">
                                            @if($userDocuments)
                                            <img src="{{  '/storage'.  $userDocuments[$verificationParam->verification_parameter]['doc_front_page'] ?? '' }}" style="width: 100px;"/>
                                            @else
                                            <input type="file" name="doc_front_page[{{ $verificationParam->verification_parameter }}]" class="form-control" id="doc_front_page" />
                                            @endif
                                        </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">
                                            @if($userDocuments)
                                            <img src="{{  '/storage'.  $userDocuments[$verificationParam->verification_parameter]['doc_back_page'] }}" style="width: 100px;"/>
                                            @else
                                            <input type="file" name="doc_back_page[{{ $verificationParam->verification_parameter }}]" class="form-control" id="doc_back_page"  />
                                            @endif
                                        </div>
                                    </div>
                                @endif
                            @endif
                        @endforeach
                    @endif
                    </div> 

                    <div class="tab-pane" id="subscription_plan" role="tabpanel">
                    @if($user->userSubscription)
                    @foreach($user->userSubscription as $userSubscription)

                    <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 }}" {{ $userSubscription->subscription_plan_id == $subscriptionPlan->id ? 'selected' : ''  }}>{{ $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 }}" {{ $userSubscription->asset_type_id == $assetType->id ? 'selected' : ''  }}>{{ $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"  data-selected="{{ $userSubscription->asset_id }}" />
                                                <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"  data-selected="{{ $partId }}"  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 form-control" data-selected=",{{ $chargerId }}"/>
                                                <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 }}"  {{ in_array($vAServiceType->id, $vAServiceTypeIdArray)  ? 'selected' : ''}}>{{ $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"  value="{{ $userSubscription->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" value="{{ $userSubscription->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 }}"  {{ $userSubscription->billing_type_id == $billingType->id ? 'selected' : ''  }}>{{ $billingType->billing_type}}</option>
                                                @endforeach 
                                            </select>
                                        </div>
                                    </div> 
                                </div>  
                            </div>  
                        </div> 
                    @endforeach
                    @else
                        <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=" 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 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" 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> 
                    @endif
                    </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" value="{{ $user->userData->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 class="mb-3 row">
                        
                            <div class="table-responsive">
                                <table id="wallet_datatable" class="table align-middle table-nowrap">
                                    <thead>
                                        <tr>
                                            <th>  Id </th>
                                            <th> Amount </th>
                                            <th> Transaction Type </th>
                                            <th> Balance  Amount</th>
                                            <th> purpose </th>
                                        </tr>
                                    </thead>
                                </table>
                            </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>
                        @if(isset($user->userStaffLocation[0]))
                        @foreach($user->userStaffLocation as $userStaffLocation)

                        <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">
                                    <input type="hidden" name="staff_location_id" value="{{ $userStaffLocation->id }}" />
                                    <select id="location_id" name="location_id" class="location_id form-select" />
                                        <option value=''>Select...</option>
                                        @foreach($locationList as $location)
                                            <option value="{{ $location->id }}"  {{ $userStaffLocation->location_id == $location->id ? 'selected' : ''}}>{{ $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="select2 form-select" multiple />
                                        <option value=''>Select...</option>
                                        @foreach($locationClassificationList as $locationClassification)
                                            <option value="{{ $locationClassification->id }}"  {{ in_array($locationClassification->id, $locationClassificationIdArray)  ? 'selected' : ''}}>{{ $locationClassification->location_classification}}</option>
                                        @endforeach 
                                    </select>
                                </div>
                            </div> 
                        </div>
                        @endforeach
                        @else

                            <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" multiple/>
                                            <option value=''>Select...</option>
                                            @foreach($locationClassificationList as $locationClassification)
                                                <option value="{{ $locationClassification->id }}">{{ $locationClassification->location_classification}}</option>
                                            @endforeach 
                                        </select>
                                    </div>
                                </div> 
                            </div>
                        @endif
                    </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 }}" {{ $user->userCorporate->billing_cycle == $duration->id ? 'selected' : ''}}>{{ $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 }}"  {{ $user->userCorporate->billing_type_id == $duration->id ? 'selected' : ''}}>{{ $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/libs/datatables/datatables.min.js') }}"></script>
    <script src="{{ URL::asset('/assets/js/pages/datatables.init.js') }}"></script>
    <script src="{{ URL::asset('/assets/js/custom.js') }}"></script>

    <script type="text/javascript">
    $(document).ready(function(){
        
        var token = "{{ csrf_token() }}";
        actionUrl = "{{ route('city') }}";
        updateStateOptions(actionUrl, token);
        updateDistrictOptions(actionUrl, token);
        updateZoneOptions(actionUrl, token);
        $('#city_id').on('change', function() {
            actionUrl = "{{ route('city') }}";
            updateStateOptions(actionUrl, token);
            updateDistrictOptions(actionUrl, token);
            updateZoneOptions(actionUrl, token);
        });
        $(".subscription_plan_id").each(function() {
            subscription_plan_id = $(this).find("option:selected").val();
            if(subscription_plan_id != ''){
                subscriptionPlanChange($(this));
            }
        });
        $(document).on("change", ".subscription_plan_id", function(){
            subscriptionPlanChange($(this));
        });
        $(".asset_type_id").each(function() {
            assetTypeChange($(this));
        });
        $(document).on("change", ".asset_type_id", function(){

            assetTypeChange($(this));
        });
        $(".asset_id").each(function() {
            asset_id = $(this).find("option:selected").val();
            if(asset_id != ''){
                assetChange($(this));
            }
        });
        $(document).on("change", ".asset_id", function(){
            
            assetChange($(this));
        });
        
        
        $(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("click", ".add_subs_btn", function(event){            
            event.preventDefault();
            var html ='';
            var total = $('select.va_service_type_id').length;
            alert(total);
            $("select.va_service_type_id").each(function(index) {
                if (index === total - 1) {
                    sel = $(this);
                    if (sel.hasClass("select2")) {
                        console.log('va_service_type_id');
                        console.log(sel);
                        sel.next().removeClass();
                        sel.next().html('');
                        sel.select2();
                    }
                }
            });
        });
        $( "#edit_form" ).submit(function( event ) {
            event.preventDefault();
            form = $( "#edit_form" );
            actionUrl = "{{ route('user.validate') }}";
            $.ajax({
                type: "POST",
                url: actionUrl,
                data: form.serialize(), // serializes the form's elements.
                success: function(data){
                    form.unbind().submit();
                },
                error: function (data) {
                    response = data.responseJSON;
                    if(response.status == false){
                        $.each(response.errors, function(i, item) {
                            $('#'+i+'_errors').html(response.errors[i]); 
                            $('#'+i+'_errors').css('display', 'block');
                            $('.needs-validation').addClass('was-validated');
                        });
                    }
                },
            });
        });
        showDataTable();
    });


    function showDataTable() {
            $("#wallet_datatable").DataTable().destroy();
            var table = $('#wallet_datatable').DataTable( {
                serverSide: true,
                processing: true,
                searching:false,
                paging: true,
                "ajax": {
                    "url": "{{ route('users.tap-wallet-historys', $id) }}",
                    "type": "POST",
                    'data': {
                        "search": $('#search').val(),
                        "_token": "{{ csrf_token() }}"
                    }
                },
                dom: 'Blfrtip',
                "columns": [
                    { "data": "id" },
                    { "data": "amount" },
                    { "data": "transaction_type" },
                    { "data": "wallet_balance" },
                    { "data": "purpose" },

                ],
                "buttons":[

                ],
            });
            //table.draw(); 
    }
    function subscriptionPlanChange(ele){

        let token = "{{ csrf_token() }}";
        subscription_plan_id = ele.find("option:selected").val();
            parentDiv = ele.parents('.subscription_plan_item');
            billing_cycle = parentDiv.find("input.billing_cycle");

            $.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(billing_cycle.val()) ;
                        }
                    }
                },
                error: function (data) {
                    console.log(' Failes.');
                },
            });

    }
    function assetTypeChange(ele){

        let token = "{{ csrf_token() }}";
        parentDiv = ele.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 =  ele.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) {
                                    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('');

    }
    function assetChange(ele){

        parentDiv = ele.parents('.subscription_plan_item');
        registerNumField = parentDiv.find("input.registration_number");
        
            batterySel = parentDiv.find("select.battery");
            batterySel.find('option').remove().end();
            chargerSel = parentDiv.find("select.charger");
            chargerSel.find('option').remove().end();
            
            updateAssetPartsByAssetId(ele, batterySel);
            updateAssetPartsByAssetId(ele, chargerSel);
            let registration_number = ele.find("option:selected").attr('registration_number');
            registerNumField.val(registration_number);

    }
        
    function updateAssetPartsByAssetId(ele, 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 ='';
                                var dataSelectedArray = dataSelected.split(',');
                                $.each(dataSelectedArray, function(indexS, selectedPart) {
                                    if(selectedPart == item.id ){
                                        selected = 'selected';
                                    }else{
                                        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