@extends('layout')

@section('content')

<!-- Add Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600&display=swap" rel="stylesheet">

<style>
    body {
        background-color: #e3f6ff;
        font-family: 'Nunito', sans-serif;
    }

    .card {
        border-radius: 20px;
        box-shadow: 0px 4px 20px rgba(0,0,0,0.1);
        border: none;
    }

    .card-header {
        background-color: #90dfff;
        color: #003b73;
        font-weight: bold;
        font-size: 1.5rem;
        border-radius: 20px 20px 0 0;
        text-align: center;
    }

    .form-control {
        border-radius: 10px;
        border: 1px solid #bde0f5;
        background-color: #ffffff;
    }

    .form-control:focus {
        box-shadow: none;
        border-color: #007ACC;
    }

    .btn-primary {
        background-color: #00aaff;
        border-color: #00aaff;
        border-radius: 10px;
        padding: 8px 20px;
        font-weight: 600;
    }

    .btn-primary:hover {
        background-color: #0077cc;
        border-color: #0077cc;
    }

    label {
        font-weight: 600;
        color: #333;
    }

    .text-danger {
        font-size: 0.85rem;
    }

    .login-form {
        margin-top: 40px;
    }

    .doreamon-logo {
        text-align: center;
        margin-top: 30px;
        margin-bottom: 10px;
    }

    .doreamon-logo img {
        width: 120px;
        height: auto;
        border-radius: 20px;
    }
</style>

<main class="login-form">
    <div class="container">

        <!-- Doreamon Logo -->
        <div class="doreamon-logo">
            <img src="{{ asset('images/doreamon.png') }}" alt="Doreamon Logo">
        </div>

        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header"> Registration</div>
                    <div class="card-body">

                        <form action="{{ route('register.post') }}" method="POST">
                            @csrf

                            <!-- Name -->
                            <div class="form-group row">
                                <label for="name" class="col-md-4 col-form-label text-md-right">Name</label>
                                <div class="col-md-6">
                                    <input type="text" id="name" class="form-control" name="name" required autofocus>
                                    @if ($errors->has('name'))
                                        <span class="text-danger">{{ $errors->first('name') }}</span>
                                    @endif
                                </div>
                            </div>

                            <!-- Email -->
                            <div class="form-group row">
                                <label for="email_address" class="col-md-4 col-form-label text-md-right">Email</label>
                                <div class="col-md-6">
                                    <input type="text" id="email_address" class="form-control" name="email" required>
                                    @if ($errors->has('email'))
                                        <span class="text-danger">{{ $errors->first('email') }}</span>
                                    @endif
                                </div>
                            </div>

                            <!-- Password -->
                            <div class="form-group row">
                                <label for="password" class="col-md-4 col-form-label text-md-right">Password</label>
                                <div class="col-md-6">
                                    <input type="password" id="password" class="form-control" name="password" required>
                                    @if ($errors->has('password'))
                                        <span class="text-danger">{{ $errors->first('password') }}</span>
                                    @endif
                                </div>
                            </div>

                            <!-- Phone Number -->
                            <div class="form-group row">
                                <label for="phone_number" class="col-md-4 col-form-label text-md-right">Phone Number</label>
                                <div class="col-md-6">
                                    <input type="text" id="phone_number" class="form-control" name="phone_number" required>
                                    @if ($errors->has('phone_number'))
                                        <span class="text-danger">{{ $errors->first('phone_number') }}</span>
                                    @endif
                                </div>
                            </div>

                            <!-- Address -->
                            <div class="form-group row">
                                <label for="address" class="col-md-4 col-form-label text-md-right">Address</label>
                                <div class="col-md-6">
                                    <input type="text" id="address" class="form-control" name="address" required>
                                    @if ($errors->has('address'))
                                        <span class="text-danger">{{ $errors->first('address') }}</span>
                                    @endif
                                </div>
                            </div>

                            <!-- City -->
                            <div class="form-group row">
                                <label for="city" class="col-md-4 col-form-label text-md-right">City</label>
                                <div class="col-md-6">
                                    <input type="text" id="city" class="form-control" name="city" required>
                                    @if ($errors->has('city'))
                                        <span class="text-danger">{{ $errors->first('city') }}</span>
                                    @endif
                                </div>
                            </div>

                            <!-- City Code -->
                            <div class="form-group row">
                                <label for="city_code" class="col-md-4 col-form-label text-md-right">City Code</label>
                                <div class="col-md-6">
                                    <input type="text" id="city_code" class="form-control" name="city_code" required>
                                    @if ($errors->has('city_code'))
                                        <span class="text-danger">{{ $errors->first('city_code') }}</span>
                                    @endif
                                </div>
                            </div>

                            <!-- Remember Me -->
                            <div class="form-group row">
                                <div class="col-md-6 offset-md-4">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="remember">
                                        <label class="form-check-label">Remember Me</label>
                                    </div>
                                </div>
                            </div>

                            <!-- Submit -->
                            <div class="form-group row">
                                <div class="col-md-6 offset-md-4">
                                    <button type="submit" class="btn btn-primary">Register</button>
                                </div>
                            </div>

                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>
</main>

@endsection