{{-- Extends layout --}}
@extends('layout.default')

{{-- Content --}}
@section('content')
<div class="card card-custom">
    @if($errors->any())
    <div class="alert alert-custom alert-notice alert-light-danger fade show mb-5" role="alert">
        <div class="alert-icon">
            <i class="flaticon-warning"></i>
        </div>
        <div class="alert-text">{{ implode('', $errors->all(':message')) }}</div>
        <div class="alert-close">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">
                    <i class="ki ki-close"></i>
                </span>
            </button>
        </div>
    </div>  
    @endif
    <input type="hidden" id="groupid" value="{{ $data['idgroup'] }}">
    <div class="card-header flex-wrap border-0 pt-6 pb-0">
        <div class="card-title">
            <h3 class="card-label">{{ $data['title'] }}
                <div class="text-muted pt-2 font-size-sm">ID : {{ $data['idgroup'] }}</div>
            </h3>
        </div>
        <div class="card-toolbar">
            <!--begin::Button-->
            <a onclick="addData()" class="btn btn-primary font-weight-bolder">
            <span class="svg-icon svg-icon-md">
                <!--begin::Svg Icon | path:assets/media/svg/icons/Design/Flatten.svg-->
                <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                        <rect x="0" y="0" width="24" height="24"/>
                        <circle fill="#000000" cx="9" cy="15" r="6"/>
                        <path d="M8.8012943,7.00241953 C9.83837775,5.20768121 11.7781543,4 14,4 C17.3137085,4 20,6.6862915 20,10 C20,12.2218457 18.7923188,14.1616223 16.9975805,15.1987057 C16.9991904,15.1326658 17,15.0664274 17,15 C17,10.581722 13.418278,7 9,7 C8.93357256,7 8.86733422,7.00080962 8.8012943,7.00241953 Z" fill="#000000" opacity="0.3"/>
                    </g>
                </svg>
                <!--end::Svg Icon-->
                </span>New Record
            </a>
            <!--end::Button-->
        </div>
    </div>
    <div class="card-body">
        <!--begin: Datatable-->
        <table id="myTable" class="table table-light-secondary table-striped table-hover">
            <thead>
            <tr>
                <th>No</th>
                <th>Menu</th>
                <th>Create</th>
                <th>Read</th>
                <th>Edit</th>
                <th>Delete</th>
                <th>Option</th>
            </tr>
            </thead>
            <tbody></tbody>
            <tfoot>
                <tr>
                    <th>No</th>
                    <th>Menu</th>
                    <th>Create</th>
                    <th>Read</th>
                    <th>Edit</th>
                    <th>Delete</th>
                    <th>Option</th>
                </tr>
            </tfoot>
        </table>
        <!--end: Datatable-->
    </div>
</div>
@endsection
@php
    $group = $data['idgroup']
@endphp
{{-- Styles Section --}}
@section('styles')
@endsection

{{-- Scripts Section --}}
@section('scripts')
<script type="text/javascript">

