@extends('admin.layouts.admin')

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

@section('content')

<div class="row justify-content-center">
    <div class="col-lg-6">

        <div class="card border-0 shadow-sm">
            <div class="card-header bg-white">
                <strong>Create New User</strong>
                <small class="text-muted d-block">
                    Add a new admin / staff / support user
                </small>
            </div>

            <div class="card-body">

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

                    <!-- NAME -->
                    <div class="mb-3">
                        <label class="form-label">Full Name</label>
                        <input type="text"
                               name="name"
                               class="form-control @error('name') is-invalid @enderror"
                               value="{{ old('name') }}"
                               placeholder="John Doe"
                               required>
                        @error('name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- EMAIL -->
                    <div class="mb-3">
                        <label class="form-label">Email Address</label>
                        <input type="email"
                               name="email"
                               class="form-control @error('email') is-invalid @enderror"
                               value="{{ old('email') }}"
                               placeholder="user@email.com"
                               required>
                        @error('email')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- ROLE -->
                    <div class="mb-3">
                            <label class="form-label">Role</label>

                            <select name="role"
                                    class="form-select @error('role_id') is-invalid @enderror"
                                    required>
                                <option value="">Select role</option>

                                @foreach($roles as $role)
                                    <option value="{{ $role->id }}"
                                        {{ old('role_id') == $role->id ? 'selected' : '' }}>
                                        {{ $role->name }}
                                    </option>
                                @endforeach
                            </select>

                            @error('role_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>


                    <!-- PASSWORD -->
                    <div class="mb-3">
                        <label class="form-label">Password</label>
                        <input type="password"
                               name="password"
                               class="form-control @error('password') is-invalid @enderror"
                               placeholder="Minimum 6 characters"
                               required>
                        @error('password')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- STATUS -->
                    <div class="form-check form-switch mb-4">
                        <input class="form-check-input"
                               type="checkbox"
                               name="is_active"
                               value="1"
                               checked>
                        <label class="form-check-label">
                            Active User
                        </label>
                    </div>

                    <!-- ACTIONS -->
                    <div class="d-flex justify-content-end gap-2">
                        <a href="{{ route('admin.users.index') }}"
                           class="btn btn-light">
                            Cancel
                        </a>
                        <button class="btn btn-primary">
                            <i class="bi bi-check-circle"></i>
                            Create User
                        </button>
                    </div>

                </form>

            </div>
        </div>

    </div>
</div>

@endsection