@extends('install.layout')

@section('content')

<div class="mb-8">
    <h1 class="text-2xl font-bold text-slate-800">Import Database</h1>
    <p class="mt-1 text-slate-500">This will execute <code class="text-indigo-600 bg-indigo-50 px-1.5 py-0.5 rounded text-xs font-mono">database/install.sql</code> and populate all tables with the required data.</p>
</div>

@if(session('import_error'))
<div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-xl text-sm text-red-800 flex gap-3">
    <svg class="w-5 h-5 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
    </svg>
    <div>
        <p class="font-semibold">Import failed</p>
        <p class="mt-0.5 text-red-700">{{ session('import_error') }}</p>
    </div>
</div>
@endif

<div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden mb-5">
    <div class="px-6 py-4 border-b border-slate-100">
        <span class="font-semibold text-slate-700">Pre-flight Checks</span>
    </div>
    <ul class="divide-y divide-slate-100">
        <li class="flex items-center justify-between px-6 py-3.5">
            <span class="text-sm text-slate-700">install.sql file</span>
            @if($sqlExists)
                <span class="text-xs font-medium text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded">Found</span>
            @else
                <span class="text-xs font-medium text-red-600 bg-red-50 px-2 py-0.5 rounded">Not found</span>
            @endif
        </li>
        <li class="flex items-center justify-between px-6 py-3.5">
            <span class="text-sm text-slate-700">Database updates</span>
            @if($updateCount > 0)
                <span class="text-xs font-medium text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded">{{ $updateCount }} found</span>
            @else
                <span class="text-xs font-medium text-slate-500 bg-slate-50 px-2 py-0.5 rounded">None</span>
            @endif
        </li>
        <li class="flex items-center justify-between px-6 py-3.5">
            <span class="text-sm text-slate-700">Database credentials</span>
            @if(session('install_db'))
                <span class="text-xs font-medium text-emerald-600 bg-emerald-50 px-2 py-0.5 rounded">Saved</span>
            @else
                <span class="text-xs font-medium text-amber-600 bg-amber-50 px-2 py-0.5 rounded">Missing</span>
            @endif
        </li>
    </ul>
</div>

@if(!$sqlExists)
<div class="mb-5 p-4 bg-amber-50 border border-amber-200 rounded-xl text-sm text-amber-800">
    <p><strong>install.sql not found.</strong> Place the file at <code class="font-mono text-xs bg-amber-100 px-1 rounded">database/install.sql</code> before continuing.</p>
</div>
@endif

<div class="bg-slate-50 border border-slate-200 rounded-xl p-5 mb-6">
    <h3 class="text-sm font-semibold text-slate-700 mb-2">What this step does</h3>
    <ul class="text-sm text-slate-500 space-y-1.5">
        <li class="flex items-start gap-2">
            <svg class="w-4 h-4 text-indigo-400 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
            Creates all application tables
        </li>
        <li class="flex items-start gap-2">
            <svg class="w-4 h-4 text-indigo-400 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
            Seeds roles, permissions, default settings, payment gateways &amp; templates
        </li>
        <li class="flex items-start gap-2">
            <svg class="w-4 h-4 text-indigo-400 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg>
            Does <strong>not</strong> create admin users - you'll do that in a later step
        </li>
    </ul>
</div>

<form method="POST" action="{{ route('install.import.run') }}" id="importForm">
    @csrf
    <div class="flex items-center justify-between">
        <a href="{{ route('install.database') }}" class="text-sm text-slate-500 hover:text-slate-700 flex items-center gap-1.5">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
            </svg>
            Back
        </a>
        <button type="submit" id="importBtn" @disabled(!$sqlExists || !session('install_db'))
                class="btn-primary">
            <svg id="importIcon" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
            </svg>
            <svg id="importSpinner" class="w-4 h-4 animate-spin hidden" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
            </svg>
            <span id="importLabel">Run Import</span>
        </button>
    </div>
</form>

<script>
document.getElementById('importForm').addEventListener('submit', function() {
    document.getElementById('importIcon').classList.add('hidden');
    document.getElementById('importSpinner').classList.remove('hidden');
    document.getElementById('importLabel').textContent = 'Importing…';
    document.getElementById('importBtn').disabled = true;
});
</script>

@endsection