@extends('layouts.auth-layout')


@section('main')
    <div class="page-single register-page">
        <div class="container">
            <div class="row">
                <div class="col mx-auto">
                    <div class="row justify-content-center">
                        <div class="col-md-5">
                            <div class="card shadow-none">
                                <div class="card-body">
                                    <div class="text-center title-style mb-4">
                                        <h2 class="mb-2">Register</h2>
                                        <p class="text-muted fs-15">Create New Account</p>
                                    </div>

                                    <form method="POST" action="">
                                        @csrf

                                        <!-- Username -->
                                        <div class="input-group mb-3">
                                            <x-input-button id="button-addon1" iconClass="fe fe-user" />
                                            <x-text-input type="text" class="form-control" placeholder="User name"
                                                name="name" value="{{ old('name') }}" required />
                                        </div>
                                        @error('name')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror

                                        <!-- Email -->
                                        <div class="input-group mb-3">
                                            <x-input-button id="button-addon2" iconClass="fe fe-user" />
                                            <x-text-input type="email" class="form-control" placeholder="Enter email"
                                                name="email" value="{{ old('email') }}" required />
                                        </div>
                                        @error('email')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror

                                        <!-- Password -->
                                        <div class="input-group mb-3">
                                            <x-input-button id="button-addon3" iconClass="fe fe-lock" />
                                            <x-text-input type="password" class="form-control" placeholder="Password"
                                                name="password" required />
                                        </div>
                                        @error('password')
                                            <span class="text-danger">{{ $message }}</span>
                                        @enderror



                                        <!-- Terms and Policy -->
                                        <div class="form-check mb-3">
                                            <input class="form-check-input" type="checkbox" name="terms"
                                                id="defaultCheck1" required>
                                            <label class="form-check-label" for="defaultCheck1">
                                                Agree to the Terms and policy
                                            </label>
                                        </div>

                                        <!-- Submit Button -->
                                        <div class="row">
                                            <div class="col-12 d-grid">
                                                <button type="submit" class="btn btn-primary btn-block px-4">Create New
                                                    Account</button>
                                            </div>
                                        </div>

                                        <!-- Login Link -->
                                        <div class="text-center pt-4">
                                            <div class="font-weight-normal fs-14">
                                                You Already have an account <a class="font-weight-normal text-primary"
                                                    href="{{ route('login') }}">Login Here</a>
                                            </div>
                                        </div>
                                    </form>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endsection