<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>

    <meta charset="utf-8">

    <meta name="viewport"
          content="width=device-width, initial-scale=1">

    <meta name="csrf-token"
          content="{{ csrf_token() }}">

    <title>Register - Manufacturing ERP</title>

    <!-- Fonts -->
    <link rel="preconnect"
          href="https://fonts.bunny.net">

    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600,700,800&display=swap"
          rel="stylesheet" />

    <!-- Bootstrap Icons -->
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

    @vite(['resources/css/app.css', 'resources/js/app.js'])

</head>

<body class="font-sans antialiased bg-slate-100">

<div class="min-h-screen flex overflow-hidden">

    <!-- Left Side -->
    <div class="hidden lg:flex lg:w-1/2 bg-gradient-to-br from-slate-900 via-indigo-900 to-slate-900 relative overflow-hidden">

        <!-- Blur -->
        <div class="absolute inset-0">

            <div class="absolute w-96 h-96 bg-blue-500 opacity-20 blur-3xl rounded-full top-20 left-10"></div>

            <div class="absolute w-96 h-96 bg-purple-500 opacity-20 blur-3xl rounded-full bottom-10 right-10"></div>

        </div>

        <!-- Content -->
        <div class="relative z-10 flex flex-col justify-center px-16 text-white">

            <div class="flex items-center gap-4 mb-10">

                <div class="w-16 h-16 rounded-2xl bg-white/10 backdrop-blur-md flex items-center justify-center text-3xl">

                    <i class="bi bi-box-seam"></i>

                </div>

                <div>

                    <h1 class="text-4xl font-extrabold">
                        Manufacturing ERP
                    </h1>

                    <p class="text-slate-300 mt-1">
                        Smart Production Management
                    </p>

                </div>

            </div>

            <h2 class="text-5xl font-bold leading-tight">

                Create Your Manufacturing Account

            </h2>

            <p class="text-xl text-slate-300 mt-8 leading-relaxed">

                Manage raw materials, production,
                inventory and BOM formulas easily.

            </p>

        </div>

    </div>

    <!-- Right Side -->
    <div class="w-full lg:w-1/2 flex items-center justify-center px-6 py-10">

        <div class="w-full max-w-md">

            <!-- Mobile Logo -->
            <div class="lg:hidden text-center mb-10">

                <div class="w-20 h-20 mx-auto rounded-3xl bg-gradient-to-r from-indigo-600 to-blue-500 flex items-center justify-center text-white text-4xl shadow-xl">

                    <i class="bi bi-box-seam"></i>

                </div>

                <h1 class="text-3xl font-bold mt-5 text-slate-800">
                    Manufacturing ERP
                </h1>

            </div>

            <!-- Card -->
            <div class="bg-white rounded-3xl shadow-2xl p-8">

                <div class="text-center">

                    <h2 class="text-4xl font-bold text-slate-800">
                        Register
                    </h2>

                    <p class="text-slate-500 mt-3">
                        Create your account
                    </p>

                </div>

                <!-- Form -->
                <form method="POST"
                      action="{{ route('register') }}"
                      class="mt-10">

                    @csrf

                    <!-- Name -->
                    <div>

                        <label class="block text-sm font-semibold text-slate-700 mb-2">

                            Full Name

                        </label>

                        <input type="text"
                               name="name"
                               value="{{ old('name') }}"
                               required
                               autofocus
                               placeholder="Enter full name"
                               class="w-full rounded-2xl border border-slate-300 px-5 py-4 bg-slate-50 focus:border-indigo-500 focus:ring-indigo-500">

                        <x-input-error :messages="$errors->get('name')" class="mt-2" />

                    </div>

                    <!-- Email -->
                    <div class="mt-6">

                        <label class="block text-sm font-semibold text-slate-700 mb-2">

                            Email Address

                        </label>

                        <input type="email"
                               name="email"
                               value="{{ old('email') }}"
                               required
                               placeholder="Enter email address"
                               class="w-full rounded-2xl border border-slate-300 px-5 py-4 bg-slate-50 focus:border-indigo-500 focus:ring-indigo-500">

                        <x-input-error :messages="$errors->get('email')" class="mt-2" />

                    </div>

                    <!-- Password -->
                    <div class="mt-6">

                        <label class="block text-sm font-semibold text-slate-700 mb-2">

                            Password

                        </label>

                        <input type="password"
                               name="password"
                               required
                               placeholder="Enter password"
                               class="w-full rounded-2xl border border-slate-300 px-5 py-4 bg-slate-50 focus:border-indigo-500 focus:ring-indigo-500">

                        <x-input-error :messages="$errors->get('password')" class="mt-2" />

                    </div>

                    <!-- Confirm Password -->
                    <div class="mt-6">

                        <label class="block text-sm font-semibold text-slate-700 mb-2">

                            Confirm Password

                        </label>

                        <input type="password"
                               name="password_confirmation"
                               required
                               placeholder="Confirm password"
                               class="w-full rounded-2xl border border-slate-300 px-5 py-4 bg-slate-50 focus:border-indigo-500 focus:ring-indigo-500">

                        <x-input-error :messages="$errors->get('password_confirmation')" class="mt-2" />

                    </div>

                    <!-- Button -->
                    <button type="submit"
                            class="w-full mt-8 bg-gradient-to-r from-indigo-600 to-blue-500 hover:from-indigo-700 hover:to-blue-600 text-white py-4 rounded-2xl text-lg font-semibold shadow-xl transition">

                        Create Account

                    </button>

                    <!-- Login -->
                    <div class="text-center mt-8">

                        <p class="text-slate-600">

                            Already have an account?

                            <a href="{{ route('login') }}"
                               class="text-indigo-600 hover:text-indigo-700 font-semibold">

                                Login

                            </a>

                        </p>

                    </div>

                </form>

            </div>

        </div>

    </div>

</div>

</body>
</html>