@extends('layouts.app')

@section('title', 'Add Site - Admin - TicketHub Central')

@section('content')
<div class="p-8 animate-fadeIn">
    <div class="max-w-3xl mx-auto">
        <!-- Header -->
        <div class="mb-6">
            <div class="flex items-center gap-3 mb-2">
                <a href="{{ route('admin.sites.index') }}" class="text-slate-400 hover:text-slate-600 transition-colors">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                    </svg>
                </a>
                <h1 class="font-heading text-3xl font-bold text-slate-900 tracking-tight">Add New Site</h1>
            </div>
            <p class="text-slate-500">Configure a new ticketing site database connection</p>
        </div>

        <!-- Form -->
        <div class="bg-white border border-slate-200 rounded-lg shadow-sm p-6">
            <form action="{{ route('admin.sites.store') }}" method="POST">
                @csrf

                <div class="space-y-6">
                    <!-- Basic Info -->
                    <div class="border-b border-slate-200 pb-6">
                        <h3 class="font-semibold text-slate-900 mb-4">Basic Information</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label for="name" class="block text-sm font-medium text-slate-700 mb-1">Site Name *</label>
                                <input type="text" name="name" id="name" value="{{ old('name') }}" required
                                       class="w-full px-3 py-2 border border-slate-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('name') border-red-500 @enderror"
                                       placeholder="e.g., North Region Hub">
                                @error('name')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            <div>
                                <label for="code" class="block text-sm font-medium text-slate-700 mb-1">Site Code *</label>
                                <input type="text" name="code" id="code" value="{{ old('code') }}" required
                                       class="w-full px-3 py-2 border border-slate-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 font-mono @error('code') border-red-500 @enderror"
                                       placeholder="e.g., north1">
                                @error('code')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                                <p class="text-slate-500 text-xs mt-1">Unique identifier (letters, numbers, dashes, underscores)</p>
                            </div>
                        </div>
                    </div>

                    <!-- Database Connection -->
                    <div class="border-b border-slate-200 pb-6">
                        <h3 class="font-semibold text-slate-900 mb-4">Database Connection</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label for="db_driver" class="block text-sm font-medium text-slate-700 mb-1">Driver *</label>
                                <select name="db_driver" id="db_driver" required
                                        class="w-full px-3 py-2 border border-slate-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                                    <option value="mysql" {{ old('db_driver', 'mysql') === 'mysql' ? 'selected' : '' }}>MySQL</option>
                                    <option value="pgsql" {{ old('db_driver') === 'pgsql' ? 'selected' : '' }}>PostgreSQL</option>
                                    <option value="sqlite" {{ old('db_driver') === 'sqlite' ? 'selected' : '' }}>SQLite</option>
                                    <option value="sqlsrv" {{ old('db_driver') === 'sqlsrv' ? 'selected' : '' }}>SQL Server</option>
                                </select>
                            </div>
                            <div>
                                <label for="db_host" class="block text-sm font-medium text-slate-700 mb-1">Host *</label>
                                <input type="text" name="db_host" id="db_host" value="{{ old('db_host', '127.0.0.1') }}" required
                                       class="w-full px-3 py-2 border border-slate-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('db_host') border-red-500 @enderror"
                                       placeholder="e.g., 127.0.0.1 or db.example.com">
                                @error('db_host')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            <div>
                                <label for="db_port" class="block text-sm font-medium text-slate-700 mb-1">Port *</label>
                                <input type="number" name="db_port" id="db_port" value="{{ old('db_port', 3306) }}" required
                                       class="w-full px-3 py-2 border border-slate-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('db_port') border-red-500 @enderror"
                                       placeholder="e.g., 3306">
                                @error('db_port')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            <div>
                                <label for="db_database" class="block text-sm font-medium text-slate-700 mb-1">Database Name *</label>
                                <input type="text" name="db_database" id="db_database" value="{{ old('db_database') }}" required
                                       class="w-full px-3 py-2 border border-slate-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('db_database') border-red-500 @enderror"
                                       placeholder="e.g., north1_tickets">
                                @error('db_database')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            <div>
                                <label for="db_username" class="block text-sm font-medium text-slate-700 mb-1">Username *</label>
                                <input type="text" name="db_username" id="db_username" value="{{ old('db_username') }}" required
                                       class="w-full px-3 py-2 border border-slate-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('db_username') border-red-500 @enderror"
                                       placeholder="e.g., app_user">
                                @error('db_username')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            <div>
                                <label for="db_password" class="block text-sm font-medium text-slate-700 mb-1">Password</label>
                                <input type="password" name="db_password" id="db_password"
                                       class="w-full px-3 py-2 border border-slate-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 @error('db_password') border-red-500 @enderror"
                                       placeholder="Enter database password">
                                @error('db_password')
                                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <!-- File Storage -->
                    <div class="border-b border-slate-200 pb-6">
                        <h3 class="font-semibold text-slate-900 mb-4">File Storage</h3>
                        <div>
                            <label for="site_path" class="block text-sm font-medium text-slate-700 mb-1">Upload Path</label>
                            <input type="text" name="site_path" id="site_path" value="{{ old('site_path') }}"
                                   class="w-full px-3 py-2 border border-slate-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 font-mono @error('site_path') border-red-500 @enderror"
                                   placeholder="e.g., /var/www/sites/north1/uploads">
                            @error('site_path')
                                <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                            @enderror
                            <p class="text-slate-500 text-xs mt-1">Full path where uploaded files will be stored for this site</p>
                        </div>
                    </div>

                    <!-- Status -->
                    <div>
                        <label class="flex items-center gap-3 cursor-pointer">
                            <input type="checkbox" name="is_active" value="1" {{ old('is_active', true) ? 'checked' : '' }}
                                   class="w-5 h-5 text-blue-600 border-slate-300 rounded focus:ring-blue-500">
                            <span class="text-sm font-medium text-slate-700">Site is active</span>
                        </label>
                        <p class="text-slate-500 text-xs mt-1 ml-8">Inactive sites won't appear in the site list</p>
                    </div>
                </div>

                <!-- Actions -->
                <div class="flex items-center justify-end gap-3 mt-8 pt-6 border-t border-slate-200">
                    <a href="{{ route('admin.sites.index') }}" class="px-4 py-2 text-slate-600 hover:text-slate-900 hover:bg-slate-100 rounded-lg transition-colors">
                        Cancel
                    </a>
                    <button type="submit" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors">
                        Create Site
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection