@extends('layouts.admin')

@section('title', 'Create Announcement')

@section('content')
<x-admin.form-page
    title="Create Announcement"
    :crumbs="[['label' => 'Announcements', 'url' => route('admin.announcements.index')], 'Create']"
    :back-url="route('admin.announcements.index')"
    :action="route('admin.announcements.store')"
    form-id="announcementForm"
    submit-label="Create Announcement"
>
    <section class="pp-card">
        <div class="pp-card__head">
            <span class="pp-card__icon"><i class="bi bi-megaphone"></i></span>
            <div>
                <h2 class="pp-card__title">Announcement Details</h2>
                <p class="pp-card__sub">Marquee text and display order</p>
            </div>
        </div>
        <div class="pp-card__body">
            <div class="pp-field">
                <label for="text">Announcement Text <span class="pp-req">*</span></label>
                <textarea name="text" id="text" class="form-control @error('text') is-invalid @enderror" rows="3" maxlength="500" required placeholder="Enter announcement text (max 500 characters)">{{ old('text') }}</textarea>
                <span class="pp-hint"><span id="charCount">0</span>/500 characters</span>
                @error('text')<div class="invalid-feedback d-block">{{ $message }}</div>@enderror
            </div>

            <div class="pp-field mt-3">
                <label for="sort_order">Sort Order</label>
                <input type="number" name="sort_order" id="sort_order" class="form-control" value="{{ old('sort_order') }}" min="0">
                <span class="pp-hint">Lower numbers appear first in the marquee. Leave empty to add at the end.</span>
            </div>

            <div class="pp-toggles mt-3">
                <label class="pp-toggle" for="isActive">
                    <input type="hidden" name="is_active" value="0">
                    <input type="checkbox" name="is_active" class="form-check-input" role="switch" id="isActive" value="1" {{ old('is_active', true) ? 'checked' : '' }}>
                    Active (will appear in marquee)
                </label>
            </div>
        </div>
    </section>
</x-admin.form-page>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const textarea = document.querySelector('textarea[name="text"]');
    const charCount = document.getElementById('charCount');

    if (textarea && charCount) {
        function updateCharCount() {
            const length = textarea.value.length;
            charCount.textContent = length;
            if (length > 450) {
                charCount.style.color = '#dc3545';
            } else {
                charCount.style.color = '';
            }
        }

        textarea.addEventListener('input', updateCharCount);
        updateCharCount();
    }
});
</script>
@endpush
@endsection