@extends('maintenance.breakdowns.includes.breakdowns')
@section('breakdown')
    <div class="tab-pane active">
        <h4 class="widgettitle">Closed Breakdown List</h4>

        <div class="clearfix"></div>
        <table class="table table-bordered" id="dyntable">
            <thead>
            <tr>
                <th class="head1">No.</th>
                <th class="head1">Date</th>
                <th class="head0">Vehicle</th>
                <th class="head0">Driver</th>
                <th class="head0">Time Taken</th>
                <th class="head0">Cost</th>
                <th class="head0">Location</th>
                <th class="head1">Description</th>
                <th class="head1">Action</th>
            </tr>
            </thead>
            <tbody>
            @foreach($breakdowns as $index=>$breakdown)
                <tr>
                    <td class="head1">{{++$index}}</td>
                    <td class="head1">{{$breakdown->initial_date}}</td>
                    <td class="head1">{{$breakdown->vehicle}}</td>
                    <td class="head1"></td>
                    <td class="head1"></td>
                    <td class="head1"></td>
                    <td class="head1"></td>
                    <td class="head1">{{$breakdown->remark}}</td>
                    <td class="head0">
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>

    <div aria-hidden="false" aria-labelledby="myModalLabel" role="dialog" tabindex="-1"
         class="modal hide fade in modal-1"
         id="breakdown">
        <!-- Modal content-->
        <div class="modal-header" style="background: #50A6C6">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4>Breakdown Report</h4>
        </div>
        {!! Form::open(array('class' => 'stdform','id'=>'neRoute','route'=>'break.downs.store','method'=>'post')) !!}
        <div class="modal-body">
            <div class="row-fluid">
                <div class="span12">
                    <label class="span4">Truck</label>
                        <span class="formwrapper">
                            <select data-placeholder="Select Vehicle.." style="width: 400px" class="chzn-select"
                                    name="vehicle_id" id="vehicle_id"
                                    tabindex="2">
                                <option value="" id="vehicle_id_default"></option>
                                @foreach($trucks as $vehicle)
                                    <option value="{{$vehicle->id}}">{{$vehicle->registration_number}}</option>
                                @endforeach
                            </select>
                            </span>
                </div>
            </div>
            <div class="row-fluid">
                <div class="span12">
                    <label class="span4">Route</label>
                           <span class="formwrapper" id="route_append">
                            <select data-placeholder="Select Route Name..." style="width: 400px" class="chzn-select "
                                    name="route_id" id="route_id"
                                    tabindex="2">
                                <option value="" id="employee_id_default"></option>
                            </select>
                            </span>
                </div>
            </div>
            <div class="row-fluid">
                <div class="span12">
                    <label class="span4">Location</label>
                           <span class="formwrapper" id="route_append">
                        <input class="form-control " name="location"
                               type="text" autocomplete="off">
                            </span>
                </div>
            </div>

            <div class="row-fluid">
                <div class="span12">
                    <label class="span4">Mechanical</label>
                           <span class="formwrapper" id="route_append">
                            <select data-placeholder="Select Mechanical.." style="width: 400px" class="chzn-select"
                                    name="mechanical"
                                    tabindex="2">
                                <option value=""></option>
                                @foreach($employees as $employee)
                                    <option value="{{$employee->employee_id}}">{{$employee->fullName}}</option>
                                @endforeach
                            </select>
                            </span>
                </div>
            </div>

            <div class="row-fluid" style="margin-bottom: 10px">
                <div class="span12">
                    <label class="span4">&nbsp;</label>
                    <table class="table-c">
                        <tr class="tr_label">
                            <td colspan="3" class="td_label">Fault</td>
                        </tr>
                        <tr class="tr_data">
                            <td colspan="3" class="td_data">
                                <input type="radio" name="fault" value="driver"/> Driver's &nbsp; &nbsp;
                                <input type="radio" name="fault" value="technical"/> Technical &nbsp; &nbsp;
                                <input type="radio" name="fault" value="whether_condition"/> Whether Condition &nbsp;
                                &nbsp;
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="row-fluid">
                <div class="span12">
                    <label class="span4">Initial Date</label>
                        <span class="input-append datetimepicker1">
                         <input class="form-control span12 " name="initial_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="row-fluid" style="margin-bottom: 10px;margin-top: 10px">
                <div class="span12">
                    <label class="span4">&nbsp;</label>
                    <table class="table-c">
                        <tr class="tr_label">
                            <td colspan="3" class="td_label">Status</td>
                        </tr>
                        <tr class="tr_data">
                            <td colspan="3" class="td_data">
                                <input type="radio" name="status" value="processing"/> PROCESSING &nbsp; &nbsp;
                                <input type="radio" name="status" value="closed"/> CLOSED &nbsp; &nbsp;
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="row-fluid">
                <div class="span12">
                    <label class="span4">Reactivation Date</label>
                 <span class="input-append datetimepicker2">
                         <input class="form-control span12 " name="reactivation_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="row-fluid" style="margin-bottom: 10px;margin-top: 10px">
                <div class="span12">
                    <label class="span4">&nbsp;</label>
                    <table class="table-c">
                        <tr class="tr_label">
                            <td colspan="3" class="td_label">Reported Vehicle Problem?</td>
                        </tr>
                        <tr class="tr_data">
                            <td colspan="3" class="td_data">
                                <input type="radio" name="report_problem" value="yes"/> YES &nbsp; &nbsp;
                                <input type="radio" name="report_problem" value="no"/> NO &nbsp; &nbsp;
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="row-fluid" style="margin-top: 10px">
                <div class="span12">
                    <label class="span4">Remark</label>
                                        <span class="field customer-field span8">
                                           <textarea name="remark" id="autoResizeTA" style="width: 400px" cols="70"
                                                     rows="25"
                                                     class="span5" style="resize: vertical"></textarea>
                                        </span>
                </div>
            </div>
        </div><!--span12-->
        <br>

        <div class="modal-footer">
            <div class="row">
                <div class="form-group">
                    <button class="btn btn-primary" type="submit">Submit Button</button>
                    <button type="reset" class="btn  btn-primary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
        </form>
    </div>
    <script>
        jQuery('#vehicle_id').change(function () {
            jQuery.ajax({
                type: "post",
                url: "{{route('vehicle.route.retrieve')}}",
                data: {vehicle_id: jQuery('#vehicle_id').val()},
//                    dataType: 'json',
                success: function (data) {
                    jQuery('#route_append').html(data);
                },
                error: function (data) {

                }
            })
        });

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