function getData() {
    console.log('{!! url("/getprivilege/$group") !!}')
    var table = $("#myTable").DataTable({
        processing: true,
        serverSide: true,
        cache: false,
        destroy: true,
        autoWidth: false,
        lengthMenu: [
            [10, 25, 50, -1],
            [10, 25, 50, "All"]
        ],
        ajax: '{!! url("/getprivilege/$group") !!}',
        columns: [
            { data: 'no'},
            { data: 'menu'},
            { data: 'create'},
            { data: 'read'},
            { data: 'edit'},
            { data: 'delete'},
            { data: 'id'}  
        ],
        columnDefs: [{
            targets: [2, 3, 4, 5],
            sClass: "alignCenter",
            data: 'isactive',
            mRender: function(data, type, full) {
                if(data==1){
                    return "<i class='la la-check text-success'>";
                }else {
                    return "<i class='la la-close text-danger'>";
                }
            }
        },{
            targets: [6],
            mRender: function(data, type, row) {
                return "<center><div class='btn-group-xs' role='group'><a class='btn btn-sm btn-clean btn-icon' onclick='editData(\"" + data + "\")'><i class='la la-edit'></i></a><a class='btn btn-sm btn-clean btn-icon' onclick='delData(\"" + data + "\")'><i class='la la-trash'></i></a></div></center>";
            }
        }], 
        'select': {
            'style': 'os'
        },
        'order': [0, 'asc']
    });
}
function addData() {
    var grp = $("#groupid").val(); 
    $.ajax({
        url: '{{ url("/getmenu/$group") }}',
        error: function() {
            alert('Error!');
        },
        success: function(data) {
            $("#formView").html(data);
        }
    });
    $("#myWindow").modal({
        show: true
    });
    var dtevent = $('<div class="modal fade" id="myWindow" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdrop" aria-hidden="true"><div class="modal-dialog modal-xl" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="exampleModalLabel">Add Privilege</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><i aria-hidden="true" class="ki ki-close"></i></button></div><div class="modal-body" id="formView"></div></div></div></div>');
    $("body").append(dtevent);
}
function editData(id){
    $.ajax({
        type: "GET",
        url: "{{ url('/editprivilege/') }}/"+id+"/edit",
        error: function() {
            alert("Error!");
        },
        success: function(data) {
            $("#formView"+id).html(data);
        }
    });
    $("#myWindow"+id).modal({
        show: true
    });
    var editData = '<div class="modal fade" id="myWindow'+id+'" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="staticBackdrop" aria-hidden="true"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="exampleModalLabel">Edit {{ $page_title ?? '' ?? '' ?? '' }}</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><i aria-hidden="true" class="ki ki-close"></i></button></div><div class="modal-body" id="formView'+id+'"></div></div></div></div>';
    $("body").append(editData);
}
function delData(id){
    //alert(id);
    var Dtable = $("#myTable").DataTable();
    Swal.fire({
        title: "Are you sure?",
        text: "You want be delete this record!",
        icon: "warning",
        showCancelButton: true,
        confirmButtonText: "Yes, delete it!"
    }).then(function(result) {
        if (result.value) {
            $.ajax({
                type: "DELETE",
                url: "{{ url('/deleteprivilege/') }}/"+id,
                data: {
                    '_token': $('input[name=_token]').val()
                },
                cache: false,
                success: function(data) {
                    Swal.fire(
                        "Deleted!",
                        "Your file has been deleted.",
                        "success"
                    )
                    Dtable.row('.selected').remove().draw(false);
                    // window.location.href="{{ url('user') }}";
                }
            });
        }
    });
}
function updRead(id) {
        var grp = $("#groupid").val(); 
		var hread = $("input[id='read_" + id + "']:checked").val() || 0;
		var hcreate = $("input[id='write_" + id + "']:checked").val() || 0;
		var hedit = $("input[id='edit_" + id + "']:checked").val() || 0;
		var hdelete = $("input[id='delete_" + id + "']:checked").val()|| 0;
		var DataTable_Test = $("#mymenu").DataTable();
		$.ajax({
			type: 'POST',
			url: "{{ url('/saveprivilege') }}",
			data: {
                '_token': $('input[name=_token]').val(),
				idmodule: id,
                group : grp,
				hread: hread,
				hcreate: hcreate,
				hedit: hedit,
				hdelete: hdelete
			},
			error: function() {
                alert(' error')
			},
			success: function(data) {
                Swal.fire(
                    "Saved!",
                    "Your file has been deleted.",
                    "success"
                );
                DataTable_Test.row('.selected').remove().draw(false);
			}
		});
	}
$(function(){
    getData();
    setTimeout(function(){ $('.alert').hide() }, 5000);
});
</script>
{{-- <script src="{{ asset('js/pages/features/miscellaneous/sweetalert2.js') }}"></script> --}}
{{-- <script src="{{ asset('js/pages/crud/ktdatatable/base/html-table.js') }}" type="text/javascript"></script> --}}
@endsection