@extends('admin.layout')

@section('content')
    <section ng-controller="editPolicyController">
        <div class="container-fluid">
            <div class="row">
                @if (session('success_message'))
                    <div class="alert alert-success">
                        {{ session('success_message') }}
                    </div>
                @endif
                @if (session('error_message'))
                    <div class="alert alert-danger">
                        {{ session('error_message') }}
                    </div>
                @endif
                <div class="col-md-12">
                    <!-- DATA TABLE -->
                    <div class="card">
                        <div class="default-tab">
                            <nav>
                                <div class="nav nav-tabs" id="nav-tab" role="tablist">
                                    <a class="nav-item nav-link active show" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="false">Chi tiết nhóm quyền</a>
                                    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Thành viên</a>
                                </div>
                            </nav>
                            <div class="tab-content pl-3 pt-2" id="nav-tabContent">
                                <div class="tab-pane fade active show" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
                                    <form class="form-horizontal" action="save-policy" method="post" enctype="multipart/form-data">
                                        {{ csrf_field() }}
                                        <input type="hidden" value="{{$policy->id}}" name="id">
                                        <div class="card-body card-block">
                                            <div class="row form-group">
                                                <div class="col col-md-3">
                                                    <label for="text-input" class=" form-control-label">Tên nhóm<em class="red-color">*</em></label>
                                                </div>
                                                <div class="col-12 col-md-9">
                                                    <input type="text" name="name" placeholder="Tên nhóm quyền" value="{{old('name') ? old('name') : $policy->name}}" class="form-control @if($errors->has('name'))is-invalid @endif">
                                                    @if($errors->has('name'))
                                                        <small class="text-danger">{{$errors->get('name')[0]}}</small>
                                                    @endif

                                                </div>
                                            </div>
                                            <div class="row form-group">
                                                <div class="col col-md-3">
                                                    <label for="email-input" class=" form-control-label">Quyền<em class="red-color">*</em></label>
                                                </div>
                                                <div class="col-12 col-md-9">
                                                    <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="scope_ids[]"
                                                                               @if(old('scope_ids') && in_array($scope->id, old('scope_ids'))) checked
                                                                               @elseif (in_array($scope->id, $activate_scope_ids)) checked
                                                                               @endif
                                                                               value="{{$scope->id}}"/>&nbsp;
                                                                    </label>
                                                                </td>
                                                            </tr>
                                                        @endforeach
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="card-footer text-right">
                                            <button type="submit" class="btn btn-primary btn-sm">
                                                <i class="fa fa-dot-circle-o"></i> Submit
                                            </button>
                                            <button type="reset" class="btn btn-danger btn-sm">
                                                <i class="fa fa-ban"></i> Reset
                                            </button>
                                        </div>
                                    </form>
                                </div>

                                <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
                                    <div class="row mt-4">
                                        <div class="col-md-12">
                                            <!-- DATA TABLE -->
                                            <div class="table-data__tool">
                                                <div class="table-data__tool-right">
                                                    <a class="au-btn au-btn-icon au-btn--green au-btn--small btn-sm" href="#users-modal" data-toggle="modal">
                                                        <i class="zmdi zmdi-plus"></i>Thêm thành viên
                                                    </a>
                                                </div>
                                            </div>
                                            <div class="table-responsive table-responsive-data2">
                                                <table class="table table-data2">
                                                    <thead>
                                                    <tr>
                                                        <th>ID</th>
                                                        <th>Tên</th>
                                                        <th>Email</th>
                                                        <th>Đăng nhập lần cuối</th>
                                                        @if ($policy->id == 1)
                                                            <th>Danh sách nhóm Service</th>
                                                            <th></th>
                                                        @endif
                                                        <th></th>
                                                    </tr>
                                                    </thead>
                                                    <tbody id="member-list" ng-init="initialRecentUser({{$policy->users}})">
                                                        <tr class="tr-shadow" ng-repeat="us in recent_users">
                                                            <td style="vertical-align: middle;">{<>us.id<>}</td>
                                                            <td>{<>us.name<>}</td>
                                                            <td>
                                                                <span class="block-email">{<>us.email<>}</span>
                                                            </td>
                                                            <td>{<>us.logged_at<>}</td>
                                                            @if ($policy->id == 1)
                                                                <td>
                                                                    <ul>
                                                                        <li ng-repeat="service_name in us.sale_service_names">
                                                                            {<> service_name <>}
                                                                        </li>
                                                                    </ul>
                                                                </td>
                                                                <td>
                                                                    <div class="table-data-feature">
                                                                        <a class="item" href="edit-service-scope?id={<>us.id<>}" data-toggle="tooltip" data-placement="top" title="Edit">
                                                                            <i class="zmdi zmdi-edit"></i>
                                                                        </a>
                                                                    </div>
                                                                </td>
                                                            @endif
                                                            <td>
                                                                <div class="table-data-feature">
                                                                    <button class="item" data-toggle="tooltip" ng-click="banUserFromPolicy(us)"  data-placement="top" title="Delete">
                                                                        <i class="zmdi zmdi-delete"></i>
                                                                    </button>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                            <!-- END DATA TABLE -->
                                        </div>
                                    </div>
                                </div>
                            </div>

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

        <!-- USERS MODAL -->
        <div class="modal fade" id="users-modal" tabindex="-1" role="dialog" aria-labelledby="staticModalLabel" aria-hidden="true"
             data-backdrop="static">
            <div class="modal-dialog modal-lg" role="document" style="margin: 5rem auto !important;">
                <div class="modal-content">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12">
                                <!-- DATA TABLE -->
                                <div class="table-data__tool">
                                    <div class="form-header">
                                        <div class="input-group">
                                            <input class="au-input au-input--xl" type="text" ng-model="usersConfig.search" ng-keyup="refreshUsers($event)" placeholder="Tìm thành viên..." />
                                            <button class="au-btn--submit" ng-click="refreshUsers()" type="button">
                                                <i class="zmdi zmdi-search"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <div class="table-responsive table-responsive-data2 w-100">
                                    <table class="table table-data2 w-100">
                                        <thead>
                                        <tr>
                                            <th>#</th>
                                            <th>name</th>
                                            <th>email</th>
                                            <th>Last logged</th>
                                            <th>status</th>
                                            <th></th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr class="tr-shadow"  ng-repeat="user in users">
                                            <td>#{<>user.id<>}</td>
                                            <td>{<>user.name<>}</td>
                                            <td>
                                                <span class="block-email">{<>user.email<>}</span>
                                            </td>

                                            <td>{<>user.logged_at<>}</td>
                                            <td>
                                                <span ng-if="user.active == 1" class="status--process">Active</span>
                                                <span ng-if="user.active == 0" class="status--denied">Deactive</span>
                                            </td>
                                            <td>
                                                <div class="table-data-feature">
                                                    <a class="item" href="#"
                                                       data-toggle="tooltip"
                                                       data-placement="top"
                                                       title="Edit"
                                                       ng-click="addUserToPolicy(user, {{$policy->id}})">
                                                        <i class="zmdi zmdi-check"></i>
                                                    </a>
                                                </div>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <!-- END DATA TABLE -->
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- END USERS MODAL -->
    </section>

@endsection