@extends('layouts.demo10.base')

@section('content')

<style>
    .permission-screen {
        display: grid;
        gap: 1.25rem;
    }

    .permission-topbar {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .permission-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .permission-tab {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.6rem 0.9rem;
        border-radius: 999px;
        font-size: 0.95rem;
        font-weight: 500;
        color: #475569;
        transition: all 0.2s ease;
    }

    .permission-tab:hover {
        color: #2563eb;
        background: #eff6ff;
    }

    .permission-tab.is-active {
        color: #2563eb;
        background: #dbe7ff;
    }

    .permission-panel {
        border: 1px solid #e5e7eb;
        border-radius: 16px;
        background: #fff;
        padding: 1.5rem;
        min-height: 470px;
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }

    .permission-filters {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
        max-width: 720px;
    }

    .permission-label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 1rem;
        font-weight: 600;
        color: #0f172a;
    }

    .permission-hint {
        font-size: 0.875rem;
        color: #64748b;
    }

    .permission-select-wrap .select2-container {
        width: 100% !important;
    }

    .permission-select-wrap .select2-container .select2-selection--single {
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        border: 1px solid #d1d5db !important;
        border-radius: 14px !important;
        background: #fff !important;
        padding: 0 0.25rem !important;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .permission-select-wrap .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 44px !important;
        padding-left: 0.85rem !important;
        color: #111827 !important;
        font-size: 0.875rem !important;
    }

    .permission-select-wrap .select2-container--default .select2-selection--single .select2-selection__placeholder {
        color: #9ca3af !important;
    }

    .permission-select-wrap .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 44px !important;
        right: 0.65rem !important;
    }

    .permission-select-wrap .select2-container--default.select2-container--focus .select2-selection--single {
        border-color: #2563eb !important;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
    }

    .permission-select-wrap .select2-dropdown {
        border: 1px solid #d1d5db !important;
        border-radius: 14px !important;
    }

    .permission-master-row {
        display: flex;
        align-items: center;
        gap: 0.7rem;
        min-height: 42px;
        padding: 0.75rem 0.9rem;
        border: 1px solid #d1d5db;
        border-radius: 14px;
        background: #fff;
    }

    .permission-card {
        border: 1px solid #d1d5db;
        border-radius: 14px;
        background: #fff;
        padding: 1rem 1rem 0.85rem;
    }

    .permission-card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    .permission-card-title {
        display: inline-flex;
        align-items: center;
        gap: 0.55rem;
        font-size: 1rem;
        font-weight: 600;
        color: #111827;
    }

    .permission-card-body {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 1rem 1.5rem;
    }

    .permission-check {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.875rem;
        color: #374151;
        cursor: pointer;
        user-select: none;
    }

    .permission-check.master {
        font-size: 0.95rem;
        font-weight: 500;
    }

    .permission-check input,
    .permission-master-row input,
    .permission-card-header input {
        width: 16px;
        height: 16px;
        accent-color: #2563eb;
        cursor: pointer;
    }

    .permission-actions {
        margin-top: auto;
        display: flex;
        justify-content: flex-end;
        padding-top: 1rem;
    }

    .permission-assign-btn {
        min-width: 180px;
        height: 40px;
        border-radius: 14px !important;
        padding-inline: 1.1rem !important;
        font-weight: 500;
        box-shadow: none !important;
    }

    @media (max-width: 991px) {
        .permission-filters {
            grid-template-columns: 1fr;
        }

        .permission-card-body {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 640px) {
        .permission-card-header {
            flex-direction: column;
            align-items: flex-start;
        }

        .permission-card-body {
            grid-template-columns: 1fr;
        }

        .permission-actions {
            justify-content: stretch;
        }

        .permission-assign-btn {
            width: 100%;
        }
    }
</style>

@can('view.permissions')
<div class="permission-screen">
    <div class="permission-topbar">
        <div class="flex flex-col gap-1">
            <h1 class="font-semibold text-[30px] leading-none text-mono">
                User Management
            </h1>
            <div class="flex items-center gap-1 text-sm font-normal text-secondary-foreground">
                <a class="hover:text-primary transition-colors" href="/">Home</a>
                <span class="text-muted-foreground">/</span>
                <span class="text-mono">Users</span>
                <span class="text-muted-foreground">/</span>
                <span class="text-mono">Permissions</span>
            </div>
        </div>

        <div class="permission-tabs">
            <a href="{{ route('users.index') }}" class="permission-tab"
            data-audit-module="Users"
            data-audit-section="Users"
            data-audit-page="User List">
                <i class="ki-filled ki-user text-base"></i>
                <span>Users</span>
            </a>
            <a href="{{ route('roles.index') }}" class="permission-tab"
            data-audit-module="Roles"
            data-audit-section="Roles"
            data-audit-page="Role List">
                <i class="ki-filled ki-security-user text-base"></i>
                <span>Roles</span>
            </a>
            <a href="{{ route('permissions.index') }}" class="permission-tab is-active"
            data-audit-module="Permissions"
            data-audit-section="Permissions"
            data-audit-page="Permission List">
                <i class="ki-filled ki-shield-tick text-base"></i>
                <span>Permissions</span>
            </a>
        </div>
    </div>

    <div class="permission-panel">
        <div class="permission-filters">
            <div class="permission-select-wrap">
                <select class="form-select form-select-solid" data-control="select2" data-placeholder="Select Project" name="project" id="project_select">
                    <option value=""></option>
                    @foreach($projects as $project)
                        <option value="{{ $project->id }}">{{ $project->name }}</option>
                    @endforeach
                </select>
            </div>

            <div class="permission-select-wrap">
                <select class="form-select form-select-solid" data-control="select2" data-placeholder="Select Role" name="role" id="role_select" disabled>
                    <option value=""></option>
                </select>
            </div>
        </div>

        <div id="permissions_selection_hint" class="permission-hint">
            Select project and role to view permissions.
        </div>

        <div id="permissions_catalog_section" class="hidden flex flex-col gap-4">
            <div class="permission-label">
                <i class="ki-filled ki-setting-4 text-primary text-lg"></i>
                <span>System Permissions Catalog</span>
            </div>

            @if(count($permissions) > 0)
                <div class="permission-master-row">
                    <input type="checkbox" id="select_all_global">
                    <label class="permission-check master" for="select_all_global">
                        <span>Select All Permissions</span>
                    </label>
                </div>
            @endif

            <div class="flex flex-col gap-3">
                @forelse ($modules as $module)
                    @php
                        $moduleSlug = Str::slug($module->name);
                        $modulePermissions = $permissions->filter(function($p) use ($module) {
                            return str_starts_with(strtolower($p->name), strtolower($module->name)) || (isset($p->module_id) && $p->module_id == $module->id);
                        });
                    @endphp

                    <div class="permission-card section-container" data-section="{{ $moduleSlug }}">
                        <div class="permission-card-header">
                            <div class="permission-card-title">
                                <i class="ki-filled ki-user text-base"></i>
                                <span>{{ $module->name }}</span>
                            </div>
                            <label class="permission-check" for="select_all_{{ $moduleSlug }}">
                                <input
                                    class="section-checkbox"
                                    type="checkbox"
                                    id="select_all_{{ $moduleSlug }}"
                                    data-target-section="{{ $moduleSlug }}"
                                >
                                <span>Select All</span>
                            </label>
                        </div>

                        <div class="permission-card-body">
                            @forelse ($modulePermissions as $permission)
                                <label class="permission-check" for="perm_{{ $permission->id }}">
                                    <input
                                        class="attribute-checkbox"
                                        type="checkbox"
                                        id="perm_{{ $permission->id }}"
                                        name="permissions[]"
                                        value="{{ $permission->name }}"
                                        data-section="{{ $moduleSlug }}"
                                    >
                                    <span>{{ ucwords(str_replace('.', ' ', $permission->name)) }}</span>
                                </label>
                            @empty
                                <div class="text-sm text-muted-foreground italic">No permissions defined for this module</div>
                            @endforelse
                        </div>
                    </div>
                @empty
                    <div class="text-center text-muted-foreground py-10">
                        <i class="ki-filled ki-information-2 text-3xl mb-3 block text-gray-400"></i>
                        No system modules found.
                    </div>
                @endforelse

                @php
                    $uncategorized = $permissions->filter(function($p) use ($modules) {
                        foreach($modules as $m) {
                            if (str_starts_with(strtolower($p->name), strtolower($m->name)) || (isset($p->module_id) && $p->module_id == $m->id)) {
                                return false;
                            }
                        }

                        return true;
                    });
                @endphp

                @if($uncategorized->count() > 0)
                    <div class="permission-card section-container" data-section="uncategorized">
                        <div class="permission-card-header">
                            <div class="permission-card-title">
                                <i class="ki-filled ki-category text-base"></i>
                                <span>General / Other</span>
                            </div>
                            <label class="permission-check" for="select_all_uncategorized">
                                <input
                                    class="section-checkbox"
                                    type="checkbox"
                                    id="select_all_uncategorized"
                                    data-target-section="uncategorized"
                                >
                                <span>Select All</span>
                            </label>
                        </div>

                        <div class="permission-card-body">
                            @foreach ($uncategorized as $permission)
                                <label class="permission-check" for="perm_{{ $permission->id }}">
                                    <input
                                        class="attribute-checkbox"
                                        type="checkbox"
                                        id="perm_{{ $permission->id }}"
                                        name="permissions[]"
                                        value="{{ $permission->name }}"
                                        data-section="uncategorized"
                                    >
                                    <span>{{ ucwords(str_replace('.', ' ', $permission->name)) }}</span>
                                </label>
                            @endforeach
                        </div>
                    </div>
                @endif
            </div>
        </div>

        @can('create.permissions')
        <div class="permission-actions">
            <button type="button" id="save_permissions_btn" class="kt-btn common-secondary-btn permission-assign-btn">
                <i class="ki-filled ki-check text-base"></i>
                Assign Permission
            </button>
        </div>
        @endcan
    </div>
</div>

@else
<div class="flex items-center justify-center min-h-[400px]">
    <div class="text-center">
        <i class="ki-filled ki-lock text-4xl text-danger mb-4"></i>
        <h3 class="text-lg font-semibold text-foreground">Access Denied</h3>
        <p class="text-sm text-secondary-foreground">You do not have permission to view this page.</p>
    </div>
</div>
@endcan
@endsection

@section('scripts')
    @vite('resources/js/pages/permissions.js')
@endsection