@extends('layouts.default')

@push('style')
    <link href="{{asset('assets/plugins/datatables/datatables.bundle.css')}}" rel="stylesheet" type="text/css" />
@endpush

@section('content')


    <!--begin::Entry-->
    <div class="d-flex flex-column-fluid">
        <!--begin::Container-->
        <div class="container">
            <!--begin::Card-->
            <div class="card card-custom gutter-b">
                <div class="card-header">
                    <div class="card-title">
                            <span class="card-icon">
                                <i class="flaticon2-user text-primary"></i>
                            </span>
                        <h3 class="card-label">Group Detail: {{$group->name}}</h3>
                    </div>
                    <div class="card-toolbar">
                        <!--begin::Button-->
                        <a href="{{route('groups.list')}}" class="btn btn-primary font-weight-bolder">
                            <i class="la la-arrow-left"></i>Back to Groups List</a>
                        <!--end::Button-->
                    </div>
                </div>
                <div class="card-body">
                    <table class="table table-bordered">
                        <tr>
                            <th>Group Name</th>
                            <td>{{$group->name}}</td>
                            <th>Slug</th>
                            <td>{{$group->slug}}</td>
                        </tr>
                        <tr>
                            <th>Created</th>
                            <td>{{formatDate($group->created_at)}}</td>
                            <th>Updated</th>
                            <td>{{formatDate($group->updated_at)}}</td>
                        </tr>
                        <tr>
                            <th>Created By</th>
                            <td>{{$group->created_by}}</td>
                            <th>Modified By</th>
                            <td>{{$group->modified_by}}</td>
                        </tr>
                        <tr>
                            <th>Status</th>
                            <td colspan="3">{{$group->status}}</td>
                        </tr>
                    </table>
                </div>
            </div>

            <!--end::Card-->
        </div>
        <!--end::Container-->
    </div>
    <!--end::Entry-->

@endsection

@push('scripts')
    <script src="{{asset('assets/plugins/datatables/datatables.bundle.js')}}"></script>

    <script>
        var VmsDatatables = function() {

            var initTable = function() {
                var table = $('#vms-datatable');

                // begin first table
                table.DataTable({
                    responsive: true,
                    processing: true,
                    columnDefs: [{ width: '5%', targets: 0 }]
                });
            };

            return {

                //main function to initiate the module
                init: function() {
                    initTable();
                },

            };

        }();

        jQuery(document).ready(function() {
            VmsDatatables.init();
        });
    </script>
@endpush