@extends('install.layout')

@section('content')

<div class="mb-8">
    <h1 class="text-2xl font-bold text-slate-800">Configuration</h1>
    <p class="mt-1 text-slate-500">Set your platform name, URL, currency, and email delivery settings.</p>
</div>

@if($errors->any())
<div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-xl text-sm text-red-800">
    <p class="font-semibold mb-1">Please fix the following errors:</p>
    <ul class="list-disc list-inside space-y-0.5">
        @foreach($errors->all() as $error)
            <li>{{ $error }}</li>
        @endforeach
    </ul>
</div>
@endif

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

    {{-- ── Site Settings ── --}}
    <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 flex items-center gap-2">
            <div class="w-6 h-6 rounded-md flex items-center justify-center" style="background-color: var(--primary-light);">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" style="color: var(--primary);">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064"/>
                </svg>
            </div>
            <span class="font-semibold text-slate-700">Site Settings</span>
        </div>

        <div class="p-6 space-y-5">
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1.5">Site Name <span class="text-red-500">*</span></label>
                    <input type="text" name="app_name" value="{{ old('app_name', 'Predixio') }}"
                           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 @error('app_name') border-red-400 @enderror">
                    @error('app_name') <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">Default Currency <span class="text-red-500">*</span></label>
                    <input type="text" name="site_currency" value="{{ old('site_currency', 'USD') }}"
                           placeholder="USD"
                           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 @error('site_currency') border-red-400 @enderror">
                    @error('site_currency') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Application URL <span class="text-red-500">*</span></label>
                <input type="url" name="app_url" value="{{ old('app_url', request()->getSchemeAndHttpHost()) }}"
                       placeholder="https://yourdomain.com"
                       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 @error('app_url') border-red-400 @enderror">
                @error('app_url') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                <p class="mt-1 text-xs text-slate-400">No trailing slash. Used for links in emails and redirects.</p>
            </div>
        </div>
    </div>

    {{-- ── SMTP Settings ── --}}
    <div class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden mb-6">
        <div class="px-6 py-4 border-b border-slate-100 flex items-center justify-between">
            <div class="flex items-center gap-2">
                <div class="w-6 h-6 rounded-md bg-sky-100 flex items-center justify-center">
                    <svg class="w-3.5 h-3.5 text-sky-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                    </svg>
                </div>
                <span class="font-semibold text-slate-700">Email (SMTP)</span>
            </div>
            <span class="text-xs text-slate-400 bg-slate-100 px-2 py-0.5 rounded">Optional - configurable later</span>
        </div>

        <div class="p-6 space-y-5">
            <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">SMTP Host</label>
                    <input type="text" name="smtp_host" value="{{ old('smtp_host') }}"
                           placeholder="smtp.mailgun.org"
                           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">
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1.5">Port</label>
                    <input type="number" name="smtp_port" value="{{ old('smtp_port', '587') }}"
                           placeholder="587"
                           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">
                </div>
            </div>

            <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="smtp_username" value="{{ old('smtp_username') }}"
                           placeholder="SMTP username"
                           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">
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1.5">Password</label>
                    <input type="password" name="smtp_password"
                           placeholder="SMTP password"
                           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">
                </div>
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1.5">Encryption</label>
                    <select name="smtp_encryption"
                            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 bg-white">
                        <option value="tls"  {{ old('smtp_encryption','tls') === 'tls'  ? 'selected' : '' }}>TLS (port 587)</option>
                        <option value="ssl"  {{ old('smtp_encryption') === 'ssl'  ? 'selected' : '' }}>SSL (port 465)</option>
                        <option value=""     {{ old('smtp_encryption') === ''     ? 'selected' : '' }}>None</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-slate-700 mb-1.5">From Address</label>
                    <input type="email" name="smtp_from_address" value="{{ old('smtp_from_address') }}"
                           placeholder="no-reply@yourdomain.com"
                           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">
                </div>
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">From Name</label>
                <input type="text" name="smtp_from_name" value="{{ old('smtp_from_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">
            </div>
        </div>
    </div>

    <div class="flex items-center justify-between">
        <a href="{{ route('install.import') }}" 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">
            Save &amp; Continue
            <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