@extends('layouts.app')
@section('title','Create Announcement - Admin Panel')
@section('content')
<div class="max-w-2xl mx-auto">
  <!-- Header Section -->
  <div class="mb-8">
    <div class="flex items-center gap-2 text-gray-600 text-sm mb-4">
      <a href="{{ route('admin.dashboard') }}" class="hover:text-red-600 transition-colors">Dashboard</a>
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
      </svg>
      <a href="{{ route('admin.announcements.index') }}" class="hover:text-red-600 transition-colors">Announcements</a>
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
      </svg>
      <span class="text-gray-900 font-semibold">Create</span>
    </div>
    <h1 class="text-4xl font-bold text-gray-900 mb-2">Create Announcement</h1>
    <p class="text-gray-600">Create a new announcement to display on the landing page</p>
  </div>

  <!-- Form Card -->
  <div class="bg-white rounded-2xl shadow-xl p-8">
    <form method="POST" action="{{ route('admin.announcements.store') }}" class="space-y-6">
      @csrf

      <div>
        <label class="block text-sm font-semibold text-gray-700 mb-2">Announcement Title</label>
        <input 
          type="text"
          name="title" 
          value="{{ old('title') }}" 
          class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-200 focus:border-green-500 transition-all" 
          placeholder="e.g., Blood Donation Camp on December 5th"
          required 
        />
        @error('title')
          <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
        @enderror
      </div>

      <div>
        <label class="block text-sm font-semibold text-gray-700 mb-2">Content</label>
        <textarea 
          name="content" 
          rows="6"
          class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-200 focus:border-green-500 transition-all" 
          placeholder="Enter the full announcement message..."
          required
        >{{ old('content') }}</textarea>
        @error('content')
          <p class="text-red-600 text-sm mt-1">{{ $message }}</p>
        @enderror
      </div>

      <div class="flex items-center">
        <input 
          type="checkbox" 
          name="is_active" 
          id="is_active"
          value="1"
          {{ old('is_active', true) ? 'checked' : '' }}
          class="w-5 h-5 text-green-600 border-gray-300 rounded focus:ring-2 focus:ring-green-200"
        />
        <label for="is_active" class="ml-3 text-sm font-semibold text-gray-700">
          Make this announcement active (visible on landing page)
        </label>
      </div>

      <div class="flex gap-4 pt-4">
        <button 
          type="submit" 
          class="flex-1 bg-gradient-to-r from-green-600 to-green-700 text-white px-6 py-3 rounded-lg font-semibold hover:scale-[1.02] hover:shadow-lg transition-all"
        >
          <svg class="w-5 h-5 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
          </svg>
          Create Announcement
        </button>
        <a 
          href="{{ route('admin.announcements.index') }}" 
          class="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg font-semibold hover:bg-gray-50 transition-all"
        >
          Cancel
        </a>
      </div>
    </form>
  </div>
</div>
@endsection