@extends('layouts.admin.app')

@section('content')
    <main class="mt-5" style="z-index: 0">
        <div class="container-fluid px-4">
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div class="h5">
                        Edit Hak Akses
                    </div>
                    <div class="d-flex justify-content-end align-items-center">
                        <div class="input-group">
                            <a href="{{ route('admin.role.index') }}" class="btn btn-success ms-2 rounded">
                                <i class="fas fa-arrow-left me-2"></i>Kembali
                            </a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.role.update', $role->id) }}" method="POST" class="mb-3">
                        @csrf
                        @method('PUT')
                        <div class="form-group mb-4">
                            <label class="mb-2" for="name">Nama Hak Akses <span class="text-danger">*</span></label>
                            <input type="text" name="name" value="{{ old('name', $role->name) }}" class="form-control"
                                id="name" placeholder="Nama Hak Akses">
                            @if ($errors->has('name'))
                                <div class="info-auth text-danger mt-2">{{ $errors->first('name') }}</div>
                            @endif
                        </div>

                        {{-- Permission Header --}}
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <div>
                                <h6 class="mb-1" style="font-weight: 700; color: var(--jp-text);">Hak Akses Modul</h6>
                                <p class="mb-0" style="font-size: 12px; color: var(--jp-text-muted);">Pilih permission yang akan diberikan untuk role ini</p>
                            </div>
                            <div class="form-check form-switch" style="padding-left: 3em;">
                                <input class="form-check-input" type="checkbox" id="all-role" style="width: 42px; height: 22px; cursor: pointer;">
                                <label class="form-check-label" for="all-role" style="font-size: 13px; font-weight: 600; color: var(--jp-primary); cursor: pointer;">
                                    Pilih Semua
                                </label>
                            </div>
                        </div>

                        @php
                            $currentPermissions = old('permissions', $role->permissions()->pluck('name')->toArray());
                        @endphp

                        {{-- Permission Groups Grid --}}
                        <div class="row g-3 mb-4">
                            @foreach ($groupedPermissions as $module => $group)
                                <div class="col-md-6 col-lg-4">
                                    <div class="permission-group-card">
                                        <div class="permission-group-header">
                                            <div class="permission-group-icon">
                                                <i class="fas {{ $group['icon'] }}"></i>
                                            </div>
                                            <div class="permission-group-title">
                                                <span>{{ $group['label'] }}</span>
                                                <small class="permission-group-count">
                                                    <span class="checked-count" data-group="{{ $module }}">0</span>/{{ count($group['permissions']) }}
                                                </small>
                                            </div>
                                            <div class="form-check form-switch ms-auto" style="padding-left: 3em;">
                                                <input class="form-check-input group-toggle" type="checkbox"
                                                    data-group="{{ $module }}"
                                                    style="width: 36px; height: 18px; cursor: pointer;">
                                            </div>
                                        </div>
                                        <div class="permission-group-body">
                                            @foreach ($group['permissions'] as $permission)
                                                @php
                                                    $action = explode(' ', $permission->name, 2)[0];
                                                    $actionIcons = [
                                                        'lihat' => 'fa-eye',
                                                        'buat' => 'fa-plus',
                                                        'edit' => 'fa-pen',
                                                        'detail' => 'fa-circle-info',
                                                        'hapus' => 'fa-trash',
                                                        'blokir' => 'fa-ban',
                                                    ];
                                                    $actionColors = [
                                                        'lihat' => '#3b82f6',
                                                        'buat' => '#10b981',
                                                        'edit' => '#f59e0b',
                                                        'detail' => '#8b5cf6',
                                                        'hapus' => '#ef4444',
                                                        'blokir' => '#ef4444',
                                                    ];
                                                @endphp
                                                <label class="permission-item" for="perm-{{ $permission->id }}">
                                                    <div class="permission-item-left">
                                                        <span class="permission-action-icon" style="color: {{ $actionColors[$action] ?? '#64748b' }}">
                                                            <i class="fas {{ $actionIcons[$action] ?? 'fa-circle' }}" style="font-size: 10px;"></i>
                                                        </span>
                                                        <span class="permission-item-label">{{ ucfirst($action) }}</span>
                                                    </div>
                                                    <div class="form-check form-switch mb-0">
                                                        <input class="form-check-input permission-check" type="checkbox"
                                                            name="permissions[]" value="{{ $permission->name }}"
                                                            id="perm-{{ $permission->id }}"
                                                            data-group="{{ $module }}"
                                                            {{ in_array($permission->name, $currentPermissions) ? 'checked' : '' }}
                                                            style="width: 32px; height: 16px; cursor: pointer;">
                                                    </div>
                                                </label>
                                            @endforeach
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        <button type="submit" class="btn btn-success rounded float-right">
                            Simpan
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </main>

    <style>
        .permission-group-card {
            border: 2px solid var(--jp-border);
            border-radius: var(--jp-radius);
            overflow: hidden;
            transition: var(--jp-transition);
            background: var(--jp-bg-card);
            height: 100%;
        }
        .permission-group-card:hover {
            border-color: var(--jp-primary);
            box-shadow: 0 4px 16px rgba(25, 135, 84, 0.08);
        }
        .permission-group-card.all-checked {
            border-color: var(--jp-primary);
            background: var(--jp-primary-50);
        }
        .permission-group-header {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 14px 16px;
            background: var(--jp-bg);
            border-bottom: 1px solid var(--jp-border);
        }
        .permission-group-icon {
            width: 34px;
            height: 34px;
            border-radius: 8px;
            background: linear-gradient(135deg, var(--jp-primary), var(--jp-primary-dark));
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 13px;
            flex-shrink: 0;
        }
        .permission-group-title {
            display: flex;
            flex-direction: column;
            line-height: 1.2;
        }
        .permission-group-title span {
            font-size: 13px;
            font-weight: 700;
            color: var(--jp-text);
        }
        .permission-group-count {
            font-size: 11px;
            color: var(--jp-text-muted);
            font-weight: 500;
        }
        .permission-group-body {
            padding: 6px 8px;
        }
        .permission-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 10px;
            border-radius: 6px;
            cursor: pointer;
            transition: var(--jp-transition);
            margin-bottom: 0 !important;
            font-weight: 400 !important;
        }
        .permission-item:hover {
            background: var(--jp-bg);
        }
        .permission-item-left {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .permission-action-icon {
            width: 22px;
            height: 22px;
            border-radius: 5px;
            background: var(--jp-bg);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }
        .permission-item:hover .permission-action-icon {
            background: var(--jp-border);
        }
        .permission-item-label {
            font-size: 13px;
            color: var(--jp-text);
            font-weight: 500 !important;
        }
        .permission-item .form-check {
            min-height: auto;
            padding-left: 0;
        }
        .form-switch .form-check-input:checked {
            background-color: var(--jp-primary) !important;
            border-color: var(--jp-primary) !important;
        }
    </style>
@endsection

@section('js')
    <script>
        $(function() {
            function updateGroupState(group) {
                var total = $(`.permission-check[data-group="${group}"]`).length;
                var checked = $(`.permission-check[data-group="${group}"]:checked`).length;
                $(`.checked-count[data-group="${group}"]`).text(checked);
                $(`.group-toggle[data-group="${group}"]`).prop('checked', checked === total);

                var card = $(`.group-toggle[data-group="${group}"]`).closest('.permission-group-card');
                if (checked === total && total > 0) {
                    card.addClass('all-checked');
                } else {
                    card.removeClass('all-checked');
                }
            }

            function updateSelectAllState() {
                var total = $('.permission-check').length;
                var checked = $('.permission-check:checked').length;
                $('#all-role').prop('checked', checked === total && total > 0);
            }

            // Select all toggle
            $('#all-role').change(function() {
                var isChecked = $(this).is(':checked');
                $('.permission-check').prop('checked', isChecked);
                $('.group-toggle').prop('checked', isChecked);
                // Update all group states
                $('.group-toggle').each(function() {
                    updateGroupState($(this).data('group'));
                });
            });

            // Group toggle
            $('.group-toggle').change(function() {
                var group = $(this).data('group');
                var isChecked = $(this).is(':checked');
                $(`.permission-check[data-group="${group}"]`).prop('checked', isChecked);
                updateGroupState(group);
                updateSelectAllState();
            });

            // Individual permission toggle
            $('.permission-check').change(function() {
                var group = $(this).data('group');
                updateGroupState(group);
                updateSelectAllState();
            });

            // Initial state
            $('.group-toggle').each(function() {
                updateGroupState($(this).data('group'));
            });
            updateSelectAllState();
        });
    </script>
@endsection