@extends('layouts.master')

@section('title') @lang('translation.Charger') @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') Charger @endslot
@slot('title') Add Charger @endslot
@endcomponent

<div class="row">
    <div class="col-12">
        
    <form  class="needs-validation" id="create_form" action="{{ route('asset.charger.store') }}" method="post" enctype="multipart/form-data" novalidate>
    @csrf
        <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 }}">{{ $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" required>
                        <div  id="model_name_errors"  class="invalid-feedback">
                            Required
                        </div>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="charger_type" class="col-md-2 col-form-label">Charger Type / Wats</label>
                    <div class="col-md-6">
                        <input id="charger_type" name="charger_type" type="text" class="form-control" placeholder=" Charger Type / Wats">
                        <div  id="charger_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" 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="3">
                    <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" 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="charger_dealer_id" class="col-md-2 col-form-label">Dealer</label>
                    <div class="col-md-6">
                        <select id="charger_dealer_id" name="charger_dealer_id" class="form-select" required>
                            <option value=''>Select...</option>
                        </select>
                        <div  id="charger_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" 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"
                                
                                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">
                        <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>
                    </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 }}">{{ $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="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">
                        <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>
                    </div>
                    @else
                        <p> No Service Maintenance Plan an schedule added yet</p>
                    @endif
                </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="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">
                        <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>
                    </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(){
        $(document).on('click', '.add_parts', function(event) {
            $('.asset-parts').show();
            //id = $(this).children('.orm-field-id');
            //assetPartField = $('#asset_part_item').html();
            //$('.asset_part_item').html(assetPartField);
           // $(this).removeClass('add_parts');
        });
        var actionUrl = "{{ route('vendor-oem.oem-by-category') }}";
        var token = "{{ csrf_token() }}";
        updateVendorOemOption(actionUrl, token);
        $('#oem_id').on('change', function() {
            actionUrl = "{{ route('vendor-oem.oem') }}";
            updateChargerDealerOptionsByOem(actionUrl, token);
        });
        $('#location_id').on('change', function() {
            var actionUrl = "{{ route('city') }}";
            updateCityOptionByCityID(actionUrl, token);
        });
        $('#city_id').on('change', function() {
              var actionUrl = "{{ route('city') }}";
            updateStateOptions(actionUrl, token);
            updateDistrictOptions(actionUrl, token);
            updateZoneOptions(actionUrl, token);
        });
        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
          
        });

        $( "#create_form" ).submit(function( event ) {
            event.preventDefault();
            actionUrl = "{{ route('asset.charger.validate') }}";
            form = $( "#create_form" );
            $.ajax({
                type: "POST",
                url: actionUrl,
                data: form.serialize(), // serializes the form's elements.
                success: function(data){ 
                    $('.needs-validation').addClass('validated');
                    file = myDropzone.getQueuedFiles();
                    //form.unbind().submit();
                    actionUrl = form.attr('action')
                    var fd = new FormData();
                    $.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(data){ 
                            console.log(data);
                            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');
                        });
                    }
                },
            });
        });
        
    });
    </script>
@endsection