@extends('layouts.demo10.base')

@section('content')

<style>
    /* Styling for checkboxes to match theme */
    .form-check-input:checked {
        background-color: var(--primary);
        border-color: var(--primary);
    }

    /* Force Select2 to match button height */
    .select2-container .select2-selection--single {
        height: 44px !important;
        display: flex !important;
        align-items: center !important;
        border-color: #e2e8f0; /* standard border color */
        border-radius: 0.475rem !important; /* match theme radius */
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 44px !important;
        top: 0 !important;
    }

    /* Ensure the add button also has this fixed height if not already */
    .add-btn {
        height: 44px !important;
    }
</style>

@can('view.pii_management')
<div class="grid gap-5 lg:gap-7.5">
    <!-- begin: Toolbar -->
    <div class="flex flex-wrap items-center justify-between gap-5">
        <div class="flex flex-col gap-1">
            <h1 class="font-semibold text-xl text-mono">
                PII Management System
            </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>
                <a class="hover:text-primary transition-colors" href="{{ route('tenants.projects') }}">Projects</a>
                <span class="text-muted-foreground">/</span>
                <span class="text-mono">{{ $currentProject->name ?? 'Project' }}</span>
                <span class="text-muted-foreground">/</span>
                <span class="text-mono">PII Management</span>
            </div>
        </div>
    </div>
    <!-- end: Toolbar -->

    <div class="card kt-card h-full min-w-full rounded-xl border border-gray-200 shadow-sm bg-white">
        <div class="kt-card-body p-6">
            {{-- <h3 class="kt-card-title flex items-center gap-2 text-xl font-bold text-gray-900 mb-6">
                <i class="ki-filled ki-security-user text-2xl text-primary"></i>
                PII Management System
            </h3> --}}

            <!-- Role Selection -->
            <div class="mb-8">
                <h4 class="text-base font-bold text-gray-900 mb-3">Role</h4>
                <div class="flex items-center gap-4">
                    <div class="w-full max-w-[300px]">
                       {{-- Role select — wrap in div with onchange audit ───────── --}}
                        <select class="form-select form-select-solid" data-control="select2" data-placeholder="Select a Role" name="role" id="role_select">
                            <option value=""></option>
                            @foreach($roles as $role)
                                <option value="{{ $role->id }}">{{ $role->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>

            <!-- Dataset Attributes -->
            <div class="mb-5">
                <h4 class="text-base font-bold text-gray-900 mb-6">Dataset Attributes</h4>

                @php
                    $groupedAttributes = collect($attributes)->groupBy('table');
                @endphp

                @if(count($attributes) > 0)
                    <!-- Global Select All -->
                    <div class="flex items-center gap-3 mb-6 bg-gray-50 p-4 rounded-lg border border-gray-200">
                       {{-- Global Select All ───────────────────────────────────── --}}
                        <input class="form-check-input w-5 h-5 text-primary bg-white border-gray-300 rounded focus:ring-primary"
                            type="checkbox"
                            id="select_all_global"
                            onclick="AuditTracker.track({
                                event_type: 'click',
                                module:     'PiiManagement',
                                section:    'PiiManagement',
                                page:       'PII Management Assign',
                                action:     this.checked ? 'Select All Global Attributes' : 'Deselect All Global Attributes'
                            })">
                        <label class="form-check-label text-gray-800 font-bold cursor-pointer text-base select-none" for="select_all_global">
                            Select All Attributes
                        </label>
                    </div>
                @endif

                <div class="flex flex-col gap-8">
                    @forelse ($groupedAttributes as $tableName => $tableAttributes)
                        @php $tableSlug = Str::slug($tableName); @endphp
                        <div class="rounded-lg border border-gray-100 p-5 bg-gray-50/50 section-container" data-section="{{ $tableSlug }}">
                            <h5 class="text-sm font-bold text-gray-800 mb-5 uppercase tracking-wider border-b border-gray-200 pb-2 flex items-center justify-between">
                                <div class="flex items-center gap-2">
                                    <i class="ki-filled ki-folder text-gray-400"></i>
                                    {{ $tableName }}
                                </div>
                                <div class="flex items-center gap-2">
                                    {{-- Section Select All (inside the @forelse loop) ────────── --}}
                                    <input class="form-check-input w-4 h-4 text-primary bg-white border-gray-300 rounded focus:ring-primary section-checkbox"
                                        type="checkbox"
                                        id="select_all_{{ $tableSlug }}"
                                        data-target-section="{{ $tableSlug }}"
                                        onclick="AuditTracker.track({
                                            event_type: 'click',
                                            module:     'PiiManagement',
                                            section:    'PiiManagement',
                                            page:       'PII Management Assign',
                                            action:     this.checked ? 'Select All Section' : 'Deselect All Section',
                                            meta:       { section: '{{ $tableName }}' }
                                        })">
                                    <label class="text-xs font-normal text-gray-500 cursor-pointer select-none" for="select_all_{{ $tableSlug }}">Select All</label>
                                </div>
                            </h5>

                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-y-4 gap-x-8">
                                @foreach ($tableAttributes as $index => $attribute)
                                    <div class="flex items-center gap-3">
                                        <input class="form-check-input w-4 h-4 text-primary bg-white border-gray-300 rounded focus:ring-primary attribute-checkbox"
                                            type="checkbox"
                                            id="attr_{{ $tableSlug }}_{{ $index }}"
                                            name="attributes[]"
                                            value="{{ $attribute['table'] }}::{{ $attribute['column'] }}"
                                            data-section="{{ $tableSlug }}">
                                        <label class="form-check-label text-gray-700 font-medium cursor-pointer text-sm select-none" for="attr_{{ $tableSlug }}_{{ $index }}">
                                            {{ $attribute['label'] }}
                                        </label>
                                    </div>
                                @endforeach
                            </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 dataset attributes found in the connected database.
                        </div>
                    @endforelse
                </div>
            </div>

            <!-- Footer: Save Button -->
            <div class="flex justify-center mt-10">
                @can('edit.pii_management')
                {{-- Save button ─────────────────────────────────────────── --}}
                <button type="button"
                        id="save_pii_attributes_btn"
                        class="kt-btn kt-btn-primary common-secondary-btn min-w-[150px] flex items-center justify-center gap-2"
                        onclick="AuditTracker.track({
                            event_type: 'click',
                            module:     'PiiManagement',
                            section:    'PiiManagement',
                            page:       'PII Management Assign',
                            action:     'Click Save PII Attributes Button'
                        })">
                    <i class="ki-filled ki-save-2 fs-2"></i>
                    Save Changes
                </button>
                @endcan
            </div>

        </div>
    </div>
    <!-- end: Card -->
</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

<script>
    window.piiManagementConfig = {
        fetchUrlTemplate: "{{ route('tenants.projects.pii_management.get_role_attributes', ['id' => $id, 'projectName' => $projectName, 'roleId' => '__ROLE_ID__']) }}",
        saveUrl: "{{ route('tenants.projects.pii_management.store_role', ['id' => $id, 'projectName' => $projectName]) }}",
    };
</script>

@section('scripts')
    @vite('resources/js/pages/pii-management.js')
@endsection