@extends('layouts.app-admin')

@section('content')
    <div class="page-header d-print-none">
        <div class="container-xl">
            <div class="row g-2 align-items-center">
                <div class="col">
                    <h2 class="page-title">
                        Edit Announcement 📝
                    </h2>
                    <div class="text-muted mt-1">Edit an existing announcement.</div>
                </div>
            </div>
        </div>
    </div>

    <div class="page-body">
        <div class="container-xl">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Announcement Details</h3>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.announcements.update', $announcement->id) }}" method="POST"
                        enctype="multipart/form-data">
                        @csrf
                        @method('PUT')


                        <div class="mb-3">
                            <label class="form-label">Title <span class="text-danger">*</span></label>
                            <input type="text" name="title" class="form-control @error('title') is-invalid @enderror"
                                placeholder="Enter announcement title" value="{{ old('title', $announcement->title) }}"
                                required>
                            @error('title')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>


                        <div class="mb-3">
                            <label class="form-label">Content <span class="text-danger">*</span></label>
                            <textarea name="content" class="form-control @error('content') is-invalid @enderror" rows="6"
                                placeholder="Write announcement content" required>{{ old('content', $announcement->content) }}</textarea>
                            @error('content')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>


                        <div class="mb-3">
                            <label class="form-label">Status <span class="text-danger">*</span></label>
                            <select name="status" class="form-select @error('status') is-invalid @enderror" required>
                                <option value="draft"
                                    {{ old('status', $announcement->status) == 'draft' ? 'selected' : '' }}>Draft</option>
                                <option value="published"
                                    {{ old('status', $announcement->status) == 'published' ? 'selected' : '' }}>Published
                                </option>
                            </select>
                            @error('status')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>


                        <div class="mb-3">
                            <label class="form-label">Picture</label>
                            <input type="file" name="picture" class="form-control @error('picture') is-invalid @enderror"
                                accept="image/*">
                            @error('picture')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="form-hint">Optional: Upload a new image to replace the current one.</small>


                            @if ($announcement->picture)
                                <div class="mt-2">
                                    <label class="form-label">Current Picture:</label><br>

                                    <img src="{{ asset('storage/' . $announcement->picture) }}"
                                        alt="Current Announcement Picture" class="img-thumbnail" style="max-width: 200px;">
                                </div>
                            @endif
                        </div>


                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Published At</label>
                                <input type="date" name="published_at"
                                    class="form-control @error('published_at') is-invalid @enderror"
                                    value="{{ old('published_at', optional($announcement->published_at)->format('Y-m-d')) }}">
                                @error('published_at')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-hint">Optional: Set the publication date.</small>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Expired At</label>
                                <input type="date" name="expired_at"
                                    class="form-control @error('expired_at') is-invalid @enderror"
                                    value="{{ old('expired_at', optional($announcement->expired_at)->format('Y-m-d')) }}">
                                @error('expired_at')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                                <small class="form-hint">Optional: Set the expiration date.</small>
                            </div>
                        </div>

                        <div class="card-footer text-end">
                            <a href="{{ route('admin.announcements.index') }}" class="btn btn-secondary">Cancel</a>
                            <button type="submit" class="btn btn-primary">Update Announcement</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection