@extends('install.layout')

@section('content')

<div class="mb-8">
    <h1 class="text-2xl font-bold text-slate-800">Database Connection</h1>
    <p class="mt-1 text-slate-500">Enter your MySQL database credentials. The connection will be tested before saving.</p>
</div>

@if(session('db_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">Connection failed</p>
        <p class="mt-0.5 text-red-700">{{ session('db_error') }}</p>
    </div>
</div>
@endif

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

    <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
        <div class="px-6 py-4 border-b border-slate-100">
            <span class="font-semibold text-slate-700">MySQL Credentials</span>
        </div>

        <div class="p-6 space-y-5">

            {{-- Host + Port --}}
            <div class="grid grid-cols-3 gap-4">
                <div class="col-span-2">
                    <label class="block text-sm font-medium text-slate-700 mb-1.5">Database Host</label>
                    <input type="text" name="db_host"
                           value="{{ old('db_host', $old['db_host'] ?? '127.0.0.1') }}"
                           placeholder="127.0.0.1"
                           class="w-full px-3.5 py-2.5 text-sm border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent @error('db_host') border-red-400 @enderror">
                    @error('db_host') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1.5">Port</label>
                    <input type="number" name="db_port"
                           value="{{ old('db_port', $old['db_port'] ?? '3306') }}"
                           placeholder="3306"
                           class="w-full px-3.5 py-2.5 text-sm border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent @error('db_port') border-red-400 @enderror">
                    @error('db_port') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
            </div>

            {{-- Database name --}}
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Database Name</label>
                <input type="text" name="db_name"
                       value="{{ old('db_name', $old['db_name'] ?? '') }}"
                       placeholder="predixio"
                       class="w-full px-3.5 py-2.5 text-sm border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent @error('db_name') border-red-400 @enderror">
                @error('db_name') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
            </div>

            {{-- Username + Password --}}
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1.5">Username</label>
                    <input type="text" name="db_username"
                           value="{{ old('db_username', $old['db_username'] ?? 'root') }}"
                           placeholder="root"
                           class="w-full px-3.5 py-2.5 text-sm border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent @error('db_username') border-red-400 @enderror">
                    @error('db_username') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1.5">Password <span class="text-slate-400 font-normal">(optional)</span></label>
                    <input type="password" name="db_password"
                           placeholder="Leave blank if none"
                           class="w-full px-3.5 py-2.5 text-sm border border-slate-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
                </div>
            </div>

        </div>
    </div>

    <div class="mt-6 flex items-center justify-between">
        <a href="{{ route('install.requirements') }}" 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"
                class="btn-primary">
            Test &amp; Save Connection
            <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="M9 5l7 7-7 7"/>
            </svg>
        </button>
    </div>
</form>

@endsection