@extends('admin::layouts.master')

@section('title')
@lang('translation.Roles') / Add
@endsection

@section('css')
<!-- DataTables -->
<link href="{{ URL::asset('themes/backend/custom/build/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ URL::asset('themes/backend/custom/build/libs/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
<!-- Responsive datatable examples -->
<link href="{{ URL::asset('themes/backend/custom/build/libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css') }}" rel="stylesheet" type="text/css" />
@endsection

@section('content')
@component('admin::components.breadcrumb')
@slot('li_1')
<a href="{{ route('admin.role.index') }}">Roles</a>
@endslot
@slot('title')
Add Role
@endslot
@endcomponent

@if ($text = Session::get('success'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
    {{ $text }}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@elseif ($text = Session::get('error'))
<div class="alert alert-danger alert-dismissible fade show" role="alert">
    {{ $text }}
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <form id="role" action="{{ route('admin.role.store') }}" method="POST">
                    @csrf
                    <div class="row">
                        <div class="col-md-12">
                            <div class="mb-3">
                                <label for="name">Name</label> <span class="required">*</span>
                                <input type="text" name="name" class="form-control" id="name" placeholder="Enter Name">
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="mb-3">
                                <div class="form-check form-check-info mb-3">
                                    <input class="form-check-input select_all" type="checkbox" id="checkboxInfoSelectAll">
                                    <label class="form-check-label" for="checkboxInfoSelectAll">Select All</label>
                                </div>
                            </div>
                        </div>
                        <table class="table table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>Menu</th>
                                    <th>View</th>
                                    <th>Add</th>
                                    <th>Edit</th>
                                    <th>Delete</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>Admin</td>
                                    <td>
                                        <div class="form-check form-check-info mb-3">
                                            <input class="form-check-input" type="checkbox" id="checkboxInfoAdmin" name="action[admin][]" value="view">
                                            <label class="form-check-label" for="checkboxInfoAdmin"></label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-check form-check-success mb-3">
                                            <input class="form-check-input" type="checkbox" id="checkboxSuccessAdmin" name="action[admin][]" value="add">
                                            <label class="form-check-label" for="checkboxSuccessAdmin"></label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-check form-check-primary mb-3">
                                            <input class="form-check-input" type="checkbox" id="checkboxPrimaryAdmin" name="action[admin][]" value="edit">
                                            <label class="form-check-label" for="checkboxPrimaryAdmin"></label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-check form-check-danger mb-3">
                                            <input class="form-check-input" type="checkbox" id="checkboxDangerAdmin" name="action[admin][]" value="delete">
                                            <label class="form-check-label" for="checkboxDangerAdmin"></label>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Role</td>
                                    <td>
                                        <div class="form-check form-check-info mb-3">
                                            <input class="form-check-input" type="checkbox" id="checkboxInfoRole" name="action[role][]" value="view">
                                            <label class="form-check-label" for="checkboxInfoRole"></label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-check form-check-success mb-3">
                                            <input class="form-check-input" type="checkbox" id="checkboxSuccessRole" name="action[role][]" value="add">
                                            <label class="form-check-label" for="checkboxSuccessRole"></label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-check form-check-primary mb-3">
                                            <input class="form-check-input" type="checkbox" id="checkboxPrimaryRole" name="action[role][]" value="edit">
                                            <label class="form-check-label" for="checkboxPrimaryRole"></label>
                                        </div>
                                    </td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>Settings</td>
                                    <td>
                                        <div class="form-check form-check-info mb-3">
                                            <input class="form-check-input" type="checkbox" id="checkboxInfoSetting" name="action[setting][]" value="view">
                                            <label class="form-check-label" for="checkboxInfoSetting"></label>
                                        </div>
                                    </td>
                                    <td></td>
                                    <td>
                                        <div class="form-check form-check-primary mb-3">
                                            <input class="form-check-input" type="checkbox" id="checkboxPrimarySetting" name="action[setting][]" value="edit">
                                            <label class="form-check-label" for="checkboxPrimarySetting"></label>
                                        </div>
                                    </td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>Countries</td>
                                    <td>
                                        <div class="form-check form-check-info mb-3">
                                            <input class="form-check-input" type="checkbox" id="checkboxInfoCountries" name="action[country][]" value="view">
                                            <label class="form-check-label" for="checkboxInfoCountries"></label>
                                        </div>
                                    </td>
                                    <td></td>
                                    <td>
                                        <div class="form-check form-check-primary mb-3">
                                            <input class="form-check-input" type="checkbox" id="checkboxPrimaryCountries" name="action[country][]" value="edit">
                                            <label class="form-check-label" for="checkboxPrimaryCountries"></label>
                                        </div>
                                    </td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>Level</td>
                                    <td>
                                        <div class="form-check form-check-info mb-3">
                                            <input class="form-check-input" type="checkbox" id="checkboxInfoLevel" name="action[level][]" value="view">
                                            <label class="form-check-label" for="checkboxInfoLevel"></label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-check form-check-success mb-3">
                                            <input class="form-check-input" type="checkbox" id="checkboxSuccessLevel" name="action[level][]" value="add">
                                            <label class="form-check-label" for="checkboxSuccessLevel"></label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-check form-check-primary mb-3">
                                            <input class="form-check-input" type="checkbox" id="checkboxPrimaryLevel" name="action[level][]" value="edit">
                                            <label class="form-check-label" for="checkboxPrimaryLevel"></label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-check form-check-danger mb-3">
                                            <input class="form-check-input" type="checkbox" id="checkboxDangerLevel" name="action[level][]" value="delete">
                                            <label class="form-check-label" for="checkboxDangerLevel"></label>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Discipline</td>
                                    <td>
                                        <div class="form-check form-check-info mb-3">
                                            <input class="form-check-input" type="checkbox" id="checkboxInfoDiscipline" name="action[discipline][]" value="view">
                                            <label class="form-check-label" for="checkboxInfoDiscipline"></label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-check form-check-success mb-3">
                                            <input class="form-check-input" type="checkbox" id="checkboxSuccessDiscipline" name="action[discipline][]" value="add">
                                            <label class="form-check-label" for="checkboxSuccessDiscipline"></label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-check form-check-primary mb-3">
                                            <input class="form-check-input" type="checkbox" id="checkboxPrimaryDiscipline" name="action[discipline][]" value="edit">
                                            <label class="form-check-label" for="checkboxPrimaryDiscipline"></label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-check form-check-danger mb-3">
                                            <input class="form-check-input" type="checkbox" id="checkboxDangerDiscipline" name="action[discipline][]" value="delete">
                                            <label class="form-check-label" for="checkboxDangerDiscipline"></label>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>University</td>
                                    <td>
                                        <div class="form-check form-check-info mb-3">
                                            <input class="form-check-input" type="checkbox" id="checkboxInfoUniversity" name="action[university][]" value="view">
                                            <label class="form-check-label" for="checkboxInfoUniversity"></label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-check form-check-success mb-3">
                                            <input class="form-check-input" type="checkbox" id="checkboxSuccessUniversity" name="action[university][]" value="add">
                                            <label class="form-check-label" for="checkboxSuccessUniversity"></label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-check form-check-primary mb-3">
                                            <input class="form-check-input" type="checkbox" id="checkboxPrimaryUniversity" name="action[university][]" value="edit">
                                            <label class="form-check-label" for="checkboxPrimaryUniversity"></label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-check form-check-danger mb-3">
                                            <input class="form-check-input" type="checkbox" id="checkboxDangerUniversity" name="action[university][]" value="delete">
                                            <label class="form-check-label" for="checkboxDangerUniversity"></label>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Test Type</td>
                                    <td>
                                        <div class="form-check form-check-info mb-3">
                                            <input class="form-check-input" type="checkbox" id="checkboxInfoTestType" name="action[test_type][]" value="view">
                                            <label class="form-check-label" for="checkboxInfoTestType"></label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-check form-check-success mb-3">
                                            <input class="form-check-input" type="checkbox" id="checkboxSuccessTestType" name="action[test_type][]" value="add">
                                            <label class="form-check-label" for="checkboxSuccessTestType"></label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-check form-check-primary mb-3">
                                            <input class="form-check-input" type="checkbox" id="checkboxPrimaryTestType" name="action[test_type][]" value="edit">
                                            <label class="form-check-label" for="checkboxPrimaryTestType"></label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-check form-check-danger mb-3">
                                            <input class="form-check-input" type="checkbox" id="checkboxDangerTestType" name="action[test_type][]" value="delete">
                                            <label class="form-check-label" for="checkboxDangerTestType"></label>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Test</td>
                                    <td>
                                        <div class="form-check form-check-info mb-3">
                                            <input class="form-check-input" type="checkbox" id="checkboxInfoTest" name="action[test][]" value="view">
                                            <label class="form-check-label" for="checkboxInfoTest"></label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-check form-check-success mb-3">
                                            <input class="form-check-input" type="checkbox" id="checkboxSuccessTest" name="action[test][]" value="add">
                                            <label class="form-check-label" for="checkboxSuccessTest"></label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-check form-check-primary mb-3">
                                            <input class="form-check-input" type="checkbox" id="checkboxPrimaryTest" name="action[test][]" value="edit">
                                            <label class="form-check-label" for="checkboxPrimaryTest"></label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-check form-check-danger mb-3">
                                            <input class="form-check-input" type="checkbox" id="checkboxDangerTest" name="action[test][]" value="delete">
                                            <label class="form-check-label" for="checkboxDangerTest"></label>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Test Score Type</td>
                                    <td>
                                        <div class="form-check form-check-info mb-3">
                                            <input class="form-check-input" type="checkbox" id="checkboxInfoTestScoreType" name="action[test_score_type][]" value="view">
                                            <label class="form-check-label" for="checkboxInfoTestScoreType"></label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-check form-check-success mb-3">
                                            <input class="form-check-input" type="checkbox" id="checkboxSuccessTestScoreType" name="action[test_score_type][]" value="add">
                                            <label class="form-check-label" for="checkboxSuccessTestScoreType"></label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-check form-check-primary mb-3">
                                            <input class="form-check-input" type="checkbox" id="checkboxPrimaryTestScoreType" name="action[test_score_type][]" value="edit">
                                            <label class="form-check-label" for="checkboxPrimaryTestScoreType"></label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-check form-check-danger mb-3">
                                            <input class="form-check-input" type="checkbox" id="checkboxDangerTestScoreType" name="action[test_score_type][]" value="delete">
                                            <label class="form-check-label" for="checkboxDangerTestScoreType"></label>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Course</td>
                                    <td>
                                        <div class="form-check form-check-info mb-3">
                                            <input class="form-check-input" type="checkbox" id="checkboxInfoCourse" name="action[course][]" value="view">
                                            <label class="form-check-label" for="checkboxInfoCourse"></label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-check form-check-success mb-3">
                                            <input class="form-check-input" type="checkbox" id="checkboxSuccessCourse" name="action[course][]" value="add">
                                            <label class="form-check-label" for="checkboxSuccessCourse"></label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-check form-check-primary mb-3">
                                            <input class="form-check-input" type="checkbox" id="checkboxPrimaryCourse" name="action[course][]" value="edit">
                                            <label class="form-check-label" for="checkboxPrimaryCourse"></label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-check form-check-danger mb-3">
                                            <input class="form-check-input" type="checkbox" id="checkboxDangerCourse" name="action[course][]" value="delete">
                                            <label class="form-check-label" for="checkboxDangerCourse"></label>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>Degree</td>
                                    <td>
                                        <div class="form-check form-check-info mb-3">
                                            <input class="form-check-input" type="checkbox" id="checkboxInfoDegree" name="action[degree][]" value="view">
                                            <label class="form-check-label" for="checkboxInfoDegree"></label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-check form-check-success mb-3">
                                            <input class="form-check-input" type="checkbox" id="checkboxSuccessDegree" name="action[degree][]" value="add">
                                            <label class="form-check-label" for="checkboxSuccessDegree"></label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-check form-check-primary mb-3">
                                            <input class="form-check-input" type="checkbox" id="checkboxPrimaryDegree" name="action[degree][]" value="edit">
                                            <label class="form-check-label" for="checkboxPrimaryDegree"></label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="form-check form-check-danger mb-3">
                                            <input class="form-check-input" type="checkbox" id="checkboxDangerDegree" name="action[degree][]" value="delete">
                                            <label class="form-check-label" for="checkboxDangerDegree"></label>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th>Menu</th>
                                    <th>View</th>
                                    <th>Add</th>
                                    <th>Edit</th>
                                    <th>Delete</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                    <div class="col-md-12">
                            <div class="mb-3">
                                <label for="status">Status</label> <span class="required">*</span>
                                <select name="status" class="form-control">
                                    <option value="1" selected>Active</option>
                                    <option value="0">Inactive</option>
                                </select>
                            </div>
                        </div>
                    <div>
                        <button class="btn btn-primary" type="submit">Submit</button>
                    </div>
                </form>
            </div>
        </div>
    </div> <!-- end col -->
</div> <!-- end row -->
@endsection
@section('script')
<!-- jquery-validation -->
<script src="{{ asset('themes/backend/custom/build/libs/jquery-validation/jquery.validate.min.js') }}"></script>

<script>
    $(function() {
        $('#role').validate({
            rules: {
                name: {
                    required: true,
                },
            },
            messages: {
                name: "Please enter name",
            },
            errorElement: 'span',
            errorPlacement: function(error, element) {
                error.addClass('invalid-feedback');
                element.closest('.form-group').append(error);
            },
            highlight: function(element, errorClass, validClass) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function(element, errorClass, validClass) {
                $(element).removeClass('is-invalid');
            }
        });
    });

    $(".select_all").click(function() {
        $('input:checkbox').not(this).prop('checked', this.checked);
    });

    //deselect "checked all", if one of the listed checkbox category is unchecked amd select "checked all" if all of the listed checkbox category is checked
    $('.checkbox').change(function() { //".checkbox" change 
        if ($('.checkbox:checked').length == $('.checkbox').length) {
            $('.select_all').prop('checked', true);
        } else {
            $('.select_all').prop('checked', false);
        }
    });
</script>
@endsection