@extends('hr.hr-master')

@section('title', 'Register Employee')

@section('content')
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card shadow-lg rounded">
                <div class="card-header text-center">
                    <h3 class="text-center mb-4" style="color: #5bc0de;">Register Employee</h3>
                </div>
                <div class="card-body">
                    @if($errors->any())
                    <div class="alert alert-danger">
                        <ul>
                            @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                    @endif

                    <form action="{{ route('hr.storeEmployee') }}" method="POST">
                        @csrf
                        <div class="mb-3">
                            <label for="name" class="form-label">Full Name</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="bi bi-person"></i></span>
                                <input type="text" name="name" value="{{ old('name') }}" class="form-control" id="name"
                                    placeholder="Enter full name" required>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="email" class="form-label">Email Address</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="bi bi-envelope"></i></span>
                                <input type="email" name="email" value="{{ old('email') }}" class="form-control"
                                    id="email" placeholder="Enter email" required>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="address" class="form-label">Address</label>
                            <textarea name="address" class="form-control" id="address" rows="3"
                                placeholder="Enter address" required>{{ old('address') }}</textarea>
                        </div>

                        <div class="mb-3">
                            <label for="mobile_number" class="form-label">Mobile Number</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="bi bi-phone"></i></span>
                                <input type="text" name="mobile_number" value="{{ old('mobile_number') }}"
                                    class="form-control" id="mobile_number" placeholder="Enter mobile number" required>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="gender" class="form-label">Gender</label>
                            <select name="gender" class="form-select" id="gender" required>
                                <option value="">Select Gender</option>
                                <option value="Male" {{ old('gender') == 'Male' ? 'selected' : '' }}>Male</option>
                                <option value="Female" {{ old('gender') == 'Female' ? 'selected' : '' }}>Female</option>
                                <option value="Other" {{ old('gender') == 'Other' ? 'selected' : '' }}>Other</option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label for="salary" class="form-label">Salary</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="bi bi-currency-dollar"></i></span>
                                <input type="text" name="salary" value="{{ old('salary') }}" class="form-control"
                                    id="salary" placeholder="Enter salary" required>
                            </div>
                        </div>
                        <select name="payscale_id" class="form-select" id="payscale_id" required>
                            <option value="">Select Payscale</option>
                            @forelse($payscales as $payscale)
                            <option value="{{ $payscale->id }}"
                                {{ old('payscale_id') == $payscale->id ? 'selected' : '' }}>
                                {{ $payscale->component_name ?? 'N/A' }}
                            </option>
                            @empty
                            <option value="">No Payscales Available</option>
                            @endforelse
                        </select>
                        <div class="mb-3">
                            <label for="username" class="form-label">Username</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="bi bi-person-circle"></i></span>
                                <input type="text" name="username" value="{{ old('username') }}" class="form-control"
                                    id="username" placeholder="Enter username" required>
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="password" class="form-label">Password</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="bi bi-lock"></i></span>
                                <input type="password" name="password" class="form-control" id="password"
                                    placeholder="Enter password" required>
                            </div>
                        </div>

                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary btn-lg">Register</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('styles')
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
<style>
.card {
    border-radius: 15px;
}

.input-group-text {
    background-color: #f1f1f1;
}

.form-label {
    font-weight: 600;
}

.form-control {
    border-radius: 8px;
    padding: 15px;
    font-size: 1rem;
}

.btn-primary {
    font-size: 1.1rem;
    font-weight: 600;
}

.alert-danger {
    font-size: 1rem;
}
</style>

@endsection