{{--model for add new locations route--}}
<div aria-hidden="false" aria-labelledby="myModalLabel" role="dialog"
     tabindex="-1" class="modal hide fade in" id="addLocation">
    <!-- Modal content-->
    <div class="modal-header" style="background: #50A6C6">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4>Add Truck Details Below</h4>
    </div>
    {!! Form::open(array('class' => 'form-horizontal stdform','id'=>'neRoute','route'=>'locations.store')) !!}
    <div class="modal-body">
        <div class="maincontent">
            <input type="hidden" name="route_assignment_id" value="{{$route_assignment->id}}">

            <div class="row" style="margin-bottom: 3px">
                <p>
                    <label>Position</label>
                           <span class="field">
                            <select class="serchable_select" name="type" >
                                <option value="">Choose ONE</option>
                                <option value="Loading_f">Finish Loading</option>
                                <option value="Arrive">Arrive</option>
                                <option value="border">Border</option>
                                <option value="On-Route">On-Route</option>
                                <option value="OffLoad">OffLoad</option>
                                <option value="OffLoad_f">Finish Offloading</option>
                                <option value="Interchange">Container Interchange (E)</option>
                                <option value="internal_interchange">Container Interchange (I)</option>
                            </select>

                            </span>
                </p>
            </div>
            <div class="row show" style="margin-bottom: 3px"></div>

            <div class="row" style="margin-bottom: 3px">
                <p>
                    <label>Tracking Time *</label>

                <div class="span2 input-append date" style="margin: 0"  id="datetimepicker1">
                    <input class="input-xlarge " name="tracking_time" data-format="dd/MM/yyyy hh:mm:ss"
                           type="text" id="datetimepicker1"  style="margin: 0px;"/>
                                <span class="add-on"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span>
                </div>
                </p>
            </div>

            <div class="row" style="margin-bottom: 3px">
                <p>
                    <label>Remarks</label>
                                <span class="field">
                                    <textarea name="remarks" id="autoResizeTA" cols="80" rows="5" class="span5"
                                              style="resize: vertical"></textarea>
                                </span>
                </p>
            </div>
        </div>
    </div>
    <div class="modal-footer">
        <div class="row">
            <div class="form-group">
                <p class="stdformbutton pull-right">
                    <button class="btn btn-primary" type="submit">Add Location</button>
                    <button type="reset" class="btn">Reset</button>
                </p>
            </div>
        </div>
    </div>
    </form>
</div>


<div class="row hide" style="margin-bottom: 3px" id="show">
    <p>
        <label>Location *</label>
            <span class="field">
                <input type="text" name="location" class="input-xlarge"
                       placeholder=""/>
            </span>
    </p>
</div>
<div class="row hide" style="margin-bottom: 3px" id="show2">
    <p>
        <label>Cargo</label>
        <span class="formwrapper">
            <select name="destination_id[]" data-placeholder="Choose a Country..."
                    {{--class="chzn-select"--}}
                    multiple="multiple" style="width:350px;" tabindex="4">
                <option value=""></option>
                {{--@foreach($destinations as $destination)--}}
                    {{--<option value="{{$destination->id}}">--}}
                        {{--{{$destination->client->name}}/{{$destination->container}}/{{$destination->route_type}}--}}
                    {{--</option>--}}
                {{--@endforeach--}}
            </select>
        </span>
    </p>
    <p>
        <label>City Name</label>
            <span class="formwrapper">
                <select name="city_id"
                        data-placeholder="Choose a Country...">
                    <option value=""></option>
                    @foreach($cities as $city)
                        <option value="{{$city->id}}">{{$city->name}}</option>
                    @endforeach
                </select>
            </span>
    </p>
</div>
<div class="row hide" style="margin-bottom: 3px" id="show3">
    <p>
        <label>Employee</label>
        <span class="formwrapper">
            <select name="employee_id" data-placeholder="Choose a Country..." class="sel"
                    {{--class="chzn-select"--}} style="width:350px;" >
                <option value=""></option>
                @foreach($employees as $employee)
                    <option value="{{$employee->employee_id}}">
                        {{$employee->fullName}}
                    </option>
                @endforeach
            </select>
        </span>
    </p>
</div>
{{--end--}}
<script>
    jQuery(function () {

        jQuery('#locationtype').change(function () {
            if (jQuery(this).val() == 'On-Route') {
                jQuery('.show').empty();
                jQuery('.show').append(jQuery('#show').html());
            } else if (jQuery(this).val() == 'OffLoad') {
                jQuery('.show').empty();
                jQuery('.show').append(jQuery('#show2').html());
            } else if (jQuery(this).val() == 'Arrive') {
                jQuery('.show').empty();
                jQuery('.show').append(jQuery('#show2').html());
            } else if (jQuery(this).val() == 'OffLoad_f') {
                jQuery('.show').empty();
                jQuery('.show').append(jQuery('#show2').html());
            } else if (jQuery(this).val() == 'Loading_f') {
                jQuery('.show').empty();
                jQuery('.show').append(jQuery('#show2').html());
            } else if (jQuery(this).val() == 'Interchange') {
                jQuery('.show').empty();
                jQuery('.show').append(jQuery('#show2').html());
            }else if (jQuery(this).val() == 'internal_interchange') {
                jQuery('.show').empty();
                jQuery('.show').append(jQuery('#show3').html()).append(jQuery('#show2').html());
            }
        })

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