@extends('layouts.app')

@section('title', 'Permissions')

@section('content')
    <h1>User Permissions</h1>
    <p class="subtitle">Control who can submit RFIs, and who can add Safety and/or Quality issues.</p>

    <a class="btn w-full" href="{{ route('admin.users.create') }}" style="margin-bottom:16px;">+ Add User</a>

    <form method="POST" action="{{ route('admin.users.update') }}">
        @csrf

        <div class="table-scroll">
            <table class="perm-table">
                <thead>
                    <tr>
                        <th>User</th>
                        <th class="center">Admin</th>
                        <th class="center">Submit RFIs</th>
                        <th class="center">Add Safety</th>
                        <th class="center">Add Quality</th>
                        <th class="center">Delete</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach ($users as $user)
                        <tr>
                            <td class="user-cell">
                                <div class="user-name">{{ $user->name }}</div>
                                <div class="user-email">{{ $user->email }}</div>
                            </td>
                            <td class="center" data-label="Admin">
                                <input type="checkbox" name="permissions[{{ $user->id }}][is_admin]" value="1" @checked($user->is_admin)>
                            </td>
                            <td class="center" data-label="Submit RFIs">
                                <input type="checkbox" name="permissions[{{ $user->id }}][can_submit_rfi]" value="1" @checked($user->can_submit_rfi)>
                            </td>
                            <td class="center" data-label="Add Safety">
                                <input type="checkbox" name="permissions[{{ $user->id }}][can_add_safety_issue]" value="1" @checked($user->can_add_safety_issue)>
                            </td>
                            <td class="center" data-label="Add Quality">
                                <input type="checkbox" name="permissions[{{ $user->id }}][can_add_quality_issue]" value="1" @checked($user->can_add_quality_issue)>
                            </td>
                            <td class="center" data-label="Delete">
                                @if ($user->id === auth()->id())
                                    <span class="hint">—</span>
                                @else
                                    <button type="button" class="btn danger btn-sm delete-user-btn"
                                        data-action="{{ route('admin.users.destroy', $user) }}"
                                        data-name="{{ $user->name }}">
                                        Delete
                                    </button>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <small class="hint">Admins can manage everyone's permissions and implicitly have all of the above, regardless of the other checkboxes.</small>

        <button class="btn w-full" type="submit" style="margin-top:16px;">Save Permissions</button>
    </form>

    {{-- Kept outside the permissions form above — forms can't be nested,
         and delete is a separate action from the bulk permission save. --}}
    <form id="delete-user-form" method="POST" style="display:none;">
        @csrf
        @method('DELETE')
    </form>

    <script>
        document.querySelectorAll('.delete-user-btn').forEach(function (btn) {
            btn.addEventListener('click', function () {
                if (! confirm('Delete ' + btn.dataset.name + '? This can\'t be undone.')) {
                    return;
                }
                const form = document.getElementById('delete-user-form');
                form.action = btn.dataset.action;
                form.submit();
            });
        });
    </script>
@endsection

<style>
    .btn-sm { padding: 6px 12px; font-size: .82rem; width: auto; display: inline-block; }
</style>