@extends('backend.layouts.app')

@section('title') @lang('vehicle::labels.list.action') @lang('labels.tax.batch') @stop

@section('page-header')
<div class="content-header row">
	<div class="content-header-left col-md-6 col-12 mb-2">
		<h3 class="content-header-title mb-0">@lang('labels.tax.batch')</h3>
	</div>
</div>
<meta name="csrf-token" content="{{ csrf_token() }}">
@stop

@section('content')
    <div>
        <a class="btn btn-md btn btn-icon btn-primary white" onclick="getData();" type="button">Create Vehicle Taxes</a>
        <br/><br/> Total Vehicle Count : {{ $vehicles->count() }} <br/>

        <ul class="quoteList"></ul>

        <script>
        var counter = 0;

        window.getData=function()
        {
            var vehicleIds = @json($vehicles);
            var vehicleCount = {{ $vehicles->count() }}
            /* This IF block has nothing to do with the OP. It just resets everything so the demo can be ran more than once. */
            if (counter=== vehicleCount) {
                $('.quoteList').empty();
                counter = 0;
            }

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
            });

            $.ajax({
                /* The whisperingforest.org URL is not longer valid, I found a new one that is similar... */
                url:'{{ route("module.vehicle.create.tax.single") }}',
                data: {"id" : vehicleIds[counter]},
                type: "POST",
                async: true,
                success:function(data){
                    $('.quoteList').append('<li> Processing ' + eval(counter+1) + '/' + vehicleCount + ' License Plate : ' + data.vehicle.license_plate +'</li>');
                    counter++;
                    if (counter < vehicleCount) getData();
                }
            });
        }
        </script>
    </div>
@stop

@push('page-css')
    <link rel="stylesheet" type="text/css" href="{{asset('stack/app-assets/css/plugins/forms/wizard.css') }}">
@endpush

@push ('page-scripts')
    <script src="{{asset('stack/app-assets/js/core/libraries/jquery-3.6.0.js') }}"></script>
    <script src="{{asset('stack/app-assets/js/core/libraries/jquery_ui/jquery-ui.js') }}"></script>
@endpush