{{--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
    }

    label {
        text-align: left;
    }

</style>

<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' => 'form-horizontal 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="row-fluid">
            <div class="span4">
                <label class="span4" for="route_type">Route Type</label>

                <div class="span8">
                    <select data-placeholder="Choose a Route Type..." class="span12" id="route_type_all"
                            name="route_type_all" 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 class="span4">
                <label class="span4" for="route">Route</label>

                <div class="span8">
                    <select id="rout_id_single" name="route_id" class="span12">
                        <option value=""></option>
                        @foreach($D_routes as $D_route)
                            <option value="{{$D_route->id}}">{{$D_route->route}}</option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="span4">
                <label class="span4" for="formGroupInputSmall">Fuel</label>

                <div class="span8">
                    <input class="span12" type="text" placeholder="Fuel" id="fuel" name="fuel_required">
                </div>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span4">
                <label class="span4" for="Truck">Truck</label>

                <div class="span8">
                    <select data-placeholder="Choose a Truck Reg ID..." class="span12" 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 class="span4">
                <label class="span4" for="Trailer">Trailer</label>

                <div class="span8">
                    <input class="span12 " type="text" placeholder="Trailer" name="trailer_id"
                           id="trailer">
                </div>
            </div>
            <div class="span4">
                <label class="span4" for="Driver">Driver</label>

                <div class="span8">
                    <input class="span12 " type="text" placeholder="Driver Name" id="driver" name="driver">
                </div>
            </div>
        </div>
        <div class="row-fluid">
            <div class="span4">
                <label class="span4" for="number_of_trucks">No. Of Cargo.</label>

                <div class="span8">
                    <select class="span12" 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 class="span4">
                <label class="span4" for="depature_date">Departure</label>

                <div class="span8">
                      <span class="input-append date datetimepicker2" id="datetimepicker2">
                         <input class="span12 " name="departure_date" data-format="dd/MM/yyyy hh:mm:ss" type="text"
                                autocomplete="off">
                        <span class="add-on" style="height: 15px">
                            <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
                        </span>
                      </span>
                </div>
            </div>
            <div class="span4">
                <label class="span4" for="Driver">Exchange Rate</label>

                <div class="span8">
                    <input class="span12 " type="text" name="exchange_rate">
                </div>
            </div>
        </div>
        <div class="row-fluid">

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

            <div class="row-fluid">
                <div id="containers"></div>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <div class="row">
            <div class="form-group">
                <a class="btn btn-default hide" data-dismiss="modal" onclick="modelShow('viewPermits')"
                   id="view-permits">VIEW VEHICLEPERMITS</a>
                <button class="btn btn-primary" type="submit">Submit Button</button>
                <button type="reset" class="btn">Reset Form</button>
            </div>
        </div>
    </div>
    </form>
</div>

{{--class="width35"--}}
<div id="form1" class="fade hide">
    <div class="span12">
        <table class="table table-bordered table-condensed" style="width: 100%;">
            <thead>
            <tr>
                <th>S/N</th>
                <th>Cargo Type</th>
                <th class="container_label">Cont. No.</th>
                <th>Loading Date</th>
                <th>File No.</th>
                <th>Delivery No.</th>
                <th>Cargo Description</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>1</td>
                <td>
                    <select data-placeholder="Choose a Cargo Type..." style="width:150px" name="cargo_type[]"
                            class="cargo_type" required>
                        <option value="20Ft">20Ft</option>
                        <option value="40Ft">40Ft</option>
                        <option value="fuel">Fuel</option>
                        <option value="Loose Cargo">Loose Cargo</option>
                    </select>
                </td>
                <td>
                    <input type="text" class="input-medium container_number" name="container[]"/>
                    <input type="text" class="input-medium fuel_obs hide number" name="fuel_obs[]"/>
                </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="delivery_number[]" class="input-small"/>
                </td>
                <td class="center">
                    <textarea id="autoResizeTA" cols="80" rows="1" name="cargo[]" class="span12"
                              style="resize: vertical"></textarea>
                </td>
            </tr>
            </tbody>
            <thead>
            <tr>
                <th>Direction</th>
                <th>Client</th>
                <th>Consignee</th>
                <th>Currency</th>
                <th class="quantity_label">Quantity</th>
                <th>Rate</th>
                <th>Charges</th>
            </tr>
            </thead>
            <tbody id="containers_more">
            <tr>
                <td>
                    <select class="span12" name="route_type[]" required>
                        <option value="go">GO</option>
                        <option value="return">RETURN</option>
                    </select>
                </td>
                <td class="center">
                    <select name="client_id[]" class="span12" 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 class="center">
                    <input type="text" name="quantity[]" class="input-small number client_quantity"/>
                </td>
                <td class="center">
                    <input type="text" name="rate[]" class="input-small number client_rate"/>
                </td>
                <td>
                    <input type="text" name="amount[]" class="input-small number client_amount" required/>
                </td>

            </tr>
            </tbody>
        </table>
    </div>
    <script>
        jQuery(".datepicker").datepicker();

        jQuery('.cargo_type').change(function () {
            var cargo = jQuery(this).val();
            var tr_parent = jQuery(this).parents('tr');
            var table_parent = jQuery(this).parents('table');

            if (cargo == 'fuel') {
                table_parent.find('.container_label').html('LTS @ OBS');
                table_parent.find('.quantity_label').html('LTS @ 20 dg');
                tr_parent.find('.container_number').hide();
                tr_parent.find('.fuel_obs').show();
            } else if ((cargo != 'fuel')) {
                table_parent.find('.container_label').html('Cont No.');
                table_parent.find('.quantity_label').html('Quantity');
                tr_parent.find('.container_number').show();
                tr_parent.find('.fuel_obs').hide();
            }
        });
        jQuery(function () {
            jQuery(".client_quantity").keyup(function () {
                var core_parent = jQuery(this).parents('table')
                var client_rate = removeComma(core_parent.find('.client_rate').val());
                var client_amount = core_parent.find('.client_amount');
                var client_quantity = removeComma(jQuery(this).val());

                var amount = client_rate * client_quantity;
                client_amount.val(amount.toLocaleString());

            });
            jQuery(".client_rate").keyup(function () {
                var core_parent = jQuery(this).parents('table')
                var client_quantity = removeComma(core_parent.find('.client_quantity').val());
                var client_amount = core_parent.find('.client_amount');
                var client_rate = removeComma(jQuery(this).val());

                var amount = client_rate * client_quantity;
                client_amount.val(amount.toLocaleString());
            });
        });
    </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"/>
            </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"/>
            </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 core_parent = jQuery(this).parents('table')
                var client_rate = removeComma(core_parent.find('.client_rate').val());
                var client_amount = core_parent.find('.client_amount');
                var client_quantity = removeComma(jQuery(this).val());

                var amount = client_rate * client_quantity;
                client_amount.val(amount.toLocaleString());

            });
            jQuery(".client_rate").keyup(function () {
                var core_parent = jQuery(this).parents('table')
                var client_quantity = removeComma(core_parent.find('.client_quantity').val());
                var client_amount = core_parent.find('.client_amount');
                var client_rate = removeComma(jQuery(this).val());

                var amount = client_rate * client_quantity;
                client_amount.val(amount.toLocaleString());
            });
        });
    </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"/>
            </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"/>
            </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"/>
            </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 core_parent = jQuery(this).parents('table')
                var client_rate = removeComma(core_parent.find('.client_rate').val());
                var client_amount = core_parent.find('.client_amount');
                var client_quantity = removeComma(jQuery(this).val());

                var amount = client_rate * client_quantity;
                client_amount.val(amount.toLocaleString());

            });
            jQuery(".client_rate").keyup(function () {
                var core_parent = jQuery(this).parents('table')
                var client_quantity = removeComma(core_parent.find('.client_quantity').val());
                var client_amount = core_parent.find('.client_amount');
                var client_rate = removeComma(jQuery(this).val());

                var amount = client_rate * client_quantity;
                client_amount.val(amount.toLocaleString());
            });
        });
    </script>
</div>
@include('vehicles.profile.includes.routeHoseTrailerDriverDetails')
<script>
    jQuery('#datetimepicker2').datetimepicker({
        format: 'yyyy-MM-dd hh:mm:ss',
        inline: true,
        sideBySide: true
    });
    //    jQuery(function () {
    jQuery('.bulk_sel').chosen();

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

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

    var num = jQuery('#number_of_trucks').val();
    tripTracks_load(num);

    jQuery('#number_of_trucks').on('keyup', function () {
        var num = jQuery(this).val();
        tripTracks(num);
    });

    var route_type = jQuery('#route_type_all').val();
    appendReturnCargoLoacation(route_type);

    jQuery('#route_type_all').change(function () {
        var route_type = jQuery(this).val();
        appendReturnCargoLoacation(route_type)
    });

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

    jQuery('.datetimepicker').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('#driver').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()
                );
            }
        })
    });

    jQuery('#vehicle_id').change(function () {
        jQuery.ajax({
            type: "POST",
            url: "{{route('check.route.permit')}}",
            data: {vehicle_id: jQuery('#vehicle_id').val()},
            success: function (data) {

//                if (null == data.error.logistic_status_code) {
                jQuery('#view-permits').show();
                jQuery('#permit-table').empty().append(data);
//                }
//                else {
//                    normal_notifications(data);
//                }
            },
            error: function (data) {
            }
        })
    });

    function submite_form() {
        jQuery.ajax({
            type: "POST",
            url: "{{route('routes.store')}}",
            data: jQuery('#neRoute').serialize(),
            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()},
                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 cargoDescription(CargoCount) {
        if (CargoCount == 1) {
            var html = jQuery('#form1').html();
            var html2 = jQuery('#t_more1').html();
            jQuery('#containers').empty().append(html);
            rateQuantity();
        }
        else if (CargoCount == 2) {
            var html = jQuery('#form2').html();
            var html2 = jQuery('#t_more2').html();
            jQuery('#containers').empty().append(html);
            rateQuantity();
        }
        else if (CargoCount == 3) {
            var html = jQuery('#form3').html();
            var html2 = jQuery('#t_more3').html();
            jQuery('#containers').empty().append(html);
            rateQuantity();
        }
    }

    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',
                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('.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('.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('.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 removeComma(element) {
        return element.replace(',', '').replace(',', '').replace(',', '').replace(',', '');
    }
</script>