@extends('layouts.app')

@section('title', 'Post Notice')

@section('breadcrumbs')
    <div class="breadcrumb">
        <a href="{{ route('dashboard') }}">Dashboard</a>
        <span class="separator">/</span>
        <a href="{{ route('notices.index') }}">Notices</a>
        <span class="separator">/</span>
        <span class="current">Post Notice</span>
    </div>
@endsection

@section('content')
<div class="max-w-3xl">

    <div class="mb-6">
        <h1 class="font-display text-2xl font-semibold text-gray-900">Post Notice</h1>
        <p class="text-sm text-gray-500 mt-1">Share news, updates, or announcements with your team</p>
    </div>

    <form action="{{ route('notices.store') }}" method="POST" class="card" x-data="{
        type: '{{ old('type', 'general') }}',
        hasExpiry: {{ old('expires_at') ? 'true' : 'false' }},
        publishLater: {{ old('published_at') ? 'true' : 'false' }}
    }">
        @csrf

        <div class="card-body space-y-5">

            {{-- Title --}}
            <div>
                <label for="title" class="form-label">Title <span class="text-danger-500">*</span></label>
                <input type="text" name="title" id="title" value="{{ old('title') }}"
                       class="form-input @error('title') form-input-error @enderror"
                       placeholder="Enter notice title" required>
                @error('title')
                    <p class="form-error">{{ $message }}</p>
                @enderror
            </div>

            {{-- Type --}}
            <div>
                <label class="form-label">Type <span class="text-danger-500">*</span></label>
                <div class="grid grid-cols-2 sm:grid-cols-4 gap-2.5">
                    <label class="relative flex items-center gap-2.5 p-3 border rounded-lg cursor-pointer transition-all duration-150"
                           :class="type === 'general' ? 'border-primary-600 bg-primary-50' : 'border-gray-200 bg-white hover:bg-gray-50'">
                        <input type="radio" name="type" value="general" x-model="type" class="sr-only">
                        <span class="w-8 h-8 rounded-lg flex items-center justify-center bg-primary-100 text-primary-600">
                            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 01-3.46 0"/></svg>
                        </span>
                        <span class="text-sm font-medium text-gray-700">General</span>
                    </label>

                    <label class="relative flex items-center gap-2.5 p-3 border rounded-lg cursor-pointer transition-all duration-150"
                           :class="type === 'policy' ? 'border-primary-600 bg-primary-50' : 'border-gray-200 bg-white hover:bg-gray-50'">
                        <input type="radio" name="type" value="policy" x-model="type" class="sr-only">
                        <span class="w-8 h-8 rounded-lg flex items-center justify-center bg-blue-100 text-blue-600">
                            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
                        </span>
                        <span class="text-sm font-medium text-gray-700">Policy</span>
                    </label>

                    <label class="relative flex items-center gap-2.5 p-3 border rounded-lg cursor-pointer transition-all duration-150"
                           :class="type === 'event' ? 'border-primary-600 bg-primary-50' : 'border-gray-200 bg-white hover:bg-gray-50'">
                        <input type="radio" name="type" value="event" x-model="type" class="sr-only">
                        <span class="w-8 h-8 rounded-lg flex items-center justify-center bg-success-100 text-success-600">
                            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
                        </span>
                        <span class="text-sm font-medium text-gray-700">Event</span>
                    </label>

                    <label class="relative flex items-center gap-2.5 p-3 border rounded-lg cursor-pointer transition-all duration-150"
                           :class="type === 'urgent' ? 'border-danger-500 bg-danger-50' : 'border-gray-200 bg-white hover:bg-gray-50'">
                        <input type="radio" name="type" value="urgent" x-model="type" class="sr-only">
                        <span class="w-8 h-8 rounded-lg flex items-center justify-center bg-danger-100 text-danger-500">
                            <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
                        </span>
                        <span class="text-sm font-medium text-gray-700">Urgent</span>
                    </label>
                </div>
                @error('type')
                    <p class="form-error">{{ $message }}</p>
                @enderror
            </div>

            {{-- Content --}}
            <div>
                <label for="content" class="form-label">Content <span class="text-danger-500">*</span></label>
                <textarea name="content" id="content" rows="8"
                          class="form-input @error('content') form-input-error @enderror"
                          placeholder="Write your notice content here..."
                          required>{{ old('content') }}</textarea>
                <p class="text-xxs text-gray-400 mt-1">You can use line breaks to format your content.</p>
                @error('content')
                    <p class="form-error">{{ $message }}</p>
                @enderror
            </div>

            {{-- Pin (Company Admin only) --}}
            @if(auth()->user()->role === 'company_admin')
                <div class="flex items-center gap-2.5">
                    <input type="checkbox" name="is_pinned" id="is_pinned" value="1"
                           {{ old('is_pinned') ? 'checked' : '' }}
                           class="w-4 h-4 rounded border-gray-300 text-primary-600 focus:ring-primary-600/20">
                    <label for="is_pinned" class="text-sm font-medium text-gray-700">Pin this notice</label>
                    <span class="text-xs text-gray-400">(Pinned notices always appear at the top)</span>
                </div>
            @endif

            {{-- Schedule / Expiry --}}
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                {{-- Publish Date --}}
                <div>
                    <div class="flex items-center gap-2.5 mb-2">
                        <input type="checkbox" id="publish_later" x-model="publishLater"
                               class="w-4 h-4 rounded border-gray-300 text-primary-600 focus:ring-primary-600/20">
                        <label for="publish_later" class="text-sm font-medium text-gray-700">Schedule for later</label>
                    </div>
                    <div x-show="publishLater" x-transition>
                        <input type="datetime-local" name="published_at" id="published_at"
                               value="{{ old('published_at') }}"
                               class="form-input">
                        <p class="text-xxs text-gray-400 mt-1">Leave empty to publish immediately</p>
                    </div>
                    @error('published_at')
                        <p class="form-error">{{ $message }}</p>
                    @enderror
                </div>

                {{-- Expiry Date --}}
                <div>
                    <div class="flex items-center gap-2.5 mb-2">
                        <input type="checkbox" id="has_expiry" x-model="hasExpiry"
                               class="w-4 h-4 rounded border-gray-300 text-primary-600 focus:ring-primary-600/20">
                        <label for="has_expiry" class="text-sm font-medium text-gray-700">Set expiry date</label>
                    </div>
                    <div x-show="hasExpiry" x-transition>
                        <input type="datetime-local" name="expires_at" id="expires_at"
                               value="{{ old('expires_at') }}"
                               class="form-input">
                        <p class="text-xxs text-gray-400 mt-1">Notice will be hidden after this date</p>
                    </div>
                    @error('expires_at')
                        <p class="form-error">{{ $message }}</p>
                    @enderror
                </div>
            </div>

        </div>

        {{-- Footer --}}
        <div class="px-5 py-4 border-t border-gray-100 flex items-center justify-end gap-3">
            <a href="{{ route('notices.index') }}" class="btn-secondary">Cancel</a>
            <button type="submit" class="btn-primary">
                <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 01-3.46 0"/></svg>
                Publish Notice
            </button>
        </div>
    </form>

</div>
@endsection