<?php $__env->startSection('title'); ?> Trip <?php echo e(Config::get('report.name')); ?> <?php $__env->stopSection(); ?>
<?php $__env->startSection('style'); ?>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.min.css" />
<?php $__env->stopSection(); ?>
<?php $__env->startSection('body'); ?>
	<div class="row well">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <form class="form-horizontal">
                <div class="row">
                    <div class="col-md-3"></div>
                    <div class="col-md-6">
                        <div class="input-daterange input-group" id="datepicker">
                            <input placeholder="Start Date" type="text" class="form-control" name="start" />
                            <span class="input-group-addon"><i class="fa fa-calendar"></i> </span>
                            <input placeholder="End Date" type="text" class="form-control" name="end" />
                        </div>
                    </div>

                </div>
                <div class="row">
                    <div class="col-md-4"></div>
                    <div class="col-md-4"></div>
                    <div class="col-md-4"></div>
                </div>
            </form>
        </div>
    </div>


    <div class="row">
        <div class="col-md-4">

        </div>
        <div class="col-md-8">
            <div class="form-group">
                <label class="label label-info selectedTransporter" style="font-size: 16px;"></label><label
                        class="control-label">&nbsp;List of vehicles</label>
                <div class="table-responsive">
                    <table class="table table-bordered vehicles">
                        <thead>
                        <tr>
                            <th width="80px">#</th>
                            <th>Transporter</th>
                            <th>Vehicle Number</th>
                            <th width="80px">Volume</th>
                            <th width="80px">Weight</th>
                            <th class="text-center" width="100px"><i class="fa fa-gear"></i></th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <th class="text-center" colspan="5">Sorry, No results found.</th>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

<?php $__env->stopSection(); ?>
<?php $__env->startSection('script'); ?>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
    <script>
        $(function () {
            $('.input-daterange').datepicker({
                autoclose: true
            });

            var _token = $('meta[name="_token"]').attr('content');

            $(document).ajaxStart(function () {
                $('button').data('loading-text', '...');
                $('button').button('loading');
            }).ajaxStop(function () {
                $('button').button('reset');
            });

            resetForm('save');

            loadTransporters(function () {
                loadVehiclesTable();
            });

            $(document).on('click', '.edit', function () {
                resetForm('update');

                $('.update').val($(this).data('id'));
                $('.transporter').val($(this).data('transporter'));
                $('.number').val($(this).data('number'));
                $('.volume').val($(this).data('volume'));
                $('.weight').val($(this).data('weight'));
                $('.pallet').val($(this).data('pallet'));
                $('.cpkm').val($(this).data('cpkm'));
            });

            $(document).on('click', '.delete', function () {
                var id = $(this).data('id');

                bootbox.confirm("Are you sure you want to delete this record?", function (r) {
                    if (r) {
                        deleteVehicle(id);
                    }
                });
            });

            $('.cancel').click(function () {
                resetForm('save');
            });

            $('.save').click(function () {
                var data = {
                    transporter: $('.transporter').val(),
                    number: $('.number').val(),
                    volume: $('.volume').val(),
                    weight: $('.weight').val(),
                    pallet: $('.pallet').val(),
                    cpkm: $('.cpkm').val()
                };
                saveVehicle(data);
            });

            $('.update').click(function () {
                var data = {
                    id: $(this).val(),
                    transporter: $('.transporter').val(),
                    number: $('.number').val(),
                    volume: $('.volume').val(),
                    weight: $('.weight').val(),
                    pallet: $('.pallet').val(),
                    cpkm: $('.cpkm').val()
                };
                updateVehicle(data);
            });

            $('.transporter').change(function () {
                loadVehiclesTable();
            });


            function resetForm(method) {
                $('.clear').clear();
                $.clearHighlights();
                if (typeof(method) == 'string' && method.length > 0) {
                    if (method == 'save') {
                        $('.updateWrapper').hide();
                        $('.saveWrapper').show();
                    } else if (method == 'update') {
                        $('.saveWrapper').hide();
                        $('.updateWrapper').show();
                    }
                }
            }

            function deleteVehicle(id) {
                $.post("<?php echo e(url('/vehicle/deleteVehicle')); ?>", {_token: _token, id: id}, function (e) {
                    $.highlightOrThrow(e, function () {
                        resetForm('save');
                        loadVehiclesTable();
                    });
                }, 'json');
            }

            function updateVehicle(data) {
                $.post("<?php echo e(url('/vehicle/updateVehicle')); ?>", {_token: _token, data: data}, function (e) {
                    $.highlightOrThrow(e, function () {
                        resetForm('save');
                        loadVehiclesTable();
                    });
                }, 'json');
            }

            function saveVehicle(data) {
                $.post("<?php echo e(url('/vehicle/saveVehicle')); ?>", {_token: _token, data: data}, function (e) {
                    $.highlightOrThrow(e, function () {
                        resetForm('save');
                        loadVehiclesTable();
                    });
                }, 'json');
            }

            function loadTransporters(callback) {
                $select = $('.transporter');
                $.post("<?php echo e(url('/vehicle/loadTransporters')); ?>", {_token: _token}, function (e) {
                    var dom = '';
                    if (typeof(e) == 'object' && Object.keys(e).length > 0) {
                        $.each(e, function (i, k) {
                            dom += '<option value="' + k.id + '">' + k.name + '</option>';
                        });
                    }
                    $select.html(dom);
                    if (callback !== undefined && typeof(callback) == 'function') {
                        callback();
                    }
                }, 'json');
            }

            function loadVehiclesTable() {
                var $tbody = $('.vehicles tbody');
                var transporter_id = $('.transporter').val();
                $('.selectedTransporter').html($('.transporter option:selected').text());
                $.post("<?php echo e(url('/vehicle/loadVehiclesTable')); ?>", {
                    _token: _token,
                    transporter_id: transporter_id
                }, function (e) {
                    var dom = '';
                    if (typeof(e) == 'object' && Object.keys(e).length > 0) {
                        $.each(e, function (i, k) {
                            dom += '<tr>';
                            dom += '<td>' + (++i) + '</td>';
                            dom += '<td>' + (k.transporter) + '</td>';
                            dom += '<td>' + (k.number) + '</td>';
                            dom += '<td>' + (k.volume) + '</td>';
                            dom += '<td>' + (k.weight) + '</td>';
                            dom += '<td class="text-center"><div class="btn-group">';
                            dom += '<button class="btn btn-sm btn-warning edit" data-id="' + k.id + '" data-transporter="' + k.transporter_id + '" data-number="' + k.number + '" data-volume="' + k.volume + '" data-weight="' + k.weight + '" data-pallet="' + k.pallet + '" data-cpkm="' + k.cpkm + '"><i class="fa fa-pencil"></i></button>';
                            dom += '<button class="btn btn-sm btn-danger delete" data-id="' + k.id + '"><i class="fa fa-trash"></i></button>';
                            dom += '</div></td>';
                            dom += '</tr>';
                        });
                    } else {
                        dom = '<tr><th class="text-center" colspan="5">Sorry, No results found.</th></tr>';
                    }
                    $tbody.html(dom);
                }, 'json');
            }

        });
    </script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.master', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>