@extends('app-new')

@section('content')
    <div class="container mt-4">
        <div class="card shadow-lg p-4 rounded-3">
            <h3 class="mb-3">Edit Announcement</h3>

            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul class="mb-0">
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form action="{{ route('announcements.update', $announcement->id) }}" method="POST" enctype="multipart/form-data">
                @csrf
                {{-- Description --}}
                <div class="mb-3">
                    <label for="description" class="form-label">Description</label>
                    <textarea name="description" id="description" rows="4"
                        class="form-control @error('description') is-invalid @enderror">{{ old('description', $announcement->description) }}</textarea>
                    @error('description')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                {{-- Attachment --}}
                <div class="mb-3">
                    <label for="attachment" class="form-label">Attachment (optional)</label>

                    @if ($announcement->attachment)
                        <p id="current-image-wrapper">Current:</p>
                        <a href="{{ asset('storage/' . $announcement->attachment) }}" target="_blank"
                            id="current-image-link">
                            <img src="{{ asset('storage/' . $announcement->attachment) }}" alt="Current Attachment"
                                style="width:120px; height:auto; border:1px solid #ccc; border-radius:5px; margin-bottom:10px; cursor:pointer;">
                        </a>
                    @endif

                    {{-- File Input --}}
                    <input type="file" name="attachment" id="attachment" class="form-control" accept="image/*">

                    {{-- New Image Preview --}}
                    <div class="mt-2">
                        <img id="attachment-preview" src="#" alt="Selected Image Preview"
                            style="display:none; width:120px; height:auto; border:1px solid #ccc; border-radius:5px; margin-top:10px;">
                    </div>
                </div>

                {{-- Status --}}
                <div class="mb-3">
                    <label class="form-label">Status</label>
                    <select name="status" class="form-select @error('status') is-invalid @enderror">
                        <option value="active" {{ $announcement->status == 'active' ? 'selected' : '' }}>Active</option>
                        <option value="inactive" {{ $announcement->status == 'inactive' ? 'selected' : '' }}>Inactive
                        </option>
                    </select>
                    @error('status')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                {{-- Submit --}}
                <div class="col-md-12">
                    <div class="d-flex justify-content-between content-footer">
                        <button type="submit" class="btn btn-primary">Update</button>
                        <a href="/announcements" class="btn btn-secondary">Cancel</a>
                    </div>
                </div>
            </form>
        </div>
    </div>

@endsection

@push('footer-script')
    <script>
        document.getElementById('attachment').addEventListener('change', function(event) {
            const file = event.target.files[0];
            const preview = document.getElementById('attachment-preview');
            const currentImageWrapper = document.getElementById('current-image-wrapper');
            const currentImageLink = document.getElementById('current-image-link');

            if (file) {
                // Hide old image
                if (currentImageWrapper) currentImageWrapper.style.display = 'none';
                if (currentImageLink) currentImageLink.style.display = 'none';

                // Show new image preview
                const reader = new FileReader();
                reader.onload = function(e) {
                    preview.style.display = 'block';
                    preview.src = e.target.result;
                }
                reader.readAsDataURL(file);
            } else {
                preview.style.display = 'none';
            }
        });
    </script>
@endpush