{{-- resources/views/auth/register.blade.php --}}
@extends('layouts.auth')

@section('title', 'Registro')

@section('content')
<div class="flex h-screen w-full">
    <!-- Columna izquierda - Formulario de registro -->
    <div class="w-full md:w-1/2 flex items-center justify-center p-8 md:p-16">
        <div class="w-full max-w-md">
            <div class="mb-8">
                <h2 class="text-3xl font-bold text-gray-800">{{ __('Crear Cuenta') }}</h2>
                <p class="text-gray-600 mt-2">Completa la información para registrarte</p>
            </div>

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

                <!-- Nombre -->
                <div class="mb-6">
                    <label for="name" class="block text-sm font-medium text-gray-700 mb-1">
                        {{ __('Name') }}
                    </label>
                    <input id="name" name="name" type="text" autocomplete="name" required autofocus
                        value="{{ old('name') }}"
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 text-base
                        @error('name') border-red-500 @enderror">

                    @error('name')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Email -->
                <div class="mb-6">
                    <label for="email" class="block text-sm font-medium text-gray-700 mb-1">
                        {{ __('Email Address') }}
                    </label>
                    <input id="email" name="email" type="email" autocomplete="email" required
                        value="{{ old('email') }}"
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 text-base
                        @error('email') border-red-500 @enderror">

                    @error('email')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Contraseña -->
                <div class="mb-6">
                    <label for="password" class="block text-sm font-medium text-gray-700 mb-1">
                        {{ __('Password') }}
                    </label>
                    <input id="password" name="password" type="password" autocomplete="new-password" required
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 text-base
                        @error('password') border-red-500 @enderror">

                    @error('password')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Confirmar Contraseña -->
                <div class="mb-6">
                    <label for="password-confirm" class="block text-sm font-medium text-gray-700 mb-1">
                        {{ __('Confirm Password') }}
                    </label>
                    <input id="password-confirm" name="password_confirmation" type="password" autocomplete="new-password" required
                        class="w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 text-base">
                </div>

                <!-- Submit Button -->
                <div class="mb-6">
                    <button type="submit" class="w-full px-6 py-3 border border-transparent rounded-lg shadow-md text-base font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition duration-150">
                        {{ __('Register') }}
                    </button>
                </div>
            </form>

            <!-- Enlaces adicionales -->
            <div class="mt-8 text-center">
                <p class="text-sm text-gray-600">
                    ¿Ya tienes una cuenta?
                    <a href="{{ route('login') }}" class="font-medium text-green-600 hover:text-green-500">
                        Iniciar sesión
                    </a>
                </p>
            </div>

            <!-- Footer -->
            <div class="mt-10 text-center text-sm text-gray-500">
                <p>&copy; {{ date('Y') }} Omitech. Todos los derechos reservados.</p>
            </div>
        </div>
    </div>

    <!-- Columna derecha - Logo e imagen -->
    <div class="hidden md:flex md:w-1/2 bg-gradient-to-br from-gray-100 to-gray-200 flex-col items-center justify-center">
        <div class="text-center p-12">
            <!-- Logo SVG Omitech -->
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 400" width="380" height="300">
                <!-- Fondo transparente -->
                <rect width="500" height="400" fill="transparent"/>

                <!-- Elementos decorativos (puntos) -->
                <circle cx="258" cy="350" r="12" fill="#36B234"/>
                <line x1="150" y1="350" x2="220" y2="350" stroke="#36B234" stroke-width="6" stroke-linecap="round"/>
                <line x1="290" y1="350" x2="360" y2="350" stroke="#36B234" stroke-width="6" stroke-linecap="round"/>
                <line x1="200" y1="380" x2="300" y2="380" stroke="#36B234" stroke-width="6" stroke-linecap="round"/>

                <!-- Texto OMITECH CENTRADO -->
                <g transform="translate(20, 230)">
                    <!-- O con círculo verde interior -->
                    <circle cx="50" cy="30" r="30" fill="transparent" stroke="black" stroke-width="8"/>
                    <circle cx="50" cy="30" r="5" fill="transparent" stroke="#36B234" stroke-width="6"/>

                    <!-- M -->
                    <path d="M90,0 L110,0 L130,30 L150,0 L170,0 L170,60 L150,60 L150,30 L130,60 L110,60 L90,30 L90,60 L70,60 L70,0 L90,0" fill="black"/>

                    <!-- i con punto verde -->
                    <rect x="190" y="15" width="16" height="45" fill="black"/>
                    <circle cx="198" cy="5" r="8" fill="#36B234"/>

                    <!-- T -->
                    <rect x="220" y="0" width="60" height="15" fill="black"/>
                    <rect x="242" y="0" width="16" height="60" fill="black"/>

                    <!-- E -->
                    <rect x="300" y="0" width="16" height="60" fill="black"/>
                    <rect x="300" y="0" width="40" height="15" fill="black"/>
                    <rect x="300" y="22.5" width="35" height="15" fill="black"/>
                    <rect x="300" y="45" width="40" height="15" fill="black"/>

                    <!-- C -->
                    <path d="M360,15 C360,5 370,0 385,0 C400,0 410,5 410,15 L395,15 C395,12 390,10 385,10 C380,10 375,12 375,30 C375,48 380,50 385,50 C390,50 395,48 395,45 L410,45 C410,55 400,60 385,60 C370,60 360,55 360,45 L360,15" fill="black"/>

                    <!-- H corregida -->
                    <rect x="430" y="0" width="16" height="60" fill="black"/>
                    <rect x="430" y="22.5" width="50" height="15" fill="black"/>
                    <rect x="464" y="0" width="16" height="60" fill="black"/>
                </g>

                <!-- Texto "SERVICIOS TECNOLÓGICOS" -->
                <text x="250" y="320" font-family="Arial, sans-serif" font-size="16" text-anchor="middle" font-weight="bold" letter-spacing="1" fill="black">SERVICIOS TECNOLÓGICOS</text>
            </svg>

            <p class="text-xl mt-6 text-gray-800">Sistema Integrado de Gestión</p>
        </div>
    </div>
</div>
@endsection