@extends('layouts.master')

@section('title') @lang('translation.Charging Equipment') @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">charging Equipment - subscriptions details</h4>
    </div>
</div>


<div class="row">
    <div class="col-12">
    
    @if($chargingEquipment->id)
    <form  class="needs-validation" id="edit_form" action="{{ route('subscription-plan.charging-equipment.update', ['charging_equipment' => $chargingEquipment->id] ) }}" method="post" enctype="multipart/form-data" novalidate>
    @method('put')
    @else
    <form  class="needs-validation" id="edit_form" action="{{ route('subscription-plan.charging-equipment.store') }}" method="post" enctype="multipart/form-data" novalidate>
    @endif
    @csrf

    <input name="id" type="hidden"  value="{{ $chargingEquipment->id }}" />
   
        <div class="card">
            <div class="card-body">
                <div class="card-title content-card-title">Create / Edit  Charging Equipment Subscription Details</div>
                <div class="mb-3 row">
                    <label for="plan_name" class="col-md-2 col-form-label">Plan Name</label>
                    <div class="col-md-6">
                        <input id="plan_name" name="plan_name" type="text" class="form-control" placeholder="Type here" value="{{ $chargingEquipment->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</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 }}" {{ $chargingEquipment->business_category_id ==  $businessCategory->id ? 'selected' : ''}}>{{ $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</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 }}" {{ $chargingEquipment->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">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">
                                <input id="category_id" name="category_id" type="hidden"  value="3">
                                <label for="oem_id" class="col-md-2 col-form-label">Asset Type</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 }}" {{ $chargingEquipment->asset_type_id ==  $productType->id ? 'selected' : '' }}>{{ $productType->product_type}}</option>
                                            @endforeach 
                                    </select>
                                    <div id="asset_type_id_errors" class="invalid-feedback">
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label for="oem_id" class="col-md-2 col-form-label">Select OEM</label>
                                <div class="col-md-6">
                                    <select id="oem_id" name="oem_id" class="form-select" data-selected="{{  $chargingEquipment->oem_id }}" 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">Model Name</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 }}"  {{  $chargingEquipment->model_name == $asset->model_name ? 'selected' : '' }}>{{ $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="kwh_units" class="col-md-2 col-form-label">KWH Units</label>
                                <div class="col-md-6">
                                    <input id="kwh_units" name="kwh_units" type="text" class="form-control" placeholder="Type here" value="{{ $chargingEquipment->kwh_units }}" required>
                                    <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">Adapter</label>
                                <div class="col-md-6">
                                    <select id="part_id" name="part_id[]" class="form-select  select2 select2-multiple" data-selected="{{ $partId }}"  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" data-selected="{{ $vAServiceTypeId }}"  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="part_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">Product Overview</label>
                                <div class="col-md-6">
                                    <textarea class="form-control" name="product_overview" id="product_overview" placeholder="Type here" required>{{ $chargingEquipment->product_overview  }}</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 the amount of money that the business will charge (excluding the tax). Tax will be computed based on the locations’ taxes</small>
                            </div>
                            <div class="mb-3 row">
                                <label for="fixed_price" class="col-md-2 col-form-label">Base price per KWH</label>
                                <div class="col-md-6">
                                    <input id="fixed_price" name="fixed_price" type="text" class="form-control" placeholder="Type here" value="{{ $chargingEquipment?->fixed_price }}" required>
                                    <div  id="fixed_price_errors"  class="invalid-feedback">
                                        Required
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3 row" >
                                <label for="fixed_price_taxation_profile_id" class="col-md-2 col-form-label">Taxation Profile for Fixed Price</label>
                                <div class="col-md-6">
                                    <select id="fixed_price_taxation_profile_id" name="fixed_price_taxation_profile_id" class="fixed_price_taxation_profile_id form-select" >
                                        <option value=''>Select...</option>
                                            @foreach($taxationProfileList as $taxationProfile)
                                                <option value="{{ $taxationProfile['id'] ?? '' }}" data-percentage="{{ $taxationProfile['tax-percentage']  }}" {{ $chargingEquipment->fixed_price_taxation_profile_id == $taxationProfile['id'] ? 'selected' :'' }} >{{ $taxationProfile['taxation_profile']}}</option>
                                            @endforeach  
                                    </select>
                                    <small class="fixed-price-tax-percentage"></small>
                                </div>
                                <div  id="fixed_price_taxation_profile_id_errors"  class="invalid-feedback">
                                    Required
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label for="unit_count" class="col-md-2 col-form-label">Unit count</label>
                                <div class="col-md-6">
                                    <input id="unit_count" name="unit_count" type="text" class="form-control" placeholder="Type here" value="{{ $chargingEquipment?->unit_count }}">
                                </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"  {{ $chargingEquipment->have_convenience_price == "Yes" ? 'checked' : '' }} />
                                    <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="{{ $chargingEquipment?->have_convenience_price == 'Yes' ? '' : 'display:none;' }}" >
                                        <input id="convenience_price" name="convenience_price" type="text" class="form-control" placeholder="Type here" value="{{ $chargingEquipment?->convenience_price }}">
                                        <small>Please enter the amount with decimals. e.g : 199.00 / 99.50</small>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3 row have_convenience_price_yes_fields" style="{{ $chargingEquipment?->have_convenience_price == 'Yes' ? '' : 'display:none;' }}" >
                                <label for="convenience_price_taxation_profile_id" class="col-md-2 col-form-label">Taxation Profile for Convenience price</label>
                                <div class="col-md-6">
                                    <select id="convenience_price_taxation_profile_id" name="convenience_price_taxation_profile_id" class="convenience_price_taxation_profile_id form-select" >
                                        <option value=''>Select...</option>
                                            @foreach($taxationProfileList as $taxationProfile)
                                                <option value="{{ $taxationProfile['id'] ?? '' }}" data-percentage="{{ $taxationProfile['tax-percentage']  }}" {{ $chargingEquipment->convenience_price_taxation_profile_id == $taxationProfile['id'] ? 'selected' :'' }} >{{ $taxationProfile['taxation_profile']}}</option>
                                            @endforeach  
                                    </select>
                                    <small class="convenience-price-tax-percentage"></small>
                                </div>
                                <div  id="convenience_price_taxation_profile_id_errors"  class="invalid-feedback">
                                    Required
                                </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"  {{ $chargingEquipment->have_delivery_charge == "Yes" ? 'checked' : '' }} />
                                    <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="{{ $chargingEquipment?->have_delivery_charge == 'Yes' ? '' : 'display:none;' }}" >
                                        <input id="delivery_charge" name="delivery_charge" type="text" class="form-control" placeholder="Type here" value="{{ $chargingEquipment?->delivery_charge }}">
                                        <small>Please enter the amount with decimals. e.g : 199.00 / 99.50</small>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="mb-3 row have_delivery_charge_yes_fields" style="{{ $chargingEquipment?->have_delivery_charge == 'Yes' ? '' : 'display:none;' }}" >
                                <label for="delivery_charge_taxation_profile_id" class="col-md-2 col-form-label">Taxation Profile for Delivery Charge</label>
                                <div class="col-md-6">
                                    <select id="delivery_charge_taxation_profile_id" name="delivery_charge_taxation_profile_id" class="delivery_charge_taxation_profile_id form-select" >
                                        <option value=''>Select...</option>
                                            @foreach($taxationProfileList as $taxationProfile)
                                                <option value="{{ $taxationProfile['id'] ?? '' }}" data-percentage="{{ $taxationProfile['tax-percentage']  }}" {{ $chargingEquipment->delivery_charge_taxation_profile_id == $taxationProfile['id'] ? 'selected' :'' }} >{{ $taxationProfile['taxation_profile']}}</option>
                                            @endforeach  
                                    </select>
                                    <small class="delivery-charge-tax-percentage"></small>
                                </div>
                                <div  id="delivery_charge_taxation_profile_id_errors"  class="invalid-feedback">
                                    Required
                                </div>
                            </div>
                            <div class="tab-header">
                                <h5 class="tab-title">Renewal Type</h5>
                                <small>Based on the below choice the subscription plan will be created. One subscription will have only one Renewal type.</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="by_KWH_Units" value="KWH Units" name="base_plan" required  {{ $chargingEquipment->base_plan == "KWH Units" ? 'checked' : '' }}/>
                                        <label class="form-check-label" for="by_KWH_Units">By KWH Units </label><small> ( The users will need to choose the Units and pay through the wallet to book)  </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="by_duration" value="Duration" name="base_plan" {{ $chargingEquipment->base_plan == "Duration" ? 'checked' : '' }} required/>
                                        <label class="form-check-label" for="by_duration">By Duration  </label><small> ( The users will be able to choose by duration in minutes and the system should convert the duration into KWH and cost based on the type of charger )</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="by_cost" value="Cost" name="base_plan" {{ $chargingEquipment->base_plan == "Cost" ? 'checked' : '' }} required/>
                                        <label class="form-check-label" for="by_cost">By Cost </label><small>  ( The users will use the product until the wallet money is available. Once the wallet dose not have enough balance, the product will lock)</small>
                                    </div>
                                    <div  id="base_plan_errors"  class="invalid-feedback">
                                        Required
                                    </div>
                                </div>
                            </div>
                            
                            <div class="tab-header KWH_Units_fields">
                                <h5 class="tab-title">By KWH Units</h5>
                                <small>The users will be able to choose the KWH Units in the customer app the system should convert the units into duration and cost based on the type of charger from the product details  </small>
                            </div>
                            <div class="mb-3 row KWH_Units_fields">
                                <label for="by_units" class="col-md-2 col-form-label">Units</label>
                                <div class="col-md-6">
                                    <select id="by_units" name="by_units" class="form-select">
                                        <option value=''>Select...</option>
                                            @foreach(range(10, 100, 10)  as $units)
                                                <option value="{{ $units}}" {{ $chargingEquipment->by_units == $units ? 'selected' : '' }}>{{ $units }}</option>
                                            @endforeach 
                                    </select>
                                    <small>Select the charging Units for this subscription plan</small>
                                </div>
                            </div>
                            
                            <div class="tab-header by_duration_fields">
                                <h5 class="tab-title">By Duration</h5>
                                <small>The users will be able to choose by duration in minutes and the system should convert the duration into KWH and cost based on the type of charger from the product  </small>
                            </div>
                            <div class="mb-3 row by_duration_fields">
                                <label for="charging_duration" class="col-md-2 col-form-label">Charging Duration </label>
                                <div class="col-md-6">
                                    <select id="charging_duration" name="charging_duration" class="form-select">
                                        <option value=''>Select...</option>
                                            @foreach($day as $time)
                                                <option value="{{ $time }}"  {{ $chargingEquipment->charging_duration == $time ? 'selected' : '' }}>{{ $time}}</option>
                                            @endforeach 
                                    </select>
                                    <small>Select the charging during for this subscription plan</small>
                                </div>
                            </div>
                            
                            <div class="tab-header by_cot_fields">
                                <h5 class="tab-title">Cost Slab</h5>
                                <small>Set the cost slab for a minimum order. If this is not filled, the user will be charged by minutes and the base fare.</small>
                            </div>
                            <div class="mb-3 row by_cot_fields">
                                <label for="by_slab_units" class="col-md-2 col-form-label">Cost Slab</label>
                                <div class="col-md-6">
                                    <select id="by_slab_units" name="by_slab_units" class="form-select">
                                        <option value=''>Select...</option>
                                            @foreach(range(10, 100, 10)  as $units)
                                                <option value="{{ $units}}" {{ $chargingEquipment->by_slab_units == $units ? 'selected' : '' }}>{{ $units }}</option>
                                            @endforeach 
                                    </select>
                                    <small>Select the charging Units for this subscription plan</small>
                                </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_terms_condition btn btn-primary waves-effect waves-light" value="Add Location" />
                                    </div>
                                    </div>
                                    @if($chargingEquipment->location->count() > 0)
                                    @foreach($chargingEquipment->location as $locationReg)
                                    <div data-repeater-item class="row asset_location_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">
                                                <input name="charging_equipment_location_id" type="hidden"  value="{{ $locationReg->id }}" />

                                                <select id="location_id" name="location_id" class="form-select">
                                                    <option value=''>Select...</option>
                                                        @foreach($locationList as $location)
                                                            <option value="{{ $location->id }}" {{ $locationReg->location_id == $location->id ? 'selected' :'' }}>{{ $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="form-control" placeholder="Type here" value="{{ $locationReg->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="base_price_taxation_profile_id" class="col-md-2 col-form-label">Taxation Profile for Location Base Price</label>
                                            <div class="col-md-6">
                                                <select id="base_price_taxation_profile_id" name="base_price_taxation_profile_id" class="base_price_taxation_profile_id form-select" >
                                                    <option value=''>Select...</option>
                                                        @foreach($taxationProfileList as $taxationProfile)
                                                            <option value="{{ $taxationProfile['id'] ?? '' }}" data-percentage="{{ $taxationProfile['tax-percentage']  }}" {{ $locationReg->base_price_taxation_profile_id == $taxationProfile['id'] ? 'selected' :'' }} >{{ $taxationProfile['taxation_profile']}}</option>
                                                        @endforeach  
                                                </select>
                                                <small class="base-price-tax-percentage"></small>
                                            </div>
                                            <div  id="base_price_taxation_profile_id_errors"  class="invalid-feedback">
                                                Required
                                            </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="Type here" value="{{ $locationReg->convenience_fee }}">
                                                <small>Add the amount as required to the location and client relationship</small>
                                            </div>
                                        </div>
                                        <div class="mb-3 row" >
                                            <label for="convenience_fee_taxation_profile_id" class="col-md-2 col-form-label">Taxation Profile for Convenience Fee</label>
                                            <div class="col-md-6">
                                                <select id="convenience_fee_taxation_profile_id" name="convenience_fee_taxation_profile_id" class="convenience_fee_taxation_profile_id form-select" >
                                                    <option value=''>Select...</option>
                                                        @foreach($taxationProfileList as $taxationProfile)
                                                            <option value="{{ $taxationProfile['id'] ?? '' }}" data-percentage="{{ $taxationProfile['tax-percentage']  }}" {{ $locationReg->convenience_fee_taxation_profile_id == $taxationProfile['id'] ? 'selected' :'' }} >{{ $taxationProfile['taxation_profile']}}</option>
                                                        @endforeach  
                                                </select>
                                                <small class="convenience-fee-tax-percentage"></small>
                                                <div  id="convenience_fee_taxation_profile_id_errors"  class="invalid-feedback">
                                                    Required
                                                </div>
                                            </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="Type here" value="{{ $locationReg->delivery_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_taxation_profile_id" class="col-md-2 col-form-label">Taxation Profile for Convenience Fee</label>
                                            <div class="col-md-6">
                                                <select id="delivery_fee_taxation_profile_id" name="delivery_fee_taxation_profile_id" class="delivery_fee_taxation_profile_id form-select" >
                                                    <option value=''>Select...</option>
                                                        @foreach($taxationProfileList as $taxationProfile)
                                                            <option value="{{ $taxationProfile['id'] ?? '' }}" data-percentage="{{ $taxationProfile['tax-percentage']  }}" {{ $locationReg->delivery_fee_taxation_profile_id == $taxationProfile['id'] ? 'selected' :'' }} >{{ $taxationProfile['taxation_profile']}}</option>
                                                        @endforeach  
                                                </select>
                                                <small class="delivery-fee-tax-percentage"></small>
                                                <div  id="delivery_fee_taxation_profile_id_errors"  class="invalid-feedback">
                                                    Required
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <input data-repeater-delete type="button" class="delete-location btn btn-primary-borderd" value="Delete Location"  data-id="{{ $locationReg->id }}" data-url="{{ route('subscription-plan.charging-equipment.delete-location', $locationReg->id) }}"/>
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                    @else
                                    <div data-repeater-item class="row asset_location_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">Location Base Price</label>
                                            <div class="col-md-6">
                                                <input id="base_price" name="base_price" type="text" class="form-control" placeholder="Type here" required>
                                                <small>Add the amount as required to the location and cliend relationship</small>
                                            </div>
                                        </div>
                                        <div class="mb-3 row" >
                                            <label for="base_price_taxation_profile_id" class="col-md-2 col-form-label">Taxation Profile for Location Base Price</label>
                                            <div class="col-md-6">
                                                <select id="base_price_taxation_profile_id" name="base_price_taxation_profile_id" class="base_price_taxation_profile_id form-select" >
                                                    <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="base-price-tax-percentage"></small>
                                            </div>
                                            <div  id="base_price_taxation_profile_id_errors"  class="invalid-feedback">
                                                Required
                                            </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="Type here" >
                                                <small>Add the amount as required to the location and client relationship</small>
                                            </div>
                                        </div>
                                        <div class="mb-3 row" >
                                            <label for="convenience_fee_taxation_profile_id" class="col-md-2 col-form-label">Taxation Profile for Convenience Fee</label>
                                            <div class="col-md-6">
                                                <select id="convenience_fee_taxation_profile_id" name="convenience_fee_taxation_profile_id" class="convenience_fee_taxation_profile_id form-select" >
                                                    <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="convenience-fee-tax-percentage"></small>
                                                <div  id="convenience_fee_taxation_profile_id_errors"  class="invalid-feedback">
                                                    Required
                                                </div>
                                            </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="Type here" >
                                                <small>Add the amount as required to the location and client relationship</small>
                                            </div>
                                        </div>
                                        <div class="mb-3 row" >
                                            <label for="delivery_fee_taxation_profile_id" class="col-md-2 col-form-label">Taxation Profile for Delivery Fee</label>
                                            <div class="col-md-6">
                                                <select id="delivery_fee_taxation_profile_id" name="delivery_fee_taxation_profile_id" class="delivery_fee_taxation_profile_id form-select" >
                                                    <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="delivery-fee-tax-percentage"></small>
                                                <div  id="delivery_fee_taxation_profile_id_errors"  class="invalid-feedback">
                                                    Required
                                                </div>
                                            </div>
                                            <div class="col-md-4">
                                                <input data-repeater-delete type="button" class="btn btn-primary-borderd" value="Delete" />
                                            </div>
                                        </div>
                                    </div>
                                    @endif

                                </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">Terms & Condition</h5>
                                        <small>Set Terms and condition for this plan</small>
                                    </div>
                                    
                                    <div class="col-md-2">
                                        <input data-repeater-create type="button"  class="add_terms_conditions btn btn-primary waves-effect waves-light" value="Add Terms & Condition" />
                                    </div>
                                    </div>
                                    
                                    @if(isset($chargingEquipment->terms[0]))
                                    @foreach($chargingEquipment->terms as $terms)

                                    <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 name="terms_conditionn_id" type="hidden"  value="{{ $terms->id }}" />
                                               <div class="{{ $terms->image ? ' ' :'collapse '}}terms_image /">
                                                <img src="{{ '/storage' .$terms->image }}" style="width: 80px;" />
                                                <input  type="button" class="terms-condition-image btn btn-primary-borderd" value="Delete Image" data-id="{{ $terms->id }}" data-url="{{ route('subscription-plan.charging-equipment.terms-condition-image', $terms->id) }}" />
                                                </div>
                                               <div class="{{ $terms->image ? 'collapse ' :''}}terms_image_field ">
                                                <input type="file" name="image" class="form-control" id="image" />
                                                <small>Choose an image of zice 200 x 200 to upload as icon</small>
                                                </div>
                                            </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="Type here" value="{{ $terms->terms_condition }}" />
                                                <small></small>
                                            </div>
                                            <div class="col-md-4">
                                                <input data-repeater-delete type="button" class="terms-condition btn btn-primary-borderd" value="Delete Terms & Condition" data-id="{{ $terms->id }}" data-url="{{ route('subscription-plan.charging-equipment.terms-condition', $terms->id) }}" />
                                            </div>
                                        </div>
                                    </div>
                                    @endforeach
                                    @else
                                    <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="Type here" />
                                                <small></small>
                                            </div>
                                            <div class="col-md-4">
                                                <input data-repeater-delete type="button" class="btn btn-primary-borderd" value="Delete" />
                                            </div>
                                        </div>
                                    </div>
                                    @endif

                                </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.charging-equipment.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')
    <!-- select 2 plugin -->
    <script src="{{ URL::asset('/assets/libs/select2/select2.min.js') }}"></script>

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

<!-- init js -->
<script src="{{ URL::asset('/assets/js/pages/ecommerce-select2.init.js') }}"></script>
<!--tinymce js-->
<script src="{{ URL::asset('/assets/libs/tinymce/tinymce.min.js') }}"></script>

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

<script src="{{ URL::asset('/assets/js/pages/form-validation.init.js') }}"></script>
<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);
        
        actionUrl = "{{ route('asset.asset-charging-equipment-list') }}";
        updateAssetPartsByAssetModel(actionUrl, token);

        $('#model_name').on('change', function() {
            actionUrl = "{{ route('asset.asset-charging-equipment-list') }}";
            updateAssetPartsByAssetModel(actionUrl, token);
        });
        
        
        $('.KWH_Units_fields').hide();
        $('.by_duration_fields').hide();
        $('.by_cot_fields').hide();
        base_plan_change($('input[type=radio][name=base_plan]:checked').val());
        $('input[type=radio][name=base_plan]').on('change', function() { 
            base_plan_change($(this).val());
        });
        $('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);
            }
        });
        $( "#edit_form" ).submit(function( event ) {
            event.preventDefault();
            actionUrl = "{{ route('subscription-plan.charging-equipment.validate') }}";
            form = $( "#edit_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) {
                    response = data.responseJSON;
                    if(response.mode == false){
                       
                        validationErrors(response);
                    }
                },
            });
        });
        
        $(document).on('click', '.delete-location', function(event) {
            event.preventDefault();
            id = $(this).attr('data-id');
            actionUrl = $(this).attr('data-url');
            $.ajax({
                type: "GET",
                url: actionUrl,
                success: function(data){ 
                    $(this).parent('.row').addClass('collapse');
                },
                error: function (data) {
                    
                },
            });
        });
        $(document).on('click', '.terms-condition', function(event) {
            event.preventDefault();
            id = $(this).attr('data-id');
            actionUrl = $(this).attr('data-url');
            $.ajax({
                type: "GET",
                url: actionUrl,
                success: function(data){ 
                    $(this).parent('.row').addClass('collapse');
                },
                error: function (data) {
                    
                },
            });
        });
        
        $(document).on('click', '.terms-condition-image', function(event) {
            event.preventDefault();
            button = $(this);
            id = $(this).attr('data-id');
            actionUrl = $(this).attr('data-url');
            $.ajax({
                type: "GET",
                url: actionUrl,
                success: function(data){
                    fieldDiv = button.next('div.terms_image_field ');
                    fieldDiv.removeClass('collapse')
                    console.log(fieldDiv);
                },
                error: function (data) {
                    
                },
            });
        });
        
        $(document).on("click", ".add_terms_conditions", function(event){            
            event.preventDefault();
            var html ='';
            var total = $('.terms_image_field ').length;
            
            $(".terms_image ").each(function(index) {
                if (index === total - 1) {
                    $(this).addClass('collapse ');
                }
            });
            $(".terms_image_field ").each(function(index) {
                if (index === total - 1) {
                    $(this).removeClass('collapse ');
                }
            });
        });
    });
    
    function base_plan_change(base_plan){
        
        if(base_plan == 'KWH Units'){              
                $('.KWH_Units_fields').show();
                $('.by_duration_fields').hide();
                $('.by_cot_fields').hide();
            }else if(base_plan == 'Duration'){
                $('.KWH_Units_fields').hide();
                $('.by_duration_fields').show();
                $('.by_cot_fields').hide();
            }else if(base_plan == 'Cost'){               
                $('.KWH_Units_fields').hide();
                $('.by_cot_fields').show();
                $('.by_duration_fields').hide();
            }
    }

    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 ='';
                            var dataSelectedArray = dataSelected.split(',');
                            // $.each(dataSelectedArray, function(indexS, selectedPart) {
                            //     if(selectedPart == index ){
                            //         selected = 'selected';
                            //     }else{
                            //         selected='';
                            //     }
                            // });
                            if($.inArray(index, dataSelectedArray) != -1) {
                                selected = 'selected';
                            }
                            if(item){
                                sel.append('<option value="'+ index +'" '+selected+'>'+ item +'</option>');
                            }
                        });
                    }
                },
                error: function (data) {
                    console.log(actionUrl+' Failes.');
                },
            });
        }
        
    }
    </script>
@endsection