@extends('layouts.admin')

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

@section('content')
<div class="admin-page-header">
    <h1>Edit Announcement</h1>
    <div>
        <a href="{{ route('admin.announcements.index') }}" class="admin-btn-secondary">
            <i class="bi bi-arrow-left"></i> Back to List
        </a>
    </div>
</div>

<div class="admin-card">
    <div class="card-body">
        <form action="{{ route('admin.announcements.update', $announcement->id) }}" method="POST">
            @csrf
            @method('PUT')

            <div class="mb-3">
                <label class="form-label">Announcement Text <span class="text-danger">*</span></label>
                <textarea name="text" class="form-control @error('text') is-invalid @enderror" rows="3" maxlength="500" required placeholder="Enter announcement text (max 500 characters)">{{ old('text', $announcement->text) }}</textarea>
                <small class="form-text text-muted">
                    <span id="charCount">{{ strlen(old('text', $announcement->text)) }}</span>/500 characters
                </small>
                @error('text')
                    <div class="invalid-feedback d-block">{{ $message }}</div>
                @enderror
            </div>

            <div class="mb-3">
                <label class="form-label">Sort Order</label>
                <input type="number" name="sort_order" class="form-control" value="{{ old('sort_order', $announcement->sort_order) }}" min="0">
                <small class="form-text text-muted">Lower numbers appear first in the marquee.</small>
            </div>

            <div class="mb-3">
                <div class="form-check">
                    <input type="hidden" name="is_active" value="0">
                    <input type="checkbox" name="is_active" class="form-check-input" id="isActive" value="1" {{ old('is_active', $announcement->is_active) ? 'checked' : '' }}>
                    <label class="form-check-label" for="isActive">Active (will appear in marquee)</label>
                </div>
            </div>

            <div class="d-flex gap-2">
                <button type="submit" class="admin-btn-primary">
                    <i class="bi bi-check-circle"></i> Update Announcement
                </button>
                <a href="{{ route('admin.announcements.index') }}" class="admin-btn-secondary">
                    Cancel
                </a>
            </div>
        </form>
    </div>
</div>

<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(); // Initial count
    }
});
</script>
@endsection