@extends('layouts.app')

@section('title', $user ? 'Edit User Access' : 'Add User')
@section('no-page-header')

@section('content')
<style>
    #user-access-form label { font-size: .75rem; line-height: 1rem; }
    #user-access-form input:not([type="checkbox"]), #user-access-form select { min-height: 2.15rem; padding: .4rem .65rem; font-size: .875rem; }
</style>
<div class="min-h-screen bg-gray-50 p-2 lg:p-4">
    <div class="max-w-6xl mx-auto bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden">
        <div class="px-4 py-3 border-b border-gray-200 flex items-center justify-between gap-3">
            <div>
                <h1 class="text-base font-semibold text-gray-900">{{ $user ? 'Edit User Access' : 'Add User' }}</h1>
                <p class="mt-1 text-xs text-gray-500">Enter user details, then select the access they need.</p>
            </div>
            <a href="{{ route('users.index') }}" class="text-sm text-gray-600 hover:text-gray-900"><i class="fas fa-arrow-left mr-1"></i>Back</a>
        </div>

        <form id="user-access-form" method="POST" action="{{ $user ? route('users.update', $user) : route('users.store') }}" class="p-4">
            @csrf
            @if($user) @method('PUT') @endif

            @if($errors->any())
                <div class="mb-4 px-3 py-2 text-sm text-red-800 bg-red-50 border border-red-200 rounded">Please correct the highlighted fields.</div>
            @endif

            <section>
                <h2 class="pb-1.5 mb-3 text-sm font-semibold text-gray-800 border-b border-gray-200">User Information</h2>
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
                    <div>
                        <label for="first_name" class="block mb-1 font-medium text-gray-700">First Name <span class="text-red-500">*</span></label>
                        <input id="first_name" name="first_name" value="{{ old('first_name', $user?->first_name) }}" required class="w-full border border-gray-300 rounded-md @error('first_name') border-red-500 @enderror">
                        @error('first_name')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label for="last_name" class="block mb-1 font-medium text-gray-700">Last Name <span class="font-normal text-gray-400">(Optional)</span></label>
                        <input id="last_name" name="last_name" value="{{ old('last_name', $user?->last_name) }}" class="w-full border border-gray-300 rounded-md @error('last_name') border-red-500 @enderror">
                        @error('last_name')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label for="email" class="block mb-1 font-medium text-gray-700">Email <span class="text-red-500">*</span></label>
                        <input type="email" id="email" name="email" value="{{ old('email', $user?->email) }}" required class="w-full border border-gray-300 rounded-md @error('email') border-red-500 @enderror">
                        @error('email')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label for="mobile" class="block mb-1 font-medium text-gray-700">Mobile <span class="text-red-500">*</span></label>
                        <input type="tel" id="mobile" name="mobile" value="{{ old('mobile', $user?->profile?->phone) }}" required inputmode="numeric" maxlength="20" class="w-full border border-gray-300 rounded-md @error('mobile') border-red-500 @enderror">
                        @error('mobile')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label for="status_id" class="block mb-1 font-medium text-gray-700">Status <span class="text-red-500">*</span></label>
                        <select id="status_id" name="status_id" required class="w-full border border-gray-300 rounded-md @error('status_id') border-red-500 @enderror">
                            @foreach($statuses as $status)
                                <option value="{{ $status->id }}" @selected((string) old('status_id', $user?->status_id) === (string) $status->id)>{{ ucfirst($status->name) }}</option>
                            @endforeach
                        </select>
                        @error('status_id')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label for="password" class="block mb-1 font-medium text-gray-700">Password {!! $user ? '<span class="font-normal text-gray-400">(Optional)</span>' : '<span class="text-red-500">*</span>' !!}</label>
                        <input type="password" id="password" name="password" {{ $user ? '' : 'required' }} autocomplete="new-password" class="w-full border border-gray-300 rounded-md @error('password') border-red-500 @enderror">
                        @error('password')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label for="password_confirmation" class="block mb-1 font-medium text-gray-700">Confirm Password {!! $user ? '<span class="font-normal text-gray-400">(Optional)</span>' : '<span class="text-red-500">*</span>' !!}</label>
                        <input type="password" id="password_confirmation" name="password_confirmation" {{ $user ? '' : 'required' }} autocomplete="new-password" class="w-full border border-gray-300 rounded-md">
                    </div>
                </div>
            </section>

            <section class="mt-5">
                <div class="pb-2 mb-3 border-b border-gray-200 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
                    <div>
                        <h2 class="text-sm font-semibold text-gray-800">Access Permissions</h2>
                        <p class="mt-1 text-xs text-gray-500">Check only the actions this user is allowed to perform.</p>
                    </div>
                    <div class="flex gap-2">
                        <button type="button" onclick="setAllPermissions(true)" class="px-2.5 py-1 text-xs border border-gray-300 rounded hover:bg-gray-50">Select All</button>
                        <button type="button" onclick="setAllPermissions(false)" class="px-2.5 py-1 text-xs border border-gray-300 rounded hover:bg-gray-50">Clear All</button>
                    </div>
                </div>

                <div class="space-y-3">
                    <div class="border border-gray-200 rounded-md overflow-hidden">
                        <div class="px-3 py-2 bg-gray-50 border-b border-gray-200 flex items-center justify-between">
                            <div>
                                <h3 class="text-xs font-semibold text-gray-700">Module Permissions</h3>
                                <p class="mt-0.5 text-xs text-gray-500">Read controls visibility. Create, Update and Delete control data changes.</p>
                            </div>
                            <button type="button" onclick="togglePermissionGroup(this)" class="text-xs font-medium text-indigo-600 hover:text-indigo-800">Toggle all</button>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="min-w-full text-xs">
                                <thead class="bg-gray-50 border-b border-gray-200">
                                    <tr>
                                        <th class="px-3 py-2 text-left font-semibold text-gray-600">Module</th>
                                        @foreach($permissionActions as $action => $actionLabel)
                                            <th class="px-3 py-2 text-center font-semibold text-gray-600">{{ $actionLabel }}</th>
                                        @endforeach
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-100">
                                    <tr class="hover:bg-gray-50">
                                        <td class="px-3 py-2 font-medium text-gray-700">Dashboard</td>
                                        <td class="px-3 py-2 text-center text-gray-400">—</td>
                                        <td class="px-3 py-2 text-center">
                                            <input type="checkbox" name="permissions[]" value="read_dashboard" @checked($selectedPermissions->contains('read_dashboard') || $selectedPermissions->contains('access_dashboard')) class="permission-checkbox h-4 w-4 text-indigo-600 rounded border-gray-300" aria-label="Read Dashboard">
                                        </td>
                                        <td colspan="2" class="px-3 py-2 text-center text-gray-400">Not applicable</td>
                                    </tr>
                                    @foreach($permissionModules as $module => $moduleLabel)
                                        <tr class="hover:bg-gray-50">
                                            <td class="px-3 py-2 font-medium text-gray-700 whitespace-nowrap">{{ $moduleLabel }}</td>
                                            @foreach($permissionActions as $action => $actionLabel)
                                                @php($permission = $action . '_' . $module)
                                                <td class="px-3 py-2 text-center">
                                                    <input type="checkbox" name="permissions[]" value="{{ $permission }}" @checked($selectedPermissions->contains($permission)) class="permission-checkbox module-permission h-4 w-4 text-indigo-600 rounded border-gray-300" data-module="{{ $module }}" data-action="{{ $action }}" aria-label="{{ $actionLabel }} {{ $moduleLabel }}">
                                                </td>
                                            @endforeach
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <div class="border border-gray-200 rounded-md overflow-hidden">
                        <div class="px-3 py-2 bg-gray-50 border-b border-gray-200 flex items-center justify-between">
                            <h3 class="text-xs font-semibold text-gray-700">Report Permissions</h3>
                            <button type="button" onclick="togglePermissionGroup(this)" class="text-xs font-medium text-indigo-600 hover:text-indigo-800">Toggle all</button>
                        </div>
                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
                            @foreach($reportPermissions as $permission => $label)
                                <label class="flex items-center justify-between gap-3 px-3 py-2 border-b border-gray-100 cursor-pointer hover:bg-gray-50">
                                    <span class="text-sm text-gray-700">{{ $label }}</span>
                                    <input type="checkbox" name="permissions[]" value="{{ $permission }}" @checked($selectedPermissions->contains($permission)) class="permission-checkbox h-4 w-4 text-indigo-600 rounded border-gray-300">
                                </label>
                            @endforeach
                        </div>
                    </div>
                </div>
                @error('permissions.*')<p class="mt-2 text-xs text-red-600">{{ $message }}</p>@enderror
            </section>

            <div class="mt-5 pt-3 border-t border-gray-200 flex justify-end gap-2">
                <a href="{{ route('users.index') }}" class="px-3 py-2 text-sm text-gray-700 border border-gray-300 rounded-md hover:bg-gray-50">Cancel</a>
                <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-indigo-600 rounded-md hover:bg-indigo-700">{{ $user ? 'Update User' : 'Create User' }}</button>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
    function setAllPermissions(checked) {
        document.querySelectorAll('.permission-checkbox').forEach(box => box.checked = checked);
    }

    function togglePermissionGroup(button) {
        const boxes = button.closest('.border').querySelectorAll('.permission-checkbox');
        const shouldCheck = Array.from(boxes).some(box => !box.checked);
        boxes.forEach(box => box.checked = shouldCheck);
    }

    document.querySelectorAll('.module-permission').forEach(box => {
        box.addEventListener('change', function () {
            if (this.checked && this.dataset.action !== 'read') {
                const readPermission = document.querySelector(`.module-permission[data-module="${this.dataset.module}"][data-action="read"]`);
                if (readPermission) readPermission.checked = true;
            }
        });
    });
</script>
@endpush