@extends('layouts.app')

@section('title')
    {{ __('Quyền riêng') }} - {{ $account->username }}
@endsection

@section('section.header')
    <section class="content-header">
        <div class="container-fluid">
            <div class="pp-wrap">
                <a href="{{ route('app.admin.partner_permission.index') }}" class="text-muted small">
                    <i class="fas fa-arrow-left"></i> {{ __('Quay lại danh sách') }}
                </a>
                <h1 class="mt-1 mb-0 h3">
                    {{ $account->username }}
                    <span class="badge badge-info align-middle">{{ $roleLabel }}</span>
                </h1>
            </div>
        </div>
    </section>
@endsection

@section('section.content')
    <section class="content">
        <div class="pp-wrap">

            @if (Session::has('success'))
                <div id="message-alert" class="alert alert-success">{{ Session::get('success') }}</div>
            @endif
            @if (Session::has('error'))
                <div id="message-alert" class="alert alert-danger">{{ Session::get('error') }}</div>
            @endif
            @if (!empty($missing))
                <div class="alert alert-warning">
                    <strong>{{ __('Thiếu bản ghi permission:') }}</strong> {{ implode(', ', $missing) }}.
                    {{ __('Hãy chạy php artisan migrate rồi tải lại trang.') }}
                </div>
            @endif

            <form action="{{ route('app.admin.partner_permission.updateUser', $account->id) }}" method="POST">
                @csrf
                {{-- Đánh dấu form CÓ gửi bảng tích, để phân biệt với "bỏ tích hết" --}}
                <input type="hidden" name="permissions_present" value="1">

                <div class="card card-outline card-primary">
                    <div class="card-body py-3">
                        <div class="custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" id="use_custom_permissions"
                                   name="use_custom_permissions" value="1"
                                   {{ !empty($account->use_custom_permissions) ? 'checked' : '' }}>
                            <label class="custom-control-label font-weight-bold" for="use_custom_permissions">
                                {{ __('Dùng bộ quyền riêng cho tài khoản này') }}
                            </label>
                        </div>
                        <small class="text-muted d-block mt-2">
                            <i class="fas fa-info-circle"></i>
                            {{ __('Bật: chỉ ăn theo bảng bên dưới, bỏ qua quyền chung của vai trò. Tắt: quay lại ăn theo quyền chung.') }}
                        </small>
                    </div>
                </div>

                <div class="card card-outline card-secondary" id="pp-user-card">
                    <div class="card-body">
                        <table class="table table-sm table-hover table-bordered pp-table mb-0">
                            <thead class="thead-light">
                                <tr>
                                    <th>{{ __('Quyền / thao tác') }}</th>
                                    <th class="text-center pp-col-src">{{ __('Quyền chung') }}</th>
                                    <th class="text-center pp-col-on">{{ __('Riêng') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($groups as $group)
                                    @php
                                        $applicable = collect($group['items'])
                                            ->filter(fn ($i) => !empty($manageable[$i['name']]));
                                    @endphp
                                    @continue($applicable->isEmpty())

                                    <tr class="pp-group-row">
                                        <td class="font-weight-bold">
                                            <i class="{{ $group['icon'] }} mr-1 text-primary"></i>{{ $group['label'] }}
                                        </td>
                                        <td></td>
                                        <td class="text-center">
                                            <button type="button" class="btn btn-xs btn-outline-secondary pp-toggle-group"
                                                    data-group="{{ $group['key'] }}">
                                                {{ __('Tất cả') }}
                                            </button>
                                        </td>
                                    </tr>

                                    @foreach ($applicable as $item)
                                        <tr>
                                            <td>
                                                <div class="pp-perm-label">{{ $item['label'] }}</div>
                                                <div class="pp-perm-note">{{ $item['note'] }}</div>
                                            </td>
                                            <td class="text-center align-middle">
                                                @if (!empty($roleGranted[$item['name']]))
                                                    <span class="badge badge-success">{{ __('Bật') }}</span>
                                                @else
                                                    <span class="badge badge-light border text-muted">{{ __('Tắt') }}</span>
                                                @endif
                                            </td>
                                            <td class="text-center align-middle">
                                                <div class="custom-control custom-checkbox d-inline-block">
                                                    <input type="checkbox" class="custom-control-input pp-check"
                                                           data-group="{{ $group['key'] }}"
                                                           id="ppu-{{ $item['name'] }}"
                                                           name="permissions[{{ $item['name'] }}]" value="1"
                                                           {{ !empty($account->use_custom_permissions)
                                                               ? (!empty($directGranted[$item['name']]) ? 'checked' : '')
                                                               : (!empty($roleGranted[$item['name']]) ? 'checked' : '') }}>
                                                    <label class="custom-control-label" for="ppu-{{ $item['name'] }}"></label>
                                                </div>
                                            </td>
                                        </tr>
                                    @endforeach
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    <div class="card-footer text-center py-2">
                        <button type="submit" class="btn btn-success btn-sm px-4">
                            <i class="fas fa-save mr-1"></i> {{ __('Lưu') }}
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </section>
@endsection

@section('styles')
    <style>
        .pp-wrap { max-width: 860px; margin: 0 auto; }
        .pp-table { font-size: 13px; }
        .pp-table thead th { vertical-align: middle; white-space: nowrap; }
        .pp-table td, .pp-table th { padding: .4rem .5rem; }
        .pp-col-src { width: 130px; }
        .pp-col-on  { width: 90px; }
        .pp-group-row td { background: #f1f4f8; }
        .pp-perm-label { font-weight: 600; }
        .pp-perm-note  { font-size: 12px; color: #7a869a; line-height: 1.35; }
        .btn-xs { padding: .1rem .4rem; font-size: 11px; line-height: 1.5; border-radius: .2rem; }

        @media (max-width: 767px) {
            .pp-wrap { max-width: 100%; }
            .pp-perm-note { display: none; }
        }
    </style>
@endsection

@section('scripts')
    <script>
        jQuery(function ($) {
            function syncState() {
                var on = $('#use_custom_permissions').is(':checked');
                $('#pp-user-card').css('opacity', on ? 1 : 0.55);
                $('#pp-user-card .pp-check, #pp-user-card .pp-toggle-group').prop('disabled', !on);
            }

            $('#use_custom_permissions').on('change', syncState);
            syncState();

            $('.pp-toggle-group').on('click', function () {
                var boxes = $('.pp-check[data-group="' + $(this).data('group') + '"]');
                boxes.prop('checked', boxes.filter(':not(:checked)').length > 0);
            });
        });
    </script>
@endsection