@extends('layouts.master')

@section('title') @lang('translation.Battery') @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" />
    <link href="{{ URL::asset('/assets/libs/bootstrap-datepicker/bootstrap-datepicker.min.css') }}" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="{{ URL::asset('/assets/libs/datepicker/datepicker.min.css') }}">

@endsection

@section('content')

@component('components.breadcrumb')
@slot('li_1') Battery @endslot
@slot('title') Add Battery @endslot
@endcomponent

<div class="row">
    <div class="col-12">
        
    <form  class="needs-validation" id="edit_form" action="{{ route('asset.battery.update', ['battery' => $battery->id] ) }}" method="post" enctype="multipart/form-data" novalidate>
    @method('put')
    @csrf
    <input name="id" type="hidden"  value="{{ $battery->id }}" />
    
    
        <div class="card">
            <div class="card-body">
                <h5>Asset Details</h5><br>
                <div class="mb-3 row"> 
                    <label for="product_id" class="col-md-2 col-form-label">Asset/Electric Product</label>
                    <div class="col-md-6">
                        <select id="product_id" name="product_id" class="form-select" required>
                            <option value=''>Select...</option>
                                @foreach($productTypeList as $productType)
                                    <option value="{{ $productType->id }}" {{ $battery->product_id == $productType->id ? 'selected' : '' }}>{{ $productType->product_type}}</option>
                                @endforeach 
                        </select>
                        <div  id="product_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">Name the Model</label>
                    <div class="col-md-6">
                        <input id="model_name" name="model_name" type="text" class="form-control" placeholder="Name the Model" value="{{ $battery->model_name }}" required>
                        <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 / Volts</label>
                    <div class="col-md-6">
                        <input id="battery_type" name="battery_type" type="text" class="form-control" placeholder="Battery Type / Volts"  value="{{ $battery->battery_type }}"  required>
                        <div  id="battery_type_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="vin_number" class="col-md-2 col-form-label">VIN number</label>
                    <div class="col-md-6">
                        <input id="vin_number" name="vin_number" type="text" class="form-control" placeholder="VIN number"  value="{{ $battery->vin_number }}" required>
                        <div  id="vin_number_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
                
                <div class="mb-3 row">
                    <label for="qr_code" class="col-md-2 col-form-label">OR Code of the Asset</label>
                    <!--<div class="col-md-6">
                    <button type="button" class="btn btn-primary waves-effect waves-light">Generate QR Code</button>
                    <button type="button" class="btn btn-secondary waves-effect waves-light">Print QR</button>
                    <button type="button" class="btn btn-secondary waves-effect waves-light">View QR</button>
                    </div>-->
                </div> 
            </div>
        </div>
        <div class="card">
                <div class="card-body">

                    <h4 class="card-title">Asset Documents</h4>
                    <div>
                        <div action="#" class="dropzone_file">
                            <div class="fallback">
                                <input name="file" type="file" multiple="multiple">
                            </div>
                            <div class="dz-message needsclick">
                                <div class="mb-3">
                                    <i class="display-4 text-muted bx bxs-cloud-upload"></i>
                                </div>

                                <h4>Drop files here or click to upload.</h4>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <div class="card">
            <div class="card-body">
                <h5>OEM/Dealer Details</h5><br>
                <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">OEM</label>
                    <div class="col-md-6">
                        <select id="oem_id" name="oem_id" class="form-select" data-selected="{{ $battery->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="battery_dealer_id" class="col-md-2 col-form-label">Dealer</label>
                    <div class="col-md-6">
                        <select id="battery_dealer_id" name="battery_dealer_id" class="form-select"  data-selected="{{ $battery->battery_dealer_id }}" required>
                            <option value=''>Select...</option>
                        </select>
                        <div  id="battery_dealer_id_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="purchased_invoice_number" class="col-md-2 col-form-label">Purchase Invoice Number</label>
                    <div class="col-md-6">
                        <input id="purchased_invoice_number" name="purchased_invoice_number" type="text" class="form-control" placeholder="Purchase Invoice Number"  value="{{ $battery->purchased_invoice_number }}" required>
                        <div  id="purchased_invoice_number_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="purchased_date" class="col-md-2 col-form-label">Purchased Date</label>
                    <div class="col-md-6">
                        <div class="input-group" id="datepicker2">
                            <input type="text" class="form-control" id="purchased_date" name="purchased_date" placeholder="Start Date"
                                
                            value="{{ date('d-m-Y', strtotime($battery->purchased_date)) }}" 
                                data-date-format="dd-mm-yyyy" data-date-container='#datepicker2'
                                data-provide="datepicker" data-date-autoclose="true">

                            <span class="input-group-text"><i class="mdi mdi-calendar"></i></span>
                        </div>
                        <div  id="purchased_date_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <div class="repeater" enctype="multipart/form-data">
                    <div class="mb-3 row">
                        <div class="col-md-10">
                            <h5>Add Parts</h5>
                        </div>
                        <div class="col-md-2">
                            <input data-repeater-create type="button"  class="add_parts btn btn-primary waves-effect waves-light" value="Add" />
                        </div>
                    </div>
                    <hr>
                    
                    <div data-repeater-list="asset-parts" class="asset-parts">
                    @if(isset($battery->parts))
                        @if(isset($battery->parts[0]))
                        @foreach($battery->parts as $parts)
                        <div data-repeater-item class="row asset_part_item">
                            <div class="mb-3 row">
                                <label for="asset_part" class="col-md-2 col-form-label">Asset/Electric Part</label>
                                <div class="col-md-6">
                                    <input type="hidden" name="asset_part_id" value="{{ $parts->id }}" /> 
                                    <select id="asset_part" name="asset_part" class="form-select">
                                        <option value=''>Select...</option>
                                        @foreach($productTypeList as $productType)
                                            <option value="{{ $productType->id }}" {{ $productType->id == $parts->product_id ? 'selected' :'' }}>{{ $productType->product_type}}</option>
                                        @endforeach 
                                    </select>
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label for="part_id" class="col-md-2 col-form-label">Part Id</label>
                                <div class="col-md-6">
                                    <input class="form-control" name="part_id" type="text" placeholder="Part Id"  id="part_id" value=" {{ $parts->part_id }}" />
                                </div>
                                <div class="col-md-4">
                                    <input data-repeater-delete type="button" class="delete-child-table btn btn-primary-borderd" value="Delete"   data-id="{{ $parts->id }}" data-url="{{ route('asset.battery.delete-parts', $parts->id) }}" />
                                </div>
                            </div>
                        </div>
                        @endforeach
                         @else
                         <p>No Parts Added yet</p>
                         <div data-repeater-item class="row asset_part_item">
                            <div class="mb-3 row">
                                <label for="asset_part" class="col-md-2 col-form-label">Asset/Electric Part</label>
                                <div class="col-md-6">
                                    <select id="asset_part" name="asset_part" class="form-select">
                                        <option value=''>Select...</option>
                                        @foreach($productTypeList as $productType)
                                            <option value="{{ $productType->id }}">{{ $productType->product_type}}</option>
                                        @endforeach 
                                    </select>
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label for="part_id" class="col-md-2 col-form-label">Part Id</label>
                                <div class="col-md-6">
                                    <input class="form-control" name="part_id" type="text" placeholder="Part Id"  id="part_id" />
                                </div>
                                <div class="col-md-4">
                                    <input data-repeater-delete type="button" class="btn btn-primary-borderd" value="Delete" />
                                </div>
                            </div>
                        </div>
                    @endif
                    @else
                        <p>No Parts Added yet</p>
                    @endif
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <h5>Assign Location</h5><br>
                
                <div class="mb-3 row">
                    <label for="location_id" class="col-md-2 col-form-label">Location Name</label>
                    <div class="col-md-6">
                        <select id="location_id" name="location_id" class="form-select" required>
                            <option value=''>Select...</option>
                            @foreach($locationList as $location)
                                <option value="{{ $location->id }}" data-city_id="{{ $location->city_id }}" {{ $battery->location_id == $location->id ? 'selected' : '' }}>{{ $location->location}}</option>
                            @endforeach 
                        </select>
                        <div  id="location_id_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="city_id" class="col-md-2 col-form-label">City</label>
                    <div class="col-md-6">
                        <select id="city_id" name="city_id" class="form-select" required>
                            <option value=''>Select...</option>
                        </select>
                        <div  id="city_id_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="district_id" class="col-md-2 col-form-label">District</label>
                    <div class="col-md-6">
                        <select id="district_id" name="district_id" class="form-select" required>
                            <option value=''>Select...</option>
                        </select>
                        <div  id="district_id_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="state_id" class="col-md-2 col-form-label">State</label>
                    <div class="col-md-6">
                        <select id="state_id" name="state_id" class="form-select" required>
                            <option value=''>Select...</option>
                        </select>
                        <div  id="state_id_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="zone_id" class="col-md-2 col-form-label">Zone</label>
                    <div class="col-md-6">
                        <select id="zone_id" name="zone_id" class="form-select" required>
                            <option value=''>Select...</option>
                        </select>
                        <div  id="zone_id_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="card">
            <div class="card-body">
                <div class="repeater" enctype="multipart/form-data">
                    <div class="mb-3 row">
                        <div class="col-md-10">
                            <h5>Service Maintenance  Plan</h5>
                        </div>
                        <div class="col-md-2">
                            <input data-repeater-create type="button"  class="add_parts btn btn-primary waves-effect waves-light" value="Add" />
                        </div>
                    </div>
                    <hr>
                    @if(isset($MaintenanceTypeList[0]))
                    <div data-repeater-list="asset-maintenance" class="asset-maintenance">
                        
                    @if(isset($battery->servicePlan))
                        @foreach($battery->servicePlan as $servicePlan)
                        <div data-repeater-item class="row asset_maintenance_item">
                            <div class="mb-3 row">
                                <label for="maintenance_type_id" class="col-md-2 col-form-label">Service Maintenance Type</label>  
                                <div class="col-md-6">
                                    <input type="hidden" name="asset_service_id" value="{{ $servicePlan->id }}" />                            
                                    <select id="maintenance_type_id" name="maintenance_type_id" class="form-select" />
                                        <option value=''>Select...</option>
                                            @foreach($MaintenanceTypeList as $MaintenanceType)
                                                <option value="{{ $MaintenanceType->id }}" {{ $MaintenanceType->id == $servicePlan->maintenance_type_id ? 'selected' : ''  }}>{{ $MaintenanceType->maintenance_type}}</option>
                                            @endforeach 
                                    </select>
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label for="maintenance_duration" class="col-md-2 col-form-label">Maintenance Duration</label>
                                <div class="col-md-3">
                                    <select id="maintenance_duration" name="maintenance_duration" class="form-select" />
                                        <option value=''>Select...</option>
                                            @foreach($durationList as $duration)
                                                <option value="{{ $duration->id }}" {{ $servicePlan->maintenance_duration ==  $duration->id ? 'selected' : '' }}>{{ $duration->duration}}</option>
                                            @endforeach 
                                    </select>
                                </div>
                                <label for="maintenance_duration_date" class="col-md-1 col-form-label" style="padding: 8px 0;">Start by Date</label>
                                <div class="col-md-2">
                                    <div class="input-group" id="datepicker2">
                                        <input type="text" class="form-control" id="maintenance_duration_date" name="maintenance_duration_date" placeholder="Start Date"
                                            value="{{ date('d-m-Y', strtotime($servicePlan->maintenance_duration_date)) }}" 
                                            data-date-format="dd-mm-yyyy" data-date-container='#datepicker2'
                                            data-provide="datepicker" data-date-autoclose="true">

                                        <span class="input-group-text"><i class="mdi mdi-calendar"></i></span>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label for="maintenance_cost" class="col-md-2 col-form-label">Maintenance Cost</label>
                                <div class="col-md-6">
                                    <input class="form-control" name="maintenance_cost" type="text" placeholder="Maintenance Cost"  id="maintenance_cost" value="{{ $servicePlan->maintenance_cost }}" />
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label for="service_reminder" class="col-md-2 col-form-label">Service Reminder</label>
                                <div class="col-md-3">
                                    <input class="form-control" name="service_reminder" type="text" placeholder="Service Reminder"  id="service_reminder"value="{{ $servicePlan->service_reminder }}"  />
                                </div>
                                <label for="service_reminder_date" class="col-md-1 col-form-label" style="padding: 8px 0;">Start by Date</label>
                                <div class="col-md-2">
                                    <div class="input-group" id="datepicker2">
                                        <input type="text" class="form-control" id="service_reminder_date" name="service_reminder_date" placeholder="Start Date"
                                            value="{{ date('d-m-Y', strtotime($servicePlan->service_reminder_date)) }}" 
                                            data-date-format="dd-mm-yyyy" data-date-container='#datepicker2'
                                            data-provide="datepicker" data-date-autoclose="true">

                                        <span class="input-group-text"><i class="mdi mdi-calendar"></i></span>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <input data-repeater-delete type="button" class="delete-child-table btn btn-primary-borderd" value="Delete" data-id="{{ $servicePlan->id }}" data-url="{{ route('asset.battery.delete-service-plan', $servicePlan->id) }}"/>
                                </div>
                            </div>
                        </div>
                        @endforeach
                        @else
                        <p> No Service Maintenance Plan and schedule added yet</p>
                        <div data-repeater-item class="row asset_maintenance_item">
                            <div class="mb-3 row">
                                <label for="maintenance_type_id" class="col-md-2 col-form-label">Service Maintenance Type</label>  
                                <div class="col-md-6">                             
                                    <select id="maintenance_type_id" name="maintenance_type_id" class="form-select" />
                                        <option value=''>Select...</option>
                                            @foreach($MaintenanceTypeList as $MaintenanceType)
                                                <option value="{{ $MaintenanceType->id }}" >{{ $MaintenanceType->maintenance_type}}</option>
                                            @endforeach 
                                    </select>
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label for="maintenance_duration" class="col-md-2 col-form-label">Maintenance Duration</label>
                                <div class="col-md-3">
                                    <select id="maintenance_duration" name="maintenance_duration" class="form-select" />
                                        <option value=''>Select...</option>
                                            @foreach($durationList as $duration)
                                                <option value="{{ $duration->id }}">{{ $duration->duration}}</option>
                                            @endforeach 
                                    </select>
                                </div>
                                <label for="maintenance_duration_date" class="col-md-1 col-form-label" style="padding: 8px 0;">Start by Date</label>
                                <div class="col-md-2">
                                    <div class="input-group" id="datepicker2">
                                        <input type="text" class="form-control" id="maintenance_duration_date" name="maintenance_duration_date" placeholder="Start Date"
                                        
                                            data-date-format="dd-mm-yyyy" data-date-container='#datepicker2'
                                            data-provide="datepicker" data-date-autoclose="true">

                                        <span class="input-group-text"><i class="mdi mdi-calendar"></i></span>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label for="maintenance_cost" class="col-md-2 col-form-label">Maintenance Cost</label>
                                <div class="col-md-6">
                                    <input class="form-control" name="maintenance_cost" type="text" placeholder="Maintenance Cost"  id="maintenance_cost" />
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label for="service_reminder" class="col-md-2 col-form-label">Service Reminder</label>
                                <div class="col-md-3">
                                    <input class="form-control" name="service_reminder" type="text" placeholder="Service Reminder"  id="service_reminder" />
                                </div>
                                <label for="service_reminder_date" class="col-md-1 col-form-label" style="padding: 8px 0;">Start by Date</label>
                                <div class="col-md-2">
                                    <div class="input-group" id="datepicker2">
                                        <input type="text" class="form-control" id="service_reminder_date" name="service_reminder_date" placeholder="Start Date"
                                        
                                            data-date-format="dd-mm-yyyy" data-date-container='#datepicker2'
                                            data-provide="datepicker" data-date-autoclose="true">

                                        <span class="input-group-text"><i class="mdi mdi-calendar"></i></span>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <input data-repeater-delete type="button" class="btn btn-primary-borderd" value="Delete" />
                                </div>
                            </div>
                        </div>
                        @endif
                    @else
                        <p> No Service Maintenance Plan and schedule added yet</p>
                    @endif
                    </div>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-body">
                <div class="repeater" enctype="multipart/form-data">
                    <div class="mb-3 row">
                        <div class="col-md-10">
                            <h5>Insurance Plan</h5>
                        </div>
                        <div class="col-md-2">
                            <input data-repeater-create type="button"  class="add_parts btn btn-primary waves-effect waves-light" value="Add" />
                        </div>
                    </div>
                    <hr>
                    @if(isset($insuranceTypeList[0]))
                    <div data-repeater-list="asset-insurance" class="asset-insurance">
                        
                        @if(isset($battery->insurancePlan))
                        @foreach($battery->insurancePlan as $insurancePlan)
                        <div data-repeater-item class="row asset_insurance_item">
                            <div class="mb-3 row">
                                <label for="insurance_type_id" class="col-md-2 col-form-label">Insurance Type</label>  
                                <div class="col-md-6">   
                                    <input type="hidden" name="asset_insurance_id" value="{{ $insurancePlan->id }}" />                                 
                                    <select id="insurance_type_id" name="insurance_type_id" class="form-select" />
                                        <option value=''>Select...</option>
                                            @foreach($insuranceTypeList as $insuranceType)
                                                <option value="{{ $insuranceType->id }}" {{ $insuranceType->id == $insurancePlan->insurance_type_id ? 'selected' : ''}}>{{ $insuranceType->insurance_type}}</option>
                                            @endforeach 
                                    </select>
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label for="insurance_duration" class="col-md-2 col-form-label">Insurance Duration</label>
                                <div class="col-md-3">
                                    <select id="insurance_duration" name="insurance_duration" class="form-select" >
                                        <option value=''>Select...</option>
                                            @foreach($durationList as $duration)
                                                <option value="{{ $duration->id }}"  {{ $duration->id == $insurancePlan->insurance_duration ? 'selected' : ''}}>{{ $duration->duration}}</option>
                                            @endforeach 
                                    </select>
                                </div>
                                <label for="insurance_duration_date" class="col-md-1 col-form-label" style="padding: 8px 0;">Start by Date</label>
                                <div class="col-md-2">
                                    <div class="input-group" id="datepicker2">
                                        <input type="text" class="form-control" id="insurance_duration_date" name="insurance_duration_date" placeholder="Start Date"
                                        
                                        value="{{ date('d-m-Y', strtotime($insurancePlan->insurance_duration_date)) }}" 
                                            data-date-format="dd-mm-yyyy" data-date-container='#datepicker2'
                                            data-provide="datepicker" data-date-autoclose="true">

                                        <span class="input-group-text"><i class="mdi mdi-calendar"></i></span>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label for="insurance_service_reminder" class="col-md-2 col-form-label">Service Reminder</label>
                                <div class="col-md-3">
                                    <input class="form-control" name="insurance_service_reminder" type="text" placeholder="Service Reminder"  id="insurance_service_reminder" value="{{ $insurancePlan->service_reminder }}" />
                                </div>
                                <label for="insurance_service_reminder_date" class="col-md-1 col-form-label" style="padding: 8px 0;">Start by Date</label>
                                <div class="col-md-2">
                                    <div class="input-group" id="datepicker2">
                                        <input type="text" class="form-control" id="insurance_service_reminder_date" name="insurance_service_reminder_date" placeholder="Start Date"
                                        
                                        value="{{ date('d-m-Y', strtotime($insurancePlan->insurance_service_reminder_date)) }}" 
                                            data-date-format="dd-mm-yyyy" data-date-container='#datepicker2'
                                            data-provide="datepicker" data-date-autoclose="true">

                                        <span class="input-group-text"><i class="mdi mdi-calendar"></i></span>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <input data-repeater-delete type="button" class="delete-child-table btn btn-primary-borderd" value="Delete"  data-id="{{ $insurancePlan->id }}" data-url="{{ route('asset.battery.delete-insurance-plan', $insurancePlan->id) }}"/>
                                </div>
                            </div>
                        </div>
                        
                        @endforeach
                        @else
                            <p> No Insurance Plan an schedule added yet</p>
                            <div data-repeater-item class="row asset_insurance_item">
                            <div class="mb-3 row">
                                <label for="insurance_type_id" class="col-md-2 col-form-label">Insurance Type</label>  
                                <div class="col-md-6">                      
                                    <select id="insurance_type_id" name="insurance_type_id" class="form-select">
                                        <option value=''>Select...</option>
                                            @foreach($insuranceTypeList as $insuranceType)
                                                <option value="{{ $insuranceType->id }}">{{ $insuranceType->insurance_type}}</option>
                                            @endforeach 
                                    </select>
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label for="insurance_duration" class="col-md-2 col-form-label">Insurance Duration</label>
                                <div class="col-md-3">
                                    <select id="insurance_duration" name="insurance_duration" class="form-select">
                                        <option value=''>Select...</option>
                                            @foreach($durationList as $duration)
                                                <option value="{{ $duration->id }}">{{ $duration->duration}}</option>
                                            @endforeach 
                                    </select>
                                </div>
                                <label for="insurance_duration_date" class="col-md-1 col-form-label" style="padding: 8px 0;">Start by Date</label>
                                <div class="col-md-2">
                                    <div class="input-group" id="datepicker2">
                                        <input type="text" class="form-control" id="insurance_duration_date" name="insurance_duration_date" placeholder="Start Date"
                                        
                                            data-date-format="dd-mm-yyyy" data-date-container='#datepicker2'
                                            data-provide="datepicker" data-date-autoclose="true">

                                        <span class="input-group-text"><i class="mdi mdi-calendar"></i></span>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3 row">
                                <label for="insurance_service_reminder" class="col-md-2 col-form-label">Service Reminder</label>
                                <div class="col-md-3">
                                    <input class="form-control" name="insurance_service_reminder" type="text" placeholder="Service Reminder"  id="insurance_service_reminder" />
                                </div>
                                <label for="insurance_service_reminder_date" class="col-md-1 col-form-label" style="padding: 8px 0;">Start by Date</label>
                                <div class="col-md-2">
                                    <div class="input-group" id="datepicker2">
                                        <input type="text" class="form-control" id="insurance_service_reminder_date" name="insurance_service_reminder_date" placeholder="Start Date"
                                        
                                            data-date-format="dd-mm-yyyy" data-date-container='#datepicker2'
                                            data-provide="datepicker" data-date-autoclose="true">

                                        <span class="input-group-text"><i class="mdi mdi-calendar"></i></span>
                                    </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>
                    @else
                        <p> No Insurance Plan an schedule added yet</p>
                    @endif
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-body">

                    <div class="d-flex flex-wrap gap-2">
                        <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/libs/bootstrap-datepicker/bootstrap-datepicker.min.js') }}"></script>
    <script src="{{ URL::asset('/assets/libs/datepicker/datepicker.min.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('city') }}";
        updateCityOptionByCityID(actionUrl, token);
        $('#oem_id').on('change', function() {
            actionUrl = "{{ route('vendor-oem.oem') }}";
            updateBatteryDealerOptionsByOem(actionUrl, token);
        });
        $('#location_id').on('change', function() {
            actionUrl = "{{ route('city') }}";
            updateCityOptionByCityID(actionUrl, token);
        });
        
        $('#city_id').on('change', function() {
            actionUrl = "{{ route('city') }}";
            updateStateOptions(actionUrl, token);
            updateDistrictOptions(actionUrl, token);
            updateZoneOptions(actionUrl, token);
        });
        Dropzone.autoDiscover = false;
        var myDropzone  = new Dropzone(".dropzone_file", { 
            autoProcessQueue: false,
            parallelUploads: 10 // Number of files process at a time (default 2)
            // The setting up of the dropzone
          
        });

        $( "#edit_form" ).submit(function( event ) {
            event.preventDefault();
            actionUrl = "{{ route('asset.battery.validate') }}";
            form = $( "#edit_form" );
            $.ajax({
                type: "POST",
                url: actionUrl,
                data: form.serialize(), // serializes the form's elements.
                success: function(data){ 
                    $('.needs-validation').addClass('validated');
                    //console.log(myDropzone.getQueuedFiles());
                    //form.unbind().submit(); 
                    file = myDropzone.getQueuedFiles();
                    //form.unbind().submit();
                    actionUrl = form.attr('action')
                    var fd = new FormData();
                    fd.append('_token', token);
                   // fd.append('data', form.serialize());
                    console.log(form.serializeArray());
                    $.each(form.serializeArray(), function(index, item) {
                        fd.append(item.name, item.value);
                    });
                    $.each(file, function(index, item) {
                        fd.append('asset_image['+index+']', item);
                    });
                    console.log(fd);
                    $.ajax({
                        type: "POST",
                        url: actionUrl,
                        data:  fd,
                        contentType: false,
                        processData: false,
                        success: function(response){ 
                            console.log(response);
                            if(response.mode == true){
                                window.location.href = "{{ url()->previous() }}";
                            // location.reload();
                            }
                        },
                        error: function (data) {
                            console.log('An error occurred.');
                        },
                    });
                },
                error: function (data) {
                    console.log('An error occurred.');
                    response = data.responseJSON;
                    if(response.mode == false){
                        $.each(response.errors, function(i, item) {
                             $('#'+i+'_errors').html(response.errors[i]); 
                            $('#'+i+'_errors').css('display', 'block');
                        });
                    }
                },
            });
        });
        
        $(document).on('click', '.delete-child-table', 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) {
                    
                },
            });
        });
        
    });
    </script>
@endsection