@extends('administrative.layouts.master')
@section('page-css')
 <style>
    .select2-container--default .select2-selection--single {
     height: 40px !important;
}
 </style>
@endsection
@section('content')

    <nav class="page-breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('administrative.dashboard') }}">Dashboard</a></li>
        @php
            $link = url('/');
        @endphp

        @foreach(request()->segments() as $segment)
            @php
                $link .= "/" . request()->segment($loop->iteration);
            @endphp
            @if(rtrim(request()->route()->getPrefix(), '/') != $segment && ! preg_match('/[0-9]/', $segment))
                @if($loop->last)
                    <li class="breadcrumb-item {{ $loop->last ? 'active' : '' }}" {{ $loop->last ? 'aria-current="page"' : '' }}>
                        @if($loop->last)
                            {{ $segment}}
                        @else
                            <a href="{{ $link }}">{{ $segment }}</a>
                        @endif
                    </li>
                @endif
            @endif
        @endforeach

        </ol>
    </nav>
    <div class="d-flex justify-content-between align-items-center flex-wrap grid-margin">
        <div>
            <h4 class="mb-3 mb-md-0">Vehicle Create</h4>
        </div>
        <div class="d-flex align-items-center flex-wrap text-nowrap">
            <a href="{{route('administrative.vehicle')}}" class="btn btn-primary btn-icon-text mb-2 mb-md-0">
                <i class="btn-icon-prepend" data-feather="server"></i>
                Vehicle
            </a>
        </div>
    </div>

<div class="row">


    <div class="col-md-8 grid-margin stretch-card offset-md-2">

        <div class="card">
            <div class="card-body">
                <h6 class="card-title">Vehicle Create</h6>

                @foreach($errors->all() as $error)
                <li>{!!   $error !!}</li>
            @endforeach

                <form class="forms-sample" action="{{route('administrative.vehicle.store')}} " method="POST" enctype="multipart/form-data">
                    @csrf
                        <div class="form-group {{ $errors->has('user_id') ? 'has-danger' : '' }} required">
							<label for="exampleFormControlSelect1">Select Customer</label>
								<select class="form-control js-example-basic-single w-100" id="user_id" name="user_id" required style="width: 100%" required>
                                    <option value="" selected>Select Customer</option>
									@foreach($user as $value)
										<option value='{{ $value->customer_code }}'>{{ $value->customer_name ? $value->customer_name : ucwords(str_replace('_', ' ', $value->username)) }} </option>
									@endforeach
								</select>
								@if($errors->has('user_id'))
									<label id="user_id-error" class="error mt-2 text-danger" for="user_id">Please select a User</label>
								@endif
						</div>

                        <div class="form-group {{ $errors->has('identifier') ? 'has-danger' : '' }} required">
							<label for="exampleFormControlSelect1">Select Terminal Id</label>
								<select class="form-control js-example-basic-single w-100" id="identifier" name="terminal_id[]" onchange="terminalIdInfo()" required style="width: 100%" multiple>
                                    <option value="" disabled>Select Terminal Id</option>
								</select>
                                @if($errors->has('identifier'))
                                  <label id="identifier-error" class="error mt-2 text-danger" for="identifier"> {{ $errors->first('identifier') }}</label>
                                @endif
						</div>

                        <div class="form-group">
                            <label><input type="checkbox" id="allCheck" value="" onclick="checkBoxOnchange()">&nbsp;Select 45</label>
                        </div>


                        <div id="data_list" class="row"></div>



                        <div id="identifier_data"></div>


                    <button type="submit" class="btn btn-primary mr-2" id="sub_button">Submit</button>
                    {{--<button type="reset" class="btn btn-light">Cancel</button>--}}
                </form>
            </div>
        </div>
    </div>
