@extends('layouts.auth')
@section('title', 'Register - StarHela')
@push('styles')
<link rel="stylesheet" href="{{ asset('build/css/demo574d.css') }}">
@endpush
@section('content')
<p class="h5 fw-semibold mb-2 text-center">Sign Up</p>
<p class="mb-4 text-muted op-7 fw-normal text-center">Welcome & Join us by creating a free account!</p>

@if(session('ref') || $ref)
    <h6 class="alert alert-success">You were invited by: <b>{{ session('ref', $ref) }}</b></h6>
@endif

@if($errors->any())
    <div class="alert alert-danger alert-dismissible fade show">
        <ul class="mb-0">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
@endif

<form class="mb-6" action="{{ route('register.post') }}" method="POST">
    @csrf
    <input type="hidden" name="todo" value="POST">
    <input type="hidden" name="package" value="1">
    <input type="hidden" name="referral" value="{{ session('ref', $ref) }}">

    <div class="col-xl-12">
        <label class="form-label text-default">Username <span class="text-danger">*</span></label>
        <input class="form-control form-control-lg" type="text" name="username" placeholder="Enter username" value="{{ old('username') }}" required>
    </div>
    <div class="col-xl-12">
        <label class="form-label text-default">Mobile <span class="text-danger">*</span></label>
        <input id="phone" class="form-control form-control-lg" type="text" name="mobile" placeholder="Enter mobile" required>
    </div>
    <div class="col-xl-12">
        <label class="form-label text-default">Email <span class="text-danger">*</span></label>
        <input class="form-control form-control-lg" type="email" name="email" placeholder="Enter email address" value="{{ old('email') }}" required>
    </div>
    <div class="col-xl-12">
        <label class="form-label text-default">Password <span class="text-danger">*</span></label>
        <input class="form-control form-control-lg" type="password" name="password" placeholder="Enter password" required>
    </div>
    <div class="col-xl-12">
        <label class="form-label text-default">Confirm Password <span class="text-danger">*</span></label>
        <input class="form-control form-control-lg" type="password" name="password2" placeholder="Confirm password" required>
    </div>
    <div class="col-xl-12">
        <label class="form-label text-default">Country <span class="text-danger">*</span></label>
        <select id="address-country" name="country" class="form-control form-control-lg form-select select2" required>
            <option value="">Select Country</option>
            <option value="ke">Kenya</option>
            <option value="tz">Tanzania</option>
            <option value="ug">Uganda</option>
            <option value="rw">Rwanda</option>
            <option value="ng">Nigeria</option>
            <option value="gh">Ghana</option>
            <option value="zm">Zambia</option>
            <option value="mw">Malawi</option>
            <option value="bi">Burundi</option>
            <option value="ss">South Sudan</option>
            <option value="bw">Botswana</option>
            <option value="mz">Mozambique</option>
            <option value="cd">DR Congo</option>
            <option value="cm">Cameroon</option>
            <option value="za">South Africa</option>
            <option value="tg">Togo</option>
            <option value="sn">Senegal</option>
            <option value="ci">Ivory Coast</option>
            <option value="bj">Benin</option>
            <option value="ne">Niger</option>
            <option value="us">United States</option>
            <option value="gb">United Kingdom</option>
        </select>
    </div>
    <div class="col-xl-12 mb-2">
        <div class="form-check mt-3">
            <input class="form-check-input" type="checkbox" id="terms" required>
            <label class="form-check-label text-muted fw-normal" for="terms">
                By creating an account you agree to our <a href="{{ route('terms') }}" class="text-success"><u>Terms & Conditions</u></a>
            </label>
        </div>
    </div>
    <div class="col-xl-12 d-grid mt-2">
        <button class="btn btn-lg btn-primary">Create Account</button>
    </div>
</form>
<div class="text-center">
    <p class="fs-12 text-muted mt-3">Already have an account? <a href="{{ route('login') }}" class="text-primary">Sign In</a></p>
</div>
@endsection
@push('scripts')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="{{ asset('build/js/intlTelInput574d.js') }}"></script>
<script src="{{ asset('build/js/defaultCountryIp574d.js') }}"></script>
@endpush