@extends('maintenance.inspections.includes.inspection_tabs')
@section('inspections')
    <style>
        .table-1 thead tr, .table-1 thead tr th {
            border: 0;
            color: #0b4073;
            font-size: 14px;
        }

        .table-1 tr {
            border-top: 1px solid #dddddd;
            border-bottom: 1px solid #dddddd;
            color: #0e4722;
        }

        .table-1 tr th {
            text-transform: uppercase;
            text-align: center;
        }

        /** ACCORDION **/
        .accordion .card {
            border: 0;
            border-radius: 0;
        }

        .accordion .card + .card {
            margin-top: 1px;
        }

        .accordion .card-header {
            padding: 0;
            background-color: transparent;
            border-bottom-width: 0;
            min-height: 0;
        }

        .accordion .card-header a {
            display: block;
            padding: 15px 20px;
            font-size: 14px;
        }

        .accordion .card-header a, .accordion .card-header a:hover, .accordion .card-header a:focus {
            background-color: #50a6c6;
            color: #fff;
        }

        .accordion .card-header a.collapsed {
            background-color: #e9ecef;
            color: #868e96;
        }

        .accordion .card-header a.collapsed:hover, .accordion .card-header a.collapsed:focus {
            background-color: #dee2e6;
            color: #343a40;
        }

        .accordion .card-body {
            padding: 20px;
            background-color: #f8f9fa;
        }

        .card-deck-xs .card:not(:last-child),
        .card-deck-xs .card:not(:first-child) {
            margin-left: 5px;
            margin-right: 5px;
        }

        .card-deck-xs .card:first-child {
            margin-left: 0;
        }

        .card-deck-xs .card:last-child {
            margin-right: 0;
        }

        .card-deck-sm .card:not(:last-child),
        .card-deck-sm .card:not(:first-child) {
            margin-left: 10px;
            margin-right: 10px;
        }

        .card-deck-sm .card:first-child {
            margin-left: 0;
        }

        .card-deck-sm .card:last-child {
            margin-right: 0;
        }

        .card-deck-lg .card:not(:last-child),
        .card-deck-lg .card:not(:first-child) {
            margin-left: 20px;
            margin-right: 20px;
        }

        .card-deck-lg .card:first-child {
            margin-left: 0;
        }

        .card-deck-lg .card:last-child {
            margin-right: 0;
        }

        @media (max-width: 799px) {
            .card-deck {
                display: block;
            }

            .card-deck .card:not(:last-child), .card-deck .card:not(:first-child) {
                margin-left: 0;
                margin-right: 0;
            }

            .card-deck .card + .card {
                margin-top: 20px;
            }
        }

        .card-columns .card {
            margin-bottom: 20px;
        }

        @media (min-width: 576px) {
            .card-columns {
                column-count: 2;
            }
        }

        @media (min-width: 992px) {
            .card-columns {
                column-count: 3;
            }
        }

        @media (min-width: 576px) {
            .card-columns.column-count-2 {
                column-count: 2;
            }
        }

        @media (min-width: 480px) {
            .card-columns.column-count-4 {
                column-count: 2;
            }
        }

        @media (min-width: 768px) {
            .card-columns.column-count-4 {
                column-count: 3;
            }
        }

        @media (min-width: 992px) {
            .card-columns.column-count-4 {
                column-count: 4;
            }
        }

        @media (min-width: 480px) {
            .card-columns.column-count-5 {
                column-count: 2;
            }
        }

        @media (min-width: 768px) {
            .card-columns.column-count-5 {
                column-count: 3;
            }
        }

        @media (min-width: 992px) {
            .card-columns.column-count-5 {
                column-count: 4;
            }
        }

        @media (min-width: 1200px) {
            .card-columns.column-count-5 {
                column-count: 5;
            }
        }

        @media (min-width: 480px) {
            .card-columns.column-count-6 {
                column-count: 2;
            }
        }

        @media (min-width: 768px) {
            .card-columns.column-count-6 {
                column-count: 3;
            }
        }

        @media (min-width: 992px) {
            .card-columns.column-count-6 {
                column-count: 4;
            }
        }

        @media (min-width: 1200px) {
            .card-columns.column-count-6 {
                column-count: 6;
            }
        }

        .card-columns-sm {
            margin-top: -10px;
            -webkit-column-gap: 10px;
            column-gap: 10px;
        }

        .card-columns-sm .card {
            margin-top: 10px;
            margin-bottom: 0;
        }

        .card-columns-md {
            margin-top: -20px;
            -webkit-column-gap: 30px;
            column-gap: 30px;
        }

        .card-columns-md .card {
            margin-top: 20px;
        }

        .card-columns-lg {
            margin-top: -30px;
            -webkit-column-gap: 40px;
            column-gap: 40px;
        }

        .card-columns-lg .card {
            margin-top: 30px;
        }

        .card-item-img {
            margin-bottom: 0;
        }

        .card-item-img img {
            opacity: 0.2;
            transition: all 0.2s ease-in-out;
        }

        .card-item-img:hover img, .card-item-img:focus img {
            opacity: 0.5;
        }

        .card-header-tabs .nav-link.active, .card-header-tabs .nav-link.active:hover, .card-header-tabs .nav-link.active:focus {
            background-color: #fff;
            border: 1px solid #dee2e6;
            color: #343a40;
            border-radius: 0;
        }

        .card-header-tabs .nav-link:hover, .card-header-tabs .nav-link:focus {
            border-color: transparent;
        }

        @media (min-width: 480px) {
            .card-header-tabs .nav-link.active, .card-header-tabs .nav-link.active:hover, .card-header-tabs .nav-link.active:focus {
                background-color: #fff;
                border-bottom-color: #fff;
                color: #343a40;
            }
        }
    </style>
    <div class="tab-pane active">
        <div class="row-fluid">
            <div class="span12">

                <div class="tab-content">
                    <form id="inspection-form" class="form">
                        <table class="table table-1">
                            <tr>
                                <th style="width: 30%"> Vehicle</th>
                                <th style="width: 30%"> Driver</th>
                                <th style="width: 20%"> Trips</th>
                                <th style="width: 20%"> Odometer</th>
                            </tr>
                            <tr>
                                <td>
                                    <select data-placeholder="Select Vehicle.." class="searchable_select"
                                            name="vehicle_id" id="vehicle_id">
                                        <option value="" id="vehicle_id_default"></option>
                                        @foreach($vehicles as $vehicle)
                                            <option value="{{$vehicle->id}}">{{$vehicle->registration_number}}</option>
                                        @endforeach
                                    </select>
                                </td>
                                <td>
                                    <select data-placeholder="Select Driver.." class="searchable_select"
                                            name="driver_id" id="driver_id">
                                        <option value=""></option>
                                        @foreach($drivers as $driver)
                                            <option value="{{$driver->employee_id}}">{{$driver->full_name}}</option>
                                        @endforeach
                                    </select>
                                </td>
                                <td>
                                    <input type="text" id="current_kilometer_run" class="span12" name="odometer"
                                           required/>
                                </td>
                                <td>
                                    <input type="text" id="trip" name="trip" class="span12"/>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="4">
                                    <div class="row-fluid" style="margin-top: 4px">
                                        <div class="span12">
                                            {!! Form::label('description', 'Complaining', ['class'=>'span4']) !!}
                                            <div class="field span12">
                                                {!! Form::textarea('description',null, ['class'=>'span11', 'rows'=>'2']) !!}
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row-fluid" style="margin-top: 8px">
                                        <table class="table" style="width: 100%">
                                            <thead>
                                            <tr>
                                                <td style="width: 77%">Inspection Parameters</td>
                                                <td style="width: 20%">Status</td>
                                                <td style="width: 3%">Status</td>
                                            </tr>
                                            </thead>
                                            <tbody id="sub_services_body">
                                            <tr class="hide" id="sub_service_template">
                                                <td>
                                                    <select name="service_id[]" class="service_id" style="width: 100%">
                                                        <option value="">Select Task</option>
                                                        @foreach($services as $index => $service)
                                                            <option value="{{$service->id}}">{{ $service->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </td>
                                                <td><span class="add-on item_balance" style="color: #000080">( Never Done Before )</span>
                                                </td>
                                                <td><a class="remove_row alert-danger btn">x</a></td>
                                            </tr>
                                            <tr>
                                                <td style="font-weight: bold;" class="parameter">
                                                    <select name="service_id[]"
                                                            class="searchable_select service_id">
                                                        <option value="">Select Parameter</option>
                                                        @foreach($services as $index => $service)
                                                            <option value="{{$service->id}}">{{ $service->name }}</option>
                                                        @endforeach
                                                    </select>
                                                </td>
                                                <td><span class="add-on item_balance" style="color: #000080">( Never Done Before )</span>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="4">
                                    <input type="submit" class="btn" value="GENERATE INSPECTION "
                                           id="generate_inspection_sheet" style="width: 100%">
                                </td>
                            </tr>
                        </table>
                        <div id="generated_iSheet"></div>
                    </form>
                </div><!--tabcontent-->
            </div>
        </div>
    </div>
    <script>
        jQuery(".searchable_select").select2({
            width: '100%'
        });
        jQuery(".datepicker").datepicker();

        jQuery('.service_id').on('change', function () {
            var tr_position = jQuery(this).closest('tbody');
            if (jQuery(this).val()) {
                {{--var url = "{{route('ajax.stores.item',[':id'])}}";--}}
                {{--url = url.replace(":id", jQuery(this).val());--}}
                {{--jQuery.ajax({--}}
                    {{--type: "GET",--}}
                    {{--url: url,--}}
                    {{--dataType: 'xml',--}}
                    {{--beforeSend: function () {--}}
                        {{--startSpinner();--}}
                        {{--tr_position.find('.item_balance').html('()');--}}
                        {{--tr_position.find('input[name="rate[]"]').html('');--}}
                        {{--tr_position.find('.unit_of_measurement').html('');--}}
                    {{--},--}}
                    {{--success: function (data) {--}}
                        {{--var price = jQuery(data).find('xml').find('item').find('price').text();--}}
                        {{--var unit_of_measurement = jQuery(data).find('xml').find('item').find('unit_of_measurement').text();--}}
                        {{--var balance = jQuery(data).find('xml').find('item').find('balance').text();--}}
                        {{--if (balance > 0) {--}}
                            {{--tr_position.find('.item_balance').html('(' + balance.toLocaleString() + ' Currently Available)');--}}
                            {{--tr_position.find('input[name="rate[]"]').val(price.toLocaleString());--}}
                        {{--} else {--}}
                            {{--tr_position.find('.item_balance').html('( Out Of Stock )');--}}
                        {{--}--}}
                        {{--tr_position.find('.unit_of_measurement').html(unit_of_measurement);--}}
                    {{--},--}}
                    {{--error: function (xhr, textStatus, error) {--}}
                        {{--onAjaxError(xhr, textStatus, error);--}}
                    {{--},--}}
                    {{--complete: function () {--}}
                        {{--stopSpinner();--}}
                    {{--}--}}
                {{--})--}}
                addInspectionParameters();
            }
        });

        function addInspectionParameters() {

            var sub_service_template = jQuery('#sub_service_template').clone();
            sub_service_template.removeClass('hide');
            sub_service_template.find('select').select2();

            sub_service_template.find('.service_id').on('change', function () {
                var tr_position = jQuery(this).closest('tbody');

                if (jQuery(this).val()) {
                    {{--var url = "{{route('ajax.stores.item',[':id'])}}";--}}
                    {{--url = url.replace(":id", jQuery(this).val());--}}
                    {{--jQuery.ajax({--}}
                        {{--type: "GET",--}}
                        {{--url: url,--}}
                        {{--dataType: 'xml',--}}
                        {{--beforeSend: function () {--}}
                            {{--startSpinner();--}}
                            {{--tr_position.find('.item_balance').html('()');--}}
                        {{--},--}}
                        {{--success: function (data) {--}}
                            {{--var balance = jQuery(data).find('xml').find('item').find('balance').text();--}}
                            {{--if (balance > 0) {--}}
                                {{--tr_position.find('.item_balance').html('( Done on ' + balance.toLocaleString() + ')');--}}
                            {{--} else {--}}
                                {{--tr_position.find('.item_balance').html('( Never Done Before )');--}}
                            {{--}--}}
                        {{--},--}}
                        {{--error: function (xhr, textStatus, error) {--}}
                            {{--onAjaxError(xhr, textStatus, error);--}}
                        {{--},--}}
                        {{--complete: function () {--}}
                            {{--stopSpinner();--}}
                        {{--}--}}
                    {{--})--}}
                    addInspectionParameters();
                }
            });
            sub_service_template.find('.remove_row').on('click', function () {
                jQuery(this).closest('tr').remove();
            });
            jQuery('#sub_services_body').append(sub_service_template);
        }

        jQuery('#vehicle_id').on('change', function () {
            jQuery.ajax({
                type: "get",
                url: "{{route('inspection.vehicle.kilometer-run')}}",
                data: {vehicle_id: jQuery(this).val()},
                dataType: 'xml',
                success: function (data) {

                        var vehicle = jQuery(data).find('xml').find('vehicle');

                        var driver_id = vehicle.find('driver_id');
                        var km_run = vehicle.find('km_run');
                        var trips = vehicle.find('trips');
                        jQuery('#driver_id').val(vehicle.find('driver_id').text()).trigger('change');
                        jQuery('#current_kilometer_run').val(vehicle.find('km_run').text());
                        jQuery('#trip').val(vehicle.find('trips').text());

                }
            })
        });

        jQuery('#vehicle_id').on('change', function () {
            jQuery.ajax({
                type: "get",
                url: "{{route('vehicles.pending-services')}}",
                data: {
                    vehicle_id: jQuery(this).val()
                },
                success: function (data) {
//                    jQuery('#current_kilometer_run').val(data.toLocaleString());
//                    if (){


//                            buttons: ["IGNORE!", ""],

                    swal({
                            title: "Service Due !",
                            text: data,
                            showCancelButton: true,
                            confirmButtonColor: "#DD6B55",
                            confirmButtonText: "ADD IN THIS JOB-CARD!",
                            closeOnConfirm: true
                        },
                        function () {
                            jQuery.ajax({
                                url: '{{route('pending-services.create')}}',
                                type: 'GET',
                                data: {
                                    vehicle_id: jQuery('#vehicle_id').val()
                                },
                                success: function (data) {
                                    jQuery('#sub_services_body').empty().append(data);
                                }
                            });
                        });
//                    }
                }
            })
        });
        jQuery('#inspection-form').on('submit', function (e) {
            e.preventDefault();
            jQuery.ajax({
                type: "POST",
                url: "{{route('workshop.inspection_sheets.store')}}",
                data: jQuery(this).serialize(),
                success: function (data) {
////                        jQuery('#generated_iSheet').empty().append(data);
//                        jQuery.jGrowl('CLICK HERE TO PRINT INSPECTION SHEET <a class="btn btn-mini" href="'+data+'" target="_blank">PRINT</a>', {
//                            theme: 'contrastBorder',
//                            sticky: true
//                        });
                }
            })
        });

    </script>
@stop