@extends('vehicles.profile.includes.main')
@section('profile')
    <style>

        .modal-body .tabs {
            padding: 5px;
            border-top: 1px solid #bbb;
            border-left: 1px solid #bbb;
            border-right: 1px solid #bbb;
            border-bottom: 0;
            border-top: 0;
            background: #f5f5f5;
        }

        .modal-body .tabs li {
            border-top: 1px solid #bbb;
            border-left: 1px solid #bbb;
            border-right: 1px solid #bbb;
            border-bottom: 0;
            color: #0e0e0e;
        }

        .modal-body .tabs li a {
            color: #0e0e0e;
        }

        .modal-body .tabs li a:active {
            color: #51a7c6;
            background-color: #eeeeee;
        }
    </style>
    <div class="tab-pane active">
        <div class="msghead">
            <ul class="msghead_menu">
                <li class="right">
                    <a href="{{ route('vehicles.inspection.form',array('id'=>$vehicle->id)) }}">
                        <button class="btn"><span class="iconsweets-alert2"></span> Inspection sheet
                        </button>
                    </a>
                    <button class="btn msgtrash" onclick="PrintInspection()"><span class="iconsweets-printer"></span>
                    </button>
                </li>
            </ul>
            <span class="clearall"></span>
        </div><!--msghead-->
        <br>
        <table class="table table-bordered" id="dyntable">
            <colgroup>
                <col class="con0" style="align: center; width: 4%"/>
                <col class="con1"/>
                <col class="con0"/>
                <col class="con1"/>
                <col class="con0"/>
                <col class="con1"/>
            </colgroup>
            <thead>
            <tr>
                <th class="head0 nosort"><input type="checkbox" class="checkall"/></th>
                {{--<th class="head0">S/N</th>--}}
                <th class="head1">Inspection Date</th>
                <th class="head0">Inspected By</th>
                <th class="head1">Km Run</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>{{$inspection->inspection_date}}</td>
                    <td>{{$inspection->inspector}}</td>
                    {{--<td>{{$inspection->employee}}</td>--}}
                    <td>{{$inspection->kilometer_run}}</td>
                    {{--<td>--}}
                    {{--<a class="" href="{{route('inspections.show',array('inspection_id'=>$inspection->id))}}">--}}
                    {{--<i class="icon-eye-open"></i> Details--}}
                    {{--</a>--}}
                    {{--</td>--}}
                    <td>
                        <div class="btn-group">
                            <a class="btn btn-small inspection" data-toggle="modal" data-target='#'
                               onclick="modelShow('inspectionView')">
                                <i class="icon-eye-open"></i>
                            </a>
                            <input type="hidden" class="inspection_id" value="{{$inspection->id}}">
                        </div>
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div><!--tab-pane-->
    <div aria-hidden="false" aria-labelledby="myModalLabel" role="dialog" tabindex="-1"
         class="modal hide fade in modal-1"
         id="inspectionView">
        <!-- Modal content-->
        <div class="modal-header" style="background: #50A6C6">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4>INSPECTION DETAILS</h4>
        </div>
        <div class="modal-body">
            <div class="widgetcontent">
                <div id="tabs">
                    <ul class="tabs">
                        <li id="inspectin_tab"><a href="#tabs-1">INSPECTION RESULTS</a></li>
                        <li id="jobcard_tab"><a href="#tabs-2">JOBCARD CREATE</a></li>
                        <li id="jobcard_tab"><a href="#tabs-3">JOBCARDS</a></li>
                        <li id="item_tab"><a href="#tabs-4">ITEMS RELATED</a></li>
                        <li id="item_tab"><a href="#tabs-5">ITEMS REQUESTED</a></li>
                        {{--<li id="item_tab"><a href="#tabs-3"></a></li>--}}
                    </ul>
                    <div id="tabs-1">
                        <div id="all_details"></div>
                    </div>
                    <div id="tabs-2">
                        <div id="jobcardCreate"></div>
                    </div>
                    <div id="tabs-3">
                        <div id="jobcard"></div>
                    </div>
                    <div id="tabs-4">
                        <div id="done"></div>
                    </div>
                    <div id="tabs-5">
                        <div id="jobCardItemsrequested"></div>
                    </div>
                    {{--<div id="tabs-3">--}}
                    {{--<div id="work_progress"></div>--}}
                    {{--</div>--}}
                </div><!--#tabs-->

            </div><!--row-fluid-->
        </div>
        <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>
    </div>
    <script type="text/javascript">
        function PrintInspection() {
            var base_url = '';
            var url = base_url + 'printinspection';
            var win = window.open(url, '_blank');
            win.focus();
        }
        jQuery('.inspection').click(function () {
            var inspection_id = jQuery(this).parent().find('.inspection_id').val();
            allDetails(inspection_id);
            jobcardCreate(inspection_id);
            jobcard(inspection_id);
            itemUsed(inspection_id);
            itemRequested(inspection_id);

        });

        function open_inspection_model(inspection_id) {
            allDetails(inspection_id);
            jobcardCreate(inspection_id);
            jobcard(inspection_id);
            itemUsed(inspection_id);
            itemRequested(inspection_id);
            jQuery('#inspectionView').appendTo("body").modal('toggle');
        }
        function itemRequested(inspection_id) {
            jQuery.ajax({
                type: "get",
                url: "{{route('inspections.items.requested')}}",
                data: {inspection_id: inspection_id},
                success: function (data) {
                    jQuery('#jobCardItemsrequested').empty().append(data);
                }
            })
        }
        function add_jobcard(inspection_id) {
            jobcard(inspection_id);
            itemUsed(inspection_id);
            itemRequested(inspection_id);
        }

        function allDetails(inspection_id) {
            jQuery.ajax({
                type: "get",
                url: "{{route('inspections.show')}}",
                data: {inspection_id: inspection_id},
                success: function (data) {
                    jQuery('#all_details').empty().append(data);
                }
            })
        }
        function jobcardCreate(inspection_id) {
            jQuery.ajax({
                type: "get",
                url: "{{route('jobcardCreate')}}",
                data: {inspection_id: inspection_id},
                success: function (data) {
                    jQuery('#jobcardCreate').empty().append(data);
                }
            })
        }
        function assignedToJob(inspection_id) {
            jQuery.ajax({
                type: "get",
                url: "{{route('inspections.show.assignedToJob')}}",
                data: {inspection_id: inspection_id},
                success: function (data) {
                    jQuery('#assigned_to_jobcard').empty().append(data);
                }
            })
        }
        function itemRequested(inspection_id) {
            jQuery.ajax({
                type: "get",
                url: "{{route('inspections.items.requested')}}",
                data: {inspection_id: inspection_id},
                success: function (data) {
                    jQuery('#jobCardItemsrequested').empty().append(data);
                }
            })
        }
        function jobcard(inspection_id) {
            jQuery.ajax({
                type: "get",
                url: "{{route('inspection.jobCard.show')}}",
                data: {inspection_id: inspection_id},
                success: function (data) {
                    jQuery('#jobcard').empty().append(data);
                }
            })
        }

        function itemUsed(inspection_id) {
            jQuery.ajax({
                type: "get",
                url: "{{route('inspections.items.used')}}",
                data: {inspection_id: inspection_id},
                success: function (data) {
                    if (data == 'NOTHING') {
                        jQuery('#item_tab').addClass('disable');
                    } else {
                        jQuery('#done').empty().append(data);
                    }

                }
            })
        }
    </script>
@stop