@extends('layouts.main_without_top_button', ['title' => 'OPERATION | Employee offenses'])
@section('title')
    Offenses
@stop
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a> <span class="divider">/</span></li>
        <li class="active">Offenses Settings</li>
    </ul>
@stop

@section('contentinner')
    {{--<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">--}}
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
    <style>
        #right-panel {
            font-family: 'Roboto', 'sans-serif';
            line-height: 30px;
            padding-left: 10px;
        }

        #right-panel select, #right-panel input {
            font-size: 15px;
        }

        #right-panel select {
            width: 100%;
        }

        #right-panel i {
            font-size: 12px;
        }

        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map {
            height: 100%;
            float: left;
            width: 70%;
            height: 100%;
        }

        #right-panel {
            margin: 20px;
            border-width: 2px;
            width: 20%;
            height: 400px;
            float: left;
            text-align: left;
            padding-top: 0;
        }

        #directions-panel {
            margin-top: 10px;
            background-color: #FFEE77;
            padding: 10px;
            overflow: scroll;
            height: 174px;
        }

        #map_canvas {
            z-index: 99999;
        }
    </style>

    <div class="tabbable" onload="loadScript()">
        @include('operations.settings.routes.includes.profile')
        <div class="tab-content">
            <div id="glyphs" class="tab-pane active">
                <div class="row-fluid" style="margin-bottom: 8px;">
                    <div class="span12  profile-left">
                        <div class="msghead" style="margin-bottom: 4px;margin-top: -20px;">
                            <ul class="msghead_menu">
                                <li class="right btn-group">
                                    <a class="btn" onclick="create('{{ route('offenses.create') }}')">CREATE NEW</a>
                                </li>

                            </ul>
                            <span class="clearall"></span>
                        </div><!--msghead-->

                        <table class="table table-striped table-bordered table-condensed" id="offenses_index_datatable">
                            <thead>
                            <tr>
                                <th>S/N</th>
                                <th>Name</th>
                                <th>Remarks</th>
                                <th>Action</th>
                            </tr>
                            </thead>
                        </table>

                    </div><!--span6-->
                </div><!--row-fluid-->
            </div><!--tab-pane-->
        </div>
    </div>

    <script>

        var oTable = jQuery('#offenses_index_datatable').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 Offense records to display.",
                    "sProcessing": "Please wait - loading records...",
                    "sInfoEmpty": "No entries to display."
                },
                "initComplete": function (settings, json) {
                    stopSpinner();
                },
                ajax: {
                    url: '{{route('offenses.data-table.index')}}',
                    data: function (d) {
                        d.id = jQuery('#name').val();
                    },
                    error: function (xhr, textStatus, error) {
                        if (textStatus === 'timeout') {
                            alert('Timout error. The server took too long to send back the data.\nPlease try again.');
                        }
                        main_datatable.fnProcessingIndicator(false);
                    }
                },

                scrollCollapse: true,
                "sPaginationType": "full_numbers",
                processing: true,
                serverSide: true,
                "columns": [
                    {"class": "link", data: 'id'},
                    {"class": "link", data: 'name'},
                    {"class": "link", data: 'remarks'},
                    {"class": "link", data: 'action'}
                ],
                "bStateSave": true
            });

        $('#create_offense_form').on('submit', function (e) {
            e.preventDefault();
            var loading_order_form_id = jQuery(this);
            var formAction = loading_order_form_id.attr('action');
            var formData = loading_order_form_id.serialize();

            jQuery.ajax({
                url: formAction,
                type: 'POST',
                data: formData,
                success: function (data) {
                    console.log(data);

                    if (data.state === 'Done') {
                        resetFormAndClose(loading_order_form_id);
                        jQuery.jGrowl(data.msg);
                        $('#route_index_datatable').dataTable().fnFilter(this.value);
                    } else if (data.state === 'Fail') {
                        jQuery.jGrowl(data.msg);
                    }
                },
                error: function (data) {
                    console.log('Error: ');
                    console.log(data);
                }
            });
        });
        


    </script>
@stop