@extends('layouts.master')

@section('title') @lang('translation.Battery Subscription Details') @endsection

@section('css')
<!-- select2 css -->
<link href="{{ URL::asset('/assets/libs/select2/select2.min.css') }}" rel="stylesheet" type="text/css" />

<!-- dropzone css -->
<link href="{{ URL::asset('/assets/css/custom-dropzone.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;
    }
</style>
@endsection

@section('content')

<div class="row content-panel-header">
    <div class="col-sm-4 page-title-box">
        <h4 class="mb-sm-0 font-size-18">Battery Swap - subscriptions details</h4>
    </div>
</div>


<div class="row">
    <div class="col-12">
        
    <form  class="needs-validation" id="create_form" action="{{ route('subscription-plan.battery.store') }}" method="post" enctype="multipart/form-data" novalidate>
    @csrf
        <div class="card">
            <div class="card-body">
                <div class="card-title content-card-title">Create / Edit  Battery Subscription Details</div>
                <div class="mb-3 row">
                    <label for="plan_name" class="col-md-2 col-form-label">Plan Name<span class="required-sym">*</span></label>
                    <div class="col-md-6">
                        <input id="plan_name" name="plan_name" type="text" class="form-control" placeholder="Plan Name" required>
                        <div  id="plan_name_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
                <div class="mb-3 row"> 
                    <label for="business_category_id" class="col-md-2 col-form-label">Business Category<span class="required-sym">*</span></label>
                    <div class="col-md-6">
                        <select id="business_category_id" name="business_category_id" class="form-select" required>
                            <option value=''>Select...</option>
                                @foreach($businessCategoryList as $businessCategory)
                                    <option value="{{ $businessCategory->id }}">{{ $businessCategory->business_category}}</option>
                                @endforeach 
                        </select>
                        <div  id="business_category_id_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
                <div class="mb-3 row"> 
                    <label for="business_model_id" class="col-md-2 col-form-label">Business Model<span class="required-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">Subscription Policy</h4>
                <div>
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-bs-toggle="tab" href="#product_tab" role="tab">
                                <span class="d-none d-sm-block tab-title">Product</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#base_plan_tab" role="tab">
                                <span class="tab-title d-none d-sm-block">Base Plan</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#location_regions_tab" role="tab">
                                <span class="tab-title d-none d-sm-block">Location / Regions</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#terms_condition_tab" role="tab">
                                <span class="tab-title d-none d-sm-block">Terms & Condition</span>
                            </a>
                        </li>
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content p-3 text-muted">
                        <!-- User Details -->
                        <!--<h3>Product</h3>
                        <section>-->
                        <div class="tab-pane active" id="product_tab" role="tabpanel">
                            <div class="tab-header">
                                <h5 class="tab-title">Product</h5>
                                <small>Select the product that you want to create subscription for</small>
                            </div>

                            <div class="mb-3 row">
                                <label for="asset_type_id" class="col-md-2 col-form-label">Asset Type<span class="required-sym">*</span></label>
                                <div class="col-md-6">
                                    <select id="asset_type_id" name="asset_type_id" class="form-select" required>
                                        <option value=''>Select...</option>
                                            @foreach($productTypeList as $productType)
                                                <option value="{{ $productType->id }}">{{ $productType->product_type}}</option>
                                            @endforeach 
                                    </select>
                                    <div id="asset_type_id_errors" class="invalid-feedback">
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <input id="category_id" name="category_id" type="hidden"  value="2">
                                <label for="oem_id" class="col-md-2 col-form-label">Select OEM<span class="required-sym">*</span></label>
                                <div class="col-md-6">
                                    <select id="oem_id" name="oem_id" class="form-select" required>
                                        <option value=''>Select...</option>
                                    </select>
                                    <div  id="oem_id_errors"  class="invalid-feedback">
                                        Required
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label for="model_name" class="col-md-2 col-form-label">Battery Model Name <span class="required-sym">*</span></label>
                                <div class="col-md-6">
                                    <select id="model_name" name="model_name" class="form-select" required>
                                        <option value=''>Select...</option>
                                        @foreach($assetList as $asset)
                                            <option value="{{ $asset->model_name }}">{{ $asset->model_name}}</option>
                                        @endforeach 
                                    </select>
                                    <div  id="model_name_errors"  class="invalid-feedback">
                                        Required
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label for="battery_type" class="col-md-2 col-form-label">Battery Type<span class="required-sym">*</span></label>
                                <div class="col-md-6">
                                    <select id="battery_type" name="battery_type" class="form-select" required>
                                        <option value=''>Select...</option>
                                        @foreach($assetList as $asset)
                                            <option value="{{ $asset->battery_type }}">{{ $asset->battery_type}}</option>
                                        @endforeach 
                                    </select>
                                    <div  id="battery_type_errors"  class="invalid-feedback">
                                        Required
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label for="kwh_units" class="col-md-2 col-form-label">KWH Units<span class="required-sym">*</span></label>
                                <div class="col-md-6">
                                    <select id="kwh_units" name="kwh_units" class="form-select" required>
                                        <option value=''>Select...</option>
                                        @foreach($assetList as $asset)
                                            <option value="{{ $asset->kwh_units }}">{{ $asset->kwh_units}}</option>
                                        @endforeach 
                                    </select>
                                    <div  id="kwh_units_errors"  class="invalid-feedback">
                                        Required
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label for="part_id" class="col-md-2 col-form-label">Asset Parts</label>
                                <div class="col-md-6">
                                    <select id="part_id" name="part_id[]" class="form-select  select2 select2-multiple" multiple />
                                        <option value=''>Select...</option>
                                    </select>
                                    <div  id="part_id_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="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="product_overview" class="col-md-2 col-form-label">Subscription Overview <span class="required-sym">*</span></label>
                                <div class="col-md-6">
                                    <textarea class="form-control" name="product_overview" id="product_overview" placeholder="Product Overview" required> </textarea>
                                    <div  id="product_overview_errors"  class="invalid-feedback">
                                        Required
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--</section>
                        <h3>Product</h3>
                        <section>-->
                        <div class="tab-pane" id="base_plan_tab" role="tabpanel">
                            
                            <div class="tab-header">
                                <h5 class="tab-title">Base Plan Price</h5>
                                <small>The cost or amount of money that a subscriber will pay</small>
                            </div>
                            <div class="mb-3 row">
                                <label for="fixed_price" class="col-md-2 col-form-label">Fixed Price</label>
                                <div class="col-md-6">
                                    <input id="fixed_price" name="fixed_price" type="text" class="form-control" placeholder="Fixed Price" >
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label for="convenience_price" class="col-md-2 col-form-label">Convenience price</label>
                                <div class="col-md-6">
                                    <input type="radio" name="have_convenience_price"  id="have_convenience_price1" value="Yes" />
                                    <label for="have_convenience_price1">Yes</label>
                                    <input type="radio" name="have_convenience_price"  id="have_convenience_price2" value="No" />
                                    <label for="have_convenience_price2">No</label>
                                    <div class="have_convenience_price_yes_fields" style="display:none">
                                        <input id="convenience_price" name="convenience_price" type="text" class="form-control" placeholder="Convenience price" >
                                        <small>Please enter the amount with decimals. e.g : 199.00 / 99.50</small>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label for="delivery_charge" class="col-md-2 col-form-label">Delivery Charge</label>
                                <div class="col-md-6">
                                    <input type="radio" name="have_delivery_charge"  id="have_delivery_charge1" value="Yes" />
                                    <label for="have_delivery_charge1">Yes</label>
                                    <input type="radio" name="have_delivery_charge"  id="have_delivery_charge2" value="No" />
                                    <label for="have_delivery_charge2">No</label>
                                    <div class="have_delivery_charge_yes_fields" style="display:none">
                                        <input id="delivery_charge" name="delivery_charge" type="text" class="form-control" placeholder="Delivery Chargee" >
                                        <small>Please enter the amount with decimals. e.g : 199.00 / 99.50</small>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="tab-header">
                                <h5 class="tab-title">Renewal Type</h5>
                                <small>Based on the choice the customer will be able to use this product</small>
                            </div>
                                
                            <div class="mb-3 row">
                                <div class="col-md-12">
                                    <div class="form-check form-switch form-switch-lg mb-3" dir="ltr">
                                        <input class="form-check-input" type="radio" id="prepaid" value="Prepaid" name="base_plan"/>
                                        <label class="form-check-label" for="prepaid">Prepaid</label><small> (The user will pay the with or without offer before every usage)</small>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-check form-switch form-switch-lg mb-3" dir="ltr">
                                        <input class="form-check-input" type="radio" id="auto_renewing" value="Auto Renewing" name="base_plan" />
                                        <label class="form-check-label" for="auto_renewing">Auto Renewing</label><small> (The user will pay the fixed price once and the plan will auto renew after a fixed period)</small>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-check form-switch form-switch-lg mb-3" dir="ltr">
                                        <input class="form-check-input" type="radio" id="re_subscribe" value="Re-Subscribe" name="base_plan" />
                                        <label class="form-check-label" for="re_subscribe">Re-Subscribe</label><small> (The user will use the product until the wallet money is available. Once the wallet does not have enough balance, the product will lock)</small>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="form-check form-switch form-switch-lg mb-3" dir="ltr">
                                        <input class="form-check-input" type="radio" id="freemium" value="Freemium" name="base_plan" />
                                        <label class="form-check-label" for="freemium">Freemium</label><small> (Allow to use the product for FREE for limited period. Once the period is over, thye plan should change to premium)</small>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="tab-header prepaid_fields">
                                <h5 class="tab-title">Pre-Paid</h5>
                                <small>The user will pay the with or without offer before every usage</small>
                            </div>
                            <div class="mb-3 row prepaid_fields">
                                <label for="prepaid_billing_cycle_id" class="col-md-2 col-form-label">Billing Cycle</label>
                                <div class="col-md-6">
                                    <select id="prepaid_billing_cycle_id" name="prepaid_billing_cycle_id" class="form-select">
                                        <option value=''>Select...</option>
                                            @foreach($durationList as $duration)
                                                <option value="{{ $duration->id }}">{{ $duration->days}}</option>
                                            @endforeach 
                                    </select>
                                    <small>Each user will be qable to use the product in these n umber of days</small>
                                </div>
                            </div>
                            <div class="mb-3 row prepaid_fields">
                                <label for="prepaid_grace_time_hr" class="col-md-2 col-form-label">Grace Time</label>
                                <div class="col-md-6">
                                    <input type="radio" name="prepaid_grace_time_hr"  id="prepaid_grace_time_hr1" value="Yes" />
                                    <label for="prepaid_grace_time_hr1">Yes</label>
                                    <input type="radio" name="prepaid_grace_time_hr"  id="prepaid_grace_time_hr2" value="No" />
                                    <label for="prepaid_grace_time_hr2">No</label>
                                    <div class="prepaid_grace_time_hr_yes_fiels" style="display:none">
                                        <input id="prepaid_grace_time" name="prepaid_grace_time" type="text" class="form-control" placeholder="Grace Time in Hrs" >
                                        <small>The hrs that customer can use the bike befor locking</small>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3 row prepaid_fields">
                                <label for="prepaid_lock_bike" class="col-md-2 col-form-label">Lock Bike</label>
                                <div class="col-md-6 row" style="margin-top: 10px;">
                                    <div class="col-md-2">
                                        <input type="radio" name="prepaid_lock_bike"  id="prepaid_lock_bike1" value="0" />
                                        <label for="prepaid_lock_bike1">No</label>
                                    </div>
                                    <div class="col-md-5">
                                        <input type="radio" name="prepaid_lock_bike"  id="prepaid_lock_bike2" value="1" />
                                        <label for="prepaid_lock_bike2">Manual (From Intellicar)</label>
                                    </div>
                                    <div class="col-md-3">
                                        <input type="radio" name="prepaid_lock_bike"  id="prepaid_lock_bike3" value="2" />
                                        <label for="re_subscribe_lock_bike3">Automatic</label>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="tab-header auto_renewing_fields">
                                <h5 class="tab-title">Auto Renewing</h5>
                                <small>The will pay the fixed price once and the plan will auto renew after a fixed period</small>
                            </div>
                            <div class="mb-3 row auto_renewing_fields">
                                <label for="auto_renewing_billing_period_id" class="col-md-2 col-form-label">Billing Period</label>
                                <div class="col-md-6">
                                    <select id="auto_renewing_billing_period_id" name="auto_renewing_billing_period_id" class="form-select">
                                        <option value=''>Select...</option>
                                            @foreach($durationList as $duration)
                                                <option value="{{ $duration->id }}">{{ $duration->duration}}</option>
                                            @endforeach 
                                    </select>
                                    <small>The duration at which the cutomer will be charged with this amount</small>
                                </div>
                            </div>
                            <div class="mb-3 row auto_renewing_fields">
                                <label for="auto_renewing_grace_time" class="col-md-2 col-form-label">Grace Time</label>
                                <div class="col-md-6">
                                    <input id="auto_renewing_grace_time" name="auto_renewing_grace_time" type="text" class="form-control" placeholder="Grace Time" >
                                    <small>Grace period allows user to use the product even when the subscription is over and allow to pay with in the grace period. Billing cycle starts at the end of every subscription period</small>
                                </div>
                            </div>
                            

                            <div class="tab-header re_subscribe_fields">
                                <h5 class="tab-title">Re-Subscribe</h5>
                                <small>The user will use the product until the wallet money is available. Once the wallet does not have enough balance, the product will lock</small>
                            </div>
                            <div class="mb-3 row re_subscribe_fields ">
                                <label for="re_subscribe_grace_time_hr" class="col-md-2 col-form-label">Grace Time</label>
                                <div class="col-md-6">
                                    <input type="radio" name="re_subscribe_grace_time_hr"  id="re_subscribe_grace_time_hr1" value="Yes" />
                                    <label for="re_subscribe_grace_time_hr1">Yes</label>
                                    <input type="radio" name="re_subscribe_grace_time_hr"  id="re_subscribe_grace_time_hr2" value="No" />
                                    <label for="re_subscribe_grace_time_hr2">No</label>
                                    <div class="re_subscribe_grace_time_hr_yes_fiels"  style="display:none">
                                        <input id="re_subscribe_grace_time" name="re_subscribe_grace_time" type="text" class="form-control" placeholder="Grace Time in Hrs" >
                                        <small>The hrs that customer can use the bike befor locking</small>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3 row re_subscribe_fields">
                                <label for="re_subscribe_lock_bike" class="col-md-2 col-form-label">Lock Bike</label>
                                <div class="col-md-6 row" style="margin-top: 10px;">
                                    <div class="col-md-2">
                                        <input type="radio" name="re_subscribe_lock_bike"  id="re_subscribe_lock_bike1" value="0" />
                                        <label for="re_subscribe_lock_bike1">No</label>
                                    </div>
                                    <div class="col-md-5">
                                        <input type="radio" name="re_subscribe_lock_bike"  id="re_subscribe_lock_bike2" value="1" />
                                        <label for="re_subscribe_lock_bike2">Manual (From Intellicar)</label>
                                    </div>
                                    <div class="col-md-3">
                                        <input type="radio" name="re_subscribe_lock_bike"  id="re_subscribe_lock_bike3" value="2" />
                                        <label for="re_subscribe_lock_bike3">Automatic</label>
                                    </div>
                                </div>
                            </div>
                            

                            <div class="tab-header freemium_fields">
                                <h5 class="tab-title">Freemium</h5>
                                <small>Allow to use the product for FREE for limited period. Once the period is over, thye plan should change to premium</small>
                            </div>
                            <div class="mb-3 row freemium_fields">
                                <label for="freemium_free_usages_id" class="col-md-2 col-form-label">Free Usages</label>
                                <div class="col-md-6">
                                    <select id="freemium_free_usages_id" name="freemium_free_usages_id" class="form-select">
                                        <option value=''>Select...</option>
                                            @foreach($durationList as $duration)
                                                <option value="{{ $duration->id }}">{{ $duration->days}}</option>
                                            @endforeach 
                                    </select>
                                    <small>Each user will be qable to use the product in these n umber of days</small>
                                </div>
                            </div>
                            <div class="mb-3 row freemium_fields">
                                <label for="freemium_grace_time_hr" class="col-md-2 col-form-label">Grace Time</label>
                                <div class="col-md-6">
                                    <input type="radio" name="freemium_grace_time_hr"  id="freemium_grace_time_hr1" value="Yes" />
                                    <label for="freemium_grace_time_hr1">Yes</label>
                                    <input type="radio" name="freemium_grace_time_hr"  id="freemium_grace_time_hr2" value="No" />
                                    <label for="freemium_grace_time_hr2">No</label>
                                    <div class="freemium_grace_time_hr_yes_fiels"  style="display:none">
                                        <input id="freemium_grace_time" name="freemium_grace_time" type="text" class="form-control" placeholder="Grace Time in Hrs" >
                                        <small>The hrs that customer can use the bike befor locking</small>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3 row freemium_fields">
                                <label for="freemium_lock_bike" class="col-md-2 col-form-label">Lock Bike</label>
                                <div class="col-md-6 row" style="margin-top: 10px;">
                                    <div class="col-md-2">
                                        <input type="radio" name="freemium_lock_bike"  id="freemium_lock_bike1" value="0" />
                                        <label for="freemium_lock_bike1">No</label>
                                    </div>
                                    <div class="col-md-5">
                                        <input type="radio" name="freemium_lock_bike"  id="freemium_lock_bike2" value="1" />
                                        <label for="freemium_lock_bike2">Manual (From Intellicar)</label>
                                    </div>
                                    <div class="col-md-3">
                                        <input type="radio" name="freemium_lock_bike"  id="freemium_lock_bike3" value="2" />
                                        <label for="freemium_lock_bike3">Automatic</label>
                                    </div>
                                </div>
                            </div>

                        </div>
                        
                        <!--</section>
                        <h3>Product</h3>
                        <section>-->
                        <div class="tab-pane" id="location_regions_tab" role="tabpanel">
                            
                            <div class="repeater" enctype="multipart/form-data">
                                <div data-repeater-list="location_regions_list" class="location_regions_tab">
                                    <div class="row">
                                    <div class="tab-header col-md-10 ">
                                        <h5 class="tab-title">Location / Regions</h5>
                                        <small>The location where the plan is applicable</small>
                                    </div>
                                    
                                    <div class="col-md-2">
                                        <input data-repeater-create type="button"  class="add_parts btn btn-primary waves-effect waves-light" value="Add Location" />
                                    </div>
                                    </div>
                                    <div data-repeater-item class="row asset_part_item">
                                        <div class="mb-3 row">
                                            <label for="location_id" class="col-md-2 col-form-label">Choose Location</label>
                                            <div class="col-md-6">
                                                <select id="location_id" name="location_id" class="form-select">
                                                    <option value=''>Select...</option>
                                                        @foreach($locationList as $location)
                                                            <option value="{{ $location->id }}">{{ $location->location}}</option>
                                                        @endforeach 
                                                </select>
                                                <small>Please choose the location</small>
                                            </div>
                                        </div>
                                        <div class="mb-3 row">
                                            <label for="base_price" class="col-md-2 col-form-label">Base Price</label>
                                            <div class="col-md-6">
                                                <input id="base_price" name="base_price" type="text" class="base_price form-control" placeholder="Base Price" required>
                                                <small>Add the amount as required to the location and cliend relationship</small>
                                            </div>
                                        </div>
                                        <div class="mb-3 row">
                                            <label for="taxation_profile_id" class="col-md-2 col-form-label">Taxation Profile</label>
                                            <div class="col-md-6">
                                                <select id="taxation_profile_id" name="taxation_profile_id" class="taxation_profile_id form-select" required>
                                                    <option value=''>Select...</option>
                                                        @foreach($taxationProfileList as $taxationProfile)
                                                            <option value="{{ $taxationProfile['id'] }}" data-percentage="{{ $taxationProfile['tax-percentage']  }}">{{ $taxationProfile['taxation_profile']}}</option>
                                                        @endforeach  
                                                </select>
                                                <small class="tax-percentage"></small>
                                            </div>
                                        </div>
                                        <div class="mb-3 row">
                                            <label for="convenience_fee" class="col-md-2 col-form-label">Convenience Fee</label>
                                            <div class="col-md-6">
                                                <input id="convenience_fee" name="convenience_fee" type="text" class="convenience_fee form-control" placeholder="Convenience Fee" >
                                                <small>Add the amount as required to the location and client relationship</small>
                                            </div>
                                        </div>
                                        <div class="mb-3 row">
                                            <label for="delivery_fee" class="col-md-2 col-form-label">Delivery Fee</label>
                                            <div class="col-md-6">
                                                <input id="delivery_fee" name="delivery_fee" type="text" class="delivery_fee form-control" placeholder="Delivery Fee" >
                                                <small>Add the amount as required to the location and client relationship</small>
                                            </div>
                                            <div class="col-md-4">
                                                <input data-repeater-delete type="button" class="btn btn-primary-borderd" value="Delete" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!--</section>
                        <h3>Product</h3>
                        <section>-->
                        <div class="tab-pane" id="terms_condition_tab" role="tabpanel">
                            
                            <div class="repeater" enctype="multipart/form-data">
                                <div data-repeater-list="terms_condition_list" class="terms_condition_tab">
                                    <div class="row">
                                    <div class="tab-header col-md-10 ">
                                        <h5 class="tab-title">Location / Regions</h5>
                                        <small>The location where the plan is applicable</small>
                                    </div>
                                    
                                    <div class="col-md-2">
                                        <input data-repeater-create type="button"  class="add_parts btn btn-primary waves-effect waves-light" value="Add Terms & Condition" />
                                    </div>
                                    </div>
                                    <div data-repeater-item class="row asset_part_item">
                                        <div class="mb-3 row">
                                            <label for="image" class="col-md-2 col-form-label">Image</label>
                                            <div class="col-md-6">
                                                <input type="file" name="image" class="form-control" id="image" />
                                                <small>Choose an image of zice .. to upload as icon</small>
                                            </div>
                                        </div>
                                        <div class="mb-3 row">
                                            <label for="terms_condition" class="col-md-2 col-form-label">T & C Text</label>
                                            <div class="col-md-6">
                                                <input id="terms_condition" name="terms_condition" type="text" class="form-control" placeholder="T & C Text" />
                                                <small></small>
                                            </div>
                                            <div class="col-md-4">
                                                <input data-repeater-delete type="button" class="btn btn-primary-borderd" value="Delete" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                
                        </div>
                        <!--</section>-->
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <div class="d-flex flex-wrap gap-2" style="float: right;">
                    <a href="{{ route('subscription-plan.battery.index') }}" 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>
    </div>
