@extends('front.layout.layout')

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

<div class="container">

    <div class="auth-form my-5">
     @if(session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif
    @if(session('error'))
    <div class="alert alert-danger">
        {{ session('error') }}
    </div>
    @endif

    @if($errors->any())
    <div class="alert alert-danger">
        <ul>
            @foreach($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
    @endif
        <h4><i class="icofont-lock"></i> Sign Up</h4>
        <form action="{{route('register.store')}} " method="POST" class="c-form" enctype="multipart/form-data">
            @csrf
            <div class="row ">
                <div class="col-lg-6 col-sm-6 col-md-6">
                    <div class="fileds">

                        <input type="text" id="firstName" name="firstName"
                            class=" @error('firstName') is-invalid @enderror form-control" placeholder="First Name"
                            value="{{ old('firstName') }}">
                        @error('firstName')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                        @enderror
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-md-6">
                    <div class="fileds">

                        <input type="text" id="lastName" name="lastName"
                            class=" @error('lastName') is-invalid @enderror form-control" placeholder="Last  Name"
                            value="{{ old('lastName') }}">
                        @error('lastName')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                        @enderror
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-md-6">
                    <div class="fileds">
                        <input type="text" name="email" placeholder="Email @"
                            class="@error('email') is-invalid @enderror form-control" value="{{old('email')}}">
                        @error('email')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                        @enderror
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-md-6">
                    <div class="fileds">
                        <input
    type="tel"
    placeholder="Phone (e.g. +1234567890)"
    name="phone"
    pattern="^\+[1-9][0-9]{6,14}$"
    title="Enter phone number in international format starting with + (e.g. +1234567890)"
    maxlength="16"
    class="@error('phone') is-invalid @enderror form-control"
    value="{{ old('phone') }}" required>

                        @error('phone')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                        @enderror
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-md-6">
                    <div class="fileds">
                        <input type="password" name="password"
                            class="@error('password') is-invalid @enderror form-control" id="password"
                            placeholder="Password">
                        <i class="toggle-password fa fa-eye"></i>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-6 col-md-6">
                    <div class="fileds">
                        <input type="password" id="confirmPassword" name="password_confirmation"
                            class="password_confirmation form-control @error('password_confirmation') is-invalid @enderror"
                            placeholder="Confirm Password">
                        <i class="toggle-password fa fa-eye"></i>
                    </div>
                </div>

                <div class="col-lg-6 col-sm-6 col-md-6">
                    <div class="fileds">
                        <input type="text" id="referral_code" name="referral_code"
                            class=" @error('referral_code') is-invalid @enderror form-control"
                            placeholder="Referal Code" value="{{ old('referral_code') }}">
                        @error('referral_code')
                        <div class="invalid-feedback">
                            {{ $message }}
                        </div>
                        @enderror
                    </div>
                </div>

                <div class="col-lg-12 mt-3">

                    <button class="btn-primary" type="submit"><i class="icofont-key"></i> Signup</button>
                </div>
                <div class="col-lg-12">
                    <div class="dont-have mt-3">
                        Already have an account? <a href="{{route('login.view')}}">Login</a>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>






@endsection

@push('bottom-scripts')

<script>
    $('.toggle-password').on('click', function() {
    const input = $(this).parent().find('input');
    if (input.attr('type') === 'password') {
        input.attr('type', 'text');
        $(this).removeClass('fa-eye').addClass('fa-eye-slash');
    } else {
        input.attr('type', 'password');
        $(this).removeClass('fa-eye-slash').addClass('fa-eye');
    }
});


</script>
@endpush