@extends('maintenance.inspections.includes.inspection_tabs')
@section('inspections')

    <div class="tab-pane active">
        <table class="table table-bordered table-condensed" id="dyntable">
            <thead>
            <tr>
                <th class="head0 nosort" style="width: 10px"><input type="checkbox" class="checkall"/></th>
                {{--<th class="head0">S/N</th>--}}
                <th class="head1" style="width: 80px"> Date</th>
                <th class="head1">Vehicle</th>
                <th class="head1">Driver</th>
                <th class="head0">Inspected By</th>
                <th class="head1">Odometer</th>
                <th class="head1">Remarks</th>
                <th class="head1">Status</th>
                <th class="head0">Action</th>
            </tr>
            </thead>
            <tbody>
            @foreach($inspections as $inspection)
                <tr class="gradeX">
                    <td class="aligncenter"><span class="center"><input type="checkbox"/></span></td>

                    <td>{{\Carbon\Carbon::parse($inspection->inspection_date)->toFormattedDateString()}}</td>
                    <td>{{$inspection->vehicle->registration_number}}</td>
                    <td>{{$inspection->driver}}</td>
                    <td>{{$inspection->inspector}}</td>
                    {{--<td>{{$inspection->employee}}</td>--}}
                    <td>{{$inspection->odometer}}</td>
                    <td>{{$inspection->remarks}}</td>
                    <td></td>
                    <td style="text-align: right;width: 120px">
                        <div class="btn-group">
                            <a class="btn btn-mini" target="_blank"
                               href="{{route('inspection.inspection_sheet.print',['inspection_id'=>$inspection->id])}}">
                                <span class="icon-print"></span>
                            </a>
                            <a class="btn btn-mini inspection" href="{!! route('inspections.show',['inspection_id'=>$inspection->id]) !!}" >
                                MANAGE
                            </a>
                            @if(sizeof($inspection->results())>0)
                                <a class="btn btn-mini"  href="{!! route('inspections.services.create',['inspection_id'=>$inspection->id]) !!}"
                                   style="margin-left: 2px"> CREATE SERVICE </a>
                            @endif
                            <input type="hidden" class="inspection_id" value="{{$inspection->id}}">
                        </div>
                    </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="openServiceModel">
        <!-- Modal content-->
        <div class="modal-header" style="background: #50A6C6">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4>SERVICE DETAILS</h4>
        </div>
        <div class="modal-body">
            <div class="widgetcontent">
                <div id="tabs">
                    <ul class="tabs">
                        <li id="service_general_tab"><a href="#tabs-1">GENERAL</a></li>
                        <li id="service_labour_cost_tab"><a href="#tabs-2">LABOR COST</a></li>
                        <li id="service_labour_cost_tab"><a href="#tabs-3">JOB CARDS</a></li>
                    </ul>
                    <div id="tabs-1">
                        <div id="sub_service_tab_body"></div>
                    </div>
                    <div id="tabs-2">
                        <div id="service_labour_cost_body"></div>
                    </div>
                    <div id="tabs-3">
                        <div id="service_job_cards_body"></div>
                    </div>


                </div><!--row-fluid-->
            </div>
        </div>
        <div class="modal-footer">
            <div class="row">
                <div class="form-group">
                    <button class="btn btn-primary" type="submit">SUBMIT SERVICE</button>
                    <button type="reset" class="btn  btn-primary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <table style="width: 90%" class="fade">
        <tbody id="non_schedule_sub_service_details">
        <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->name}}</option>
                    @endforeach
                </select>
            </span>
            </td>
            <td>
                <a class="remove_sub_service"><i class="iconfa-minus-sign" style="font-size: 18px;color: red"></i></a>
            </td>
        </tr>
        </tbody>
    </table>

    <script>
        jQuery('#create_service_from_inspection').on('click',function(e){
            e.preventDefault();
            var inspection_id = jQuery(this).data('value');
            jQuery.ajax({
                type: "get",
                url: "{{route('inspections.services.create')}}",
                data: {inspection_id: inspection_id},
                success: function (data) {
                    openServiceModel1(data)
                }
            })
        });
        function createServiceFromInspection(inspection_id) {
            jQuery.ajax({
                type: "get",
                url: "{{route('inspections.services.create')}}",
                data: {inspection_id: inspection_id},
                success: function (data) {
                    jQuery('#create_service_from_inspection_body').empty().append(data);
                    jQuery('#create_service_from_inspection_modal').appendTo("body").modal('toggle');
                }
            })
        }
    </script>
    <script>
        jQuery('#driver_id').chosen();
        jQuery('.datepicker').datepicker();
        jQuery('#vehicle_id_default').on('change', function () {
            jQuery.ajax({
                type:'get',
                url:"{{route('service.vehicle.driver')}}",
                data:{
                    vehicle_id:jQuery(this).val()
                },
                success:function(){
                    jQuery('#service_driver_id').empty().append(data);
                }
            });
        });
        jQuery('.remove_sub_service').on('click', function () {
            jQuery(this).parent().parent().remove();
        });
        jQuery('#add_sub_service').on('click', function () {

            var addRow = jQuery('#non_schedule_sub_service_details').html();
            jQuery('#non_schedule_sub_service_body').prepend(addRow);

            jQuery('.remove_sub_service').on('click', function () {
                jQuery(this).parent().parent().remove();
            });
        });
        function openServiceModel1(service_id) {
            serviceGeneralTab(service_id);
            serviceLabours(service_id);
            serviceJobCards(service_id);
            jQuery('#openServiceModel').appendTo("body").modal('toggle');
        }
        function serviceGeneralTab(service_id) {
            jQuery.ajax({
                type: "get",
                url: "{{route('service.manage.show')}}",
                data: {service_id: service_id},
                success: function (data) {
                    jQuery('#sub_service_tab_body').empty().append(data);
                }
            })
        }
        function serviceLabours(service_id) {
            jQuery.ajax({
                type: "get",
                url: "{{route('service.manage.labour.index')}}",
                data: {service_id: service_id},
                success: function (data) {
                    if (data == 'NOTHING') {
                        jQuery('#item_tab').addClass('disable');
                    } else {
                        jQuery('#service_labour_cost_body').empty().append(data);
                    }

                }
            })
        }

        function serviceJobCards(service_id) {
            jQuery.ajax({
                type: "get",
                url: "{{route('service.manage.job-cards.index')}}",
                data: {service_id: service_id},
                success: function (data) {
                    if (data == 'NOTHING') {
                        jQuery('#item_tab').addClass('disable');
                    } else {
                        jQuery('#service_job_cards_body').empty().append(data);
                    }

                }
            })
        }
        function serviceMaterial(service_id) {
            jQuery.ajax({
                type: "get",
                url: "{{route('service.manage.material.index')}}",
                data: {service_id: service_id},
                success: function (data) {
                    if (data == 'NOTHING') {
                        jQuery('#item_tab').addClass('disable');
                    } else {
                        jQuery('#service_material_cost_body').empty().append(data);
                    }

                }
            })
        }
        function serviceOtherCost(service_id) {
            jQuery.ajax({
                type: "get",
                url: "{{route('service.manage.other-cost.index')}}",
                data: {service_id: service_id},
                success: function (data) {
                    if (data == 'NOTHING') {
//                        jQuery('#item_tab').addClass('disable');
                    } else {
                        jQuery('#service_other_cost_body').empty().append(data);
                    }

                }
            })
        }
        function closeService(service_id) {
            jQuery.ajax({
                type: "get",
                url: "{{route('vehicle.service.close')}}",
                data: {service_id: service_id},
                success: function (data) {
                    location.reload();

                }
            })
        }
    </script>
@stop