<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Instalador</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>tailwind.config={theme:{extend:{colors:{beige:'#F7F3EE',olive:'#4A5D4D'}}}}</script>
</head>
<body class="bg-beige min-h-screen flex items-center justify-center py-10">
<div class="bg-white rounded-2xl shadow-lg w-full max-w-lg p-8">
    <h1 class="font-serif text-2xl text-olive mb-1">Instalación de la tienda</h1>
    <p class="text-sm text-gray-500 mb-6">Configura la base de datos y el administrador.</p>

    @if(session('error'))
        <div class="bg-red-100 text-red-700 text-sm p-3 rounded mb-4">{{ session('error') }}</div>
    @endif
    @if($errors->any())
        <div class="bg-red-100 text-red-700 text-sm p-3 rounded mb-4">
            <ul class="list-disc list-inside">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
        </div>
    @endif

    <form method="POST" action="{{ route('installer.process') }}" class="space-y-4">
        @csrf
        <div><label class="block text-sm font-medium">Nombre de la tienda</label><input name="app_name" value="{{ old('app_name') }}" required class="w-full border rounded-lg p-2 mt-1"></div>

        <fieldset class="border rounded-lg p-4">
            <legend class="text-sm font-semibold px-1">Base de datos</legend>
            <div class="grid grid-cols-2 gap-3">
                <div><label class="block text-xs">Host</label><input name="db_host" value="{{ old('db_host', 'localhost') }}" required class="w-full border rounded-lg p-2 mt-1"></div>
                <div><label class="block text-xs">Puerto</label><input name="db_port" value="{{ old('db_port', '3306') }}" required class="w-full border rounded-lg p-2 mt-1"></div>
            </div>
            <div class="mt-3"><label class="block text-xs">Base de datos</label><input name="db_name" value="{{ old('db_name') }}" required class="w-full border rounded-lg p-2 mt-1"></div>
            <div class="grid grid-cols-2 gap-3 mt-3">
                <div><label class="block text-xs">Usuario</label><input name="db_user" value="{{ old('db_user') }}" required class="w-full border rounded-lg p-2 mt-1"></div>
                <div><label class="block text-xs">Contraseña</label><input type="password" name="db_pass" class="w-full border rounded-lg p-2 mt-1"></div>
            </div>
        </fieldset>

        <fieldset class="border rounded-lg p-4">
            <legend class="text-sm font-semibold px-1">Administrador</legend>
            <div><label class="block text-xs">Nombre</label><input name="admin_name" value="{{ old('admin_name') }}" required class="w-full border rounded-lg p-2 mt-1"></div>
            <div class="mt-3"><label class="block text-xs">Correo</label><input type="email" name="admin_email" value="{{ old('admin_email') }}" required class="w-full border rounded-lg p-2 mt-1"></div>
            <div class="grid grid-cols-2 gap-3 mt-3">
                <div><label class="block text-xs">Contraseña</label><input type="password" name="admin_password" required minlength="8" class="w-full border rounded-lg p-2 mt-1"></div>
                <div><label class="block text-xs">Confirmar</label><input type="password" name="admin_password_confirmation" required class="w-full border rounded-lg p-2 mt-1"></div>
            </div>
        </fieldset>

        <button class="w-full bg-olive text-beige py-3 rounded-lg">Instalar ahora</button>
    </form>
</div>
</body>
</html>
