@extends('admin.layouts.app')

@section('title', 'Create User')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2><i class="bi bi-person-plus"></i> Create New User</h2>
        <a href="{{ route('admin.users.index') }}" class="btn btn-secondary">
            <i class="bi bi-arrow-left"></i> Back to Users
        </a>
    </div>

    @if($errors->any())
        <div class="alert alert-danger">
            <ul class="mb-0">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('admin.users.store') }}" method="POST" enctype="multipart/form-data">
        @csrf

        <div class="row">
            <div class="col-md-8">
                <div class="card mb-4">
                    <div class="card-header bg-white">
                        <h5 class="mb-0">User Information</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="name" class="form-label">Full Name <span class="text-danger">*</span></label>
                                    <input type="text" name="name" id="name" class="form-control" value="{{ old('name') }}" placeholder="Enter full name" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="email" class="form-label">Email Address <span class="text-danger">*</span></label>
                                    <input type="email" name="email" id="email" class="form-control" value="{{ old('email') }}" placeholder="Enter email address" required>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="password" class="form-label">Password <span class="text-danger">*</span></label>
                                    <input type="password" name="password" id="password" class="form-control" placeholder="Enter password (min 8 characters)" required minlength="8">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="password_confirmation" class="form-label">Confirm Password <span class="text-danger">*</span></label>
                                    <input type="password" name="password_confirmation" id="password_confirmation" class="form-control" placeholder="Confirm password" required>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="role" class="form-label">Role <span class="text-danger">*</span></label>
                                    <select name="role" id="role" class="form-select" required>
                                        <option value="">Select Role</option>
                                        <option value="super_admin" {{ old('role') == 'super_admin' ? 'selected' : '' }}>Super Admin</option>
                                        <option value="admin" {{ old('role') == 'admin' ? 'selected' : '' }}>Admin</option>
                                        <option value="editor" {{ old('role') == 'editor' ? 'selected' : '' }}>Editor</option>
                                        <option value="reporter" {{ old('role') == 'reporter' ? 'selected' : '' }}>Reporter</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="status" class="form-label">Status <span class="text-danger">*</span></label>
                                    <select name="status" id="status" class="form-select" required>
                                        <option value="active" selected>Active</option>
                                        <option value="inactive">Inactive</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="photo" class="form-label">Profile Photo</label>
                            <input type="file" name="photo" id="photo" class="form-control" accept="image/*">
                            <small class="text-muted">Recommended: 300x300px, JPG or PNG</small>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card mb-3">
                    <div class="card-header bg-white">
                        <h5 class="mb-0">Role Permissions</h5>
                    </div>
                    <div class="card-body">
                        <div id="permissions_info">
                            <div class="alert alert-info">
                                <h6><i class="bi bi-info-circle"></i> Select a role to see permissions</h6>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="card">
                    <div class="card-header bg-white">
                        <h5 class="mb-0">Actions</h5>
                    </div>
                    <div class="card-body">
                        <button type="submit" class="btn btn-primary w-100 mb-2">
                            <i class="bi bi-check-circle"></i> Create User
                        </button>
                        <a href="{{ route('admin.users.index') }}" class="btn btn-outline-secondary w-100">
                            <i class="bi bi-x-circle"></i> Cancel
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const roleSelect = document.getElementById('role');
    const permissionsDiv = document.getElementById('permissions_info');

    const permissions = {
        super_admin: {
            title: 'Super Admin',
            color: 'danger',
            perms: ['Full system access', 'Manage all users', 'Manage all content', 'System settings', 'Delete anything']
        },
        admin: {
            title: 'Admin',
            color: 'warning',
            perms: ['Manage news & content', 'Manage reporters', 'Manage categories', 'Publish/Edit news', 'View analytics']
        },
        editor: {
            title: 'Editor',
            color: 'info',
            perms: ['Edit news', 'Publish news', 'Manage own news', 'Upload media', 'View analytics']
        },
        reporter: {
            title: 'Reporter',
            color: 'secondary',
            perms: ['Create news', 'Edit own news', 'Upload media', 'View own news only']
        }
    };

    roleSelect.addEventListener('change', function() {
        const role = this.value;
        if (role && permissions[role]) {
            const p = permissions[role];
            let html = `<div class="alert alert-${p.color}">
                <h6><i class="bi bi-shield-check"></i> ${p.title} Permissions</h6>
                <ul class="small mb-0">`;
            p.perms.forEach(perm => {
                html += `<li>${perm}</li>`;
            });
            html += `</ul></div>`;
            permissionsDiv.innerHTML = html;
        } else {
            permissionsDiv.innerHTML = '<div class="alert alert-info"><h6><i class="bi bi-info-circle"></i> Select a role to see permissions</h6></div>';
        }
    });

    // Trigger on page load if role is pre-selected
    if (roleSelect.value) {
        roleSelect.dispatchEvent(new Event('change'));
    }
});
</script>
@endpush
@endsection