create.blade.php 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. @extends('layouts.app')
  2. @section('title', 'Создать пост')
  3. @section('content')
  4. <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
  5. <div class="mb-6">
  6. <a href="{{ route('posts.index') }}" class="inline-flex items-center text-indigo-600 hover:text-indigo-800">
  7. <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
  8. <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
  9. </svg>
  10. Назад
  11. </a>
  12. </div>
  13. <div class="bg-white rounded-lg shadow-lg p-8">
  14. <h1 class="text-3xl font-bold text-gray-900 mb-6">Создать новый пост</h1>
  15. <form action="{{ route('posts.store') }}" method="POST" class="space-y-6">
  16. @csrf
  17. {{-- Заголовок --}}
  18. <div>
  19. <label for="title" class="block text-sm font-medium text-gray-700 mb-2">
  20. Заголовок *
  21. </label>
  22. <input type="text"
  23. name="title"
  24. id="title"
  25. required
  26. value="{{ old('title') }}"
  27. placeholder="Введите заголовок поста"
  28. 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">
  29. @error('title')
  30. <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
  31. @enderror
  32. </div>
  33. {{-- Контент --}}
  34. <div>
  35. <label for="content" class="block text-sm font-medium text-gray-700 mb-2">
  36. Содержание *
  37. </label>
  38. <textarea name="content"
  39. id="content"
  40. rows="15"
  41. required
  42. placeholder="Напишите содержание поста..."
  43. 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>
  44. @error('content')
  45. <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
  46. @enderror
  47. </div>
  48. {{-- Статус публикации --}}
  49. <div>
  50. <label class="block text-sm font-medium text-gray-700 mb-2">
  51. Статус публикации *
  52. </label>
  53. <div class="space-y-3">
  54. <label class="flex items-center p-4 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50 transition">
  55. <input type="radio"
  56. name="status"
  57. value="draft"
  58. {{ old('status', 'draft') == 'draft' ? 'checked' : '' }}
  59. class="h-4 w-4 text-indigo-600 focus:ring-indigo-500">
  60. <div class="ml-3">
  61. <span class="block text-sm font-medium text-gray-900">Черновик</span>
  62. <span class="block text-sm text-gray-500">Сохранить пост без публикации</span>
  63. </div>
  64. </label>
  65. <label class="flex items-center p-4 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50 transition">
  66. <input type="radio"
  67. name="status"
  68. value="published"
  69. {{ old('status') == 'published' ? 'checked' : '' }}
  70. class="h-4 w-4 text-indigo-600 focus:ring-indigo-500">
  71. <div class="ml-3">
  72. <span class="block text-sm font-medium text-gray-900">Опубликовать сейчас</span>
  73. <span class="block text-sm text-gray-500">Пост будет опубликован немедленно</span>
  74. </div>
  75. </label>
  76. <label class="flex items-center p-4 border border-gray-300 rounded-lg cursor-pointer hover:bg-gray-50 transition">
  77. <input type="radio"
  78. name="status"
  79. value="scheduled"
  80. {{ old('status') == 'scheduled' ? 'checked' : '' }}
  81. id="status_scheduled"
  82. class="h-4 w-4 text-indigo-600 focus:ring-indigo-500">
  83. <div class="ml-3">
  84. <span class="block text-sm font-medium text-gray-900">Запланировать публикацию</span>
  85. <span class="block text-sm text-gray-500">Выберите дату и время публикации</span>
  86. </div>
  87. </label>
  88. </div>
  89. @error('status')
  90. <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
  91. @enderror
  92. </div>
  93. {{-- Дата планирования (показывается только при выборе "scheduled") --}}
  94. <div id="scheduled_date_field" class="hidden">
  95. <label for="scheduled_at" class="block text-sm font-medium text-gray-700 mb-2">
  96. Дата и время публикации
  97. </label>
  98. <input type="datetime-local"
  99. name="scheduled_at"
  100. id="scheduled_at"
  101. value="{{ old('scheduled_at') }}"
  102. min="{{ now()->format('Y-m-d\TH:i') }}"
  103. 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">
  104. @error('scheduled_at')
  105. <p class="mt-2 text-sm text-red-600">{{ $message }}</p>
  106. @enderror
  107. </div>
  108. {{-- Кнопки действий --}}
  109. <div class="flex items-center justify-between pt-6 border-t border-gray-200">
  110. <a href="{{ route('posts.index') }}"
  111. class="px-6 py-3 border border-gray-300 rounded-lg text-gray-700 font-medium hover:bg-gray-50">
  112. Отмена
  113. </a>
  114. <button type="submit"
  115. 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">
  116. Создать пост
  117. </button>
  118. </div>
  119. </form>
  120. </div>
  121. </div>
  122. @push('scripts')
  123. <script>
  124. // Показать/скрыть поле даты при выборе статуса "scheduled"
  125. document.addEventListener('DOMContentLoaded', function() {
  126. const statusRadios = document.querySelectorAll('input[name="status"]');
  127. const scheduledDateField = document.getElementById('scheduled_date_field');
  128. const scheduledAtInput = document.getElementById('scheduled_at');
  129. function toggleScheduledField() {
  130. const selectedStatus = document.querySelector('input[name="status"]:checked').value;
  131. if (selectedStatus === 'scheduled') {
  132. scheduledDateField.classList.remove('hidden');
  133. scheduledAtInput.required = true;
  134. } else {
  135. scheduledDateField.classList.add('hidden');
  136. scheduledAtInput.required = false;
  137. }
  138. }
  139. statusRadios.forEach(radio => {
  140. radio.addEventListener('change', toggleScheduledField);
  141. });
  142. // Инициализация при загрузке
  143. toggleScheduledField();
  144. });
  145. </script>
  146. @endpush
  147. @endsection