@extends('layouts.master')
@section('title') Trip {{ Config::get('report.name') }} @stop
@section('style')
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"/>
@stop
@section('body')
    <div class="row well">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <form class="form-horizontal" id="transportReport">
                <div class="row form-group">
                    <div class="col-md-3"></div>
                    <div class="col-md-6">
                        <div class="input-daterange input-group" id="datepicker">
                            <input required placeholder="Start Date" type="text" class="form-control" name="start"/>
                            <span class="input-group-addon"><i class="fa fa-calendar"></i> </span>
                            <input required placeholder="End Date" type="text" class="form-control" name="end"/>
                        </div>
                    </div>

                </div>
                <div class="row form-group">
                    <div class="col-md-4">
                        <label class="">Transporter</label>
                        <select name="transporter" class="form-control transporter">
                            <option value="">Transporter Name</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="">Vehicle Number</label>
                        <select name="vehicle" class="form-control vehicles">
                            <option value="">Vehicle Number</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <label class="">TBD</label>
                        <select  class="form-control">
                            <option value=""></option>
                            <option>2</option>
                        </select>
                    </div>
                </div>
                <div class="row form-group">
                    <div class="col-md-12">
                        <button type="submit" class="btn btn-primary submitButton pull-right">
                            <span style="display: inline-block" class="load-text">Get Details</span>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
<hr>

    <div class="row">
        <div class="col-md-12 tripDetails">

        </div>
    </div>

@stop
@section('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 () {
                $(".submitButton").attr('disabled', true);
                $('.load-text').text("Loading...").addClass('animated pulse infinite');
            }).ajaxStop(function () {
                $('.load-text').text("Get Details").removeClass('animated pulse infinite disabled');
                $(".submitButton").attr('disabled', false);
            });


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


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


            function loadTransporters(callback) {
                $select = $('.transporter');
                $.post("{{ 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 $vehicles = $('.vehicles');
                var transporter_id = $('.transporter').val();
                $('.selectedTransporter').html($('.transporter option:selected').text());
                $.post("{{ 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 += '<option value="' + k.id + '">' + k.number + '</option>';
                        });
                    } else {
                        dom += '<option value="">No Vehicles</option>';
                    }
                    $vehicles.html(dom);
                }, 'json');
            }

            function loadTripDetails(){

            }

            $(document).on("submit", "#transportReport", function (e) {
                e.preventDefault();
                var $formData = $(this).serializeArray().reduce(function(m,o){ m[o.name] = o.value; return m;}, {})
                $.post("{{ url('/report/getTransport') }}", $.extend({_token: _token}, $formData), function (e) {
                    $('.tripDetails').html("");
                    var $html = "";
                    $.each(e, function (k,v){
                        if(v.vehicles == null){
                            $html += "<div class=\"panel panel-default\">" +
                                "                <div class=\"panel-heading\">" +
                                "                    Trip " + v.trip_id  +   " Details" +
                                "                </div>" +
                                "                <div class=\"panel-body\">" +
                                "                    <div class=\"row\">" +
                                "                        <div class=\"col-md-12\">" +
                                "                        No Records found" +
                                "                        </div>" +
                                "                        </div>" +
                                "                    </div>" +
                                "                </div>" +
                                "            </div>";
                        }
                        else{
                            var $dropNew = [];
                            $.each(v.routeLocations, function(k, v){
                                if(v.is_starting === 1)
                                    $dropNew.unshift(v.name);
                                else
                                    $dropNew.push(v.name);
                            });
                            $html += "<div class=\"panel panel-default\">" +
                                "                <div class=\"panel-heading\">" +
                                "                    Trip " + v.trip_id  +   " Details" +
                                "                </div>" +
                                "                <div class=\"panel-body\">" +
                                "                    <div class=\"row\">" +
                                "                        <div class=\"col-md-4 text-right\">" +
                                "                            Drop Locations:" +
                                "                        </div>" +
                                "                        <div class=\"col-md-1\"></div>" +
                                "                        <div class=\"col-md-5\">" + $dropNew.join(", ") +
                                "                        </div>" +
                                "                    </div>" +
                                "                    <div class=\"row\">" +
                                "                        <div class=\"col-md-4 text-right\">" +
                                "                            Order Numbers:" +
                                "                        </div>" +
                                "                        <div class=\"col-md-1\"></div>" +
                                "                        <div class=\"col-md-5\">" + v.vehicles.order_nos.join(", ") +
                                "                        </div>" +
                                "                    </div>" +
                                "                    <div class=\"row\">" +
                                "                        <div class=\"col-md-4 text-right\">" +
                                "                            Cost:" +
                                "                        </div>" +
                                "                        <div class=\"col-md-1\"></div>" +
                                "                        <div class=\"col-md-5\">" + v.vehicles.cost +
                                "                        </div>" +
                                "                    </div>" +
                                "                    <div class=\"row\">" +
                                "                        <div class=\"col-md-4 text-right\">" +
                                "                            Distance:" +
                                "                        </div>" +
                                "                        <div class=\"col-md-1\"></div>" +
                                "                        <div class=\"col-md-5\">" +  v.vehicles.distance +
                                "                        </div>" +
                                "                    </div>" +
                                "                </div>" +
                                "            </div>";
                        }

                    });

                    $('.tripDetails').html($html);




                });

            })

        });
    </script>
@stop