<?php

session_start();

require_once "../../config/koneksi.php";


// ========================================
// CEK LOGIN ADMIN
// ========================================

if (!isset($_SESSION['user_id'])) {

    header("Location: ../login.php");
    exit;
}


// ========================================
// PESAN ERROR
// ========================================

$error = "";

if (isset($_GET['error'])) {

    if ($_GET['error'] === '1') {

        $error = "Semua data berita wajib diisi.";
    } elseif ($_GET['error'] === 'foto') {

        $error = "Foto berita wajib dipilih.";
    } elseif ($_GET['error'] === 'format') {

        $error = "Format foto harus JPG, JPEG, PNG, atau WEBP.";
    } elseif ($_GET['error'] === 'ukuran') {

        $error = "Ukuran foto maksimal 2 MB.";
    } elseif ($_GET['error'] === 'upload') {

        $error = "Foto gagal diupload.";
    } elseif ($_GET['error'] === 'database') {

        $error = "Data berita gagal disimpan.";
    }
}

?>

<!DOCTYPE html>
<html lang="id">

<head>

    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0">

    <title>
        Tambah Berita - Admin DISPUSIP
    </title>


    <link
        href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
        rel="stylesheet">


    <style>
        body {
            background: #f5f7fb;
        }

        .page-container {
            max-width: 900px;
            margin: 40px auto;
        }

        .form-card {
            border: none;
            border-radius: 15px;
            overflow: hidden;
        }

        .form-header {
            background: #0d6efd;
            color: white;
            padding: 25px 30px;
        }

        .form-header h3 {
            margin: 0;
        }

        .form-body {
            background: white;
            padding: 30px;
        }

        .form-label {
            font-weight: 600;
        }

        textarea {
            min-height: 250px;
            resize: vertical;
        }

        .preview-container {
            display: none;
            margin-top: 15px;
        }

        .preview-container img {
            max-width: 300px;
            max-height: 200px;
            object-fit: cover;
            border-radius: 10px;
            border: 1px solid #ddd;
        }
    </style>

</head>


<body>


    <div class="container page-container">


        <!-- CARD -->

        <div class="card shadow-sm form-card">


            <!-- HEADER -->

            <div class="form-header">

                <h3>
                    Tambah Berita
                </h3>

                <p class="mb-0 mt-2">
                    Tambahkan berita baru untuk ditampilkan
                    pada website DISPUSIP Kabupaten Banyuwangi.
                </p>

            </div>


            <!-- BODY -->

            <div class="form-body">


                <!-- PESAN ERROR -->

                <?php if ($error !== ""): ?>

                    <div class="alert alert-danger">

                        <?= htmlspecialchars($error); ?>

                    </div>

                <?php endif; ?>


                <!-- FORM -->
                <form action="proses-tambah.php" method="POST" enctype="multipart/form-data">


                    <!-- JUDUL -->

                    <div class="mb-3">

                        <label
                            for="judul"
                            class="form-label">

                            Judul Berita

                        </label>

                        <input
                            type="text"
                            id="judul"
                            name="judul"
                            class="form-control"
                            placeholder="Masukkan judul berita"
                            required>

                    </div>


                    <!-- TANGGAL -->

                    <div class="mb-3">

                        <label
                            for="tanggal"
                            class="form-label">

                            Tanggal Berita

                        </label>

                        <input
                            type="date"
                            id="tanggal"
                            name="tanggal"
                            class="form-control"
                            value="<?= date('Y-m-d'); ?>"
                            required>

                    </div>


                    <!-- ISI BERITA -->

                    <div class="mb-3">

                        <label
                            for="isi"
                            class="form-label">

                            Isi Berita

                        </label>

                        <textarea
                            id="isi"
                            name="isi"
                            class="form-control"
                            placeholder="Tuliskan isi berita di sini..."
                            required></textarea>

                    </div>


                    <!-- FOTO -->

                    <div class="mb-3">

                        <label
                            for="gambar"
                            class="form-label">

                            Foto Berita

                        </label>

                        <input
                            type="file"
                            id="gambar"
                            name="gambar"
                            class="form-control"
                            accept=".jpg,.jpeg,.png,.webp"
                            onchange="previewFoto(event)"
                            required>

                        <small class="text-muted">

                            Format JPG, JPEG, PNG, atau WEBP.
                            Maksimal ukuran 2 MB.

                        </small>

                        <!-- LINK INSTAGRAM -->

                        <div class="mb-3">

                            <label
                                for="link_instagram"
                                class="form-label">

                                Link Instagram

                            </label>

                            <input
                                type="url"
                                id="link_instagram"
                                name="link_instagram"
                                class="form-control"
                                placeholder="https://www.instagram.com/...">

                            <small class="text-muted">
                                Masukkan link postingan Instagram jika berita memiliki postingan Instagram.
                            </small>

                        </div>
                        <!-- PREVIEW FOTO -->

                        <div
                            id="previewContainer"
                            class="preview-container">

                            <p class="mt-3 mb-2 fw-semibold">
                                Preview Foto:
                            </p>

                            <img
                                id="previewImage"
                                src=""
                                alt="Preview Foto Berita">

                        </div>

                    </div>


                    <!-- TOMBOL -->

                    <div
                        class="d-flex
                    justify-content-between
                    mt-4">


                        <a
                            href="index.php"
                            class="btn btn-secondary">

                            ← Kembali

                        </a>


                        <button
                            type="submit"
                            class="btn btn-primary">

                            Simpan Berita

                        </button>


                    </div>


                </form>


            </div>


        </div>


    </div>


    <script>
        function previewFoto(event) {

            const input =
                event.target;

            const previewContainer =
                document.getElementById(
                    'previewContainer'
                );

            const previewImage =
                document.getElementById(
                    'previewImage'
                );


            if (
                input.files &&
                input.files[0]
            ) {

                const reader =
                    new FileReader();


                reader.onload =
                    function(e) {

                        previewImage.src =
                            e.target.result;

                        previewContainer.style.display =
                            'block';

                    };


                reader.readAsDataURL(
                    input.files[0]
                );

            }

        }
    </script>


</body>

</html>