@extends('layouts.main')
@section('title', 'Manage Role')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="/">Home</a></li>
    <li class="breadcrumb-item active">Manage Role</li>
@endsection

@section('content')

    <script src="{{ env('APP_PREFIX') }}/js/lookup.js"></script>

    <div class="row">

        <div class="col-lg-12">
            <div class="card-box">

                <div class="row">
                    <div class="col-sm-3">
                        <div class="nav flex-column nav-pills nav-pills-tab" id="v-pills-tab" role="tablist" aria-orientation="vertical">

                            <a class="nav-link active show mb-2" id="role_tab" data-toggle="pill" href="#role" role="tab" aria-selected="true">
                                Roles
                            </a>

                            <a class="nav-link mb-2" id="designations_tab" data-toggle="pill" href="#designations" role="tab" aria-selected="false">
                                Designations
                            </a>

                        </div>
                    </div>

                    <div class="col-sm-9">

                        <div class="tab-content pt-0">

                            <div class="tab-pane fade active show" id="role" role="tabpanel" aria-labelledby="role_tab">

                                <button type="button" class="btn btn-sm btn-dark waves-effect waves-light float-right" data-toggle="modal" data-target="#add_role_modal">
                                    <i class="mdi mdi-plus-circle mr-1"></i> Add New Role
                                </button>
                                <h4 class="header-title mb-2 mt-1">Roles</h4>

                                <div class="table-responsive">
                                    <table class="table table-hover mt-2">

                                        <thead class="thead-light">
                                        <tr>
                                            <th>#</th>
                                            <th>Role Name</th>
                                            <th width="30%">Action</th>
                                        </tr>
                                        </thead>

                                        <tbody id="role_table">

                                        @foreach($roles as $role)

                                            <tr id="role_{{ $role->role_id }}">
                                                <th scope="row">{{ $loop->index + 1 }}</th>
                                                <td id="role_name_{{ $role->role_id }}">{{ ucwords($role->role_name) }}</td>
                                                <td>
                                                    <button type="button" class="btn btn-blue waves-effect waves-light"
                                                            onclick="editRole('{{ $role->role_id }}', '{{ $role->role_name }}')">
                                                        <i class="fe-edit"></i>
                                                    </button>
                                                    <button type="button" class="btn btn-danger waves-effect waves-light"
                                                            onclick="deleteRole({{ $role->role_id }})">
                                                        <i class="fe-trash-2"></i>
                                                    </button>
                                                </td>
                                            </tr>

                                        @endforeach


                                        </tbody>
                                    </table>
                                </div>

                            </div>

                            <div class="tab-pane fade" id="designations" role="tabpanel" aria-labelledby="designations_tab">

                                <button type="button" class="btn btn-sm btn-dark waves-effect waves-light float-right" data-toggle="modal" data-target="#add_designation_modal">
                                    <i class="mdi mdi-plus-circle mr-1"></i> Add New Designation
                                </button>

                                <h4 class="header-title mb-2 mt-1">Designations</h4>

                                <div class="table-responsive">
                                    <table class="table table-hover mt-2">

                                        <thead class="thead-light">
                                        <tr>
                                            <th>#</th>
                                            <th>Designation Name</th>
                                            <th width="30%">Action</th>
                                        </tr>
                                        </thead>

                                        <tbody id="designation_table">

                                        @foreach($designations as $designation)

                                            <tr id="designation_{{ $designation->designation_id }}">
                                                <th scope="row">{{ $loop->index + 1 }}</th>
                                                <td id="designation_name_{{ $designation->designation_id }}">{{ $designation->designation_name }}</td>
                                                <td>
                                                    <button type="button" class="btn btn-blue waves-effect waves-light"
                                                            onclick="editDesignation('{{ $designation->designation_id }}', '{{ $designation->designation_name }}')">
                                                        <i class="fe-edit"></i>
                                                    </button>

                                                    <button type="button" class="btn btn-danger waves-effect waves-light"
                                                            onclick="deleteDesignation({{ $designation->designation_id }})">
                                                        <i class="fe-trash-2"></i>
                                                    </button>
                                                </td>
                                            </tr>

                                        @endforeach


                                        </tbody>
                                    </table>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>

    <div id="add_role_modal" class="modal bounceInDown animated">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Add New Role</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="modal-body p-4">

                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="role_name" class="control-label">Role Name</label>
                                <input type="text" class="form-control" id="role_name">
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-blue waves-effect waves-light" data-dismiss="modal" id="add_role_button">Save</button>
                </div>
            </div>
        </div>
    </div>

    <div id="edit_role_modal" class="modal bounceInDown animated">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Edit Role</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="modal-body p-4">

                    <input type="hidden" class="form-control" id="edit_role_id">

                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="role_name" class="control-label">Role Name</label>
                                <input type="text" class="form-control" id="edit_role_name">
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-blue waves-effect waves-light" data-dismiss="modal" id="edit_role_button">Save</button>
                </div>
            </div>
        </div>
    </div>

    <div id="add_designation_modal" class="modal bounceInDown animated">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Add New Designation</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="modal-body p-4">

                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="designation_name" class="control-label">Designation Name</label>
                                <input type="text" class="form-control" id="designation_name">
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-blue waves-effect waves-light" data-dismiss="modal" id="add_designation_button">Save</button>
                </div>
            </div>
        </div>
    </div>

    <div id="edit_designation_modal" class="modal bounceInDown animated">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Edit Designation</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="modal-body p-4">

                    <input type="hidden" class="form-control" id="designation_id">

                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="edit_designation_name" class="control-label">Designation Name</label>
                                <input type="text" class="form-control" id="edit_designation_name">
                            </div>
                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-blue waves-effect waves-light" data-dismiss="modal" id="edit_designation_button">Save</button>
                </div>
            </div>
        </div>
    </div>


@endsection