@extends('layouts/page')
@section('content')
    <div class="content-wrapper">
        <div class="container-xxl flex-grow-1 container-p-y bg-grey">

            <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home"
                        type="button" role="tab" aria-controls="pills-home" aria-selected="false" tabindex="-1"><i
                            class='bx bx-user'></i>&nbsp; User Role</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile"
                        type="button" role="tab" aria-controls="pills-profile" aria-selected="true"><i
                            class='bx bx-menu'></i>&nbsp; Menu</button>
                </li>
            </ul>

            <div class="tab-content" id="pills-tabContent">
                <div class="tab-pane fade active show" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
                    <div class="card-header border-bottom">
                        <div class="d-flex justify-content-between">
                            <h4 class="fw-bold"> Role </h4>
                            <div class="col-md-3">
                                <div class="card-title mb-3 d-flex justify-content-end">
                                    <form action="{{ url('rolemenu/export') }}" method="post">
                                        @csrf
                                        <div class="btn-group">
                                            <button type="button" data-bs-toggle="dropdown" aria-haspopup="true"
                                                aria-expanded="false"
                                                class="btn btn-outline-secondary waves-effect dropdown-toggle">
                                                <i class="fa-solid fa-print"></i>&nbsp;&nbsp; Export
                                            </button>
                                            <ul class="dropdown-menu">
                                                <li>
                                                    <h6 class="dropdown-header">Tipe File</h6>
                                                </li>
                                                <li><a class="dropdown-item" href="javascript:void(0);"
                                                        data-type="pdf">PDF</a></li>
                                                <li><a class="dropdown-item" href="javascript:void(0);"
                                                        data-type="excel">Excel</a>
                                                </li>
                                            </ul>
                                        </div>
                                        <input type="hidden" id="typefile" name="typefile">
                                    </form>
                                    <a href="#" type="button" data-bs-toggle="modal" data-bs-target="#addRoleModal"
                                        class="btn btn-primary waves-effect waves-light ms-2">+Tambah</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-datatable table-responsive">
                        <table id="roletable" class="datatables-users table border-top">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Nama</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
                    <div class="card-header border-bottom">
                        <div class="d-flex justify-content-between">
                            <h4 class="fw-bold"> Menu </h4>
                            <div class="card-title mb-3">
                                <a href="#" type="button" data-bs-toggle="modal" data-bs-target="#addMenuModal"
                                    class="btn btn-primary waves-effect waves-light">+ Tambah Menu</a>
                            </div>
                        </div>
                    </div>
                    <div class="card-datatable table-responsive">
                        <table id="menutable" class="datatables-users table border-top">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Menu</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>

            </div>

            {{-- modal Role --}}
            <div class="modal" id="addRoleModal" tabindex="-1">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header ">
                            <h5 class="modal-title">Tambah Role</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="overflow-x-auto">
                                <div class="col-12 mb-2">
                                    <label class="form-label" for="code">Code</label>
                                    <input type="text" placeholder="Masukan Code Role" id="code"
                                        class="form-control" name="code" required autofocus>
                                </div>
                                <div class="col-12 mb-1">
                                    <label class="form-label" for="name">Nama</label>
                                    <input type="text" placeholder="Masukan Nama Role" id="name"
                                        class="form-control" name="name" required autofocus>
                                </div>
                                <div class="col-12 mb-1">
                                    <label class="form-label" for="name">Tipe Role</label>
                                    <select class="select2 form-select" id="typerole" name="typerole"
                                        data-placeholder="Pilih Tipe Role">
                                        <option value="">Pilih Tipe Role</option>
                                        <option value="operator">Operator</option>
                                        <option value="eksekutif">Eksekutif</option>
                                        <option value="pengguna">Pengguna</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button id="addRole" type="button" onclick="addRole()"
                                class="btn btn-primary waves-effect waves-light m-2">Simpan</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal" id="editRoleModal" tabindex="-1">
                <input type="hidden" id="editRoleId">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Edit Role</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="overflow-x-auto">
                                <div class="col-12 mb-2">
                                    <label class="form-label" for="codeEdit">Code</label>
                                    <input type="text" placeholder="Masukan Code Role" id="codeEdit"
                                        class="form-control" required autofocus>
                                </div>
                                <div class="col-12 mb-1">
                                    <label class="form-label" for="nameEdit">Nama</label>
                                    <input type="text" placeholder="Masukan Nama Role" id="nameEdit"
                                        class="form-control" required autofocus>
                                </div>
                                <div class="col-12 mb-1">
                                    <label class="form-label" for="typeroleEdit">Tipe Role</label>
                                    <select class="select2 form-select" id="typeroleEdit" name="typeroleEdit"
                                        data-placeholder="Pilih Tipe Role">
                                        <option value="">Pilih Tipe Role</option>
                                        <option value="operator">Operator</option>
                                        <option value="eksekutif">Eksekutif</option>
                                        <option value="pengguna">Pengguna</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            <button id="updateRole" type="button" onclick="editRole()"
                                class="btn btn-primary waves-effect waves-light m-2">Simpan</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal" id="rolemenumodal" data-bs-backdrop="static" tabindex="-1">
                <input type="hidden" id="modal-id-input">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header border-bottom">
                            <h5 class="modal-title">Setting Role</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="overflow-x-auto">
                                <div class="row mb-2">
                                    <div class="col-md-5">
                                        <input type="text" name="" id="namerole" class="form-control"
                                            disabled>
                                    </div>
                                    <div class="col-md-5">
                                        <select id="menuid" name="menuid" class="select2 form-select"
                                            data-placeholder="Masukan Menu" disabled>
                                        </select>
                                    </div>
                                    <div class="col-md-2">
                                        <button id="addRole" type="button" onclick="addRoleMenu()"
                                            class="btn btn-primary waves-effect waves-light"><i
                                                class='bx bx-save'></i></button>
                                    </div>
                                </div>

                                <div class="card-datatable table-responsive border-top">
                                    <table id="rolemenutable" class=" table">
                                        <thead>
                                            <tr>
                                                <th>No</th>
                                                <th>Menu</th>
                                                <th>Aksi</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                        </tbody>

                                    </table>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal" id="editNameMenuModal" data-bs-backdrop="static" tabindex="-1">
                <input type="hidden" id="RoleIdNameMenu">
                <input type="hidden" id="MenuIdNameMenu">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Edit Nama Menu</h5>
                            <button type="button" class="btn-close closeNameMenuModal"></button>
                        </div>
                        <div class="modal-body">
                            <div class="overflow-x-auto">
                                <div class="col-12 mb-2">
                                    <label class="form-label" for="titlemenu">Nama Menu</label>
                                    <input type="text" placeholder="Masukan Code Role" id="titlemenu"
                                        class="form-control" required>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary closeNameMenuModal">Close</button>
                            <button type="button" class="btn btn-primary waves-effect waves-light m-2"
                                onclick="editNameMenu()">Simpan</button>
                        </div>
                    </div>
                </div>
            </div>
            {{-- end modal Role --}}

            {{-- modal Menu --}}
            <div class="modal" id="addMenuModal" tabindex="-1">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header ">
                            <h5 class="modal-title">Tambah Menu</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"
                                aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <div class="overflow-x-auto">