@extends('installer.layout')
@section('title', 'Database Setup — Quickro POS Installer')

@section('content')
<div class="max-w-xl">
    <h1 class="text-3xl font-black text-white">Database Configuration</h1>
    <p class="mt-3 text-sm leading-7 text-slate-400">
        Enter your MySQL database credentials. The installer will verify the connection
        before continuing. Make sure the database already exists.
    </p>

    @if($errors->any())
        <div class="mt-6 rounded-2xl border border-rose-500/30 bg-rose-500/10 p-4">
            <p class="text-sm font-semibold text-rose-400">Connection failed</p>
            <ul class="mt-2 space-y-1 text-xs text-rose-300">
                @foreach($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form method="POST" action="{{ route('install.database-save') }}" class="mt-8 space-y-5">
        @csrf

        <div class="grid gap-5 sm:grid-cols-2">
            <div>
                <label class="block text-xs font-semibold uppercase tracking-[0.24em] text-slate-400 mb-2">DB Host</label>
                <input type="text" name="db_host" value="{{ old('db_host', '127.0.0.1') }}" required
                       class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white placeholder-slate-600 focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500">
            </div>
            <div>
                <label class="block text-xs font-semibold uppercase tracking-[0.24em] text-slate-400 mb-2">DB Port</label>
                <input type="number" name="db_port" value="{{ old('db_port', '3306') }}" required
                       class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white placeholder-slate-600 focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500">
            </div>
        </div>

        <div>
            <label class="block text-xs font-semibold uppercase tracking-[0.24em] text-slate-400 mb-2">Database Name</label>
            <input type="text" name="db_name" value="{{ old('db_name') }}" required
                   placeholder="quickro_pos"
                   class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white placeholder-slate-600 focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500">
        </div>

        <div>
            <label class="block text-xs font-semibold uppercase tracking-[0.24em] text-slate-400 mb-2">DB Username</label>
            <input type="text" name="db_username" value="{{ old('db_username', 'root') }}" required
                   class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white placeholder-slate-600 focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500">
        </div>

        <div>
            <label class="block text-xs font-semibold uppercase tracking-[0.24em] text-slate-400 mb-2">DB Password <span class="normal-case font-normal text-slate-500">(optional)</span></label>
            <input type="password" name="db_password" value="{{ old('db_password') }}"
                   placeholder="Leave blank if no password"
                   class="w-full rounded-xl border border-white/10 bg-white/5 px-4 py-3 text-sm text-white placeholder-slate-600 focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500">
        </div>

        <button type="submit"
                class="w-full inline-flex items-center justify-center gap-2 rounded-full bg-brand-600 px-6 py-3.5 text-sm font-bold text-white shadow-lg shadow-brand-600/30 transition hover:bg-brand-700">
            Test &amp; Save Connection
            <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2"/></svg>
        </button>
    </form>
</div>
@endsection