{{--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="bulk_trip_model">
    <!-- Modal content-->
    {!! Form::open(array('class' => 'stdform','id'=>'newBulkRoute','route'=>'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>
                        <td  class="width35">Route Type</td>
                        <td  class="width35">Route</td>
                        <td class="width35">Client</td>
                        {{--<td class="width35">Cargo Type</td>--}}
                        <th>Exchange Rate</th>
                        <td class="width35">Fuel</td>
                    </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>
                            <input type="text" name="exchange_rate" class="input-small " required
                                   autocomplete="off"/>
                        </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="route"/>
                        </td>
                    </tr>
                    </tbody>
                    <thead>
                    <tr>
                        <th>Quantity</th>
                        <th>Rate</th>
                        <th>Charges</th>
                        <th>Currency</th>
                        <th>Cargo Description</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td class="center">
                            <input type="text" name="quantity" class="input-small number client_quantity" required
                                   autocomplete="off"/>
                        </td>
                        <td class="center">
                            <input type="text" name="rate" class="input-small number client_rate" autocomplete="off"/>
                        </td>
                        <td>
                            <input type="text" name="amount" class="input-small number bulk_amount" required
                                   autocomplete="off"/>
                        </td>
                        <td>
                            <select style="width:150px" name="currency" required>
                                <option value="USD">USD</option>
                                <option value="TSH">TSH</option>
                            </select>
                        </td>
                        <td class="center">
                    <textarea id="autoResizeTA" cols="80" rows="1" name="cargo" class="span12"
                              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 class="container_number">Container NO.</th>
                <th class="fuel_obs hide">Container NO.</th>
                <th>Loading Date</th>
                <th>Departure Date</th>
                <th>Cargo Type</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">--}}

                <button class="btn btn-primary" type="submit">CREATE TRIPS</button>
                <button type="reset" class="btn  btn-primary" data-dismiss="modal">Close</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 Truck Reg ID..." class="bulk_vehicle_id span2"
                        name="vehicle_id[]">
                    <option value=""></option>
                    @foreach($trucks as $truck)
                        <option value="{{$truck->id}}">{{$truck->registration_number}} / {{$truck->trailerReg}}</option>
                    @endforeach
                </select>
            </td>
            {{--<td>--}}
            {{--<input type="text" name="trailer_id[]" class="input-small bulk_trailer" readonly/>--}}
            {{--</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">
                <span class="input-append date bulk_datetimepicker">
                        <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>
            </td>
            <td><input type="text" name="loading_date[]" class="input-small bulk_datepicker " required
                       autocomplete="off"/></td>
            <td class="center">
                <select data-placeholder="Choose a Cargo Type..." style="width:100px"
                        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">
                <a href="#" class="delete_row"><span class="icon-trash"></span></a>
            </td>
            <script>
                jQuery(function () {
                    jQuery(".bulk_datepicker").datepicker();
                    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_datetimepicker').datetimepicker({
                        format: 'yyyy-MM-dd hh:mm:ss',
                        inline: true,
                        sideBySide: true
                    });
                });

            </script>
        </tr>
        </tbody>
    </table>
</div>