@extends('layouts.app')

@section('title', 'Database Connections — ' . config('app.name'))

@section('content')
<div class="max-w-[1200px] mx-auto px-4 py-6 sm:py-8">
    @include('partials.nav')

    <div class="mt-4 sm:mt-6 mb-6 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
        <div>
            <h1 class="text-2xl sm:text-3xl font-bold text-white">Database Connections</h1>
            <p class="text-slate-400 mt-1 text-sm">Tambah koneksi SQL Server, PostgreSQL, MySQL, atau MariaDB.</p>
        </div>
        <a href="{{ route('databases.index') }}" class="text-sm text-cyan-400 hover:text-cyan-300">→ Database List</a>
    </div>

    @include('partials.flash')

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
        <div class="bg-slate-900 border border-slate-800 rounded-2xl p-6">
            <h2 class="text-lg font-semibold text-white mb-4">Add Connection</h2>
            <form method="POST" action="{{ route('database-connections.store') }}" id="conn-form" class="space-y-4">
                @csrf
                <div>
                    <label class="block text-sm text-slate-300 mb-1">Name</label>
                    <input name="name" required maxlength="100" value="{{ old('name') }}" placeholder="Production SQL Server"
                        class="w-full rounded-lg bg-slate-800 border border-slate-700 px-3 py-2 text-sm text-white">
                </div>
                <div>
                    <label class="block text-sm text-slate-300 mb-1">Driver</label>
                    <select name="driver" id="driver" required
                        class="w-full rounded-lg bg-slate-800 border border-slate-700 px-3 py-2 text-sm text-white">
                        @foreach ($drivers as $key => $label)
                            <option value="{{ $key }}" @selected(old('driver') === $key)>{{ $label }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                    <div class="sm:col-span-2">
                        <label class="block text-sm text-slate-300 mb-1">Host / Address</label>
                        <input name="host" required value="{{ old('host') }}" placeholder="10.100.1.25"
                            class="w-full rounded-lg bg-slate-800 border border-slate-700 px-3 py-2 text-sm text-white">
                    </div>
                    <div>
                        <label class="block text-sm text-slate-300 mb-1">Port</label>
                        <input type="number" name="port" id="port" required value="{{ old('port', 1433) }}"
                            class="w-full rounded-lg bg-slate-800 border border-slate-700 px-3 py-2 text-sm text-white">
                    </div>
                </div>
                <div>
                    <label class="block text-sm text-slate-300 mb-1">Default Database</label>
                    <input name="database" value="{{ old('database') }}" placeholder="master / postgres / mysql"
                        class="w-full rounded-lg bg-slate-800 border border-slate-700 px-3 py-2 text-sm text-white">
                </div>
                <div>
                    <label class="block text-sm text-slate-300 mb-1">Username (admin)</label>
                    <input name="username" required value="{{ old('username') }}"
                        class="w-full rounded-lg bg-slate-800 border border-slate-700 px-3 py-2 text-sm text-white">
                </div>
                <div>
                    <label class="block text-sm text-slate-300 mb-1">Password</label>
                    <input type="password" name="password" required autocomplete="new-password"
                        class="w-full rounded-lg bg-slate-800 border border-slate-700 px-3 py-2 text-sm text-white">
                </div>
                <div class="flex flex-wrap gap-2">
                    <button type="submit" class="rounded-lg bg-cyan-600 hover:bg-cyan-500 px-5 py-2 text-sm font-medium text-white">
                        Add Connection
                    </button>
                    <button type="submit" formaction="{{ route('database-connections.test') }}" formmethod="POST"
                        class="rounded-lg border border-slate-700 px-5 py-2 text-sm text-slate-300 hover:bg-slate-800">
                        Test Connection
                    </button>
                </div>
            </form>
        </div>

        <div class="bg-slate-900 border border-slate-800 rounded-2xl overflow-hidden flex flex-col list-panel">
            <div class="list-panel__toolbar p-4 border-b border-slate-800">
                <h2 class="font-semibold text-white">Saved Connections ({{ count($connections) }})</h2>
            </div>
            <div class="list-panel__scroll">
                <table class="min-w-full text-sm list-table">
                    <thead class="text-slate-300">
                        <tr>
                            <th class="px-4 py-3 text-left bg-slate-800 border-b border-slate-700">Name</th>
                            <th class="px-4 py-3 text-left bg-slate-800 border-b border-slate-700">Type</th>
                            <th class="px-4 py-3 text-left bg-slate-800 border-b border-slate-700">Host</th>
                            <th class="px-4 py-3 text-left bg-slate-800 border-b border-slate-700">Action</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-800">
                        @forelse ($connections as $conn)
                            <tr>
                                <td class="px-4 py-3 text-white">{{ $conn->name }}</td>
                                <td class="px-4 py-3 text-slate-300">{{ $conn->driverLabel() }}</td>
                                <td class="px-4 py-3 text-slate-400">{{ $conn->host }}:{{ $conn->port }}</td>
                                <td class="px-4 py-3">
                                    <form method="POST" action="{{ route('database-connections.destroy', $conn) }}"
                                          onsubmit="return confirm('Delete connection [{{ $conn->name }}]?');">
                                        @csrf
                                        @method('DELETE')
                                        <button class="rounded bg-red-800 hover:bg-red-700 text-white text-xs px-2 py-1">Delete</button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="4" class="px-4 py-8 text-center text-slate-400">No connections yet.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <aside class="mt-6 bg-slate-900 border border-slate-800 rounded-2xl p-5 notes-panel">
        <h2 class="text-lg font-semibold text-white mb-4">Catatan</h2>
        <dl class="space-y-3 text-sm text-slate-400">
            <div>
                <dt class="font-medium text-cyan-400 mb-1">Tipe database</dt>
                <dd>SQL Server, PostgreSQL, MySQL, MariaDB — gunakan akun dengan role administrator.</dd>
            </div>
            <div>
                <dt class="font-medium text-amber-400 mb-1">Make offline</dt>
                <dd>SQL Server: SET OFFLINE. PostgreSQL: connection limit 0. MySQL/MariaDB: READ ONLY.</dd>
            </div>
        </dl>
    </aside>
</div>

@push('scripts')
<script>
document.getElementById('driver')?.addEventListener('change', function () {
    var ports = { sqlsrv: 1433, pgsql: 5432, mysql: 3306, mariadb: 3306 };
    document.getElementById('port').value = ports[this.value] || 1433;
});
</script>
@endpush
@endsection