@extends('layouts.app')

@section('content')
<div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
    <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
        <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
            <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">{{ __('roles.create') }}</h1>
        </div>
    </div>
</div>

<div id="kt_app_content" class="app-content flex-column-fluid">
    <div id="kt_app_content_container" class="app-container container-xxl">
        <div class="card">
            <form action="{{ route('roles.store') }}" method="POST">
                @csrf
                <div class="card-body pt-6">
                    <div class="fv-row mb-7">
                        <label class="required fs-6 fw-semibold form-label">{{ __('roles.role_name') }}</label>
                        <input type="text" name="name" class="form-control form-control-solid @error('name') is-invalid @enderror" value="{{ old('name') }}" required>
                        @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Permissions Section Header with Toggle -->
                    <div class="fv-row mt-10">
                        <div class="d-flex flex-stack flex-wrap mb-6 gap-4">
                            <div class="d-flex align-items-center gap-4">
                                <label class="fs-5 fw-bold form-label mb-0">{{ __('roles.permissions') ?? 'İzinler' }}</label>
                                <!-- Toggle buttons for Simple vs Advanced view -->
                                <div class="nav-group nav-group-outline" data-kt-buttons="true">
                                    <button type="button" class="btn btn-sm btn-color-gray-600 btn-active-color-primary btn-active-light-primary px-4 py-2 active" id="btn_view_simple">
                                        {{ __('roles.simple_view') ?? 'Basit Görünüm' }}
                                    </button>
                                    <button type="button" class="btn btn-sm btn-color-gray-600 btn-active-color-primary btn-active-light-primary px-4 py-2" id="btn_view_advanced">
                                        {{ __('roles.advanced_view') ?? 'Gelişmiş Görünüm' }}
                                    </button>
                                </div>
                            </div>
                            <!-- Select All -->
                            <label class="form-check form-check-custom form-check-solid">
                                <input class="form-check-input" type="checkbox" id="kt_roles_select_all" />
                                <span class="form-check-label fw-semibold" for="kt_roles_select_all">{{ __('roles.select_all') ?? 'Tümünü Seç' }}</span>
                            </label>
                        </div>

                        <!-- Permissions Grid organized by Resource -->
                        @php
                            $groupedPermissions = [];
                            foreach ($permissions as $permission) {
                                if (strpos($permission->name, ':') !== false) {
                                    $parts = explode(':', $permission->name);
                                    $action = $parts[0];
                                    $resource = $parts[1] ?? 'General';
                                } elseif (strpos($permission->name, '_') !== false) {
                                    $lastUnderscore = strrpos($permission->name, '_');
                                    $action = substr($permission->name, 0, $lastUnderscore);
                                    $resource = substr($permission->name, $lastUnderscore + 1);
                                } else {
                                    $action = $permission->name;
                                    $resource = $permission->name;
                                    if (in_array($resource, ['IncomeExpenseChart', 'StatsOverview'])) {
                                        $action = $permission->name;
                                        $resource = 'General';
                                    }
                                }

                                $groupedPermissions[$resource][] = [
                                    'name' => $permission->name,
                                    'action' => $action
                                ];
                            }
                        @endphp

                        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-5">
                            @foreach($groupedPermissions as $resource => $items)
                                @if(strtolower($resource) === 'company' && !auth()->user()->hasRole('super_admin'))
                                    @continue
                                @endif
                                <div class="col">
                                    <!-- Resource Card -->
                                    <div class="card card-bordered h-100">
                                        <div class="card-header min-h-50px py-2 bg-light">
                                            <div class="card-title">
                                                <h4 class="fw-bold fs-6 mb-0 text-gray-800">{{ \Illuminate\Support\Facades\Lang::has('resources.' . $resource) ? __('resources.' . $resource) : $resource }}</h4>
                                            </div>
                                            <div class="card-toolbar">
                                                <button type="button" class="btn btn-sm btn-link btn-active-color-primary py-0 px-0 select-resource-all" data-resource="{{ $resource }}">
                                                    {{ \Illuminate\Support\Facades\Lang::has('roles.select_all') ? __('roles.select_all') : 'Tümünü Seç' }}
                                                </button>
                                            </div>
                                        </div>
                                        <div class="card-body p-5">
                                            <!-- Simple view checkboxes -->
                                            @php
                                                $availableActions = array_column($items, 'action');
                                                $hasView = !empty(array_intersect(['View', 'ViewAny'], $availableActions)) || in_array($resource, $availableActions);
                                                $hasCreate = in_array('Create', $availableActions);
                                                $hasUpdate = !empty(array_intersect(['Update', 'Restore', 'RestoreAny', 'Replicate', 'Reorder'], $availableActions));
                                                $hasDelete = !empty(array_intersect(['Delete', 'DeleteAny', 'ForceDelete', 'ForceDeleteAny'], $availableActions));
                                            @endphp
                                            <div class="simple-permissions-group d-flex flex-column gap-3" data-resource="{{ $resource }}">
                                                @if($hasView)
                                                    <label class="form-check form-check-custom form-check-solid form-check-sm">
                                                        <input class="form-check-input simple-action-checkbox" type="checkbox" data-resource="{{ $resource }}" data-simple-action="view" />
                                                        <span class="form-check-label text-gray-800 fw-semibold fs-7">
                                                            {{ __('roles.view_perm') ?? 'Görüntüleme' }}
                                                        </span>
                                                    </label>
                                                @endif
                                                @if($hasCreate)
                                                    <label class="form-check form-check-custom form-check-solid form-check-sm">
                                                        <input class="form-check-input simple-action-checkbox" type="checkbox" data-resource="{{ $resource }}" data-simple-action="create" />
                                                        <span class="form-check-label text-gray-800 fw-semibold fs-7">
                                                            {{ __('roles.create_perm') ?? 'Ekleme' }}
                                                        </span>
                                                    </label>
                                                @endif
                                                @if($hasUpdate)
                                                    <label class="form-check form-check-custom form-check-solid form-check-sm">
                                                        <input class="form-check-input simple-action-checkbox" type="checkbox" data-resource="{{ $resource }}" data-simple-action="update" />
                                                        <span class="form-check-label text-gray-800 fw-semibold fs-7">
                                                            {{ __('roles.update_perm') ?? 'Düzenleme' }}
                                                        </span>
                                                    </label>
                                                @endif
                                                @if($hasDelete)
                                                    <label class="form-check form-check-custom form-check-solid form-check-sm">
                                                        <input class="form-check-input simple-action-checkbox" type="checkbox" data-resource="{{ $resource }}" data-simple-action="delete" />
                                                        <span class="form-check-label text-gray-800 fw-semibold fs-7">
                                                            {{ __('roles.delete_perm') ?? 'Silme' }}
                                                        </span>
                                                    </label>
                                                @endif
                                            </div>

                                            <!-- Advanced view checkboxes (Hidden by default, containing actual Spatie inputs) -->
                                            <div class="advanced-permissions-group d-none flex-column gap-3" data-resource="{{ $resource }}">
                                                @foreach($items as $item)
                                                    <label class="form-check form-check-custom form-check-solid form-check-sm">
                                                        <input class="form-check-input permission-checkbox" type="checkbox" name="permissions[]" value="{{ $item['name'] }}" data-resource="{{ $resource }}" data-action="{{ $item['action'] }}" />
                                                        <span class="form-check-label text-gray-700 fs-7">
                                                            {{ \Illuminate\Support\Facades\Lang::has('actions.' . $item['action']) ? __('actions.' . $item['action']) : $item['action'] }}
                                                        </span>
                                                    </label>
                                                @endforeach
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="card-footer d-flex justify-content-end py-6 px-9">
                    <a href="{{ route('roles.index') }}" class="btn btn-light btn-active-light-primary me-2">{{ __('common.cancel') }}</a>
                    <button type="submit" class="btn btn-primary">{{ __('roles.save') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const selectAllCheckbox = document.getElementById('kt_roles_select_all');
        const advancedCheckboxes = document.querySelectorAll('.permission-checkbox');
        const simpleCheckboxes = document.querySelectorAll('.simple-action-checkbox');
        const resourceButtons = document.querySelectorAll('.select-resource-all');

        // Simple vs Advanced Toggle Logic
        const btnSimple = document.getElementById('btn_view_simple');
        const btnAdvanced = document.getElementById('btn_view_advanced');
        const simpleGroups = document.querySelectorAll('.simple-permissions-group');
        const advancedGroups = document.querySelectorAll('.advanced-permissions-group');

        btnSimple.addEventListener('click', function() {
            btnSimple.classList.add('active');
            btnAdvanced.classList.remove('active');
            simpleGroups.forEach(g => g.classList.remove('d-none'));
            advancedGroups.forEach(g => g.classList.add('d-none'));
        });

        btnAdvanced.addEventListener('click', function() {
            btnAdvanced.classList.add('active');
            btnSimple.classList.remove('active');
            advancedGroups.forEach(g => g.classList.remove('d-none'));
            simpleGroups.forEach(g => g.classList.add('d-none'));
        });

        // Mapping from Simple action type to real permission actions
        const actionMapping = {
            view: ['View', 'ViewAny'],
            create: ['Create'],
            update: ['Update', 'Restore', 'RestoreAny', 'Replicate', 'Reorder'],
            delete: ['Delete', 'DeleteAny', 'ForceDelete', 'ForceDeleteAny']
        };

        // Sync Simple checkbox state from corresponding Advanced checkboxes
        function syncSimpleFromAdvanced(resource) {
            Object.keys(actionMapping).forEach(simpleAct => {
                const targetActions = actionMapping[simpleAct];
                const selector = `.permission-checkbox[data-resource="${resource}"]`;
                const relatedAdvanced = Array.from(document.querySelectorAll(selector))
                    .filter(cb => targetActions.includes(cb.getAttribute('data-action')));

                if (relatedAdvanced.length === 0) return;

                const checkedCount = relatedAdvanced.filter(cb => cb.checked).length;
                const simpleCb = document.querySelector(`.simple-action-checkbox[data-resource="${resource}"][data-simple-action="${simpleAct}"]`);

                if (simpleCb) {
                    simpleCb.checked = checkedCount === relatedAdvanced.length;
                    simpleCb.indeterminate = checkedCount > 0 && checkedCount < relatedAdvanced.length;
                }
            });
        }

        // Initialize Simple checkboxes state on load
        const resources = Array.from(new Set(Array.from(advancedCheckboxes).map(cb => cb.getAttribute('data-resource'))));
        resources.forEach(syncSimpleFromAdvanced);

        // When Simple checkbox is toggled, update related Advanced checkboxes
        simpleCheckboxes.forEach(scb => {
            scb.addEventListener('change', function() {
                const resource = this.getAttribute('data-resource');
                const simpleAct = this.getAttribute('data-simple-action');
                const targetActions = actionMapping[simpleAct];

                const selector = `.permission-checkbox[data-resource="${resource}"]`;
                const relatedAdvanced = Array.from(document.querySelectorAll(selector))
                    .filter(cb => targetActions.includes(cb.getAttribute('data-action')));

                relatedAdvanced.forEach(acb => {
                    acb.checked = this.checked;
                });

                updateSelectAllState();
            });
        });

        // When Advanced checkbox is toggled, update Simple checkbox
        advancedCheckboxes.forEach(acb => {
            acb.addEventListener('change', function() {
                const resource = this.getAttribute('data-resource');
                syncSimpleFromAdvanced(resource);
                updateSelectAllState();
            });
        });

        // Update main Select All state based on individual advanced checkboxes
        function updateSelectAllState() {
            const checkedCount = document.querySelectorAll('.permission-checkbox:checked').length;
            selectAllCheckbox.checked = checkedCount === advancedCheckboxes.length;
            selectAllCheckbox.indeterminate = checkedCount > 0 && checkedCount < advancedCheckboxes.length;
        }

        // Main Select All trigger
        selectAllCheckbox.addEventListener('change', function() {
            advancedCheckboxes.forEach(cb => {
                cb.checked = this.checked;
            });
            resources.forEach(syncSimpleFromAdvanced);
        });

        // Resource group select all trigger
        resourceButtons.forEach(btn => {
            btn.addEventListener('click', function(e) {
                e.preventDefault();
                const resource = this.getAttribute('data-resource');
                const groupCheckboxes = document.querySelectorAll(`.permission-checkbox[data-resource="${resource}"]`);
                const allChecked = Array.from(groupCheckboxes).every(cb => cb.checked);

                groupCheckboxes.forEach(cb => {
                    cb.checked = !allChecked;
                });
                
                syncSimpleFromAdvanced(resource);
                updateSelectAllState();
            });
        });

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