@extends('layouts.app')

@section('page_title', 'Add User')

@section('content')
    
        <div class="card-header border-0 bg-transparent py-2">
            <h5 class="mb-0 fw-bold text-dark" style="font-size: 1.25rem;">Add New User</h5>
        </div>
        <div class="card-body py-2">
            <form action="#" method="POST" id="addUserForm">
                @csrf
                <div class="mb-2">
                    <label for="username" class="form-label mb-1">Username</label>
                    <input type="text" class="form-control form-control-sm" id="username" name="username" required>
                </div>
                <div class="mb-2">
                    <label for="firstName" class="form-label mb-1">First Name</label>
                    <input type="text" class="form-control form-control-sm" id="firstName" name="firstName" required>
                </div>
                <div class="mb-2">
                    <label for="lastName" class="form-label mb-1">Last Name</label>
                    <input type="text" class="form-control form-control-sm" id="lastName" name="lastName" required>
                </div>
                <div class="mb-2">
                    <label for="role" class="form-label mb-1">User Role</label>
                    <input type="text" class="form-control form-control-sm" id="role" name="role" required>
                </div>
                <div class="mb-2">
                    <label for="email" class="form-label mb-1">Email</label>
                    <input type="email" class="form-control form-control-sm" id="email" name="email" required>
                </div>
                <div class="mb-2">
                    <label for="status" class="form-label mb-1">Status</label>
                    <select class="form-select form-select-sm" id="status" name="status" required>
                        <option value="Active">Active</option>
                        <option value="Inactive">Inactive</option>
                    </select>
                </div>
                <div class="d-flex justify-content-end mt-3">
                    <a href="{{ url('user-management') }}" class="btn btn-outline-secondary btn-sm me-2" style="margin-right:5px">Cancel</a>
                    <button type="submit" class="btn btn-primary btn-sm">Add User</button>
                </div>
            </form>
        </div>
   

    <style>
        .card {
            border-radius: 8px;
        }
        .form-control,
        .form-select {
            font-size: 0.85rem;
            border-radius: 4px;
            padding: 0.375rem 0.75rem;
        }
        .form-label {
            font-weight: 500;
            font-size: 0.85rem;
            line-height: 1.2;
        }
        .btn-primary {
            background-color: #E74610;
            border-color: #E74610;
            font-size: 0.85rem;
            padding: 0.375rem 0.75rem;
        }
        .btn-primary:hover {
            background-color: #d63f0e;
            border-color: #d63f0e;
        }
        .btn-outline-secondary {
            font-size: 0.85rem;
            padding: 0.375rem 0.75rem;
        }
        .form-control-sm,
        .form-select-sm {
            height: calc(1.5em + 0.5rem + 2px);
        }
    </style>
@endsection