@extends('layouts.master')
@section('title', 'Announcement Edit')
<link rel="icon" href="{{ asset('/logo/siitlogo.png') }}" type="image/icon type">
@section('style')
    <style>
    </style>
@endsection

@section('script')
    <script>
        document.getElementById('announcement_pdf').addEventListener('change', function(event) {
            const file = event.target.files[0];

            if (file) {
                if (file.type !== 'application/pdf') {
                    alert('❌ Only PDF files are allowed!'); // Popup แจ้งเตือน
                    event.target.value = ''; // รีเซ็ตค่า input file
                } else if (file.size > 4 * 1024 * 1024) { // ตรวจสอบขนาด (4MB)
                    alert('❌ File size must not exceed 4MB!');
                    event.target.value = '';
                }
            }
        });
    </script>
@endsection

@section('content')
    @include('layouts.header')
    <section class="wrapper image-wrapper bg-image bg-overlay text-white" data-image-src="{{ asset('/bg/bgg02.png') }}"
        style="background-image: url('{{ asset('/bg/bgg02.png') }}');">
        <div class="container pt-14 pt-md-16 pb-23 pb-md-15 text-center">
            <div class="row">
                <div class="row">
                    <div class="col-lg-8 col-xxl-7 mx-auto text-center" data-cues="slideInDown" data-group="page-title"
                        data-delay="600">
                        <h1 class="fs-58 mb-2 text-light">Announcement Add/Edit</h1>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <div class="container py-10">
        <div class="d-flex justify-content-between align-items-center">
            <div>
                <span class="text-dark fs-30">{{ $announcement ? 'Edit Announcement' : 'Add New Announcement' }}</span>
            </div>
        </div>

        <section class="wrapper bg-light py-10 py-md-4">
            <div class="container">
                <div class="card shadow-sm border-light rounded-lg p-5">
                    <!-- ฟอร์ม -->
                    <form action="{{ url('/announcementedit') }}" method="POST" enctype="multipart/form-data">
                        @csrf

                        <!-- Hidden input for announcement_id -->
                        <input type="hidden" name="announcement_id" value="{{ $announcement->announcement_id ?? 0 }}">

                        <!-- ชื่อประกาศ -->
                        <div class="mb-2">
                            <label for="announcement_name" class="form-label fs-20 fw-semibold text-dark">Announcement
                                Title</label>
                            <input type="text" class="form-control form-control-lg border-2 shadow-sm rounded-pill"
                                id="announcement_name" name="announcement_name"
                                value="{{ $announcement->announcement_name ?? old('announcement_name') }}" required>
                        </div>

                        <!-- อัปโหลดไฟล์ PDF -->
                        <div class="mb-4">
                            <label for="announcement_pdf" class="form-label fs-20 fw-semibold text-dark">Upload PDF</label>
                            <input type="file" class="form-control form-control-lg border-2 shadow-sm rounded-pill"
                                id="announcement_pdf" name="announcement_pdf" accept="application/pdf">
                        </div>

                        <!-- ปุ่ม Submit -->
                        <div class="text-center">
                            <button type="submit" class="btn btn-primary btn-lg px-5 py-3 rounded-pill">
                                {{ $announcement ? 'Update Announcement' : 'Add Announcement' }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </section>
    </div>

    @include('layouts.footer')
@endsection