@extends('admin.layouts.app')
@section('title', 'İzin Düzenle — ' . $moderator->name)
@section('page-title', $moderator->name . ' — İzin Yönetimi')

@push('styles')
<style>
.perm-switch-row {
    display:flex; align-items:center; justify-content:space-between;
    padding:11px 0; border-bottom:1px solid var(--border);
}
.perm-switch-row:last-child { border-bottom:none; }
</style>
@endpush

@section('content')

<div class="d-flex align-items-center gap-3 mb-4">
    <a href="{{ route('admin.moderators.index') }}" class="btn btn-secondary btn-sm">
        <i class="bi bi-arrow-left"></i> Geri Dön
    </a>
    <div>
        <div style="font-size:13px;color:var(--text2)">{{ $moderator->email }}</div>
    </div>
</div>

<form method="POST" action="{{ route('admin.moderators.permissions', $moderator) }}">
@csrf

<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
    <div style="display:flex;align-items:center;gap:10px">
        <div style="width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#f59e0b,#d97706);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;color:#000">
            {{ strtoupper(substr($moderator->name,0,1)) }}
        </div>
        <div>
            <div style="font-size:15px;font-weight:700;color:var(--text)">{{ $moderator->name }}</div>
            <div style="font-size:12px;color:var(--text2)">
                <span style="color:var(--warning);font-weight:700" id="permCount">{{ count($permissions) }}</span> aktif izin
            </div>
        </div>
    </div>
    <div class="d-flex gap-2">
        <button type="button" class="btn btn-sm btn-secondary" onclick="selectAll(true)">
            <i class="bi bi-check-all"></i> Tümünü Ver
        </button>
        <button type="button" class="btn btn-sm btn-outline-danger" onclick="selectAll(false)">
            <i class="bi bi-x-circle"></i> Tümünü Kaldır
        </button>
        <button type="submit" class="btn btn-warning btn-sm">
            <i class="bi bi-floppy"></i> Kaydet
        </button>
    </div>
</div>

<div class="row g-3">
    @foreach($groups as $groupName => $keys)
    @php $groupGranted = collect(array_keys($keys))->filter(fn($k) => isset($permissions[$k]))->count(); @endphp
    <div class="col-md-6">
        <div class="card h-100">
            <div class="card-header">
                <i class="bi bi-folder-fill" style="color:var(--warning)"></i>
                <h6>{{ $groupName }}</h6>
                <span class="badge {{ $groupGranted>0?'bg-success':'bg-secondary' }} ms-auto">
                    {{ $groupGranted }}/{{ count($keys) }}
                </span>
                <button type="button" class="btn btn-sm btn-secondary" style="padding:3px 9px;font-size:11px"
                        onclick="toggleGroup(this, {{ collect(array_keys($keys))->toJson() }})">
                    Tümünü Seç
                </button>
            </div>
            <div class="card-body">
                @foreach($keys as $key => $label)
                <div class="perm-switch-row" data-perm="{{ $key }}">
                    <div>
                        <div style="font-size:13px;font-weight:600;color:var(--text)">{{ $label }}</div>
                        <code style="font-size:11px;color:var(--text3)">{{ $key }}</code>
                    </div>
                    <div class="form-check form-switch mb-0">
                        <input class="form-check-input perm-toggle" type="checkbox"
                               name="permissions[]" value="{{ $key }}"
                               {{ isset($permissions[$key]) ? 'checked' : '' }}
                               data-perm="{{ $key }}"
                               id="perm_{{ str_replace('.','_',$key) }}"
                               role="switch"
                               style="cursor:pointer">
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
    @endforeach
</div>

<div class="mt-4 d-flex gap-2">
    <button type="submit" class="btn btn-warning">
        <i class="bi bi-floppy"></i> İzinleri Kaydet
    </button>
    <button type="button" class="btn btn-secondary" onclick="selectAll(true)">
        <i class="bi bi-check-all"></i> Tüm İzinleri Ver
    </button>
    <button type="button" class="btn btn-outline-danger" onclick="selectAll(false)">
        <i class="bi bi-x-circle"></i> Tüm İzinleri Kaldır
    </button>
</div>

</form>

@endsection

@push('scripts')
<script>
function updateCount() {
    const n = document.querySelectorAll('.perm-toggle:checked').length;
    document.getElementById('permCount').textContent = n;
}
document.querySelectorAll('.perm-toggle').forEach(cb => cb.addEventListener('change', updateCount));

function selectAll(state) {
    document.querySelectorAll('.perm-toggle').forEach(cb => cb.checked = state);
    updateCount();
}

function toggleGroup(btn, keys) {
    const anyUnchecked = keys.some(k => !document.querySelector(`[data-perm="${k}"].perm-toggle`)?.checked);
    keys.forEach(k => {
        const el = document.querySelector(`[data-perm="${k}"].perm-toggle`);
        if (el) el.checked = anyUnchecked;
    });
    btn.textContent = anyUnchecked ? 'Tümünü Kaldır' : 'Tümünü Seç';
    updateCount();
}
</script>
@endpush