@extends('layouts.public')

@section('title', 'Yeni Sohbet Odası Oluştur')

@section('content')
<div style="max-width: 600px; margin: 0 auto; padding: 40px 16px;">

    <h1 style="font-size: 28px; font-weight: 700; color: #111827; margin-bottom: 8px;">Yeni Sohbet Odası</h1>
    <p style="color: #6b7280; margin-bottom: 32px;">Yeni bir sohbet odası oluşturun</p>

    <form action="{{ route('chat.store') }}" method="POST" style="background: white; padding: 32px; border-radius: 12px; border: 1px solid #e5e7eb;">
        @csrf

        <div style="margin-bottom: 24px;">
            <label style="display: block; font-weight: 600; color: #111827; margin-bottom: 8px;">Oda Adı *</label>
            <input 
                type="text" 
                name="name" 
                value="{{ old('name') }}" 
                required 
                placeholder="Örn: Mülakat Hazırlığı"
                style="width: 100%; padding: 12px 16px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px;"
            >
            @error('name')
                <p style="color: #dc2626; font-size: 13px; margin-top: 4px;">{{ $message }}</p>
            @enderror
        </div>

        <div style="margin-bottom: 24px;">
            <label style="display: block; font-weight: 600; color: #111827; margin-bottom: 8px;">Açıklama</label>
            <textarea 
                name="description" 
                rows="4" 
                placeholder="Oda açıklaması yazın..."
                style="width: 100%; padding: 12px 16px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; resize: vertical;"
            >{{ old('description') }}</textarea>
            @error('description')
                <p style="color: #dc2626; font-size: 13px; margin-top: 4px;">{{ $message }}</p>
            @enderror
        </div>

        <div style="margin-bottom: 24px;">
            <label style="display: block; font-weight: 600; color: #111827; margin-bottom: 8px;">Maksimum Kullanıcı *</label>
            <input 
                type="number" 
                name="max_users" 
                value="{{ old('max_users', 100) }}" 
                min="2" 
                max="1000" 
                required 
                style="width: 100%; padding: 12px 16px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px;"
            >
            @error('max_users')
                <p style="color: #dc2626; font-size: 13px; margin-top: 4px;">{{ $message }}</p>
            @enderror
        </div>

        <div style="margin-bottom: 32px;">
            <label style="display: flex; align-items: center; gap: 12px; cursor: pointer;">
                <input 
                    type="checkbox" 
                    name="is_active" 
                    value="1" 
                    {{ old('is_active', true) ? 'checked' : '' }}
                    style="width: 18px; height: 18px; cursor: pointer;"
                >
                <span style="font-weight: 600; color: #111827;">Aktif Tut</span>
            </label>
        </div>

        <div style="display: flex; gap: 12px;">
            <button 
                type="submit" 
                style="flex: 1; background: #1d4ed8; color: white; padding: 12px 24px; border: none; border-radius: 8px; font-weight: 600; font-size: 14px; cursor: pointer;"
            >
                Oluştur
            </button>
            <a 
                href="{{ route('chat.index') }}" 
                style="flex: 1; background: #f3f4f6; color: #374151; padding: 12px 24px; border-radius: 8px; font-weight: 600; font-size: 14px; text-decoration: none; text-align: center;"
            >
                İptal
            </a>
        </div>
    </form>

</div>
@endsection
