{{--model for adding new vehicle/truck--}}
<style>
    .bootstrap-datetimepicker-widget {
        z-index: 99999 !important;
    }

    .dropdown-menu {
        top: 43%;
    }

    .customer-field {
        margin-bottom: 6px;
    }

    .pull-top {
        margin-top: -28px
    }

    .divider15 {
        border-top: 1px #0b4073 dashed;
    }

    .bulk_sel {
        position: fixed;
        z-index: 99999
    }

    #modelNewRoute {
        left: 25%;
        width: 90%;
    }

</style>


{{--bulk route assignment--}}
<div aria-hidden="false" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" class="modal hide fade in modal-1"
     id="modelNewRoute">
    <!-- Modal content-->
    {!! Form::open(array('class' => 'stdform','id'=>'newBulkRoute','route'=>'prospective.bulk.route.multipleStore')) !!}
    <div class="modal-header" style="background: #50A6C6">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4>Add Truck Details Below</h4>
    </div>
    <div class="modal-body">
        {{--<div class="contentinner">--}}
        {{--<h4 class="widgettitle">Truck & Route Perticulars</h4>--}}

        <div class="row-fluid">
            <div class="span12">
                <table class="table table-bordered table-condensed">
                    <thead>
                    <tr>
                        <th>Route Type</th>
                        <th>
                            <select data-placeholder="Choose a Route Type..." tabindex="2" class="bulk_sel"
                                    id="route_type" name="route_type" required>
                                <option value="go_return_with_cargo">Go & Return, with Cargo</option>
                                <option value="go_with_cargo">Go with Cargo</option>
                                <option value="return_with_cargo">Go with no Cargo,Return with Cargo</option>
                            </select>
                        </th>
                        <th>Client</th>
                        <th><select data-placeholder="Choose a Client..." style="width:200px" name="client_id"
                                    class="bulk_sel"
                                    required>
                                <option value=""></option>
                                @foreach($clients as $client)
                                    <option value="{{$client->id}}">{{$client->name}}</option>
                                @endforeach
                            </select></th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
        <br>
        <h4 class="widgettitle">Trucks Details</h4>

        <div class="row-fluid" style="margin-bottom: 5px;">
            <div class="span12">
                <div class="span6" id="bulk_driver"></div>
                <div class="par control-group span6">
                    <button class="btn pull-right" id="route_button">ADD No. Of Truck</button>
                </div>
            </div>
        </div>
        <table class="table table-bordered table-condensed">
            <thead>
            <tr>
                <th>Route</th>
                <th style="width: 4%">Cargo Type</th>
                <th>Truck</th>
                {{--<th>Driver</th>--}}
                <th>Container NO.</th>
                <th>Quantity</th>
                <th>Amount</th>
                <th>Loading Date</th>
                <th></th>
            </tr>
            </thead>
            <tbody id="generate_trucks">
            </tbody>
        </table>
    </div>
    <div class="modal-footer">
        <div class="row">
            <div class="form-group">
                {{--<p class="stdformbutton pull-right">--}}
                <a class="btn btn-default hide" data-dismiss="modal" data-toggle="modal" href="#viewPermits"
                   id="view-permits">VIEW VEHICLE
                    PERMITS</a>
                <button class="btn btn-primary" type="submit">Submit Button</button>
                <button type="reset" class="btn">Reset Form</button>
                {{--</p>--}}
            </div>
        </div>
    </div>
    </form>
</div>

