@extends('installer.layout')

@section('content')
<div class="bg-white rounded-lg shadow-lg p-8">
    <h2 class="text-2xl font-bold text-gray-900 mb-6">Database Setup</h2>

    <div class="prose max-w-none mb-6">
        <p class="text-gray-600">
            This step will create the necessary database tables and optionally populate them with sample data.
        </p>
    </div>

    <form method="POST" action="{{ route('installer.database.migrate') }}">
        @csrf

        @if(config('installer.allow_seeding'))
            <div class="mb-6">
                <label class="flex items-center">
                    <input type="checkbox" name="run_seeder" value="1" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                    <span class="ml-2 text-sm font-medium text-gray-700">
                        Run database seeders (populate with sample data)
                    </span>
                </label>
                <p class="ml-6 mt-1 text-xs text-gray-500">
                    This will populate your database with sample data for testing purposes.
                </p>
            </div>
        @endif

        <div class="bg-yellow-50 border-l-4 border-yellow-500 p-4 mb-6">
            <p class="font-semibold text-yellow-900">Important:</p>
            <ul class="mt-2 text-yellow-800 list-disc list-inside text-sm">
                <li>Ensure your database exists and credentials are correct</li>
                <li>This process will create new tables in your database</li>
                <li>If tables already exist, some migrations may fail</li>
                <li>A storage symbolic link will be created automatically</li>
            </ul>
        </div>

        <div class="flex justify-between items-center mt-8">
            <a href="{{ route('installer.dependencies') }}" class="px-6 py-3 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors font-semibold">
                Back
            </a>
            <button type="submit" class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-semibold">
                Run Migrations
            </button>
        </div>
    </form>
</div>
@endsection