| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162 |
- @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
|