@extends('layouts.app')

@section('title', 'Create Custom Role')

@section('content')
<div class="max-w-5xl mx-auto space-y-6" x-data="{
    search: '',
    selectAll() {
        document.querySelectorAll('.permission-checkbox').forEach(cb => cb.checked = true);
    },
    clearAll() {
        document.querySelectorAll('.permission-checkbox').forEach(cb => cb.checked = false);
    },
    selectModule(moduleClass) {
        document.querySelectorAll('.' + moduleClass).forEach(cb => cb.checked = true);
    }
}">

    <div class="flex items-center justify-between">
        <div>
            <h1 class="text-xl font-bold text-slate-900 dark:text-white">Create Custom Tenant Role</h1>
            <p class="text-xs text-slate-500 dark:text-slate-400">Define role details, data access scope, and select granular capabilities.</p>
        </div>
        <a href="{{ route('app.roles.index') }}" class="px-4 py-2 bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-200 font-semibold text-xs rounded-xl">Back to Roles</a>
    </div>

    <form action="{{ route('app.roles.store') }}" method="POST" class="space-y-6">
        @csrf

        <!-- Role Metadata Section -->
        <div class="bg-white dark:bg-slate-800 rounded-3xl p-6 border border-slate-200 dark:border-slate-700/60 shadow-sm space-y-4">
            <h3 class="text-sm font-bold text-slate-900 dark:text-white uppercase tracking-wider">Role Configuration</h3>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-xs">
                <div>
                    <label for="name" class="block font-semibold text-slate-700 dark:text-slate-300 mb-1">Role Name *</label>
                    <input type="text" name="name" id="name" required class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl text-slate-900 dark:text-white" placeholder="e.g. Senior Receptionist Supervisor">
                </div>

                <div>
                    <label for="data_scope" class="block font-semibold text-slate-700 dark:text-slate-300 mb-1">Data Access Scope *</label>
                    <select name="data_scope" id="data_scope" required class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl text-slate-900 dark:text-white">
                        <option value="own">Own Records</option>
                        <option value="assigned">Assigned Records</option>
                        <option value="counter">Counter Level</option>
                        <option value="department">Department Level</option>
                        <option value="own_branch" selected>Own Branch</option>
                        <option value="selected_branches">Selected Branches</option>
                        <option value="all_branches">All Branches</option>
                        <option value="tenant">Entire Tenant Organization</option>
                    </select>
                </div>

                <div class="md:col-span-2">
                    <label for="description" class="block font-semibold text-slate-700 dark:text-slate-300 mb-1">Description</label>
                    <input type="text" name="description" id="description" class="w-full px-3 py-2 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl text-slate-900 dark:text-white" placeholder="Describe responsibilities for this role...">
                </div>
            </div>
        </div>

        <!-- Permission Matrix Grid (Requirement 12) -->
        <div class="bg-white dark:bg-slate-800 rounded-3xl p-6 border border-slate-200 dark:border-slate-700/60 shadow-sm space-y-4">
            <div class="flex flex-col md:flex-row md:items-center justify-between gap-4 pb-3 border-b border-slate-200 dark:border-slate-700">
                <div>
                    <h3 class="text-sm font-bold text-slate-900 dark:text-white uppercase tracking-wider">Granular Permission Matrix</h3>
                    <p class="text-xs text-slate-400">Select capabilities granted to users with this role.</p>
                </div>

                <div class="flex items-center space-x-2 rtl:space-x-reverse text-xs">
                    <input type="text" x-model="search" placeholder="Search permissions..." class="px-3 py-1.5 bg-slate-50 dark:bg-slate-900 border border-slate-300 dark:border-slate-700 rounded-xl text-xs">
                    <button type="button" @click="selectAll()" class="px-3 py-1.5 bg-sky-100 dark:bg-sky-950 text-sky-600 dark:text-sky-400 font-bold rounded-xl">Select All</button>
                    <button type="button" @click="clearAll()" class="px-3 py-1.5 bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 font-semibold rounded-xl">Clear All</button>
                </div>
            </div>

            <!-- Matrix Modules -->
            <div class="space-y-6 pt-2">
                @foreach($permissions as $module => $modulePermissions)
                    <div class="p-4 rounded-2xl bg-slate-50 dark:bg-slate-900/60 border border-slate-200 dark:border-slate-700/50 space-y-3"
                         x-show="!search || '{{ strtolower($module) }}'.includes(search.toLowerCase())">
                        <div class="flex items-center justify-between border-b border-slate-200 dark:border-slate-700/60 pb-2">
                            <h4 class="text-xs font-bold text-slate-900 dark:text-white uppercase tracking-wider flex items-center space-x-2 rtl:space-x-reverse">
                                <span class="w-2 h-2 rounded-full bg-sky-500"></span>
                                <span>{{ ucfirst($module) }} Management</span>
                            </h4>
                            <button type="button" @click="selectModule('mod-{{ $module }}')" class="text-[11px] font-semibold text-sky-600 dark:text-sky-400 hover:underline">
                                Select {{ ucfirst($module) }}
                            </button>
                        </div>

                        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3">
                            @foreach($modulePermissions as $perm)
                                <label class="flex items-start space-x-2 rtl:space-x-reverse p-2 rounded-xl bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 cursor-pointer hover:border-sky-500 transition-colors">
                                    <input type="checkbox" name="permissions[]" value="{{ $perm->id }}" class="permission-checkbox mod-{{ $module }} w-4 h-4 text-sky-600 border-slate-300 rounded focus:ring-sky-500 mt-0.5">
                                    <div>
                                        <span class="text-xs font-semibold text-slate-800 dark:text-slate-200 block">{{ $perm->name }}</span>
                                        <span class="text-[10px] text-slate-400 font-mono">{{ $perm->slug }}</span>
                                    </div>
                                </label>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        <div class="flex justify-end space-x-3 rtl:space-x-reverse">
            <a href="{{ route('app.roles.index') }}" class="px-5 py-2.5 bg-slate-200 dark:bg-slate-700 text-slate-700 dark:text-slate-200 font-bold text-xs rounded-xl">Cancel</a>
            <button type="submit" class="px-6 py-2.5 bg-sky-600 hover:bg-sky-700 text-white font-bold text-xs rounded-xl shadow-lg shadow-sky-600/25">
                Save & Create Role
            </button>
        </div>
    </form>
</div>
@endsection