@extends('maintenance.breakdowns.includes.breakdowns')
@section('breakdown')
    <div class="tab-pane active">
        <h4 class="widgettitle">Breakdown List</h4>
        <ul class="list-nostyle list-inline pull-right">
            <li><a onclick="modelShow('breakdown')" class="btn btn-info btn-circle"> New Breakdown</a></li>
        </ul>
        <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">Route Name</th>
                <th class="head0">Time Taken</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">{{$breakdown->driver}}</td>
                    <td class="head1">{{$breakdown->route}}</td>
                    <td class="head1">{{$breakdown->timeTaken}}</td>
                    <td class="head1">{{$breakdown->location}}</td>
                    <td class="head1">{{$breakdown->remark}}</td>
                    <td class="head0">
                        {{--<button class="btn btn btn-small">--}}
                        {{--<i class="icon-pencil icon"></i>--}}
                        {{--</button>--}}
                        <a class="btn btn btn-small" onclick="openServiceDone({{$breakdown->id}})">
                            CREATE SERVICE
                        </a>
                        <button class="btn btn-small">Close</button>
                    </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="createNewVehicleService">
        <!-- Modal content-->
        <div class="modal-header" style="background: #50A6C6">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4>CREATE VEHICLE SERVICE</h4>
        </div>
        {!! Form::open(array('class' => 'stdform','route'=>'non_schedule.vehicle_services.store')) !!}
        <div class="modal-body">
            <div class="row-fluid">
                <div class="span12">
                    <div id="service_details">

                    </div>
                </div>
            </div>
            <h4 class="widgettitle" style="margin-left: 30px;margin-right: 30px">Sub-service to be done
                <i class="icon-plus-sign pull-right" style="font-size: 18px" id="add_on_route_cost"></i>
            </h4>

            <div class="row-fluid">
                <div class="span12">
                    <table style="margin-bottom: 3px;margin-left: 5%;width: 90%" class="table table-condensed">
                        <thead>
                        <tr>
                            <th width="40%">Service Description</th>
                            <th>&nbsp;</th>
                        </tr>
                        </thead>
                        <tbody id="onRouteCost">
                        <tr>
                            <td width="80%">
                        <span class="formwrapper span12">

                            <select data-placeholder="Choose a Service..."
                                    class="chzn-select" width="100%" name="services[]" class="onRoute_cost"
                                    tabindex="2">
                                <option value=""></option>
                                @foreach($_services as $service)
                                    <option value="{{$service->id}}">{{$service->description}}</option>
                                @endforeach
                            </select>
                        </span>
                            </td>

                            <td></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <div class="row">
                <div class="form-group">
                    <button class="btn btn-primary" type="submit">Submit</button>
                    <button type="reset" class="btn  btn-primary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
        </form>
    </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
        });

        function openServiceDone(breakdown_id) {
            breakDownDetails(breakdown_id);
            jQuery('#createNewVehicleService').appendTo("body").modal('toggle');
        }
        function breakDownDetails(breakdown_id) {
            jQuery.ajax({
                type: "get",
                url: "{{route('breakdown.details')}}",
                data: {breakdown_id: breakdown_id},
                success: function (data) {
                    jQuery('#service_details').empty().append(data);
                }
            })
        }
    </script>
    <table style="width: 90%" class="fade">
        <tbody id="addedRowCost">
        <tr>
            <td>
            <span class="formwrapper">
                <select placeholder="Choose a On-Route Cost..." name="services[]" class="onRoute_cost">
                    <option value=""></option>
                    @foreach($_services as $service)
                        <option value="{{$service->id}}">{{$service->description}}</option>
                    @endforeach
                </select>
            </span>
            </td>
            <td>
                <a class="removeCostRow"><i class="icon-minus-sign" style="font-size: 18px;color: red"></i></a>
            </td>
        </tr>
        </tbody>
    </table>

    <script>
        jQuery('.removeCostRow').on('click', function () {
            jQuery(this).parent().parent().remove();
            var sum = 0;
            jQuery('.onRoute_amount').each(function () {
                if (this.value != '') {
                    sum += parseFloat(this.value.replace(',', '').replace(',', '').replace(',', '').replace(',', ''));
                }
            });
        });
        jQuery('#add_on_route_cost').on('click', function () {
            var addRow = jQuery('#addedRowCost').html();
            jQuery('#onRouteCost').prepend(addRow);

            jQuery('.removeCostRow').on('click', function () {
                jQuery(this).parent().parent().remove();
                var sum = 0;
                jQuery('.onRoute_amount').each(function () {
                    if (this.value != '') {
                        sum += parseFloat(this.value.replace(',', '').replace(',', '').replace(',', '').replace(',', ''));
                    }
                });
            });
        });

        function createVehicleService(vehicle_id, service_id) {
            jQuery("#createNewVehicleServiceSchedule").appendTo("body").modal('show');

            jQuery.ajax({
                url: "{{route('vehicle.schedule,service.create')}}",
                type: 'GET',
                data: {
                    'vehicle_id': vehicle_id,
                    'service_id': service_id
                },
                beforeSend: function () {
                },
                success: function (response) {
                    jQuery('#scheduleService').empty().html(response);
                    jQuery(".datepicker").datepicker();
                },
            });
        }

    </script>
@stop