</div>
<!-- end row -->
@endsection
@section('script')

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

    <!-- form wizard init -->
    <script src="{{ URL::asset('/assets/js/pages/form-wizard.init.js') }}"></script>
    <!-- dropzone plugin -->
    <script src="{{ URL::asset('/assets/libs/dropzone/dropzone.min.js') }}"></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 actionUrl = "{{ route('vendor-oem.oem-by-category') }}";
        var token = "{{ csrf_token() }}";
        updateVendorOemOption(actionUrl, token);
        // $('#oem_id').on('change', function() {
        //     actionUrl = "{{ route('vendor-oem.oem') }}";
        //     updateDealerOptionsByOem(actionUrl, token);
        // });
        $('#model_name').on('change', function() {
            actionUrl = "{{ route('asset.asset-battery-list') }}";
            updateAssetPartsByAssetModel(actionUrl, token);
        });
        $('#location_id').on('change', function() {
            var actionUrl = "{{ route('city') }}";
            updateCityOptionByCityID(actionUrl, token);
        });
        $('#city_id').on('change', function() {
              var actionUrl = "{{ route('city') }}";
            updateStateOptions(actionUrl, token);
            updateDistrictOptions(actionUrl, token);
            updateZoneOptions(actionUrl, token);
        });
        $('.auto_renewing_fields').hide();
        $('.prepaid_fields').hide();
        $('.re_subscribe_fields').hide();
        $('.freemium_fields').hide();
        $('input[type=radio][name=base_plan]').on('change', function() {
            if($(this).val() == 'Freemium'){
                $('.freemium_fields').show();                
                $('.auto_renewing_fields').hide();
                $('.prepaid_fields').hide();
                $('.re_subscribe_fields').hide();
            }else if($(this).val() == 'Re-Subscribe'){
                $('.re_subscribe_fields').show();                
                $('.auto_renewing_fields').hide();
                $('.prepaid_fields').hide();
                $('.freemium_fields').hide();
            }else if($(this).val() == 'Auto Renewing'){
                $('.re_subscribe_fields').hide();                
                $('.auto_renewing_fields').show();
                $('.prepaid_fields').hide();
                $('.freemium_fields').hide();
            }else if($(this).val() == 'Prepaid'){
                $('.re_subscribe_fields').hide();                
                $('.auto_renewing_fields').hide();
                $('.prepaid_fields').show();
                $('.freemium_fields').hide();
            }
        });
        $('input[type=radio][name=prepaid_grace_time_hr]').on('change', function() {
            if($(this).val() == 'Yes'){
                $('.prepaid_grace_time_hr_yes_fiels').show();
            }else{
                $('.prepaid_grace_time_hr_yes_fiels').hide();
            }

        });
        $('input[type=radio][name=re_subscribe_grace_time_hr]').on('change', function() {
            if($(this).val() == 'Yes'){
                $('.re_subscribe_grace_time_hr_yes_fiels').show();
            }else{
                $('.re_subscribe_grace_time_hr_yes_fiels').hide();
            }

        });
        $('input[type=radio][name=freemium_grace_time_hr]').on('change', function() {
            if($(this).val() == 'Yes'){
                $('.freemium_grace_time_hr_yes_fiels').show();
            }else{
                $('.freemium_grace_time_hr_yes_fiels').hide();
            }

        });
        $('input[type=radio][name=have_convenience_price]').on('change', function() {
            if($(this).val() == 'Yes'){
                $('.have_convenience_price_yes_fields').show();
            }else{
                $('.have_convenience_price_yes_fields').hide();
            }

        });
        $('#convenience_price').on('change', function() {
            convenience_fee = $('.convenience_fee').val();
            if(convenience_fee == ''){
                $('.convenience_fee').val($(this).val());
            }
        });
        $('input[type=radio][name=have_delivery_charge]').on('change', function() {
            if($(this).val() == 'Yes'){
                $('.have_delivery_charge_yes_fields').show();
            }else{
                $('.have_delivery_charge_yes_fields').hide();
            }

        });
        $('#delivery_charge').on('change', function() {
            
            deliveryCharge = $('.delivery_fee ').val();
            if(deliveryCharge == ''){
                $('.delivery_fee ').val($(this).val());
            }
        });
        $('#fixed_price').on('change', function() {
            
            base_price = $('.base_price ').val();
            if(base_price == ''){
                $('.base_price ').val($(this).val());
            }
        });
        $(document).on('change', '.taxation_profile_id', function(event) {
            taxPercentage = $(this).find(":selected").attr('data-percentage');
            if(taxPercentage != ''){
                $(this).next().text( taxPercentage);
            }
        });
        //$(document).on('click', '[href="#finish"]', function(event) {
        $( "#create_form" ).submit(function( event ) {
            event.preventDefault();
            actionUrl = "{{ route('subscription-plan.battery.validate') }}";
            form = $( "#create_form" );
            $.ajax({
                type: "POST",
                url: actionUrl,
                data: form.serialize(), // serializes the form's elements.
                success: function(data){ 
                    $('.needs-validation').addClass('validated');
                    form.unbind().submit();
                   
                },
                error: function (data) {
                    console.log('An error occurred.');
                    response = data.responseJSON;
                    if(response.mode == false){
                        var error_id = ''
                        $.each(response.errors, function(i, item) {
                            if(error_id == ''){
                                error_id = '#'+i+'_errors';
                            }
                            $('#'+i+'_errors').html(response.errors[i]); 
                            $('#'+i+'_errors').css('display', 'block');
                        });
                        
                        if(error_id != ''){
                            $([document.documentElement, document.body]).animate({
                                scrollTop: $(error_id).offset().top - 500
                            },1);
                        }
                    }
                },
            });
        });
        
    });
    
    function updateAssetPartsByAssetModel(actionUrl,  token){
        console.log('updateAssetPartsByAssetModel');
        let model_name =  $('#model_name').find("option:selected").val();
        if(model_name){
            $.ajax({
                type: "POSt",
                url: actionUrl,
                data: {
                    "model_name" : model_name,
                    "with" : "parts",
                    "_token": token
                },
                success: function(data){ 
                    if(data['data']){
                        let sel = $("#part_id");
                        dataSelected = sel.attr('data-selected');
                        sel.find('option').remove().end();
                        sel.append('<option value="">Select...</option>');
                        $.each(data['data'], function(index, item) {
                            selected ='';
                            if(dataSelected == index ){
                                selected = 'selected';
                            }else{
                                selected='';
                            }
                            if(item.battery_dealer != ''){
                                sel.append('<option value="'+ index +'" '+selected+'>'+ item +'</option>');
                            }
                        });
                    }
                },
                error: function (data) {
                    console.log(actionUrl+' Failes.');
                },
            });
        }
        
    }
    </script>
@endsection