</div>
@endsection
@section('page-js')
 <script>
     var dyAppend = '';
     $("#user_id").change(function(){
         var id = $("#user_id").val();
         $.ajax({
             url: '/administrative/user/customer-vehicle/'+id,
             method: 'GET',
             headers: {
                 'Authorization': 'Bearer PlwgxGXknZHsltfev0c3lf4KfeYT0nTCfqOvoYot'
             },
             success: function(response) {
                 //console.log(response.data.length);
                 var mySelect = document.getElementById("identifier");
                 if(response.data.length > 0){
                     var options = 'Select Identifier';
                     $.each(response.data, function(index, item) {
                         options += '<option value="' + item.TerminalID + '">' + item.TerminalID + '</option>';
                     });
                     $('#identifier').html(options);
                 }else{
                     alert('Sorry no terminal id found');
                     var options = 'Select Identifier';
                     options = [];
                     $('#identifier').html(options);
                     $("#data_list").hide();
                     $("#identifier_data").hide();
                 }
             },
             error: function(xhr, status, error) {
                 console.error(error);
             }
         });
     });

     function checkBoxOnchange(){
         var checkbox = $("#allCheck");
         checkbox.change(function() {
             if (checkbox.is(":checked")) {
                 /*for all select*/
                 //$("#identifier").select2('destroy').find('option').prop('selected', 'selected').end().select2()
                 /*this code for selective option select. like:20,30,40*/
                 $('#identifier').select2();
                 var optionsToSelect = 45;
                 $('#identifier option:lt(' + optionsToSelect + ')').prop('selected', true);
                 $('#identifier').trigger('change');
                 /*var identifier = $("#identifier").val();
                 var countTerminalId = 0;
                 jQuery.each(identifier, function(index, item) {
                     countTerminalId++
                     /!*for testing*!/
                     /!*if (index == 2){
                         dynamicAppendForSelectAll(item)
                         //alert(countTerminalId+' terminal ready to submit');
                         return false;
                     }
                     else {
                         dynamicAppendForSelectAll(item)
                     }*!/
                     dynamicAppendForSelectAll(item)
                 });*/
             } else {
                 $("#identifier").select2('destroy').find('option').prop('selected', false).end().select2()
                 var identifier = $("#identifier").val();
                 if (identifier.length == 0){
                     $('#data_list').empty();
                 }
             }
         });
     }

     function terminalIdInfo() {
        $("#sub_button").prop("disabled",true);
        var identifier = $("#identifier").val();
        console.log(identifier)
        $.ajax({
        url: '/administrative/user/customer-identifier/'+identifier,
        method: 'GET',
        headers: {
         'Authorization': 'Bearer PlwgxGXknZHsltfev0c3lf4KfeYT0nTCfqOvoYot'
        },
        success: function(response) {
                console.log(response)
               var options = '';
                $.each(response, function(index, item) {
                    options += '<div class="col-md-4"><hr style="border-top: 2px solid #727cf5"><div class="form-group"><label for="identifier">Identifier</label><input type="text" class="form-control form-control-danger" name="identifier[]" autocomplete="off" placeholder="Identifier" value="'+item.identifier+'" aria-invalid="true"></div><div class="form-group"><label for="vehicle_name">Vehicle name</label><input  type="text" class="form-control form-control-danger" id="vehicle_name" name="vehicle_name[]" autocomplete="off" placeholder="vehicle name" value="'+item.vehicle_name+'" aria-invalid="true"></div><div class="form-group"><label for="vrn">Vrn</label><input type="text" class="form-control form-control-danger" id="vrn" name="vrn[]" autocomplete="off" placeholder="Vrn" value="'+item.vrn+'" aria-invalid="true"></div><div class="form-group"><label for="bstid">Bstid</label><input type="text" class="form-control form-control-danger" id="bstid" name="bstid[]" autocomplete="off" placeholder="Bstid" value="'+item.bst_id+'" aria-invalid="true"></div><div class="form-group"><label for="engine_number">Engine Number</label><input type="text" class="form-control form-control-danger" id="engine_number" name="engine_number[]" autocomplete="off" placeholder="Engine Number" value="'+item.engine_no+'" aria-invalid="true"></div><div class="form-group"><label for="chassis_number">Chassis Number</label><input type="text" class="form-control form-control-danger" id="chassis_number" name="chassis_number[]" autocomplete="off" placeholder="Chassis Number" value="'+item.chesis_no +'" aria-invalid="true"></div><div class="form-group"><label for="fuel_capacity">Fuel Capacity</label><input type="text" class="form-control form-control-danger" id="fuel_capacity" name="fuel_capacity[]" autocomplete="off" placeholder="Fuel Capacity" value="'+item.fuel_capacity+'" aria-invalid="true"></div><div class="form-group"><label for="load_capacity">Load Capacity</label><input type="text" class="form-control form-control-danger" id="load_capacity" name="load_capacity[]" autocomplete="off" placeholder="Load Capacity" value="'+item.load_capacity+'" aria-invalid="true"></div><div class="form-group"><label for="group">Vehicle Type</label><input type="text" class="form-control form-control-danger" id="vehicle_type" name="vehicle_type[]" autocomplete="off" placeholder="vehicle type" value="" aria-invalid="true"></div><div class="form-group"><label for="group">Brand</label><input type="text" class="form-control form-control-danger" id="group" name="brand[]" autocomplete="off" placeholder="brand" value="'+item.brand+'" aria-invalid="true"></div><div class="form-group"><label for="group">Model</label><input type="text" class="form-control form-control-danger" id="model" name="model[]" autocomplete="off" placeholder="Group" value="'+item.model+'" aria-invalid="true"></div><div class="form-group"><label for="group">Color</label><input type="text" class="form-control form-control-danger" id="color" name="color[]" autocomplete="off" placeholder="color" value="'+item.color+'" aria-invalid="true"></div><div class="form-group"><label for="group">Install On</label><input  type="text" class="form-control form-control-danger" id="install_on" name="install_on[]" autocomplete="off" placeholder="install on" value="'+item.install_on+'" aria-invalid="true"></div><div class="form-group"><label for="group">Warranty</label><input  type="text" class="form-control form-control-danger" id="warranty" name="warranty[]" autocomplete="off" placeholder="warranty" value="'+item.warranty+'" aria-invalid="true"></div><div class="form-group"><label for="group">Sim</label><input type="text" class="form-control form-control-danger" id="sim" name="sim[]" autocomplete="off" placeholder="sim" value="'+item.sim+'" aria-invalid="true"></div><div class="form-group"><label for="group">Last Seen</label><input type="text" class="form-control form-control-danger" id="last_seen" name="last_seen[]" autocomplete="off" placeholder="last seen" value="" aria-invalid="true"></div> <div class="form-group"><label for="group">Owner</label><input type="text" class="form-control form-control-danger" id="owner" name="owner[]" autocomplete="off" placeholder="owner" value="" aria-invalid="true"></div> <div class="form-group"><label for="group">panel</label><select class="form-control js-example-basic-single w-100" id="panel" name="panel[]" style="width: 100%"><option value="RAL" selected>RAL</option><option value="SMB">SMB</option></select></div>  <div class="form-group"><label for="group">Subscription End</label><input type="text" class="form-control form-control-danger" id="sub_end_at" name="sub_end_at[]" autocomplete="off" placeholder="subscription end" value="'+item.sub_end_date+'" aria-invalid="true"></div></div>';
                });
                $('#data_list').html(options);
                $("#sub_button").prop("disabled",false);
        },
        error: function(xhr, status, error) {
            console.error(error);
        },
        });
        if (identifier.length == 0){
            $('#data_list').empty();
        }
    }

     /*async function dynamicAppendForSelectAll(item){
         var identifier = item;

         await $.ajax({
             url: '/administrative/user/customer-identifier/'+identifier,
             method: 'GET',
             headers: {
                 'Authorization': 'Bearer PlwgxGXknZHsltfev0c3lf4KfeYT0nTCfqOvoYot'
             },
             async: true,
             success: function(response) {
                 console.log(response)
                 var options = '';
                 $.each(response, function(index, item) {
                     options += '<div class="col-md-4"><hr style="border-top: 2px solid #727cf5"><div class="form-group"><label for="bstid">Identifier</label><input type="text" class="form-control form-control-danger" name="identifier[]" autocomplete="off" placeholder="Identifier" value="'+item.identifier+'" aria-invalid="true"></div><div class="form-group"><label for="vehicle_name">Vehicle name</label><input  type="text" class="form-control form-control-danger" id="vehicle_name" name="vehicle_name[]" autocomplete="off" placeholder="vehicle name" value="'+item.vehicle_name+'" aria-invalid="true"></div><div class="form-group"><label for="vrn">Vrn</label><input type="text" class="form-control form-control-danger" id="vrn" name="vrn[]" autocomplete="off" placeholder="Vrn" value="'+item.vrn+'" aria-invalid="true"></div><div class="form-group"><label for="bstid">Bstid</label><input type="text" class="form-control form-control-danger" id="bstid" name="bstid[]" autocomplete="off" placeholder="Bstid" value="'+item.bst_id+'" aria-invalid="true"></div><div class="form-group"><label for="engine_number">Engine Number</label><input type="text" class="form-control form-control-danger" id="engine_number" name="engine_number[]" autocomplete="off" placeholder="Engine Number" value="'+item.engine_no+'" aria-invalid="true"></div><div class="form-group"><label for="chassis_number">Chassis Number</label><input type="text" class="form-control form-control-danger" id="chassis_number" name="chassis_number[]" autocomplete="off" placeholder="Chassis Number" value="'+item.chesis_no +'" aria-invalid="true"></div><div class="form-group"><label for="fuel_capacity">Fuel Capacity</label><input type="text" class="form-control form-control-danger" id="fuel_capacity" name="fuel_capacity[]" autocomplete="off" placeholder="Fuel Capacity" value="'+item.fuel_capacity+'" aria-invalid="true"></div><div class="form-group"><label for="load_capacity">Load Capacity</label><input type="text" class="form-control form-control-danger" id="load_capacity" name="load_capacity[]" autocomplete="off" placeholder="Load Capacity" value="'+item.load_capacity+'" aria-invalid="true"></div><div class="form-group"><label for="group">Vehicle Type</label><input type="text" class="form-control form-control-danger" id="vehicle_type" name="vehicle_type[]" autocomplete="off" placeholder="vehicle type" value="" aria-invalid="true"></div><div class="form-group"><label for="group">Brand</label><input type="text" class="form-control form-control-danger" id="group" name="brand[]" autocomplete="off" placeholder="brand" value="'+item.brand+'" aria-invalid="true"></div><div class="form-group"><label for="group">Model</label><input type="text" class="form-control form-control-danger" id="model" name="model[]" autocomplete="off" placeholder="Group" value="'+item.model+'" aria-invalid="true"></div><div class="form-group"><label for="group">Color</label><input type="text" class="form-control form-control-danger" id="color" name="color[]" autocomplete="off" placeholder="color" value="'+item.color+'" aria-invalid="true"></div><div class="form-group"><label for="group">Install On</label><input  type="text" class="form-control form-control-danger" id="install_on" name="install_on[]" autocomplete="off" placeholder="install on" value="'+item.install_on+'" aria-invalid="true"></div><div class="form-group"><label for="group">Warranty</label><input  type="text" class="form-control form-control-danger" id="warranty" name="warranty[]" autocomplete="off" placeholder="warranty" value="'+item.warranty+'" aria-invalid="true"></div><div class="form-group"><label for="group">Sim</label><input type="text" class="form-control form-control-danger" id="sim" name="sim[]" autocomplete="off" placeholder="sim" value="'+item.sim+'" aria-invalid="true"></div><div class="form-group"><label for="group">Last Seen</label><input type="text" class="form-control form-control-danger" id="last_seen" name="last_seen[]" autocomplete="off" placeholder="last seen" value="" aria-invalid="true"></div> <div class="form-group"><label for="group">Owner</label><input type="text" class="form-control form-control-danger" id="owner" name="owner[]" autocomplete="off" placeholder="owner" value="" aria-invalid="true"></div> <div class="form-group"><label for="group">panel</label><select class="form-control js-example-basic-single w-100" id="panel" name="panel[]" style="width: 100%"><option value="RAL" selected>RAL</option></select></div>  <div class="form-group"><label for="group">Subscription End</label><input type="text" class="form-control form-control-danger" id="sub_end_at" name="sub_end_at[]" autocomplete="off" placeholder="last seen" value="'+item.sub_end_date+'" aria-invalid="true"></div></div>';
                 });
                 $('#data_list').append(options)
             },
             error: function(xhr, status, error) {
                 console.error(error);
             },
         });

     }*/
 </script>
@endsection