@php $noNavbar = true; @endphp
@extends('layouts.app')

@section('content')

<style>
    body{
        margin:0;
        height:100vh;
        background:#eaf2ff;
        display:flex;
        align-items:center;
        justify-content:center;
        font-family: 'Segoe UI', sans-serif;
    }

    .register-wrapper{
        width:1000px;
        max-width:95%;
        background:#fff;
        border-radius:20px;
        box-shadow:0 20px 40px rgba(0,0,0,0.08);
        display:flex;
        overflow:hidden;
    }

    /* LEFT */
    .register-left{
        width:55%;
        background:#f3f7ff;
        display:flex;
        align-items:center;
        justify-content:center;
        padding:40px;
    }

    .register-left img{
        width:100%;
        max-width:400px;
    }

    /* RIGHT */
    .register-right{
        width:45%;
        padding:50px;
        display:flex;
        flex-direction:column;
        justify-content:center;
    }

    .register-right h2{
        font-weight:700;
        margin-bottom:30px;
        color:#2563eb;
        text-align:center;
    }

    .form-control{
        border-radius:10px;
        padding:10px 12px;
    }

    .form-control:focus{
        border-color:#2563eb;
        box-shadow:none;
    }

    .btn-register{
        background:#2563eb;
        border:none;
        border-radius:10px;
        padding:10px;
        font-weight:600;
    }

    .btn-register:hover{
        background:#1d4ed8;
    }

    .auth-links{
        text-align:center;
        margin-top:20px;
        font-size:14px;
    }

    .auth-links a{
        text-decoration:none;
        color:#2563eb;
    }

    .auth-links a:hover{
        text-decoration:underline;
    }

    @media(max-width:768px){
        .register-wrapper{
            flex-direction:column;
        }
        .register-left,
        .register-right{
            width:100%;
        }
        .register-right{
            padding:40px 30px;
        }
    }
</style>

<div class="register-wrapper">

    <!-- LEFT IMAGE -->
    <div class="register-left">
        <!-- GANTI GAMBAR SESUAI KEINGINAN -->
        <img src="https://illustrations.popsy.co/blue/sign-up.svg" alt="Register Illustration">
    </div>

    <!-- RIGHT FORM -->
    <div class="register-right">

        <h2>REGISTER</h2>

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

            <!-- Nama -->
            <div class="mb-3">
                <input type="text"
                       name="name"
                       class="form-control @error('name') is-invalid @enderror"
                       placeholder="Nama"
                       value="{{ old('name') }}"
                       required>

                @error('name')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <!-- Email -->
            <div class="mb-3">
                <input type="email"
                       name="email"
                       class="form-control @error('email') is-invalid @enderror"
                       placeholder="Email"
                       value="{{ old('email') }}"
                       required>

                @error('email')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <!-- Password -->
            <div class="mb-3">
                <input type="password"
                       name="password"
                       class="form-control @error('password') is-invalid @enderror"
                       placeholder="Password"
                       required>

                @error('password')
                    <div class="invalid-feedback">{{ $message }}</div>
                @enderror
            </div>

            <!-- Konfirmasi -->
            <div class="mb-3">
                <input type="password"
                       name="password_confirmation"
                       class="form-control"
                       placeholder="Konfirmasi Password"
                       required>
            </div>

            <!-- BUTTON -->
            <div class="d-grid">
                <button type="submit" class="btn btn-register text-white">
                    Daftar
                </button>
            </div>

        </form>

        <div class="auth-links">
            Sudah punya akun?
            <a href="{{ route('login') }}">Login</a>
        </div>

    </div>

</div>

@endsection