<!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>Login - 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>

            <h5 class="text-4xl font-bold leading-tight">

                Manufacturing System

            </h5>

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

                Manage raw materials, inventory,
                production and BOM formulas from one powerful dashboard.

            </p>

            <!-- Features -->
            <div class="space-y-5 mt-12">

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

                    <div class="w-12 h-12 rounded-xl bg-blue-500/20 flex items-center justify-center text-blue-300">

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

                    </div>

                    <span class="text-lg">
                        Raw Material Management
                    </span>

                </div>

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

                    <div class="w-12 h-12 rounded-xl bg-green-500/20 flex items-center justify-center text-green-300">

                        <i class="bi bi-diagram-3"></i>

                    </div>

                    <span class="text-lg">
                        Product BOM Formula System
                    </span>

                </div>

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

                    <div class="w-12 h-12 rounded-xl bg-purple-500/20 flex items-center justify-center text-purple-300">

                        <i class="bi bi-graph-up-arrow"></i>

                    </div>

                    <span class="text-lg">
                        Production & Inventory Tracking
                    </span>

                </div>

            </div>

        </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">
                        Login
                    </h2>

                    <p class="text-slate-500 mt-3">
                        Sign in to your account
                    </p>

                </div>

                <!-- Session Status -->
                <x-auth-session-status class="mb-4 mt-6"
                                       :status="session('status')" />

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

                    @csrf

                    <!-- Email -->
                    <div>

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

                            Email Address

                        </label>

                        <input type="email"
                               name="email"
                               value="{{ old('email') }}"
                               required
                               autofocus
                               autocomplete="username"
                               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
                               autocomplete="current-password"
                               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>

                    <!-- Remember -->
                    <div class="flex items-center justify-between mt-6">

                        <label class="flex items-center gap-2">

                            <input type="checkbox"
                                   name="remember"
                                   class="rounded border-slate-300 text-indigo-600 focus:ring-indigo-500">

                            <span class="text-sm text-slate-600">
                                Remember Me
                            </span>

                        </label>

                        @if (Route::has('password.request'))

                            <a href="{{ route('password.request') }}"
                               class="text-sm text-indigo-600 hover:text-indigo-700 font-medium">

                                Forgot Password?

                            </a>

                        @endif

                    </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">

                        Login

                    </button>

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

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

                            Don't have an account?

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

                                Register

                            </a>

                        </p>

                    </div> -->

                </form>

            </div>

        </div>

    </div>

</div>

</body>
</html>