@extends('admin.install-layout')
@section('title', 'Step 2 — Database')
@php $step = 2; @endphp

@section('install-content')
<div class="bg-white rounded-2xl shadow-lg p-8">
    <div class="flex items-center space-x-3 mb-6">
        <div class="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
            <i class="fas fa-database text-blue-600 text-xl"></i>
        </div>
        <div>
            <h1 class="text-2xl font-bold text-gray-800">Database & App Configuration</h1>
            <p class="text-gray-500 text-sm">Set up your database connection and application details</p>
        </div>
    </div>

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

        <!-- App Details -->
        <div class="bg-gray-50 rounded-xl p-5">
            <h3 class="font-semibold text-gray-700 mb-4 flex items-center">
                <i class="fas fa-cog mr-2 text-purple-500"></i> Application Settings
            </h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Application Name</label>
                    <input type="text" name="app_name" value="{{ old('app_name', 'SurveyEarner') }}"
                        class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-purple-400 focus:outline-none @error('app_name') border-red-400 @enderror"
                        placeholder="My App" required>
                    @error('app_name')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Application URL</label>
                    <input type="url" name="app_url" value="{{ old('app_url', request()->getSchemeAndHttpHost()) }}"
                        class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-purple-400 focus:outline-none @error('app_url') border-red-400 @enderror"
                        placeholder="https://yoursite.com" required>
                    @error('app_url')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
                </div>
            </div>
        </div>

        <!-- DB Type -->
        <div class="bg-gray-50 rounded-xl p-5">
            <h3 class="font-semibold text-gray-700 mb-4 flex items-center">
                <i class="fas fa-database mr-2 text-blue-500"></i> Database Configuration
            </h3>

            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Database Driver</label>
                <select name="db_connection" id="db_connection"
                    class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-purple-400 focus:outline-none"
                    onchange="toggleDbFields(this.value)">
                    <option value="sqlite" {{ old('db_connection') == 'sqlite' ? 'selected' : '' }}>SQLite (simple, file-based)</option>
                    <option value="mysql"  {{ old('db_connection') == 'mysql'  ? 'selected' : '' }}>MySQL / MariaDB</option>
                    <option value="pgsql"  {{ old('db_connection') == 'pgsql'  ? 'selected' : '' }}>PostgreSQL</option>
                </select>
            </div>

            <!-- SQLite notice -->
            <div id="sqlite-notice" class="bg-blue-50 border border-blue-200 rounded-lg p-3 mb-4">
                <p class="text-blue-700 text-sm">
                    <i class="fas fa-info-circle mr-1"></i>
                    <strong>SQLite</strong> — No server needed. Just enter a database filename (e.g. <code>database</code>).
                    The file will be created automatically inside <code>database/</code>.
                </p>
            </div>

            <!-- DB fields -->
            <div id="db-fields" class="hidden space-y-4">
                <div class="grid grid-cols-3 gap-4">
                    <div class="col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Host</label>
                        <input type="text" name="db_host" value="{{ old('db_host', '127.0.0.1') }}"
                            class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-purple-400 focus:outline-none">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Port</label>
                        <input type="number" name="db_port" value="{{ old('db_port', '3306') }}"
                            class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-purple-400 focus:outline-none">
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Username</label>
                        <input type="text" name="db_username" value="{{ old('db_username', 'root') }}"
                            class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-purple-400 focus:outline-none">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Password</label>
                        <input type="password" name="db_password"
                            class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-purple-400 focus:outline-none">
                    </div>
                </div>
            </div>

            <!-- DB name (always shown) -->
            <div class="mt-4">
                <label class="block text-sm font-medium text-gray-700 mb-1" id="db-name-label">Database Name / Filename</label>
                <input type="text" name="db_name" value="{{ old('db_name', 'database') }}"
                    class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-purple-400 focus:outline-none @error('db_name') border-red-400 @enderror"
                    placeholder="database" required>
                @error('db_name')<p class="text-red-500 text-xs mt-1">{{ $message }}</p>@enderror
            </div>
        </div>

        <button type="submit"
            class="w-full bg-gradient-to-r from-purple-600 to-indigo-600 text-white py-3 px-6 rounded-xl font-semibold hover:from-purple-700 hover:to-indigo-700 transition">
            <i class="fas fa-plug mr-2"></i> Test Connection & Continue
        </button>
    </form>
</div>
@endsection

@section('install-scripts')
<script>
function toggleDbFields(val) {
    const fields  = document.getElementById('db-fields');
    const notice  = document.getElementById('sqlite-notice');
    const label   = document.getElementById('db-name-label');
    if (val === 'sqlite') {
        fields.classList.add('hidden');
        notice.classList.remove('hidden');
        label.textContent = 'Database Filename (no extension)';
    } else {
        fields.classList.remove('hidden');
        notice.classList.add('hidden');
        label.textContent = 'Database Name';
    }
}
// Run on load to sync with old() value
toggleDbFields(document.getElementById('db_connection').value);
</script>
@endsection