@extends('layouts.app', ['class' => 'g-sidenav-show bg-grad'])

@section('content')
<div style="background: url('{{ asset('img/moi-landing.jpg') }}') no-repeat center center fixed; 
background-size: cover;
min-height: 100vh;
padding: 20px 0;">
    <div class="container" style="max-width: 800px; margin: auto; opacity: 0.9;">

        <div class="card p-1 card-plain mt-8 shadow-lg"
            style="background-color: #fff; box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2) !important; border: 1px solid rgba(0, 0, 0, 0.1);">
            <form action="{{route('user-registration-save')}}" method="POST" enctype="multipart/form-data"
                id="registrationForm">
                @csrf
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h4>User Registration</h4>
                    <div>
                        <button type="submit" form="registrationForm" class="btn btn-primary">Register</button>
                        <a href="{{ url('/login') }}" class="btn btn-secondary me-2">Cancel</a>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="first_name" class="form-label">First Name</label>
                                <input type="text" name="first_name" id="first_name" class="form-control"
                                    value="{{ old('first_name') }}" required placeholder="Enter Firsts Name">
                                @error('first_name')
                                <div class="text-danger">{{ $message }}</div> @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="last_name" class="form-label">Last Name</label>
                                <input type="text" name="last_name" id="last_name" class="form-control"
                                    value="{{ old('last_name') }}" required placeholder="Enter Last Name">
                                @error('last_name')
                                <div class="text-danger">{{ $message }}</div> @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="phone" class="form-label">Phone Number</label>
                                <input type="text" name="phone" id="phone" class="form-control" value="{{ old('phone') }}"
                                    required placeholder="Enter Phone Number">
                                @error('phone')
                                <div class="text-danger">{{ $message }}</div> @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="email" class="form-label">Email Address</label>
                                <input type="email" name="email" id="email" class="form-control" value="{{ old('email') }}"
                                    required placeholder="Enter Email Address">
                                @error('email')
                                <div class="text-danger">{{ $message }}</div> @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="city" class="form-label">City</label>
                                <input type="text" class="form-control" name="city" id="city" value="{{old('city')}}"
                                    placeholder="Enter City">
                                @error('city')
                                <div class="text-danger">{{ $message }}</div> @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="address" class="form-label">Address</label>
                                <textarea name="address" id="address" class="form-control" rows="1"
                                    placeholder="Enter Address">{{ old('address') }}</textarea>
                                @error('address')
                                <div class="text-danger">{{ $message }}</div> @enderror
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="password" class="form-label">Password</label>
                                <input type="password" name="password" id="password" class="form-control" required
                                    placeholder="Enter Password">
                                @error('password')
                                <div class="text-danger">{{ $message }}</div> @enderror
                            </div>
                        </div>

                        <!-- Middle Column -->
                        <div class="col-md-6">
                            <!-- Confirm Password Field -->
                            <div class="mb-3">
                                <label for="password_confirmation" class="form-label">Confirm Password</label>
                                <input type="password" name="password_confirmation" id="password_confirmation"
                                    class="form-control" required placeholder="Confirm Password">
                                @error('password_confirmation')
                                <div class="text-danger">{{ $message }}</div> @enderror
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection