@extends('admin.layout')

@section('content')
    <section ng-controller="editAuthorizeController">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <div class="table-responsive table-responsive-data2">
                        <h5>Thông tin user</h5>
                        <table class="table table-data2">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>Tên</th>
                                <th>Email</th>
                                <th>SDT</th>
                                <th>Quyền</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="tr-shadow" >
                                <td>#{{$user->id}}</td>
                                <td>{{$user->name}}</td>
                                <td>
                                    <span class="block-email">{{$user->email}}</span>
                                </td>

                                <td>{{$user->phone_number}}</td>
                                <td>Hiện tại có {{$user->authorizationScopes->count()}} quyền</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <!-- END DATA TABLE -->
                </div>

                {{--<div class="col-md-12 mt-5 sticky-top" style="top: 80px;">--}}

                <div class="col-md-12 mt-3">
                    <div class="table-data__tool">
                        <div class="table-data__tool-left">

                        </div>
                        <div class="table-data__tool-right">
                            <div class="rs-select2--dark rs-select2--md rs-select2--dark2" ng-init="initialPolicies({{$au_policies}})">
                                <select class="js-select2"
                                        ng-options="policy.name disable when policy.id == -1 for policy in policies track by policy.id"
                                        ng-model="selectedPolicy"
                                        ng-change="onSelectPolicy()">
                                </select>
                                <div class="dropDownSelect2"></div>
                            </div>
                            <a class="au-btn au-btn-icon au-btn--green au-btn--small" data-toggle="modal" href="#add-authorize-modal">
                                <i class="zmdi zmdi-plus"></i>Thêm quyền
                            </a>
                            <a class="au-btn au-btn-icon au-btn--green au-btn--small" data-toggle="modal" href="#add-authorize-policy">
                                <i class="zmdi zmdi-plus"></i>Lưu nhóm quyền
                            </a>
                            <button class="au-btn au-btn-icon au-btn--blue au-btn--small" type="button" ng-click="onSubmitTable()">Xác nhận</button>
                        </div>
                    </div>
                </div>



                <div class="col-md-12 mt-2">
                    @php
                        $selected_scopes = [];
                        foreach ($user->authorizationScopes as $u_s) {
                            $selected_scopes[] = $u_s->id;
                        }
                    @endphp
                    <form action="save-authorization" method="post" name="save-authorization-form">
                        {{csrf_field()}}
                        <input type="hidden" value="{{$user->id}}" name="id">
                        <input type="hidden" name="policy_name" ng-model="selectedPolicy.name">
                        <div class="table-responsive table-responsive-data2">
                            <h5>Thông tin quyền</h5>
                            <table class="table table-data2">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Quyền</th>
                                    <th>Select</th>
                                </tr>
                                </thead>
                                <tbody id="list-scopes">
                                @foreach($au_scopes as $scope)
                                    <tr class="tr-shadow" >
                                        <td>#{{$scope->id}}</td>
                                        <td>{{$scope->title}}</td>
                                        <td><label class="form-check-label"><input type="checkbox"
                                                                                   name="scopes[]"
                                                                                   @if(in_array($scope->id, $selected_scopes)) checked @endif
                                                                                   value="{{$scope->id}}"/>&nbsp;</label></td>
                                    </tr>
                                @endforeach
                                </tbody>
                            </table>
                        </div>
                    </form>

                    <!-- END DATA TABLE -->
                </div>
            </div>
        </div>

        <div class="modal fade" id="add-authorize-modal" tabindex="-1" role="dialog" aria-labelledby="staticModalLabel" aria-hidden="true"
             data-backdrop="static">
            <div class="modal-dialog modal-lg" style="top: 50px" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        Thêm quyền truy cập
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" name="add-authorization-form">
                            <div class="card-body card-block">
                                <div class="row">
                                    <div class="col-8">
                                        <div class="row form-group">
                                            <div class="col col-md-3">
                                                <label class="form-control-label">Url <em class="red-color">*</em></label>
                                            </div>
                                            <div class="col-12 col-md-9">
                                                <input type="text" name="url" placeholder="Url" class="form-control" ng-model="newAuthorizationData.url">
                                            </div>
                                        </div>

                                        <div class="row form-group">
                                            <div class="col col-md-3">
                                                <label class="form-control-label">Tên quyền <em class="red-color">*</em></label>
                                            </div>
                                            <div class="col-12 col-md-9">
                                                <input type="text" placeholder="Tên quyền" ng-model="newAuthorizationData.title" class="form-control">
                                            </div>
                                        </div>
                                        <div class="row form-group">
                                            <div class="col col-md-3">
                                                <label class="form-control-label">&nbsp;</label>
                                            </div>
                                            <div class="col-12 col-md-9">
                                                <button type="button" class="btn btn-primary btn-sm" ng-click="addAuthorization()">
                                                    <i class="fa fa-dot-circle-o"></i> Xác nhận
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal" data-target="#add-authorize-modal">Đóng</button>
                    </div>
                </div>
            </div>
        </div>

        <div class="modal fade" id="add-authorize-policy" tabindex="-1" role="dialog" aria-labelledby="staticModalLabel" aria-hidden="true"
             data-backdrop="static">
            <div class="modal-dialog modal-lg" style="top: 50px" role="document">
                <div class="modal-content">
                    <div class="modal-header" style="display: block">
                        Lưu nhóm quyền
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" name="add-authorization-form">
                            <div class="card-body card-block">
                                <div class="row">
                                    <div class="col-8">
                                        <div class="row form-group">
                                            <div class="col col-md-3">
                                                <label class="form-control-label">Tên nhóm quyền <em class="red-color">*</em></label>
                                            </div>
                                            <div class="col-12 col-md-9">
                                                <input type="text" placeholder="Tên nhóm quyền" class="form-control" ng-model="newPolicy.name">
                                            </div>
                                        </div>
                                        <div class="row form-group">
                                            <div class="col col-md-3">
                                                <label class="form-control-label">&nbsp;</label>
                                            </div>
                                            <div class="col-12 col-md-9">
                                                <button type="button" class="btn btn-primary btn-sm" ng-click="addPolicy()">
                                                    <i class="fa fa-dot-circle-o"></i> Lưu
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal" data-target="review-detail-modal">Đóng</button>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="bluecare-btt-container" id="back-to-top">
        <button class="btn btn-secondary blue-care-btt-btn">
            <i class="fa fa-arrow-up"></i>
        </button>
    </div>
@endsection