@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.show', $post) }}" 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.update', $post) }}" method="POST" class="space-y-6">
            @csrf
            @method('PUT')

            {{-- Заголовок --}}
            <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', $post->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>

            {{-- Slug (только для информации) --}}
            <div class="bg-gray-50 p-4 rounded-lg">
                <p class="text-sm text-gray-600">
                    <span class="font-medium">URL:</span> 
                    <span class="text-indigo-600">/posts/{{ $post->slug }}</span>
                </p>
            </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', $post->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 {{ old('status', $post->status) == 'draft' ? 'bg-indigo-50 border-indigo-500' : '' }}">
                        <input type="radio" 
                               name="status" 
                               value="draft" 
                               {{ old('status', $post->status) == '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 {{ old('status', $post->status) == 'published' ? 'bg-indigo-50 border-indigo-500' : '' }}">
                        <input type="radio" 
                               name="status" 
                               value="published" 
                               {{ old('status', $post->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">
                                @if($post->status == 'published' && $post->published_at)
                                    Опубликовано: {{ $post->published_at->format('d.m.Y H:i') }}
                                @else
                                    Пост будет опубликован немедленно
                                @endif
                            </span>
                        </div>
                    </label>

                    <label class="flex items-center p-4 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50 transition {{ old('status', $post->status) == 'scheduled' ? 'bg-indigo-50 border-indigo-500' : '' }}">
                        <input type="radio" 
                               name="status" 
                               value="scheduled" 
                               {{ old('status', $post->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">
                                @if($post->status == 'scheduled' && $post->scheduled_at)
                                    Запланировано на: {{ $post->scheduled_at->format('d.m.Y H:i') }}
                                @else
                                    Выберите дату и время публикации
                                @endif
                            </span>
                        </div>
                    </label>
                </div>
                @error('status')
                    <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            {{-- Дата планирования --}}
            <div id="scheduled_date_field" class="{{ old('status', $post->status) == 'scheduled' ? '' : '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', $post->scheduled_at ? $post->scheduled_at->format('Y-m-d\TH:i') : '') }}"
                       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>

            {{-- Информация о комментариях --}}
            @if($post->comments()->count() > 0)
                <div class="bg-blue-50 border-l-4 border-blue-400 p-4 rounded">
                    <div class="flex">
                        <svg class="h-5 w-5 text-blue-400" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"/>
                        </svg>
                        <div class="ml-3">
                            <p class="text-sm text-blue-700">
                                У этого поста {{ $post->comments()->count() }} {{ Str::plural('комментарий', $post->comments()->count()) }}
                                ({{ $post->comments()->approved()->count() }} одобрено,
                                {{ $post->comments()->pending()->count() }} ожидает модерации)
                            </p>
                        </div>
                    </div>
                </div>
            @endif

            {{-- Кнопки действий --}}
            <div class="flex items-center justify-between pt-6 border-t border-gray-200">
                <a href="{{ route('posts.show', $post) }}" 
                   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>
    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