@extends('layouts.main_without_top_button')
@section('title')
    Maintenance Configurations
@stop
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li><a href="{{ route('settings.trucks.maintenance-category') }}">Settings</a> <span class="divider">/</span>
        </li>
        <li class="active">Master services</li>
    </ul>
@stop
@section('master_services')
    current
@stop
@section('contentinner')
    <style type="text/css">
        input.invalid, textarea.invalid {
            border: 2px solid red;
        }

        input.valid, textarea.valid {
            border: 2px solid green;
        }
    </style>
    <style>
        .table-1 thead tr, .table-1 thead tr th {
            border: 0;
            color: #0b4073;
            font-size: 14px;
        }

        .sortlist > li div.label .showcnt-1 {
            position: absolute;
            display: block;
            top: 9px;
            right: 30px;
            opacity: 1;
        }

        .sortlist > li div.label .showcnt-1:hover {
            opacity: 0.6;
            cursor: pointer;
        }

        .sortlist > li div.label .showcnt-2 {
            position: absolute;
            display: block;
            top: 9px;
            right: 5px;
            opacity: 1;
        }

        .sortlist > li div.label .showcnt-2:hover {
            opacity: 0.6;
            cursor: pointer;
        }

        .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;
        }
    </style>

    <div class="tabbable">
        <div class="tab-content">
            <div class="tab-pane active">
                <div class="row-fluid">
                    <div class="span12">
                        @include('settings.maintenance.trucks.includes.mediamgr_category')
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span12">
                        <div class="msghead" style="margin-bottom: 4px;margin-top: -20px;">
                            <ul class="msghead_menu">
                                <li class="right btn-group">
                                    <button onclick="create('{!! route('settings.master_services.create') !!}')"
                                            class="btn pull-right">
                                        <span class="iconsweets-create"></span> CREATE MASTER SERVICES
                                    </button>
                                </li>

                            </ul>
                            <span class="clearall"></span>
                        </div><!--msghead-->
                        <form class="form-inline form-filter" id="vehicle_import_excel"
                              action="{{route('workshops.master_service.import')}}" method="post"
                              enctype="multipart/form-data">
                            <input type="file" name="import_file" class="import_file"/>
                            <button class="btn btn-mini btn-primary">Import File</button>
                            <button class="btn btn-mini" id="download_sample_file">Download template</button>
                        </form>
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span12">

                        <div class="mediamgr">
                            <div class="mediamgr_left">

                                <table class="table table-bordered table-condensed" id="master_service_table">
                                    <thead>
                                    <tr>
                                        <th style="width: 03%">S/N</th>
                                        <th style="width: 03%">More</th>
                                        <th>Description</th>
                                        <th>Asset Group</th>
                                        <th>Service Frequency</th>
                                        <th>Create Remainder</th>
                                        <th style="width: 10%">Action</th>
                                    </tr>
                                    </thead>

                                </table>
                            </div><!--mediamgr_left -->
                            <tbody>
                            </tbody>
                        </div><!--mediamgr-->
                    </div><!--span12-->
                </div><!--row-fluid-->
            </div><!--row-fluid-->
        </div><!--row-fluid-->
    </div><!--tabbable-->


    <script>

        var oTable = jQuery('#master_service_table').on('error.dt', function (e, settings, techNote, message) {
            console.log('An error has been reported by DataTables: ', message);
            $.jGrowl("ERROR LOADING DATA!", {header: 'Important'});
            stopSpinner();
        })
            .DataTable({
                "oLanguage": {
                    "sLoadingRecords": startSpinner(),
                    "sZeroRecords": "No any service records to display.",
                    "sProcessing": "Please wait - loading records...",
                    "sInfoEmpty": "No entries to display."
                },
                "initComplete": function (settings, json) {
                    stopSpinner();
                },
                ajax: {
                    url: '{{ route("services.datatable") }}',
                    data: function (d) {
                    }
                },
                scrollCollapse: true,
                "sPaginationType": "full_numbers",
                processing: true,
                serverSide: true,
                "order": [[0, 'asc']],
                "columns": [
                    {"class": "link", data: 'id'},
                    {
                        "class": "details-control",
                        "orderable": false,
                        "data": null,
                        "defaultContent": ""
                    },
                    {"class": "link", data: 'description'},
                    {"class": "link", data: 'asset_group'},
                    {"class": "link", data: 'service_frequency'},
                    {"class": "link", data: 'create_remainder'},
                    {"class": "link", data: 'action'}
                ],
                "bStateSave": true
            });


        function format(d) {
            return d.sevice_details;
        }

        var service_more = [];

        jQuery('#master_service_table tbody').on('click', 'tr td.details-control', function () {

            var tr = jQuery(this).closest('tr');
            var row = oTable.row(tr);
            var idx = jQuery.inArray(tr.attr('id'), service_more);

            if (row.child.isShown()) {
                tr.removeClass('details');
                row.child.hide();

                // Remove from the 'open' array
                service_more.splice(idx, 1);
            } else {
                tr.addClass('details');
                row.child(format(row.data())).show();

                // Add to the 'open' array
                if (idx === -1) {
                    service_more.push(tr.attr('id'));
                }
            }
        });

    </script>

@stop