@extends('dashboard.base')

@section('content')
    <style>
        .notice-form-shell {
            max-width: 1120px;
            margin: 0 auto;
        }

        .notice-form-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: 1.25rem;
        }

        .notice-form-title {
            margin: 0;
            font-weight: 700;
            color: #1f2933;
        }

        .notice-form-subtitle {
            margin: .25rem 0 0;
            color: #6b7280;
        }

        .notice-form-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
            gap: 1rem;
        }

        .notice-card {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            box-shadow: 0 10px 30px rgba(15, 23, 42, .06);
            padding: 1.25rem;
        }

        .notice-card-title {
            margin: 0 0 1rem;
            color: #374151;
            font-size: .84rem;
            font-weight: 700;
            letter-spacing: .04em;
            text-transform: uppercase;
        }

        .notice-card label {
            color: #374151;
            font-weight: 600;
        }

        .notice-image-preview {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            min-height: 180px;
            border: 1px dashed #cbd5e1;
            border-radius: 8px;
            background: #f8fafc;
            overflow: hidden;
        }

        .notice-image-preview img {
            width: 100%;
            height: 220px;
            object-fit: cover;
        }

        .notice-image-empty {
            color: #64748b;
            font-weight: 600;
        }

        .notice-actions-row {
            display: flex;
            gap: .5rem;
            justify-content: flex-end;
            margin-top: 1rem;
        }

        @media (max-width: 991.98px) {
            .notice-form-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 575.98px) {
            .notice-form-header,
            .notice-actions-row {
                align-items: stretch;
                flex-direction: column;
            }
        }
    </style>

    <div class="container-fluid">
        <div class="notice-form-shell">
            <div class="notice-form-header">
                <div>
                    <h3 class="notice-form-title">{{ isset($notice) ? 'Edit Public Notice' : 'Create Public Notice' }}</h3>
                    <p class="notice-form-subtitle">Prepare concise notices for the public website.</p>
                </div>
                <a href="{{ url('/public_notices') }}" class="btn btn-outline-secondary">Back to Notices</a>
            </div>

            @if($errors->any())
                <div class="alert alert-danger">
                    <strong>Please fix the highlighted fields.</strong>
                    <ul class="mb-0 mt-2">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            {{-- 1. Dynamic Route Switching --}}
            <form method="POST" 
                  action="{{ isset($notice) ? route('public_notices.manual_update', $notice->id) : route('public_notices.manual_store') }}" 
                  enctype="multipart/form-data">
                @csrf
                
                {{-- 2. PUT method spoofing for Edit --}}
                @if(isset($notice))
                    @method('PUT')
                @endif

                <div class="notice-form-grid">
                    <div class="notice-card">
                        <h5 class="notice-card-title">Notice Details</h5>

                        <div class="form-group">
                            <label for="title">Title</label>
                            <input id="title" type="text" name="title" class="form-control"
                                value="{{ old('title', $notice->title ?? '') }}" maxlength="191" required>
                        </div>

                        <div class="form-group">
                            <label for="content">Content</label>
                            <textarea id="content" name="content" class="form-control" rows="9"
                                required>{{ old('content', $notice->content ?? '') }}</textarea>
                        </div>
                    </div>

                    <div class="notice-card">
                        <h5 class="notice-card-title">Publishing</h5>

                        <div class="form-group">
                            <label for="image">Notice Image</label>
                            <div class="notice-image-preview mb-3" id="noticeImagePreview">
                                @if(isset($notice) && $notice->image_url)
                                    <img src="{{ $notice->image_url }}" alt="{{ $notice->title }}">
                                @else
                                    <span class="notice-image-empty" id="noticeImageEmpty">No image uploaded</span>
                                @endif
                            </div>
                            <input id="image" type="file" name="image" class="form-control-file" accept="image/jpeg,image/png,image/webp">
                            <small class="form-text text-muted">JPG, PNG, or WebP. Maximum size: 10MB.</small>
                        </div>

                        <div class="form-group">
                            <label for="notice_type">Type</label>
                            <input id="notice_type" type="text" name="notice_type" class="form-control"
                                value="{{ old('notice_type', $notice->notice_type ?? '') }}" maxlength="191">
                        </div>

                        <div class="form-group">
                            <label for="status">Status</label>
                            <select id="status" name="status" class="form-control" required>
                                @foreach(['draft' => 'Draft', 'published' => 'Published', 'archived' => 'Archived'] as $value => $label)
                                    <option value="{{ $value }}" {{ old('status', $notice->status ?? 'draft') === $value ? 'selected' : '' }}>
                                        {{ $label }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="published_date">Published Date</label>
                                <input id="published_date" type="date" name="published_date" class="form-control"
                                    value="{{ old('published_date', (isset($notice->published_date) && $notice->published_date) ? $notice->published_date->format('Y-m-d') : '') }}">
                            </div>
                            <div class="form-group col-md-6">
                                <label for="expiry_date">Expiry Date</label>
                                <input id="expiry_date" type="date" name="expiry_date" class="form-control"
                                    value="{{ old('expiry_date', (isset($notice->expiry_date) && $notice->expiry_date) ? $notice->expiry_date->format('Y-m-d') : '') }}">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="notice-actions-row">
                    <a href="{{ url('/public_notices') }}" class="btn btn-light">Cancel</a>
                    {{-- 3. Explicit Type Submit --}}
                    <button type="submit" class="btn btn-primary">
                        {{ isset($notice) ? 'Update Notice' : 'Create Notice' }}
                    </button>
                </div>
            </form>
        </div>
    </div>

    {{-- 4. Completed JavaScript --}}
    <script>
        (function () {
            var input = document.getElementById('image');
            var preview = document.getElementById('noticeImagePreview');

            if (!input || !preview) return;

            input.addEventListener('change', function () {
                if (this.files && this.files[0]) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        preview.innerHTML = '<img src="' + e.target.result + '" style="width:100%; height:220px; object-fit:cover;">';
                    };
                    reader.readAsDataURL(this.files[0]);
                }
            });
        })();
    </script>
@endsection