@include('auth-pages.header')
    <div class="lg-w-50 px-24 py-40 d-flex justify-content-center align-items-center">
        <div class="max-w-540-px mx-auto w-100">
            <a href="javascript:void(0);">
                <img src="{{ asset('assets/images/logo.png') }}" alt="Logo">
            </a>
            <div class="mt-48 mb-32">
                <h1 class="h6 fw-bold text-primary-light">Register Yourself 🚀</h1>
                <p class="text-sm text-secondary-light">
                    Fill in the details to get started
                </p>
            </div>

            <form action="{{ route('register') }}" method="POST" class="d-flex flex-column gap-24">
                @csrf
                <div>
                    <label class="text-sm fw-semibold text-primary-light mb-8">Full Name <span class="text-danger-600">*</span></label>
                    <!-- <input type="text" name="name" class="form-control" placeholder="Enter your full name" value="{{ old('name') }}" required> -->
                    <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" value="{{ old('name') }}" placeholder="Enter your full name">
                    @error('name')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                    @enderror
                </div>
                <div>
                    <label class="text-sm fw-semibold text-primary-light mb-8">Email Address <span class="text-danger-600">*</span></label>
                    <!-- <input type="email" name="email" class="form-control" placeholder="Enter your email" value="{{ old('email') }}" required> -->
                    <input type="email" name="email" class="form-control @error('email') is-invalid @enderror" value="{{ old('email') }}" placeholder="Enter your email">

                    @error('email')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                    @enderror
                </div>
                <div>
                    <label class="text-sm fw-semibold text-primary-light mb-8">Mobile Number <span class="text-danger-600">*</span></label>
                    <input type="text" name="mobile_number" class="form-control @error('mobile_number') is-invalid @enderror" value="{{ old('mobile_number') }}" placeholder="Enter mobile number">

                    @error('mobile_number')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                    @enderror
                </div>
                <div>
                    <label class="text-sm fw-semibold text-primary-light mb-8">Date of Birth <span class="text-danger-600">*</span></label>
                    <input type="date" name="date_of_birth" class="form-control @error('date_of_birth') is-invalid @enderror" value="{{ old('date_of_birth') }}">

                    @error('date_of_birth')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                    @enderror
                </div>
                <div>
                    <label class="text-sm fw-semibold text-primary-light mb-8">Age <span class="text-danger-600">*</span></label>
                    <input type="number" name="age" class="form-control @error('age') is-invalid @enderror" value="{{ old('age') }}" placeholder="Enter age">

                    @error('age')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                    @enderror
                </div>
                <div>
                    <label class="text-sm fw-semibold text-primary-light mb-8">Select Role</label>

                    <select name="role" id="roleSelect" class="form-select @error('role') is-invalid @enderror">
                        <option value="">Choose your role</option>
                        <option value="student" {{ old('role') == 'student' ? 'selected' : '' }}>Student</option>
                        <option value="teacher" {{ old('role') == 'teacher' ? 'selected' : '' }}>Teacher</option>
                    </select>

                    @error('role')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                    @enderror
                </div>
                <div>
                    <label class="text-sm fw-semibold text-primary-light mb-8">Select Gender</label>
                    <select name="gender" class="form-select @error('gender') is-invalid @enderror">
                        <option value="">Select</option>
                        @foreach($gender as $genders)
                            <option value="{{ $genders->id }}"
                                {{ old('gender') == $genders->gender_name ? 'selected' : '' }}>
                                {{ $genders->gender_name }}
                            </option>
                        @endforeach
                    </select>

                    @error('gender')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                    @enderror
                </div>
                <div id="categoryField">
                    <label class="text-sm fw-semibold text-primary-light mb-8">Select Category</label>
                    <select name="category" id="categorySelect" class="form-select @error('category') is-invalid @enderror">
                        <option value="">Select</option>

                        @foreach($category as $categories)
                            <option value="{{ $categories->id }}"
                                {{ old('category') == $categories->category_name ? 'selected' : '' }}>
                                {{ $categories->category_name }}
                            </option>
                        @endforeach
                    </select>

                    @error('category')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                    @enderror
                </div>
                <div>
                    <label class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Password <span class="text-danger-600">*</span></label>
                    <!-- <input type="password" name="password" class="form-control" required> -->
                    <input type="password" name="password" class="form-control @error('password') is-invalid @enderror" placeholder="Enter password">

                    @error('password')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                    @enderror
                </div>
                <div>
                    <label class="text-sm fw-semibold text-primary-light d-inline-block mb-8">Confirm Password <span class="text-danger-600">*</span></label>
                    <input type="password" name="password_confirmation" class="form-control" placeholder="Confirm password">
                </div>
                <div class="form-check style-check d-flex align-items-center">
                    <!-- <input class="form-check-input" type="checkbox" name="terms" required> -->
                    <input type="checkbox" name="terms" class="form-check-input @error('terms') is-invalid @enderror">
                    
                    @error('terms')
                        <div class="text-danger small">
                            {{ $message }}
                        </div>
                    @enderror
                    <label class="form-check-label">I agree to the Terms & Conditions</label>
                </div>

                <button type="submit" class="btn btn-primary-600 w-100 py-16 radius-8 text-sm fw-semibold">Create Account</button>
            </form>

            <!-- Login Link -->
            <div class="mt-24 text-center text-sm">
                Already have an account?
                <a href="{{ route('login.form') }}" class="text-primary-600 fw-semibold text-decoration-underline">Log In</a>
            </div>
        </div>
    </div>
</div>
@include('auth-pages.footer')