{{--model for add new vehicle route--}}
<div aria-hidden="false" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" class="modal hide fade in modal-1"
     id="modelNew">
    <!-- Modal content-->
    {!! Form::open(array('class' => 'stdform','id'=>'neRoute')) !!}
    <div class="modal-header" style="background: #50A6C6">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4>Add Truck Details Below</h4>
    </div>
    <div class="modal-body">
        {{--<div class="contentinner">--}}
        {{--<h4 class="widgettitle">Truck & Route Perticulars</h4>--}}

        <div class="row-fluid">
            <div class="span4">
                <div class="par control-group">
                    <label>Route Type</label>

                    <div class="controls">
                        <select data-placeholder="Choose a Route Type..."
                                {{--style="width:220px"--}}
                                tabindex="2" id="route_type" name="route_type" required>
                            <option value="go_return_with_cargo">Go & Return, with Cargo
                            </option>
                            <option value="go_with_cargo">Go with Cargo</option>
                            <option value="return_with_cargo">Go with no Cargo,Return with Cargo
                            </option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="span4">
                <div class="par control-group">
                    <label>Route</label>

                    <div class="controls">
                        <select data-placeholder="Choose a Route..." id="route_id"
                                {{--style="width:220px"--}}
                                name="route_id"
                                tabindex="2">
                            <option value=""></option>
                            @foreach($D_routes as $D_route)
                                <option value="{{$D_route->id}}">{{$D_route->route}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            <div class="span4">
                <div class="par control-group">
                    <label>Fuel</label>

                    <div class="controls">
                        <input type="text" name="fuel_required" class="input-large"
                               placeholder="Fuel" id="fuel"/>
                        <input type="hidden" id="fuel_ratio"/>
                        <input type="hidden" name="type" value="prospective"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span4">
                <div class="par control-group">
                    <label>Truck</label>

                    <div class="controls">
                        <select data-placeholder="Choose a Truck Reg ID..."
                                {{--style="width:220px"--}}
                                class="chzn-select"
                                tabindex="2" id="vehicle_id" name="vehicle_id">
                            <option value=""></option>
                            @foreach($trucks as $truck)
                                <option value="{{$truck->id}}">{{$truck->registration_number}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            <div class="span4">
                <div class="par control-group">
                    <label>Trailer</label>

                    <div class="controls">
                        <input type="text" name="trailer_id" id="trailer" class="input-large"
                               placeholder="trailer"/>
                    </div>
                </div>
            </div>
            <div class="span4">
                <div class="par control-group">
                    <label>Driver</label>

                    <div class="controls">
                        <input type="text" name="driver" class="input-large" id="driver"
                               placeholder="Driver Name"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span4">
                <div class="par control-group">
                    <label>No. Of Cargo.</label>

                    <div class="controls">
                        <select data-placeholder="Choose a Truck Reg ID..." style="width:220px"
                                class="chzn-select span3"
                                tabindex="2" name="number_of_containers"
                                id="number_of_containers">
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="span4">
                <div class="par control-group">
                    <label>Departure Date</label>

                    <div class="controls">
                                   <span class="input-append date " id="datetimepicker2">
                        <input class="input-medium " name="departure_date" data-format="dd/MM/yyyy hh:mm:ss"
                               type="text" autocomplete="off"/>
                        <span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span>
                </span>
                    </div>
                </div>
                <div class="span4">

                </div>
            </div>
            <div class="clearfix"></div>
            <h4 class="widgettitle">Container Details</h4>

            <div class="row-fluid">
                <div class="span12">
                    <div id="containers"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <div class="row">
            <div class="form-group">
                {{--<p class="stdformbutton pull-right">--}}
                <a class="btn btn-default hide" data-dismiss="modal" data-toggle="modal" href="#viewPermits"
                   id="view-permits">VIEW VEHICLE
                    PERMITS</a>
                <button class="btn btn-primary" type="submit">Submit Button</button>
                <button type="reset" class="btn">Reset Form</button>
                {{--</p>--}}
            </div>
        </div>
    </div>
    </form>
</div>

{{--<div aria-hidden="false" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" class="modal hide fade in modal-1"--}}
{{--id="modelNewRoute">--}}
{{--<!-- Modal content-->--}}
{{--{!! Form::open(array('class' => 'stdform','id'=>'newBulkRoute','route'=>'prospective.bulk.route.multipleStore')) !!}--}}
{{--<div class="modal-header" style="background: #50A6C6">--}}
{{--<button type="button" class="close" data-dismiss="modal">&times;</button>--}}
{{--<h4>Add Truck Details Below</h4>--}}
{{--</div>--}}
{{--<div class="modal-body">--}}
{{--<div class="contentinner">--}}
{{--<h4 class="widgettitle">Truck & Route Perticulars</h4>--}}

{{--<div class="row-fluid">--}}
{{--<div class="span12">--}}
{{--<table class="table table-bordered table-condensed">--}}
{{--<thead>--}}
{{--<tr>--}}
{{--<th>Route Type</th>--}}
{{--<th>Route</th>--}}
{{--<th>Client</th>--}}
{{--<th>Cargo Type</th>--}}
{{--<th>Fuel</th>--}}
{{--</tr>--}}
{{--</thead>--}}
{{--<tbody>--}}
{{--<tr>--}}
{{--<td>--}}
{{--<select data-placeholder="Choose a Route Type..." tabindex="2" class="bulk_sel"--}}
{{--id="route_type" name="route_type" required>--}}
{{--<option value="go_return_with_cargo">Go & Return, with Cargo</option>--}}
{{--<option value="go_with_cargo">Go with Cargo</option>--}}
{{--<option value="return_with_cargo">Go with no Cargo,Return with Cargo</option>--}}
{{--</select>--}}
{{--</td>--}}
{{--<td>--}}
{{--<select data-placeholder="Choose a Route..." id="route_id"--}}
{{--style="width:220px"--}}{{-- name="route_id" class="bulk_sel"--}}
{{--tabindex="2">--}}
{{--<option value=""></option>--}}
{{--@foreach($D_routes as $D_route)--}}
{{--<option value="{{$D_route->id}}">{{$D_route->route}}</option>--}}
{{--@endforeach--}}
{{--</select>--}}
{{--</td>--}}
{{--<td>--}}
{{--<select data-placeholder="Choose a Client..." style="width:200px" name="client_id"--}}
{{--class="bulk_sel"--}}
{{--required>--}}
{{--<option value=""></option>--}}
{{--@foreach($clients as $client)--}}
{{--<option value="{{$client->id}}">{{$client->name}}</option>--}}
{{--@endforeach--}}
{{--</select>--}}
{{--</td>--}}
{{--<td>--}}
{{--<select data-placeholder="Choose a Cargo Type..." style="width:150px" class="bulk_sel"--}}
{{--name="cargo_type" required>--}}
{{--<option value="20Ft">20Ft</option>--}}
{{--<option value="40Ft">40Ft</option>--}}
{{--<option value="Loose Cargo">Loose Cargo</option>--}}
{{--</select>--}}
{{--</td>--}}
{{--<td class="center">--}}
{{--<input type="text" name="fuel_required" class="input-large number" id="fuel"--}}
{{--autocomplete="off"/>--}}
{{--<input type="hidden" id="fuel_ratio"/>--}}
{{--<input type="hidden" name="type" value="prospective"/>--}}
{{--</td>--}}
{{--</tr>--}}
{{--</tbody>--}}
{{--<thead>--}}
{{--<tr>--}}
{{--<th>Quantity</th>--}}
{{--<th>Rate</th>--}}
{{--<th>Charges</th>--}}
{{--<th>Loading Date</th>--}}
{{--<th>Cargo Description</th>--}}
{{--</tr>--}}
{{--</thead>--}}
{{--<tbody>--}}
{{--<tr>--}}
{{--<td class="center">--}}
{{--<input type="text" name="quantity" class="input-small number bulk_quantity" required--}}
{{--autocomplete="off"/>--}}
{{--</td>--}}
{{--<td class="center">--}}
{{--<input type="text" name="rate" class="input-small number bulk_rate" autocomplete="off"/>--}}
{{--</td>--}}
{{--<td>--}}
{{--<input type="text" name="amount" class="input-small number bulk_amount" required--}}
{{--autocomplete="off"/>--}}
{{--</td>--}}
{{--<td><input type="text" name="loading_date" class="input-small datepicker " required--}}
{{--autocomplete="off"/></td>--}}
{{--<td class="center">--}}
{{--<textarea id="autoResizeTA" cols="80" rows="1" name="cargo" class="span6"--}}
{{--style="resize: vertical"></textarea>--}}
{{--</td>--}}
{{--</tr>--}}
{{--</tbody>--}}
{{--</table>--}}
{{--</div>--}}
{{--</div>--}}
{{--<br>--}}
{{--<h4 class="widgettitle">Trucks Details</h4>--}}

{{--<div class="row-fluid" style="margin-bottom: 5px;">--}}
{{--<div class="span12">--}}
{{--<div class="par control-group pull-right">--}}
{{--No. Of Truck. <input type="text" name="trucks_number" value="1" id="number_of_trucks"--}}
{{--class="input-small"/>--}}
{{--</div>--}}
{{--</div>--}}
{{--</div>--}}
{{--<table class="table table-bordered table-condensed">--}}
{{--<thead>--}}
{{--<tr>--}}
{{--<th>Truck</th>--}}
{{--<th>Trailer</th>--}}
{{--<th>Driver</th>--}}
{{--<th>Container NO.</th>--}}
{{--<th>Departure Date</th>--}}
{{--<th>Destination</th>--}}
{{--<th></th>--}}
{{--</tr>--}}
{{--</thead>--}}
{{--<tbody id="generate_trucks">--}}
{{--</tbody>--}}
{{--</table>--}}
{{--</div>--}}
{{--<div class="modal-footer">--}}
{{--<div class="row">--}}
{{--<div class="form-group">--}}
{{--<p class="stdformbutton pull-right">--}}
{{--<a class="btn btn-default hide" data-dismiss="modal" data-toggle="modal" href="#viewPermits"--}}
{{--id="view-permits">VIEW VEHICLE--}}
{{--PERMITS</a>--}}
{{--<button class="btn btn-primary" type="submit">Submit Button</button>--}}
{{--<button type="reset" class="btn">Reset Form</button>--}}
{{--</p>--}}
{{--</div>--}}
{{--</div>--}}
{{--</div>--}}
{{--</form>--}}
{{--</div>--}}
<div class="fade hide">
    <table class="table table-bordered table-condensed">
        <tbody id="trucks_details">
        <tr>
            <td>
                <select data-placeholder="Choose a Route..."
                        {{--style="width:220px"--}} name="route_id" class="bulk_sel"
                        tabindex="2">
                    <option value=""></option>
                    @foreach($D_routes as $D_route)
                        <option value="{{$D_route->id}}">{{$D_route->route}}</option>
                    @endforeach
                </select>
            </td>
            <td>
                <select data-placeholder="Choose a Cargo Type..." style="width:150px" class="bulk_sel"
                        name="cargo_type" required>
                    <option value="20Ft">20Ft</option>
                    <option value="40Ft">40Ft</option>
                    <option value="Loose Cargo">Loose Cargo</option>
                </select>
            </td>
            <td>
                <select data-placeholder="Choose a Truck Reg ID..." class="bulk_vehicle_id span2 bulk_sel"
                        name="vehicle_id[]">
                    <option value=""></option>
                    @foreach($trucks as $truck)
                        <option value="{{$truck->id}}">{{$truck->registration_number}}</option>
                    @endforeach
                </select>
            </td>
            {{--<td class="center">--}}
            {{--<input type="text" name="driver[]" class="input-medium bulk_driver" readonly/>--}}
            {{--</td>--}}
            <td>
                <input type="text" class="input-small" name="container[]" autocomplete="off"/>
            </td>
            <td class="center">
                <input type="text" name="quantity" class="input-small number bulk_quantity" required
                       autocomplete="off"/>
            </td>
            <td>
                <input type="text" name="amount" class="input-small number bulk_amount" required
                       autocomplete="off"/>
            </td>
            <td>
                <input type="text" name="loading_date" class="input-small datepicker " required
                       autocomplete="off"/>
            </td>
            <td class="center">
                <a href="#" class="delete_row"><span class="icon-trash"></span></a>
            </td>
            <script>
                jQuery(function () {

                    jQuery('.bulk_vehicle_id').change(function () {
                        var vehicle_id = jQuery(this).val();
                        var position = jQuery(this).parent().parent();
                        jQuery.ajax({
                            url: "routes/" + vehicle_id + "/select_route_info",
                            data: {'vehicle_id': vehicle_id},
                            type: "GET",
                            dataType: 'xml',
                            beforeSend: function () {
                            },
                            complete: function () {
                            },
                            success: function (data) {
                                position.find('.bulk_trailer').val(
                                        jQuery(data).find('xml').find('results').find('registration_number').text()
                                );
                                position.find('.bulk_driver').val(
                                        jQuery(data).find('xml').find('results').find('driver_Name').text()
                                );
                            }
                        })
                    });
                    jQuery(".datepicker").datepicker();
                    jQuery(".client_quantity").keyup(function () {
                        var tr_parent = jQuery(this).parent().parent();
                        var client_rate = tr_parent.find('.client_rate').val().replace(',', '').replace(',', '').replace(',', '').replace(',', '');
                        var client_amount = tr_parent.parent().parent().find('.client_amount');
                        var client_quantity = jQuery(this).val().replace(',', '').replace(',', '').replace(',', '').replace(',', '');
                        var amount = client_rate * client_quantity;
                        client_amount.val(amount.toLocaleString());
                    });
                    jQuery(".client_rate").keyup(function () {
                        var tr_parent = jQuery(this).parent().parent();
                        var client_quantity = tr_parent.find('.client_quantity').val().replace(',', '').replace(',', '').replace(',', '').replace(',', '');
                        var client_amount = tr_parent.parent().parent().find('.client_amount');
                        var client_rate = jQuery(this).val().replace(',', '').replace(',', '').replace(',', '').replace(',', '');
                        var amount = client_rate * client_quantity;
                        client_amount.val(amount.toLocaleString());
//            alert(client_quantity);
                    });
                });

            </script>
        </tr>
        </tbody>
    </table>
</div>
<div id="form1" class="fade hide">
    <table class="table table-bordered table-condensed">
        <thead>
        <tr>
            <th style="width: 30px">S/N</th>
            <th>Cargo Type</th>
            <th>Cont. No.</th>
            <th>Loading Date</th>
            <th>File No.</th>
            <th>Quantity</th>
            <th>Rate</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>
                <select data-placeholder="Choose a Cargo Type..." style="width:150px" name="cargo_type[]" required>
                    <option value="20Ft">20Ft</option>
                    <option value="40Ft">40Ft</option>
                    <option value="Loose Cargo">Loose Cargo</option>
                </select>
            </td>
            <td>
                <input type="text" class="input-medium" name="container[]"/>
            </td>
            <td class="center">
                <input type="text" class="input-medium datepicker" name="loading_date[]" required/>
            </td>
            <td class="center">
                <input type="text" name="file_number[]" class="input-small"/>
            </td>
            <td class="center">
                <input type="text" name="quantity[]" class="input-small number client_quantity" required/>
            </td>
            <td class="center">
                <input type="text" name="rate[]" class="input-small number client_rate"/>
            </td>
        </tr>
        </tbody>
        <thead>
        <tr>
            <th>Delivery No.</th>
            <th>Client</th>
            <th>Consignee</th>
            <th>Destination</th>
            <th>Charges</th>
            <th>Route Nature</th>
            <th>Cargo Description</th>
        </tr>
        </thead>
        <tbody id="containers_more">
        <tr>
            <td class="center">
                <input type="text" name="delivery_number[]" class="input-small"/>
            </td>
            <td class="center">
                <select data-placeholder="Choose a Client..." style="width:200px" name="client_id[]" required>
                    <option value=""></option>
                    @foreach($clients as $client)
                        <option value="{{$client->id}}">{{$client->name}}</option>
                    @endforeach
                </select>
            </td>
            <td class="center">
                <input type="text" name="consignee[]" class="input-medium"/>
            </td>
            <td class="center">
                <select data-placeholder="Choose a Destination..." style="width:150px" name="destination_id[]"
                        required>
                    <option value=""></option>
                    @foreach($cities as $city)
                        <option value="{{$city->id}}">{{$city->name}}</option>
                    @endforeach
                </select>
            </td>
            <td>
                <input type="text" name="amount[]" class="input-small number client_amount" required/>
            </td>
            <td>
                <select data-placeholder="Choose a Destination..." style="width:100px" name="route_type[]" required>
                    <option value="go">GO</option>
                    <option value="return">RETURN</option>
                </select>
            </td>
            <td class="center">
                    <textarea id="autoResizeTA" cols="80" rows="1" name="cargo[]" class="span6"
                              style="resize: vertical"></textarea>
            </td>
        </tr>
        </tbody>
    </table>
    <script>
        jQuery(".datepicker").datepicker();

        jQuery(function () {
            jQuery(".client_quantity").keyup(function () {
                var tr_parent = jQuery(this).parent().parent();
                var client_rate = tr_parent.find('.client_rate').val().replace(',', '').replace(',', '').replace(',', '').replace(',', '');
                var client_amount = tr_parent.parent().parent().find('.client_amount');
                var client_quantity = jQuery(this).val().replace(',', '').replace(',', '').replace(',', '').replace(',', '');
                var amount = client_rate * client_quantity;
                client_amount.val(amount.toLocaleString());
            });
            jQuery(".client_rate").keyup(function () {
                var tr_parent = jQuery(this).parent().parent();
                var client_quantity = tr_parent.find('.client_quantity').val().replace(',', '').replace(',', '').replace(',', '').replace(',', '');
                var client_amount = tr_parent.parent().parent().find('.client_amount');
                var client_rate = jQuery(this).val().replace(',', '').replace(',', '').replace(',', '').replace(',', '');
                var amount = client_rate * client_quantity;
                client_amount.val(amount.toLocaleString());
//            alert(client_quantity);
            });
        });
    </script>
</div>
<div id="form2" class="fade hide">
    <table class="table table-bordered table-condensed">
        <thead>
        <tr>
            <th style="width: 30px">S/N</th>
            <th>Cargo Type</th>
            <th>Cont. No.</th>
            <th>Loading Date</th>
            <th>File No.</th>
            <th>Quantity</th>
            <th>Rate</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>
                <select data-placeholder="Choose a Cargo Type..." style="width:150px" name="cargo_type[]" required>
                    <option value="20Ft">20Ft</option>
                    <option value="40Ft">40Ft</option>
                    <option value="Loose Cargo">Loose Cargo</option>
                </select>
            </td>
            <td>
                <input type="text" class="input-medium" name="container[]"/>
            </td>
            <td class="center">
                <input type="text" class="input-medium datepicker" name="loading_date[]" required/>
            </td>
            <td class="center">
                <input type="text" name="file_number[]" class="input-small"/>
            </td>
            <td class="center">
                <input type="text" name="quantity[]" class="input-small number client_quantity" required/>
            </td>
            <td class="center">
                <input type="text" name="rate[]" class="input-small number client_rate"/>
            </td>
        </tr>
        </tbody>
        <thead>
        <tr>
            <th>Delivery No.</th>
            <th>Client</th>
            <th>Consignee</th>
            <th>Destination</th>
            <th>Charges</th>
            <th>Route Nature</th>
            <th>Cargo Description</th>
        </tr>
        </thead>
        <tbody id="containers_more">
        <tr>
            <td class="center">
                <input type="text" name="delivery_number[]" class="input-small"/>
            </td>
            <td class="center">
                <select data-placeholder="Choose a Client..." style="width:200px" name="client_id[]" required>
                    <option value=""></option>
                    @foreach($clients as $client)
                        <option value="{{$client->id}}">{{$client->name}}</option>
                    @endforeach
                </select>
            </td>
            <td class="center">
                <input type="text" name="consignee[]" class="input-medium"/>
            </td>
            <td class="center">
                <select data-placeholder="Choose a Destination..." style="width:150px" name="destination_id[]"
                        required>
                    <option value=""></option>
                    @foreach($cities as $city)
                        <option value="{{$city->id}}">{{$city->name}}</option>
                    @endforeach
                </select>
            </td>
            <td>
                <input type="text" name="amount[]" class="input-small number client_amount" required/>
            </td>
            <td>
                <select data-placeholder="Choose a Destination..." style="width:100px" name="route_type[]" required>
                    <option value="go">GO</option>
                    <option value="return">RETURN</option>
                </select>
            </td>
            <td class="center">
                    <textarea id="autoResizeTA" cols="80" rows="1" name="cargo[]" class="span6"
                              style="resize: vertical"></textarea>
            </td>
        </tr>
        </tbody>
    </table>
    <div class="divider15"></div>
    <table class="table table-bordered table-condensed">
        <thead>
        <tr>
            <th style="width: 30px">S/N</th>
            <th>Cargo Type</th>
            <th>Cont. No.</th>
            <th>Loading Date</th>
            <th>File No.</th>
            <th>Quantity</th>
            <th>Rate</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>2</td>
            <td>
                <select data-placeholder="Choose a Cargo Type..." style="width:150px" name="cargo_type[]" required>
                    <option value="20Ft">20Ft</option>
                    <option value="40Ft">40Ft</option>
                    <option value="Loose Cargo">Loose Cargo</option>
                </select>
            </td>
            <td>
                <input type="text" class="input-medium" name="container[]"/>
            </td>
            <td class="center">
                <input type="text" class="input-medium datepicker" name="loading_date[]" required/>
            </td>
            <td class="center">
                <input type="text" name="file_number[]" class="input-small"/>
            </td>
            <td class="center">
                <input type="text" name="quantity[]" class="input-small number client_quantity" required/>
            </td>
            <td class="center">
                <input type="text" name="rate[]" class="input-small number client_rate"/>
            </td>
        </tr>
        </tbody>
        <thead>
        <tr>
            <th>Delivery No.</th>
            <th>Client</th>
            <th>Consignee</th>
            <th>Destination</th>
            <th>Charges</th>
            <th>Route Nature</th>
            <th>Cargo Description</th>
        </tr>
        </thead>
        <tbody id="containers_more">
        <tr>
            <td class="center">
                <input type="text" name="delivery_number[]" class="input-small"/>
            </td>
            <td class="center">
                <select data-placeholder="Choose a Client..." style="width:200px" name="client_id[]" required>
                    <option value=""></option>
                    @foreach($clients as $client)
                        <option value="{{$client->id}}">{{$client->name}}</option>
                    @endforeach
                </select>
            </td>
            <td class="center">
                <input type="text" name="consignee[]" class="input-medium"/>
            </td>
            <td class="center">
                <select data-placeholder="Choose a Destination..." style="width:150px" name="destination_id[]"
                        required>
                    <option value=""></option>
                    @foreach($cities as $city)
                        <option value="{{$city->id}}">{{$city->name}}</option>
                    @endforeach
                </select>
            </td>
            <td>
                <input type="text" name="amount[]" class="input-small number client_amount" required/>
            </td>
            <td>
                <select data-placeholder="Choose a Destination..." style="width:100px" name="route_type[]" required>
                    <option value="go">GO</option>
                    <option value="return">RETURN</option>
                </select>
            </td>
            <td class="center">
                    <textarea id="autoResizeTA" cols="80" rows="1" name="cargo[]" class="span6"
                              style="resize: vertical"></textarea>
            </td>
        </tr>
        </tbody>
    </table>
    <script>
        jQuery(".datepicker").datepicker();

        jQuery(function () {
            jQuery(".client_quantity").keyup(function () {
                var client_rate = jQuery(this).parent().parent().parent().find('.client_rate').val().replace(',', '').replace(',', '').replace(',', '').replace(',', '');
                var client_amount = jQuery(this).parent().parent().parent().find('.client_amount');
                var client_quantity = jQuery(this).val().replace(',', '').replace(',', '').replace(',', '').replace(',', '');
                var amount = client_rate * client_quantity;
                client_amount.val(amount.toLocaleString());

            });
            jQuery(".client_rate").keyup(function () {
                var client_quantity = jQuery(this).parent().parent().parent().find('.client_quantity').val().replace(',', '').replace(',', '').replace(',', '').replace(',', '');
                var client_amount = jQuery(this).parent().parent().parent().find('.client_amount');
                var client_rate = jQuery(this).val().replace(',', '').replace(',', '').replace(',', '').replace(',', '');
                var amount = client_rate * client_quantity;
                client_amount.val(amount.toLocaleString());
//            alert(client_quantity);
            });
        });
    </script>
</div>
<div id="form3" class="fade hide">
    <table class="table table-bordered table-condensed">
        <thead>
        <tr>
            <th style="width: 30px">S/N</th>
            <th>Cargo Type</th>
            <th>Cont. No.</th>
            <th>Loading Date</th>
            <th>File No.</th>
            <th>Quantity</th>
            <th>Rate</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>
                <select data-placeholder="Choose a Cargo Type..." style="width:150px" name="cargo_type[]" required>
                    <option value="20Ft">20Ft</option>
                    <option value="40Ft">40Ft</option>
                    <option value="Loose Cargo">Loose Cargo</option>
                </select>
            </td>
            <td>
                <input type="text" class="input-medium" name="container[]"/>
            </td>
            <td class="center">
                <input type="text" class="input-medium datepicker" name="loading_date[]" required/>
            </td>
            <td class="center">
                <input type="text" name="file_number[]" class="input-small"/>
            </td>
            <td class="center">
                <input type="text" name="quantity[]" class="input-small number client_quantity" required/>
            </td>
            <td class="center">
                <input type="text" name="rate[]" class="input-small number client_rate"/>
            </td>
        </tr>
        </tbody>
        <thead>
        <tr>
            <th>Delivery No.</th>
            <th>Client</th>
            <th>Consignee</th>
            <th>Destination</th>
            <th>Charges</th>
            <th>Route Nature</th>
            <th>Cargo Description</th>
        </tr>
        </thead>
        <tbody id="containers_more">
        <tr>
            <td class="center">
                <input type="text" name="delivery_number[]" class="input-small"/>
            </td>
            <td class="center">
                <select data-placeholder="Choose a Client..." style="width:200px" name="client_id[]" required>
                    <option value=""></option>
                    @foreach($clients as $client)
                        <option value="{{$client->id}}">{{$client->name}}</option>
                    @endforeach
                </select>
            </td>
            <td class="center">
                <input type="text" name="consignee[]" class="input-medium"/>
            </td>
            <td class="center">
                <select data-placeholder="Choose a Destination..." style="width:150px" name="destination_id[]"
                        required>
                    <option value=""></option>
                    @foreach($cities as $city)
                        <option value="{{$city->id}}">{{$city->name}}</option>
                    @endforeach
                </select>
            </td>
            <td>
                <input type="text" name="amount[]" class="input-small number client_amount" required/>
            </td>
            <td>
                <select data-placeholder="Choose a Destination..." style="width:100px" name="route_type[]" required>
                    <option value="go">GO</option>
                    <option value="return">RETURN</option>
                </select>
            </td>
            <td class="center">
                    <textarea id="autoResizeTA" cols="80" rows="1" name="cargo[]" class="span6"
                              style="resize: vertical"></textarea>
            </td>
        </tr>
        </tbody>
    </table>
    <div class="divider15"></div>
    <table class="table table-bordered table-condensed">
        <thead>
        <tr>
            <th style="width: 30px">S/N</th>
            <th>Cargo Type</th>
            <th>Cont. No.</th>
            <th>Loading Date</th>
            <th>File No.</th>
            <th>Quantity</th>
            <th>Rate</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>2</td>
            <td>
                <select data-placeholder="Choose a Cargo Type..." style="width:150px" name="cargo_type[]" required>
                    <option value="20Ft">20Ft</option>
                    <option value="40Ft">40Ft</option>
                    <option value="Loose Cargo">Loose Cargo</option>
                </select>
            </td>
            <td>
                <input type="text" class="input-medium" name="container[]"/>
            </td>
            <td class="center">
                <input type="text" class="input-medium datepicker" name="loading_date[]" required/>
            </td>
            <td class="center">
                <input type="text" name="file_number[]" class="input-small"/>
            </td>
            <td class="center">
                <input type="text" name="quantity[]" class="input-small number client_quantity" required/>
            </td>
            <td class="center">
                <input type="text" name="rate[]" class="input-small number client_rate"/>
            </td>
        </tr>
        </tbody>
        <thead>
        <tr>
            <th>Delivery No.</th>
            <th>Client</th>
            <th>Consignee</th>
            <th>Destination</th>
            <th>Charges</th>
            <th>Route Nature</th>
            <th>Cargo Description</th>
        </tr>
        </thead>
        <tbody id="containers_more">
        <tr>
            <td class="center">
                <input type="text" name="delivery_number[]" class="input-small"/>
            </td>
            <td class="center">
                <select data-placeholder="Choose a Client..." style="width:200px" name="client_id[]" required>
                    <option value=""></option>
                    @foreach($clients as $client)
                        <option value="{{$client->id}}">{{$client->name}}</option>
                    @endforeach
                </select>
            </td>
            <td class="center">
                <input type="text" name="consignee[]" class="input-medium"/>
            </td>
            <td class="center">
                <select data-placeholder="Choose a Destination..." style="width:150px" name="destination_id[]"
                        required>
                    <option value=""></option>
                    @foreach($cities as $city)
                        <option value="{{$city->id}}">{{$city->name}}</option>
                    @endforeach
                </select>
            </td>
            <td>
                <input type="text" name="amount[]" class="input-small number client_amount" required/>
            </td>
            <td>
                <select data-placeholder="Choose a Destination..." style="width:100px" name="route_type[]" required>
                    <option value="go">GO</option>
                    <option value="return">RETURN</option>
                </select>
            </td>
            <td class="center">
                    <textarea id="autoResizeTA" cols="80" rows="1" name="cargo[]" class="span6"
                              style="resize: vertical"></textarea>
            </td>
        </tr>
        </tbody>
    </table>
    <div class="divider15"></div>
    <table class="table table-bordered table-condensed">
        <thead>
        <tr>
            <th style="width: 30px">S/N</th>
            <th>Cargo Type</th>
            <th>Cont. No.</th>
            <th>Loading Date</th>
            <th>File No.</th>
            <th>Quantity</th>
            <th>Rate</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>3</td>
            <td>
                <select data-placeholder="Choose a Cargo Type..." style="width:150px" name="cargo_type[]" required>
                    <option value="20Ft">20Ft</option>
                    <option value="40Ft">40Ft</option>
                    <option value="Loose Cargo">Loose Cargo</option>
                </select>
            </td>
            <td>
                <input type="text" class="input-medium" name="container[]"/>
            </td>
            <td class="center">
                <input type="text" class="input-medium datepicker" name="loading_date[]" required/>
            </td>
            <td class="center">
                <input type="text" name="file_number[]" class="input-small"/>
            </td>
            <td class="center">
                <input type="text" name="quantity[]" class="input-small number client_quantity" required/>
            </td>
            <td class="center">
                <input type="text" name="rate[]" class="input-small number client_rate"/>
            </td>
        </tr>
        </tbody>
        <thead>
        <tr>
            <th>Delivery No.</th>
            <th>Client</th>
            <th>Consignee</th>
            <th>Destination</th>
            <th>Charges</th>
            <th>Route Nature</th>
            <th>Cargo Description</th>
        </tr>
        </thead>
        <tbody id="containers_more">
        <tr>
            <td class="center">
                <input type="text" name="delivery_number[]" class="input-small"/>
            </td>
            <td class="center">
                <select data-placeholder="Choose a Client..." style="width:200px" name="client_id[]" required>
                    <option value=""></option>
                    @foreach($clients as $client)
                        <option value="{{$client->id}}">{{$client->name}}</option>
                    @endforeach
                </select>
            </td>
            <td class="center">
                <input type="text" name="consignee[]" class="input-medium"/>
            </td>
            <td class="center">
                <select data-placeholder="Choose a Destination..." style="width:150px" name="destination_id[]"
                        required>
                    <option value=""></option>
                    @foreach($cities as $city)
                        <option value="{{$city->id}}">{{$city->name}}</option>
                    @endforeach
                </select>
            </td>
            <td>
                <input type="text" name="amount[]" class="input-small number client_amount" required/>
            </td>
            <td>
                <select data-placeholder="Choose a Destination..." style="width:100px" name="route_type[]" required>
                    <option value="go">GO</option>
                    <option value="return">RETURN</option>
                </select>
            </td>
            <td class="center">
                    <textarea id="autoResizeTA" cols="80" rows="1" name="cargo[]" class="span6"
                              style="resize: vertical"></textarea>
            </td>
        </tr>
        </tbody>
    </table>
    <script>
        jQuery(".datepicker").datepicker();

        jQuery(function () {
            jQuery(".client_quantity").keyup(function () {
                var client_rate = jQuery(this).parent().parent().parent().find('.client_rate').val().replace(',', '').replace(',', '').replace(',', '').replace(',', '');
                var client_amount = jQuery(this).parent().parent().parent().find('.client_amount');
                var client_quantity = jQuery(this).val().replace(',', '').replace(',', '').replace(',', '').replace(',', '');
                var amount = client_rate * client_quantity;
                client_amount.val(amount.toLocaleString());

            });
            jQuery(".client_rate").keyup(function () {
                var client_quantity = jQuery(this).parent().parent().parent().find('.client_quantity').val().replace(',', '').replace(',', '').replace(',', '').replace(',', '');
                var client_amount = jQuery(this).parent().parent().parent().find('.client_amount');
                var client_rate = jQuery(this).val().replace(',', '').replace(',', '').replace(',', '').replace(',', '');
                var amount = client_rate * client_quantity;
                client_amount.val(amount.toLocaleString());
//            alert(client_quantity);
            });
        });
    </script>
</div>
@include('vehicles.profile.includes.routeHoseTrailerDriverDetails')
<script>
    jQuery('#datetimepicker2').datetimepicker({
        format: 'yyyy-MM-dd hh:mm:ss',
        inline: true,
        sideBySide: true
    });
    jQuery('#vehicle_id').change(function () {
        jQuery.ajax({
            url: "routes/" + jQuery('#vehicle_id').val() + "/select_route_info",
            data: {'vehicle_id': jQuery('#vehicle_id').val()},
            type: "GET",
            dataType: 'xml',
            beforeSend: function () {
                jQuery('#trailer').val('');
//                jQuery('#distance').val('');
                jQuery('#fuel').val('');
//                jQuery('#total_distance').val('');
                jQuery('#total_fuel').val('');
                jQuery('#additional_fuel').val('');
//                jQuery('#additional_distance').val('');
            },
            complete: function () {
            },
            success: function (data) {
                jQuery('#trailer').val(
                        jQuery(data).find('xml').find('results').find('registration_number').text()
                );
                jQuery('#driver').val(
                        jQuery(data).find('xml').find('results').find('driver_Name').text()
                );
                route_details();
                checkPermits();
                if (jQuery(data).find('xml').find('results').find('driver_Name').text() == "No Driver") {
                    alert("Assign The Driver First Before Use This Truck ");
                    jQuery('#trailer').val('');
                    jQuery('#vehicle_id').val('');
                }


            }
        })
    });
    jQuery('#route_id').change(function () {
        route_details();
    });
    function route_details() {
        jQuery.ajax({
            url: "routes/" + jQuery('#vehicle_id').val() + "/select_route_info/" + jQuery('#route_id').val(),
            data: {'vehicle_id': jQuery('#vehicle_id').val()},
            type: "GET",
            dataType: 'json',
            beforeSend: function () {
                jQuery('#trailer').val();
            },
            complete: function () {

            },
            success: function (data) {
                jQuery('#distance').val(data.distance);
                jQuery('#fuel_ratio').val(data.fuel_ratio);

                if (jQuery('#additional_distance').val() != '') {
                    jQuery('#additional_fuel').val(jQuery('#additional_distance').val() / jQuery('#fuel_ratio').val() * 2);
                    jQuery('#total_distance').val(data.distance + parseInt(jQuery('#additional_distance').val()));
                }
                else {
                    jQuery('#total_distance').val(data.distance);

                }

                var route_type = jQuery('#route_type').val();
                if (route_type == 'go_return_with_cargo') {
                    jQuery('#fuel').val(data.fuel_with_cargo);
                    if (jQuery('#additional_fuel').val() != '') {
                        jQuery('#total_fuel').val(data.fuel_with_cargo + parseInt(jQuery('#additional_fuel').val()));
                    } else {
                        jQuery('#total_fuel').val(data.fuel_with_cargo);
                    }
                } else {
                    jQuery('#fuel').val(data.fuel_without_cargo);
                    if (jQuery('#additional_fuel').val() != '') {
                        jQuery('#total_fuel').val(data.fuel_without_cargo + parseInt(jQuery('#additional_fuel').val()));
                    } else {
                        jQuery('#total_fuel').val(data.fuel_without_cargo);
                    }
                }


                var route_id = jQuery('#route_id').val();
                jQuery(".offload_table tbody tr:first-child td:first-child .location_id").val(3).change();

//                alert(data);

                if (jQuery(data).find('xml').find('results').find('driver_id').text() == "No Driver") {
                    alert("Assign The Driver First Before Use This Truck ");
                }
            }
        })
    }

    function submite_form() {
        jQuery.ajax({
            type: "POST",
            url: "{{route('prospective_routes.store')}}",
            data: jQuery('#neRoute').serialize(),
//                    dataType: 'json',
            success: function (data) {
                window.location = "{{ route('routes.index') }}";
            },
            error: function (data) {

            }
        })
    }

    jQuery(function () {
        jQuery('#neRoute').on('submit', function (e) {
            jQuery.ajaxSetup({
                header: jQuery('meta[name="_token"]').attr('content')
            })
            e.preventDefault(e);
            jQuery.ajax({
                type: "POST",
                url: "{{route('check.route.validity')}}",
                data: {vehicle_id: jQuery('#vehicle_id').val()},
//                    dataType: 'json',
                success: function (data) {
                    if (data == 444) {
                        submite_form();
                    } else {
                        var error = '';
                        if (typeof data[0] !== 'undefined') {
                            error += "\n" + data[0];
                        }
                        if (typeof data[1] !== 'undefined') {
                            error += "\n" + data[1];
                        }
                        if (typeof data[2] !== 'undefined') {
                            error += "\n" + data[2];
                        }

                        var assignContinue = confirm(error + "\n" + 'After all do you want to continue?');
                        if (assignContinue) {
                            submite_form();
                        } else {
                            window.location = "{{ route('routes.abort.route') }}";
                        }
                    }

                },
                error: function (data) {

                }
            })
        });
    });


    function checkPermits() {
        jQuery.ajax({
            type: "POST",
            url: "{{route('check.route.permit')}}",
            data: {vehicle_id: jQuery('#vehicle_id').val()},
//                    dataType: 'json',
            success: function (data) {
                if (data == 'Null') {
                    alert('The Hose & Trailer has No Permits');
                } else {
                    jQuery('#view-permits').show();
                    jQuery('#permit-table').empty().append(data);
                }


            },
            error: function (data) {

            }
        })
    }

    jQuery(function () {
        jQuery(".client_quantity").keyup(function () {
            var client_rate = jQuery(this).parent().parent().parent().find('.client_rate').val().replace(',', '').replace(',', '').replace(',', '').replace(',', '');
            var client_amount = jQuery(this).parent().parent().parent().find('.client_amount');
            var client_quantity = jQuery(this).val().replace(',', '').replace(',', '').replace(',', '').replace(',', '');
            var amount = client_rate * client_quantity;
            client_amount.val(amount.toLocaleString());

        });
        jQuery(".client_rate").keyup(function () {
            var client_quantity = jQuery(this).parent().parent().parent().find('.client_quantity').val().replace(',', '').replace(',', '').replace(',', '').replace(',', '');
            var client_amount = jQuery(this).parent().parent().parent().find('.client_amount');
            var client_rate = jQuery(this).val().replace(',', '').replace(',', '').replace(',', '').replace(',', '');
            var amount = client_rate * client_quantity;
            client_amount.val(amount.toLocaleString());
//            alert(client_quantity);
        });


    });

    function removeComma(element) {
        return element.replace(',', '').replace(',', '').replace(',', '').replace(',', '');
    }

    jQuery(".bulk_quantity").keyup(function () {
        var core_dir = jQuery(this).parent().parent().parent().parent();
        var rate_val = core_dir.find('.bulk_rate').val();
        var client_amount = core_dir.find('.bulk_amount');
        var quantity_val = jQuery(this).val();

        rate_val = removeComma(rate_val);
        quantity_val = removeComma(quantity_val);

        var amount = rate_val * quantity_val;

        client_amount.val(amount.toLocaleString());

    });
    jQuery(".bulk_rate").keyup(function () {
        var core_dir = jQuery(this).parent().parent().parent().parent();
        var quantity_val = core_dir.find('.bulk_quantity').val();
        var client_amount = core_dir.find('.bulk_amount');
        var rate_val = jQuery(this).val();

        rate_val = removeComma(rate_val);
        quantity_val = removeComma(quantity_val);

        var amount = rate_val * quantity_val;

        client_amount.val(amount.toLocaleString());

    });


    jQuery('#number_of_containers').change(function () {
        var numberofsales = jQuery(this).val();
        cargoDescription(numberofsales);

    });
    var numberofCargo = jQuery('#number_of_containers').val();
    cargoDescription(numberofCargo);

    function cargoDescription(CargoCount) {
        if (CargoCount == 1) {
            var html = jQuery('#form1').html();
            var html2 = jQuery('#t_more1').html();
            jQuery('#containers').empty().append(html);
//                jQuery('#more').empty().append(html2);
        }
        else if (CargoCount == 2) {
            var html = jQuery('#form2').html();
            var html2 = jQuery('#t_more2').html();
            jQuery('#containers').empty().append(html);
//                jQuery('#more').empty().append(html2);
        }
        else if (CargoCount == 3) {
            var html = jQuery('#form3').html();
            var html2 = jQuery('#t_more3').html();
            jQuery('#containers').empty().append(html);
//                jQuery('#more').empty().append(html2);
        }
    }


    jQuery('#route_button').on('click', function (e) {
        e.preventDefault();

        var html_ = jQuery('#trucks_details').html();
        jQuery('#generate_trucks').append(html_);

        jQuery('.datetimepicker').datetimepicker({
            format: 'yyyy-MM-dd hh:mm:ss',
            inline: true,
            sideBySide: true
        });

        jQuery('.bulk_vehicle_id').change(function () {
            var vehicle_id = jQuery(this).val();
            var position = jQuery(this).parent().parent();
            jQuery.ajax({
                url: "routes/" + vehicle_id + "/select_route_info",
                data: {'vehicle_id': vehicle_id},
                type: "GET",
                dataType: 'xml',
                beforeSend: function () {
                },
                complete: function () {
                },
                success: function (data) {
                    position.find('.bulk_trailer').val(
                            jQuery(data).find('xml').find('results').find('registration_number').text()
                    );
                    position.find('.bulk_driver').val(
                            jQuery(data).find('xml').find('results').find('driver_Name').text()
                    );
                }
            })
        });

        jQuery('.bulk_sel').chosen();

        jQuery('.delete_row').click(function () {
            var conf = confirm('Continue delete?');
            if (conf)
                jQuery(this).parents('tr').fadeOut(function () {
                    jQuery(this).remove();
                    // do some other stuff here
                });
            return false;
        });
    });


    jQuery('.datetimepicker').datetimepicker({
        format: 'yyyy-MM-dd hh:mm:ss',
        inline: true,
        sideBySide: true
    });

    tripTracks_load(1);

    function tripTracks_load(num) {
        var html_ = jQuery('#trucks_details').html();
        var html = '';
        for (i = 0; i < num; i++) {
            html += html_;
        }
        jQuery('#generate_trucks').empty().append(html);
        jQuery('.datetimepicker').datetimepicker({
            format: 'yyyy-MM-dd hh:mm:ss',
            inline: true,
            sideBySide: true
        });

        jQuery('.bulk_vehicle_id').change(function () {
            var vehicle_id = jQuery(this).val();
            var position = jQuery(this).parent().parent();
            jQuery.ajax({
                url: "routes/" + vehicle_id + "/select_route_info",
                data: {'vehicle_id': vehicle_id},
                type: "GET",
                dataType: 'xml',
                beforeSend: function () {
                },
                complete: function () {
                },
                success: function (data) {
                    position.find('.bulk_trailer').val(
                            jQuery(data).find('xml').find('results').find('registration_number').text()
                    );
//                    position.find('.bulk_driver').val(
//                            jQuery(data).find('xml').find('results').find('driver_Name').text()
//                    );

                    if (jQuery(data).find('xml').find('results').find('driver_Name').text() == 'No Driver') {
                        jQuery('#bulk_driver').empty().text("No driver Assinged ti this Truck ");
                    } else {
                        jQuery('#bulk_driver').empty().text(jQuery(data).find('xml').find('results').find('driver_Name').text());
                    }
                }
            })
        });

        jQuery('.bulk_sel').chosen();

        jQuery('.delete_row').click(function () {
            var conf = confirm('Continue delete?');
            if (conf)
                jQuery(this).parents('tr').fadeOut(function () {
                    jQuery(this).remove();
                    // do some other stuff here
                });
            return false;
        });

    }

    function tripTracks(num) {
        var html_ = jQuery('#trucks_details').html();
        var old_trucks = jQuery('#generate_trucks').find('tr').length;
        if (old_trucks < num) {
            var j = num - old_trucks;
            var html = '';
            for (i = 0; i < j; i++) {
                html += html_;
            }
            jQuery('#generate_trucks').append(html);
        } else if (old_trucks > num) {

        }

        jQuery('.datetimepicker').datetimepicker({
            format: 'yyyy-MM-dd hh:mm:ss',
            inline: true,
            sideBySide: true
        });

        jQuery('.bulk_vehicle_id').change(function () {
            var vehicle_id = jQuery(this).val();
            var position = jQuery(this).parent().parent();
            jQuery.ajax({
                url: "routes/" + vehicle_id + "/select_route_info",
                data: {'vehicle_id': vehicle_id},
                type: "GET",
                dataType: 'xml',
                beforeSend: function () {
                },
                complete: function () {
                },
                success: function (data) {
                    position.find('.bulk_trailer').val(
                            jQuery(data).find('xml').find('results').find('registration_number').text()
                    );
                    position.find('.bulk_driver').val(
                            jQuery(data).find('xml').find('results').find('driver_Name').text()
                    );
                }
            })
        });

        jQuery('.bulk_sel').chosen();

        jQuery('.delete_row').click(function () {
            var conf = confirm('Continue delete?');
            if (conf)
                jQuery(this).parents('tr').fadeOut(function () {
                    jQuery(this).remove();
                    // do some other stuff here
                });
            return false;
        });
    }

    jQuery('.bulk_sel').chosen();
</script>