@extends('layouts.app')

@section('title', 'Создать пост')

@section('content')
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="mb-6">
        <a href="{{ route('posts.index') }}" class="inline-flex items-center text-indigo-600 hover:text-indigo-800">
            <svg class="w-5 h-5 mr-1" 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>
            Назад
        </a>
    </div>

    <div class="bg-white rounded-lg shadow-lg p-8">
        <h1 class="text-3xl font-bold text-gray-900 mb-6">Создать новый пост</h1>

        <form action="{{ route('posts.store') }}" method="POST" class="space-y-6">
            @csrf

            {{-- Заголовок --}}
            <div>
                <label for="title" class="block text-sm font-medium text-gray-700 mb-2">
                    Заголовок *
                </label>
                <input type="text" 
                       name="title" 
                       id="title" 
                       required
                       value="{{ old('title') }}"
                       placeholder="Введите заголовок поста"
                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent @error('title') border-red-500 @enderror">
                @error('title')
                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            {{-- Контент --}}
            <div>
                <label for="content" class="block text-sm font-medium text-gray-700 mb-2">
                    Содержание *
                </label>
                <textarea name="content" 
                          id="content" 
                          rows="15" 
                          required
                          placeholder="Напишите содержание поста..."
                          class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent @error('content') border-red-500 @enderror">{{ old('content') }}</textarea>
                @error('content')
                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            {{-- Статус публикации --}}
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">
                    Статус публикации *
                </label>
                <div class="space-y-3">
                    <label class="flex items-center p-4 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50 transition">
                        <input type="radio" 
                               name="status" 
                               value="draft" 
                               {{ old('status', 'draft') == 'draft' ? 'checked' : '' }}
                               class="h-4 w-4 text-indigo-600 focus:ring-indigo-500">
                        <div class="ml-3">
                            <span class="block text-sm font-medium text-gray-900">Черновик</span>
                            <span class="block text-sm text-gray-500">Сохранить пост без публикации</span>
                        </div>
                    </label>

                    <label class="flex items-center p-4 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50 transition">
                        <input type="radio" 
                               name="status" 
                               value="published" 
                               {{ old('status') == 'published' ? 'checked' : '' }}
                               class="h-4 w-4 text-indigo-600 focus:ring-indigo-500">
                        <div class="ml-3">
                            <span class="block text-sm font-medium text-gray-900">Опубликовать сейчас</span>
                            <span class="block text-sm text-gray-500">Пост будет опубликован немедленно</span>
                        </div>
                    </label>

                    <label class="flex items-center p-4 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50 transition">
                        <input type="radio" 
                               name="status" 
                               value="scheduled" 
                               {{ old('status') == 'scheduled' ? 'checked' : '' }}
                               id="status_scheduled"
                               class="h-4 w-4 text-indigo-600 focus:ring-indigo-500">
                        <div class="ml-3">
                            <span class="block text-sm font-medium text-gray-900">Запланировать публикацию</span>
                            <span class="block text-sm text-gray-500">Выберите дату и время публикации</span>
                        </div>
                    </label>
                </div>
                @error('status')
                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            {{-- Дата планирования (показывается только при выборе "scheduled") --}}
            <div id="scheduled_date_field" class="hidden">
                <label for="scheduled_at" class="block text-sm font-medium text-gray-700 mb-2">
                    Дата и время публикации
                </label>
                <input type="datetime-local" 
                       name="scheduled_at" 
                       id="scheduled_at"
                       value="{{ old('scheduled_at') }}"
                       min="{{ now()->format('Y-m-d\TH:i') }}"
                       class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent @error('scheduled_at') border-red-500 @enderror">
                @error('scheduled_at')
                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            {{-- Кнопки действий --}}
            <div class="flex items-center justify-between pt-6 border-t border-gray-200">
                <a href="{{ route('posts.index') }}" 
                   class="px-6 py-3 border border-gray-300 rounded-lg text-gray-700 font-medium hover:bg-gray-50">
                    Отмена
                </a>
                <button type="submit" 
                        class="px-6 py-3 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
                    Создать пост
                </button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
    // Показать/скрыть поле даты при выборе статуса "scheduled"
    document.addEventListener('DOMContentLoaded', function() {
        const statusRadios = document.querySelectorAll('input[name="status"]');
        const scheduledDateField = document.getElementById('scheduled_date_field');
        const scheduledAtInput = document.getElementById('scheduled_at');

        function toggleScheduledField() {
            const selectedStatus = document.querySelector('input[name="status"]:checked').value;
            if (selectedStatus === 'scheduled') {
                scheduledDateField.classList.remove('hidden');
                scheduledAtInput.required = true;
            } else {
                scheduledDateField.classList.add('hidden');
                scheduledAtInput.required = false;
            }
        }

        statusRadios.forEach(radio => {
            radio.addEventListener('change', toggleScheduledField);
        });

        // Инициализация при загрузке
        toggleScheduledField();
    });
</script>
@endpush
@endsection