@extends('layouts.app')

@section('content')
    <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
        <div>
            <h4 class="mb-0">Permission modules</h4>
            <p class="text-muted small mb-0">Each <code>module_key</code> is stored in <code>department_module_permissions</code> and checked by route middleware (<code>module:your.key</code>).</p>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('visibility.index') }}" class="btn btn-sm btn-outline-warning">Visibility manager</a>
            <a href="{{ route('users.index') }}" class="btn btn-sm btn-outline-secondary">Users</a>
        </div>
    </div>

    <div class="row g-4">
        <div class="col-lg-4">
            <div class="card shadow-sm">
                <div class="card-header fw-bold">Add module</div>
                <div class="card-body">
                    <form method="POST" action="{{ route('visibility-modules.store') }}" class="row g-2">
                        @csrf
                        <div class="col-12">
                            <label class="form-label">Key <span class="text-danger">*</span></label>
                            <input name="key" class="form-control font-monospace" required maxlength="80"
                                   placeholder="e.g. reports.monthly" value="{{ old('key') }}">
                            <div class="form-text">Lowercase letters, numbers, dots, dashes, underscores.</div>
                        </div>
                        <div class="col-12">
                            <label class="form-label">Label <span class="text-danger">*</span></label>
                            <input name="label" class="form-control" required maxlength="120" value="{{ old('label') }}">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Group <span class="text-danger">*</span></label>
                            <input name="group" class="form-control" required maxlength="80" value="{{ old('group', 'Other') }}">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Description</label>
                            <input name="description" class="form-control" maxlength="255" value="{{ old('description') }}">
                        </div>
                        <div class="col-12">
                            <label class="form-label">Sort order</label>
                            <input type="number" name="sort_order" class="form-control" min="0" max="9999" value="{{ old('sort_order', 0) }}">
                        </div>
                        <div class="col-12 form-check">
                            <input type="hidden" name="is_active" value="0">
                            <input class="form-check-input" type="checkbox" name="is_active" value="1" id="mod_act" {{ old('is_active', true) ? 'checked' : '' }}>
                            <label class="form-check-label" for="mod_act">Active</label>
                        </div>
                        <div class="col-12 d-grid">
                            <button class="btn btn-success">Save module</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="col-lg-8">
            <div class="card shadow-sm">
                <div class="card-header fw-bold">All modules</div>
                <div class="card-body p-0 table-responsive">
                    <table class="table table-sm mb-0 align-middle">
                        <thead>
                        <tr>
                            <th>Key</th>
                            <th>Label</th>
                            <th>Group</th>
                            <th>Active</th>
                            <th></th>
                        </tr>
                        </thead>
                        <tbody>
                        @forelse($modules as $mod)
                            <tr class="{{ $mod->is_active ? '' : 'table-secondary' }}">
                                <td><code>{{ $mod->key }}</code></td>
                                <td>{{ $mod->label }}</td>
                                <td>{{ $mod->group }}</td>
                                <td>{{ $mod->is_active ? 'Yes' : 'No' }}</td>
                                <td class="text-end">
                                    <a href="{{ route('visibility-modules.edit', $mod) }}" class="btn btn-sm btn-outline-secondary">Edit</a>
                                    <form method="POST" action="{{ route('visibility-modules.destroy', $mod) }}" class="d-inline"
                                          onsubmit="return confirm('Delete module {{ $mod->key }}? This removes all department and user permission rows for this key.');">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit" class="btn btn-sm btn-outline-danger">Delete</button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="5" class="text-center text-muted py-3">No modules. Run migrations or add one.</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection
