@extends('layouts.auth_components.header')


@section('authcontent')

<main class="auth-cover-wrapper">
        <div class="auth-cover-content-inner">
            <div class="auth-cover-content-wrapper">
                <div class="auth-img">
                    <img src="/public/assets/images/loginfront.jpeg" alt="" class="img-fluid">
                </div>
            </div>
        </div>
        <div class="auth-cover-sidebar-inner">
            <div class="auth-cover-card-wrapper">
                <div class="auth-cover-card p-sm-5">
                    <div class="wd-50 mb-5">
                        <img src="/assets/images/iconlogo.png" alt="" class="img-fluid">
                    </div>
                    <h2 class="fs-20 fw-bolder mb-4">Get Started with RAGO CRM Today!</h2>
                    <p class="fs-12 fw-medium text-muted">Join us and simplify your business operations — manage leads, projects, inventory, and more from one powerful platform.</p>
                    <form  method="POST" action="{{ route('register') }}" class="w-100 mt-4 pt-2">
                        @csrf
                        <div class="mb-4">
                            <input type="text" class="form-control" id="first_name" placeholder="First Name" required name="first_name" required>
                            @error('first_name')
                            <div class="invalid-feedback">
                                {{$message}}
                            </div>      
                            @enderror
                        </div>
                        <div class="mb-4">
                            <input type="text" class="form-control" id="last_name" placeholder="Last Name" required name="last_name" required>
                            @error('last_name')
                            <div class="invalid-feedback">
                                {{$message}}
                            </div>      
                            @enderror
                        </div>
                        <div class="mb-4">
                            <input type="email" class="form-control" id="email" placeholder="Your Email" required name="email">
                            @error('email')
                            <div class="invalid-feedback">
                                {{$message}}
                            </div>      
                            @enderror
                        </div>
                        <!-- <div class="mb-4">
                            <input type="tel" class="form-control" placeholder="Username" required>
                        </div> -->
                        <div class="mb-4 generate-pass">
                            <div class="input-group field">
                                <!-- <input type="password" class="form-control password" id="newPassword" placeholder="Password Confirm"> -->
                                <input type="password" 
                                            class="form-control @error('password') is-invalid @enderror" 
                                            name="password" required autocomplete="current-password" 
                                            id="password" value="" 
                                            placeholder="Enter Password"
                                        > 
                                    @error('password')
                                        <div class="invalid-feedback">
                                            <strong>{{ $message }}</strong>
                                    </div>
                                    @enderror  
                                <!-- <div class="input-group-text c-pointer gen-pass" data-bs-toggle="tooltip" title="Generate Password"><i class="feather-hash"></i></div>
                                <div class="input-group-text border-start bg-gray-2 c-pointer show-pass" data-bs-toggle="tooltip" title="Show/Hide Password"><i></i></div> -->
                            </div>
                            <!-- <div class="progress-bar mt-2">
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                            </div> -->
                        </div>
                        <div class="mb-4">
                            <input type="password" 
                                    class="form-control @error('password') is-invalid @enderror" 
                                    name="password_confirmation" 
                                    required
                                    id="password_confirmation" value="" 
                                    placeholder="Enter Password"
                                > 
                            @error('password_confirmation')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        <div class="mb-4">
                            <input type="text" class="form-control" id="agent_code" placeholder="Agent Code (Optional)" name="agent_code">
                            @error('agent_code')
                            <div class="invalid-feedback">
                                {{$message}}
                            </div>      
                            @enderror
                        </div>
                        <div class="mt-4">
                           
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="termsCondition" required>
                                <label class="custom-control-label c-pointer text-muted" for="termsCondition" style="font-weight: 400 !important">I agree to all the <a href="">Terms &amp; Conditions</a> and <a href="">Fees</a>.</label>
                            </div>
                        </div>
                        <div class="mt-5">
                            <button type="submit" class="btn btn-lg btn-primary w-100">Create Account</button>
                        </div>
                    </form>
                    <div class="mt-5 text-muted">
                        <span>Already have an account?</span>
                        <a href="/login" class="fw-bold">Login</a>
                    </div>
                </div>
            </div>
        </div>
    </main>

@endsection