@extends('layouts.app')

@section('title')
    {{ __('Phân quyền đối tác') }}
@endsection

@section('section.header')
    <section class="content-header">
        <div class="container-fluid">
            <div class="pp-wrap">
                <h1 class="mb-1">{{ __('Phân quyền đối tác') }}</h1>
                <small class="text-muted">
                    {{ __('Bật tắt quyền của tài khoản Đối tác và Quản lý đối tác. Lưu xong là áp dụng ngay.') }}
                </small>
            </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 lệnh php artisan migrate rồi tải lại trang, nếu không tích vào các quyền này sẽ không lưu được.') }}
                </div>
            @endif

            <ul class="nav nav-tabs" id="pp-tab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="tab-common" data-toggle="tab" href="#pane-common" role="tab">
                        <i class="fas fa-users mr-1"></i> {{ __('Quyền chung theo vai trò') }}
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="tab-accounts" data-toggle="tab" href="#pane-accounts" role="tab">
                        <i class="fas fa-user-lock mr-1"></i> {{ __('Quyền riêng theo tài khoản') }}
                        <span class="badge badge-warning">{{ $accounts->where('custom', true)->count() }}</span>
                    </a>
                </li>
            </ul>

            <div class="tab-content">

                {{-- ========================== QUYỀN CHUNG ========================== --}}
                <div class="tab-pane fade show active" id="pane-common" role="tabpanel">
                    <div class="card card-outline card-primary pp-card">
                        <div class="card-body pb-2">
                            <div class="input-group input-group-sm pp-search-box">
                                <div class="input-group-prepend">
                                    <span class="input-group-text"><i class="fas fa-search"></i></span>
                                </div>
                                <input type="text" id="pp-search" class="form-control"
                                       placeholder="{{ __('Tìm quyền: rút, thẻ cào, USDT...') }}">
                            </div>
                            <small class="text-muted d-block mt-2">
                                {{ __('Áp dụng cho mọi tài khoản mang vai trò đó, trừ tài khoản đã bật quyền riêng ở tab bên cạnh.') }}
                            </small>
                        </div>

                        <form action="{{ route('app.admin.partner_permission.update') }}" method="POST">
                            @csrf
                            <div class="card-body pt-2">
                                <table class="table table-sm table-hover table-bordered pp-table mb-0" id="pp-table">
                                    <thead class="thead-light">
                                        <tr>
                                            <th>{{ __('Quyền / thao tác') }}</th>
                                            @foreach ($roles as $roleKey => $roleLabel)
                                                <th class="text-center pp-col-role">
                                                    {{ $roleLabel }}
                                                    <div class="small font-weight-normal text-muted">
                                                        {{ $counts[$roleKey]['on'] }}/{{ $counts[$roleKey]['total'] }}
                                                    </div>
                                                </th>
                                            @endforeach
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($groups as $group)
                                            <tr class="pp-group-row">
                                                <td class="font-weight-bold">
                                                    <i class="{{ $group['icon'] }} mr-1 text-primary"></i>{{ $group['label'] }}
                                                </td>
                                                @foreach ($roles as $roleKey => $roleLabel)
                                                    @php
                                                        $applicable = collect($group['items'])
                                                            ->filter(fn ($i) => in_array($roleKey, $i['roles'], true));
                                                    @endphp
                                                    <td class="text-center">
                                                        @if ($applicable->isNotEmpty())
                                                            <button type="button" class="btn btn-xs btn-outline-secondary pp-toggle-group"
                                                                    data-group="{{ $group['key'] }}" data-role="{{ $roleKey }}">
                                                                {{ __('Tất cả') }}
                                                            </button>
                                                        @else
                                                            <span class="text-muted">—</span>
                                                        @endif
                                                    </td>
                                                @endforeach
                                            </tr>

                                            @foreach ($group['items'] as $item)
                                                <tr class="pp-item-row"
                                                    data-search="{{ Str::lower($item['label'] . ' ' . $item['note'] . ' ' . $item['name'] . ' ' . $group['label']) }}">
                                                    <td>
                                                        <div class="pp-perm-label">{{ $item['label'] }}</div>
                                                        <div class="pp-perm-note">{{ $item['note'] }}</div>
                                                    </td>
                                                    @foreach ($roles as $roleKey => $roleLabel)
                                                        <td class="text-center align-middle">
                                                            @if (in_array($roleKey, $item['roles'], true))
                                                                <div class="custom-control custom-checkbox d-inline-block">
                                                                    <input type="checkbox" class="custom-control-input pp-check"
                                                                           data-group="{{ $group['key'] }}" data-role="{{ $roleKey }}"
                                                                           id="pp-{{ $roleKey }}-{{ $item['name'] }}"
                                                                           name="permissions[{{ $roleKey }}][{{ $item['name'] }}]" value="1"
                                                                           {{ !empty($granted[$roleKey][$item['name']]) ? 'checked' : '' }}>
                                                                    <label class="custom-control-label"
                                                                           for="pp-{{ $roleKey }}-{{ $item['name'] }}"></label>
                                                                </div>
                                                            @else
                                                                <span class="text-muted" title="{{ __('Không áp dụng cho vai trò này') }}">—</span>
                                                            @endif
                                                        </td>
                                                    @endforeach
                                                </tr>
                                            @endforeach
                                        @endforeach
                                    </tbody>
                                </table>
                                <p class="text-muted small mt-2 mb-0" id="pp-empty" style="display:none">
                                    {{ __('Không có quyền nào khớp từ khoá.') }}
                                </p>
                            </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 quyền chung') }}
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                {{-- ========================= QUYỀN RIÊNG ========================== --}}
                <div class="tab-pane fade" id="pane-accounts" role="tabpanel">
                    <div class="card card-outline card-primary pp-card">
                        <div class="card-body pb-2">
                            <div class="form-row align-items-center">
                                <div class="col-lg-5 col-md-6 mb-2">
                                    <div class="input-group input-group-sm">
                                        <div class="input-group-prepend">
                                            <span class="input-group-text"><i class="fas fa-search"></i></span>
                                        </div>
                                        <input type="text" id="acc-search" class="form-control"
                                               placeholder="{{ __('Tìm tài khoản...') }}" autocomplete="off">
                                        <div class="input-group-append">
                                            <button class="btn btn-outline-secondary" type="button" id="acc-clear"
                                                    title="{{ __('Xoá từ khoá') }}">&times;</button>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3 col-md-3 mb-2">
                                    <select id="acc-role" class="form-control form-control-sm">
                                        <option value="">{{ __('Tất cả vai trò') }}</option>
                                        @foreach ($roles as $roleKey => $roleLabel)
                                            <option value="{{ $roleKey }}">{{ $roleLabel }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-lg-4 col-md-3 mb-2">
                                    <select id="acc-source" class="form-control form-control-sm">
                                        <option value="">{{ __('Tất cả nguồn quyền') }}</option>
                                        <option value="custom">{{ __('Chỉ tài khoản dùng quyền riêng') }}</option>
                                        <option value="common">{{ __('Chỉ tài khoản theo quyền chung') }}</option>
                                    </select>
                                </div>
                            </div>
                            <small class="text-muted">
                                <i class="fas fa-info-circle"></i>
                                {{ __('Tài khoản bật quyền riêng sẽ ăn theo bộ quyền của chính nó và bỏ qua quyền chung.') }}
                            </small>
                        </div>

                        <div class="card-body pt-2">
                            <table class="table table-sm table-hover table-bordered pp-table mb-0" id="acc-table">
                                <thead class="thead-light">
                                    <tr>
                                        <th>{{ __('Tài khoản') }}</th>
                                        <th class="pp-col-role">{{ __('Vai trò') }}</th>
                                        <th class="text-center pp-col-src">{{ __('Nguồn quyền') }}</th>
                                        <th class="text-center pp-col-on">{{ __('Đang bật') }}</th>
                                        <th class="text-center pp-col-act"></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($accounts as $account)
                                        <tr class="acc-row"
                                            data-name="{{ Str::lower($account->username) }}"
                                            data-role="{{ $account->role_name }}"
                                            data-source="{{ $account->custom ? 'custom' : 'common' }}">
                                            <td class="align-middle">
                                                <span class="font-weight-bold">{{ $account->username }}</span>
                                                @if ($account->is_banned)
                                                    <span class="badge badge-danger ml-1">{{ __('Khoá') }}</span>
                                                @endif
                                            </td>
                                            <td class="align-middle text-muted">{{ $account->role_label }}</td>
                                            <td class="text-center align-middle">
                                                @if ($account->custom)
                                                    <span class="badge badge-warning">{{ __('Quyền riêng') }}</span>
                                                @else
                                                    <span class="badge badge-light border text-muted">{{ __('Quyền chung') }}</span>
                                                @endif
                                            </td>
                                            <td class="text-center align-middle">
                                                <span class="{{ $account->on ? '' : 'text-danger font-weight-bold' }}">
                                                    {{ $account->on }}/{{ $account->total }}
                                                </span>
                                            </td>
                                            <td class="text-center align-middle">
                                                <a class="btn btn-xs btn-primary"
                                                   href="{{ route('app.admin.partner_permission.editUser', $account->id) }}">
                                                    <i class="fas fa-edit"></i> {{ __('Chỉnh') }}
                                                </a>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" class="text-center text-muted py-3">
                                                {{ __('Chưa có tài khoản đối tác hoặc quản lý đối tác nào.') }}
                                            </td>
                                        </tr>
                                    @endforelse
                                    <tr id="acc-empty" style="display:none">
                                        <td colspan="5" class="text-center text-muted py-3">
                                            {{ __('Không tìm thấy tài khoản nào khớp.') }}
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <div class="card-footer py-2">
                            <div class="d-flex flex-wrap justify-content-between align-items-center">
                                <small class="text-muted" id="acc-info"></small>
                                <nav>
                                    <ul class="pagination pagination-sm mb-0" id="acc-pager"></ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>
@endsection

@section('styles')
    <style>
        /* Không để bảng kéo dài hết màn hình rộng, đọc rất mỏi mắt */
        .pp-wrap { max-width: 1080px; margin: 0 auto; }
        .pp-card { border-top-left-radius: 0; }
        .pp-search-box { max-width: 380px; }

        .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-role { width: 150px; }
        .pp-col-src  { width: 130px; }
        .pp-col-on   { width: 90px; }
        .pp-col-act  { 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-table { font-size: 12px; }
            .pp-perm-note { display: none; }
        }
    </style>
@endsection

@section('scripts')
    <script>
        jQuery(function ($) {

            /* ---------------- Tab quyền chung: lọc nhanh ---------------- */
            $('.pp-toggle-group').on('click', function () {
                var boxes = $('.pp-check[data-group="' + $(this).data('group') + '"]' +
                              '[data-role="' + $(this).data('role') + '"]').filter(':visible');
                boxes.prop('checked', boxes.filter(':not(:checked)').length > 0);
            });

            $('#pp-search').on('input', function () {
                var q = $(this).val().toLowerCase().trim();

                if (!q) {
                    $('#pp-table tr').show();
                    $('#pp-empty').hide();
                    return;
                }

                var found = 0;

                $('#pp-table .pp-item-row').each(function () {
                    var hit = $(this).data('search').indexOf(q) !== -1;
                    $(this).toggle(hit);
                    if (hit) found++;
                });

                $('#pp-table .pp-group-row').each(function () {
                    $(this).toggle($(this).nextUntil('.pp-group-row', '.pp-item-row:visible').length > 0);
                });

                $('#pp-empty').toggle(found === 0);
            });

            /* -------- Tab tài khoản: tìm kiếm + lọc + phân trang -------- */
            var PER_PAGE = 15;
            var $rows = $('#acc-table .acc-row');
            var page = 1;

            function matched() {
                var q = ($('#acc-search').val() || '').toLowerCase().trim();
                var role = $('#acc-role').val();
                var source = $('#acc-source').val();

                return $rows.filter(function () {
                    var d = this.dataset;
                    return (!q || d.name.indexOf(q) !== -1)
                        && (!role || d.role === role)
                        && (!source || d.source === source);
                });
            }

            function render() {
                var $hit = matched();
                var total = $hit.length;
                var pages = Math.max(1, Math.ceil(total / PER_PAGE));

                if (page > pages) page = pages;

                var from = (page - 1) * PER_PAGE;
                var to = Math.min(from + PER_PAGE, total);

                $rows.hide();
                $hit.slice(from, to).show();
                $('#acc-empty').toggle(total === 0);

                $('#acc-info').text(total === 0
                    ? 'Không có tài khoản nào'
                    : 'Hiển thị ' + (from + 1) + '–' + to + ' trong ' + total + ' tài khoản');

                // thanh phân trang: đầu, cuối và vài trang quanh trang hiện tại
                var $pager = $('#acc-pager').empty();

                if (pages <= 1) return;

                function add(label, target, opts) {
                    opts = opts || {};
                    var $li = $('<li class="page-item"></li>').toggleClass('disabled', !!opts.disabled)
                        .toggleClass('active', !!opts.active);
                    $('<a class="page-link" href="javascript:void(0)"></a>').text(label)
                        .on('click', function () {
                            if (opts.disabled || opts.active) return;
                            page = target;
                            render();
                        }).appendTo($li);
                    $pager.append($li);
                }

                add('‹', page - 1, { disabled: page === 1 });

                var shown = [];
                for (var i = 1; i <= pages; i++) {
                    if (i === 1 || i === pages || Math.abs(i - page) <= 1) shown.push(i);
                }

                var prev = 0;
                shown.forEach(function (i) {
                    if (prev && i - prev > 1) {
                        $pager.append('<li class="page-item disabled"><span class="page-link">…</span></li>');
                    }
                    add(String(i), i, { active: i === page });
                    prev = i;
                });

                add('›', page + 1, { disabled: page === pages });
            }

            $('#acc-search').on('input', function () { page = 1; render(); });
            $('#acc-role, #acc-source').on('change', function () { page = 1; render(); });
            $('#acc-clear').on('click', function () {
                $('#acc-search').val('');
                page = 1;
                render();
            });

            render();
        });
    </script>
@endsection