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

@section('content')
<div class="max-w-xl">
    <h1 class="text-3xl font-black text-white">Database Migration</h1>
    <p class="mt-3 text-sm leading-7 text-slate-400">
        Running migrations to create all database tables and seeding initial data.
    </p>

    <div class="mt-10">
        @if(isset($success) && $success)
            <div class="rounded-2xl border border-accent-600/30 bg-accent-600/10 p-6">
                <div class="flex items-center gap-3">
                    <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-accent-600/20 text-accent-400">
                        <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                    </span>
                    <div>
                        <p class="text-sm font-bold text-accent-300">Migrations completed successfully!</p>
                        <p class="text-xs text-slate-400 mt-0.5">All tables have been created and initial data seeded.</p>
                    </div>
                </div>
            </div>

            <a href="{{ route('install.admin') }}"
               class="mt-8 inline-flex w-full 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">
                Create Admin Account
                <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="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
            </a>

        @elseif(isset($success) && !$success)
            <div class="rounded-2xl border border-rose-500/30 bg-rose-500/10 p-6">
                <div class="flex items-start gap-3">
                    <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-rose-500/20 text-rose-400 mt-0.5">
                        <svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
                    </span>
                    <div>
                        <p class="text-sm font-bold text-rose-300">Migration failed</p>
                        @if(!empty($error))
                            <p class="text-xs text-slate-400 mt-1 leading-5">{{ $error }}</p>
                        @endif
                    </div>
                </div>
            </div>

            <div class="mt-6 flex gap-4">
                <a href="{{ route('install.database') }}"
                   class="inline-flex items-center gap-2 rounded-full border border-white/10 px-5 py-3 text-sm font-semibold text-slate-300 transition hover:border-white/30">
                    Back to Database
                </a>
                <a href="{{ route('install.migrate') }}"
                   class="inline-flex items-center gap-2 rounded-full bg-brand-600 px-5 py-3 text-sm font-bold text-white transition hover:bg-brand-700">
                    Retry
                </a>
            </div>

        @else
            {{-- Auto-trigger migration on page load --}}
            <div class="rounded-2xl border border-white/10 bg-white/5 p-8 text-center" id="migration-running">
                <div class="flex justify-center">
                    <svg class="h-8 w-8 animate-spin text-brand-400" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/>
                    </svg>
                </div>
                <p class="mt-5 text-sm font-semibold text-white">Running migrations…</p>
                <p class="mt-2 text-xs text-slate-400">This may take a moment. Do not close this page.</p>
            </div>
            <form id="migrate-form" method="POST" action="{{ route('install.migrate') }}" class="hidden">@csrf</form>
            <script>
                document.addEventListener('DOMContentLoaded', function () {
                    document.getElementById('migrate-form').submit();
                });
            </script>
        @endif
    </div>
</div>
@endsection