@extends('admin')

@push('after-style')
<style>
    td {
        text-align: center;
    }

    tr {
        text-align: center;
    }

    .float-end {
        float: right;
        margin-bottom: 10px;
    }
</style>
@endpush

@push('header')
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0 text-dark">Tambah Role</h1>
            </div><!-- /.col -->
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="#">Home</a></li>
                    <li class="breadcrumb-item">Role</li>
                    <li class="breadcrumb-item active">Tambah Role</li>
                </ol>
            </div><!-- /.col -->
        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
@endpush

@section('content')
<!-- Small boxes (Stat box) -->
<div class="row">
    <div class="col-lg-12 col-12 col-md-12">
        <div class="card">
            <div class="card-header">
                <!-- <h3 class="card-title">DataTable with default features</h3> -->
            </div>
            <!-- /.card-header -->
            <form action="{{ url('admin/role/create') }}" method="POST">
                {{ csrf_field() }}
                <div class="card-body">
                    <div class="row">
                        <div class="col-6">
                            <div class="form-group">
                                <label>Nama Role</label>
                                <input type="text" class="form-control" name="name" id="name" required>
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="form-group">
                                <label>Unit</label>
                                <select name="unit_id" onchange="change_prodi(this.value)" class="form-control">
                                                                    </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <div class="form-group">
                                <label for="">Akses Menu</label>
                                <div class="float-end">
                                    <button class="btn btn-success" type="button" onclick="check_all()"><i class="fa fa-check"></i>
                                        check
                                        all</button>
                                    <button class="btn btn-danger" type="button" onclick="uncheck_all()"><i class="fa fa-times"></i> uncheck
                                        all</button>
                                </div>
                                <div class="table-responsive">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <td>#</td>
                                                <td style="text-align: left;">Menu</td>
                                                <td>View</td>
                                                <td>Add</td>
                                                <td>Edit</td>
                                                <td>Delete</td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                                                                    </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.card-body -->
                <div class="card-footer">
                    <div style="width:100%;">
                        <a class="btn  btn-secondary" href="{{ url('admin/role') }}"><span class="btn-icon-start text-secondary"><i class="fa fa-arrow-left-long color-secondary"></i>
                            </span>Kembali</a>
                        <button class="btn  btn-info float-end mb-3" type="submit"><i class="fa fa-save"></i>
                            Simpan</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@push('after-script')

<script>
    function select_c(id) {
        var checked = $('input:checkbox[name=cbView' + id + ']:checked').val();
        if (!checked) {
            $('input:checkbox[name=cbAdd' + id + ']:checked').prop('checked', false);
            $('input:checkbox[name=cbEdit' + id + ']:checked').prop('checked', false);
            $('input:checkbox[name=cbDelete' + id + ']:checked').prop('checked', false);
        }
    }

    function check_all() {
        $('input:checkbox').prop('checked', true);
        var prodi = $('select[name=unit_id]').val();
        console.log(prodi);
        if (prodi != "") {
            console.log('sini');
            $('input.only-prodi:checkbox').prop('checked', false);
        }
    }

    function uncheck_all() {
        $('input:checkbox').prop('checked', false);
    }

    function change_prodi(val) {
        if (val != "") {
            $('input.only-prodi:checkbox').prop('checked', false);
            $('input.only-prodi:checkbox').prop('disabled', true);
        } else {
            $('input.only-prodi:checkbox').prop('checked', true);
            $('input:checkbox').prop('disabled', false);
        }
    }
</script>
@endpush