@extends('layout.master')

@section('title', 'Register')

@section('main')
<main id="main" class="main">

    <div class="pagetitle">
        <h1>Register</h1>
        <nav>
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('view-dashboard') }}">Home</a></li>
                <li class="breadcrumb-item"><a href="{{ route('users.index') }}">Users</a></li>
                <li class="breadcrumb-item active">Register</li>
            </ol>
        </nav>
    </div><!-- End Page Title -->

    <section class="section">
        <div class="row">
            <div class="col-lg-8">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">User Registration Form</h5>

                        <!-- Registration Form -->
                        <form action="{{ route('add-member') }}" method="post" class="needs-validation" novalidate>
                            @csrf

                            <!-- Full Name -->
                            <div class="row mb-3">
                                <label for="yourName" class="col-sm-4 col-form-label">Full Name</label>
                                <div class="col-sm-8">
                                    <input type="text" name="name" class="form-control" id="yourName" required>
                                    <div class="invalid-feedback">Please enter your full name.</div>
                                </div>
                            </div>

                            <!-- Email -->
                            <div class="row mb-3">
                                <label for="yourEmail" class="col-sm-4 col-form-label">Email</label>
                                <div class="col-sm-8">
                                    <input type="email" name="email" class="form-control" id="yourEmail" required>
                                    <div class="invalid-feedback">Please enter a valid email address.</div>
                                </div>
                            </div>

                            <!-- Password -->
                            <div class="row mb-3">
                                <label for="yourPassword" class="col-sm-4 col-form-label">Password</label>
                                <div class="col-sm-8">
                                    <input type="password" name="password" class="form-control" id="yourPassword" required>
                                    <div class="invalid-feedback">Please enter a password.</div>
                                </div>
                            </div>

                            <!-- Confirm Password -->
                            <div class="row mb-3">
                                <label for="yourPasswordConfirmation" class="col-sm-4 col-form-label">Confirm Password</label>
                                <div class="col-sm-8">
                                    <input type="password" name="password_confirmation" class="form-control" id="yourPasswordConfirmation" required>
                                    <div class="invalid-feedback">Please confirm your password.</div>
                                </div>
                            </div>

                            <!-- Age Range -->
                            <div class="row mb-3">
                                <label for="yourAgeRange" class="col-sm-4 col-form-label">Age Range</label>
                                <div class="col-sm-8">
                                    <select name="age_range" class="form-select" id="yourAgeRange">
                                        <option value="">Select Age Range</option>
                                        <option value="19-24">19-24</option>
                                        <option value="25-30">25-30</option>
                                        <option value="31-40">31-40</option>
                                        <option value="41+">41+</option>
                                    </select>
                                </div>
                            </div>

                            <!-- Marital Status -->
                            <div class="row mb-3">
                                <label for="yourMaritalStatus" class="col-sm-4 col-form-label">Marital Status</label>
                                <div class="col-sm-8">
                                    <select name="marital_status" class="form-select" id="yourMaritalStatus">
                                        <option value="">Select Marital Status</option>
                                        <option value="Single">Single</option>
                                        <option value="Married">Married</option>
                                        <option value="Divorced">Divorced</option>
                                        <option value="Widowed">Widowed</option>
                                    </select>
                                </div>
                            </div>

                            <!-- Annual Income -->
                            <div class="row mb-3">
                                <label for="yourAnnualIncome" class="col-sm-4 col-form-label">Annual Income</label>
                                <div class="col-sm-8">
                                    <input type="text" name="annual_income_range" class="form-control" id="yourAnnualIncome">
                                </div>
                            </div>

                            <!-- Country -->
                            <div class="row mb-3">
                                <label for="yourCountry" class="col-sm-4 col-form-label">Country</label>
                                <div class="col-sm-8">
                                    <input type="text" name="country" class="form-control" id="yourCountry">
                                </div>
                            </div>

                            <!-- State -->
                            <div class="row mb-3">
                                <label for="yourState" class="col-sm-4 col-form-label">State</label>
                                <div class="col-sm-8">
                                    <input type="text" name="state" class="form-control" id="yourState">
                                </div>
                            </div>

                            <!-- City -->
                            <div class="row mb-3">
                                <label for="yourCity" class="col-sm-4 col-form-label">City</label>
                                <div class="col-sm-8">
                                    <input type="text" name="city" class="form-control" id="yourCity">
                                </div>
                            </div>

                            <!-- District -->
                            <div class="row mb-3">
                                <label for="yourDistrict" class="col-sm-4 col-form-label">District</label>
                                <div class="col-sm-8">
                                    <input type="text" name="district" class="form-control" id="yourDistrict">
                                </div>
                            </div>

                            <!-- Number of Children -->
                            <div class="row mb-3">
                                <label for="yourChildren" class="col-sm-4 col-form-label">Number of Children</label>
                                <div class="col-sm-8">
                                    <input type="number" name="number_of_children" class="form-control" id="yourChildren" min="0">
                                </div>
                            </div>

                            <!-- Landline Phone -->
                            <div class="row mb-3">
                                <label for="yourLandlinePhone" class="col-sm-4 col-form-label">Landline Phone</label>
                                <div class="col-sm-8">
                                    <input type="text" name="landline_phone" class="form-control" id="yourLandlinePhone">
                                </div>
                            </div>

                            <!-- Personal Cell -->
                            <div class="row mb-3">
                                <label for="yourPersonalCell" class="col-sm-4 col-form-label">Personal Cell</label>
                                <div class="col-sm-8">
                                    <input type="text" name="personal_cell" class="form-control" id="yourPersonalCell" required>
                                    <div class="invalid-feedback">Please enter your personal phone number.</div>
                                </div>
                            </div>

                            <!-- Ethnicity -->
                            <div class="row mb-3">
                                <label for="yourEthnicity" class="col-sm-4 col-form-label">Ethnicity</label>
                                <div class="col-sm-8">
                                    <input type="text" name="ethnicity" class="form-control" id="yourEthnicity">
                                </div>
                            </div>

                            <!-- Register Button -->
                            <div class="row mb-3">
                                <div class="col-sm-8 offset-sm-4">
                                    <button class="btn btn-primary w-100" type="submit">Register</button>
                                </div>
                            </div>                            
                        </form><!-- End Registration Form -->
                    </div>
                </div>
            </div>
        </div>
    </section>

</main><!-- End #main -->
@endsection