@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="">Settings</a> <span class="divider">/</span></li>
        <li><a href="{{route('settings.trucks.maintenance-category')}}">Truck Maintenance Categories</a> <span
                    class="divider">/</span></li>
        <li class="active">Sub services</li>
    </ul>
@stop
@section('sub_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>
    <div class="tabbable">
        <div class="tab-content">
            <div class="tab-pane active">
                <div class="row-fluid">
                    <div class="span12">
                        <div class="mediamgr">
                            <div class="mediamgr_left">
                                @include('settings.maintenance.trucks.includes.mediamgr_category_2')

                                <h4 class="widgettitle form-inline ">
                                    <a href="javascript:;">Sub Services</a>
                                    <button onclick="modelShow('addService')" class="btn pull-right">
                                        <span class="icon-plus"></span> ADD SERVICE(s)
                                    </button>
                                </h4>
                                <table class="table  table-striped table-condensed" id="services_list">
                                    <thead>
                                    <tr>
                                        <th class="head0" style="width: 10px">S/N</th>
                                        <th class="head1">Service</th>
                                        <th class="head1">Description</th>
                                        <th class="head1" style="width: 15px">Action</th>
                                    </tr>
                                    </thead>
                                </table>
                            </div><!--mediamgr_left -->

                        </div><!--mediamgr-->
                    </div><!--span12-->
                </div><!--row-fluid-->
            </div><!--row-fluid-->
        </div><!--row-fluid-->
    </div><!--tabbable-->


    <div aria-hidden="false" aria-labelledby="myModalLabel" role="dialog" tabindex="-1"
         class="modal hide fade in modal-1"
         id="addService">
        <!-- Modal content-->
        <div class="modal-header" style="background: #50A6C6">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4>CREATE SERVICES</h4>
        </div>
        <form method="POST" action="{{ route('sub-services.store',['categories'=>$category->id]) }}" accept-charset="UTF-8" autocomplete="off">
            {{ csrf_field() }}
            <div class="modal-body">
            <div class="row-fluid">
                <div class="span12">

                            <table class="table table-bordered table-hover">
                                <thead>
                                <tr>
                                    <th> Sevice Name </th><th> Description </th><th></th>
                                </tr>
                                <tr style="display: none" class="service_row_template">
                                    <td class="span4">
                                        <input type="text" class="span12 form-control "   name="name[]" value="">
                                        <input type="hidden" name="category_id[]" value="{{$category->id}}"/>
                                    </td>
                                    <td class="span8">
                                        <textarea class="span12 form-control" rows="1" name="description[]"></textarea>
                                    </td>
                                    <td>
                                        <button title="Remove Row" type="button" class="btn btn-sm btn-danger service_row_remover">
                                            <i class="fa fa-close"></i></button>
                                    </td>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td class="span4">
                                        <input class="span12" type="text" class="form-control " name="name[]" value="">
                                        <input type="hidden" name="category_id[]" value="{{$category->id}}"/>
                                    </td>
                                    <td class="span8">
                                        <textarea class="span12" class="form-control" rows="1" name="description[]"></textarea>
                                    </td>
                                    <td>
                                        <button title="Remove Row" type="button" class="btn btn-sm btn-danger service_row_remover">
                                            <i class="fa fa-close"></i></button>
                                    </td>
                                </tr>
                                </tbody>
                                <tfoot>
                                <tr>
                                    <td colspan="8">
                                        <button type="button" class="btn btn-default btn-xs service_row_adder pull-right">Add Row</button>
                                        <span class="pull-right">&nbsp;</span>
                                    </td>
                                </tr>
                                </tfoot>
                            </table>
                </div>
            </div>
          </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary">Save</button>
                <button type="button" class="btn " data-dismiss="modal">Close</button>
            </div>
        </form>
    </div>

    <script>

        jQuery('.service_row_adder').each(function () {
                jQuery(this).click(function () {
                    var tbody = jQuery(this).closest('table').find('tbody');
                    var new_row = tbody.closest('table').find('.service_row_template').clone().removeAttr('style')
                        .removeClass('service_row_template').addClass('service_artificial_row').appendTo(tbody);

                    new_row.find('.service_row_remover').click(function () {
                        jQuery(this).closest('tr').remove();
                    });
                });
        });

        jQuery('.service_row_remover').click(function () {
            jQuery(this).closest('tr').remove();
        });



        var oTable = jQuery('#services_list').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('sub-services.datatable',['id'=>$category->id])}}',
                    data: function (d) {}
                },
                scrollCollapse: true,
                "sPaginationType": "full_numbers",
                processing: true,
                serverSide: true,
                "order":[[0,'asc']],
                "columns": [

                    {"class": "link", data: 'id'},
                    {"class": "link", data: 'name'},
                    {"class": "link", data: 'description'},
                    {"class": "link", data: 'action'}
                ],
                "bStateSave": true
            });



    </script>
@stop