<?php include 'header.php'; ?>

<div class="dashboard-main-body">

    <!-- Header -->
    <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-24">
        <h6 class="fw-semibold mb-0">Add Notice</h6>
    </div>

    <!-- Back Button -->
    <div class="d-flex flex-wrap align-items-center justify-content-end gap-3 mb-3">
        <a type="button" href="notices.php"
            class="tooltip-button btn bg-primary-600 text-white border border-primary-600 radius-8 px-12 py-11 d-flex align-items-center"
            data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-custom-class="tooltip-primary"
            title="Listing">

            <iconify-icon icon="ic:baseline-arrow-back" class="icon text-xl line-height-1">
            </iconify-icon>
        </a>
    </div>

    <!-- Form Card -->
    <div class="row gy-4">
        <div class="col-md-12">

            <div class="card">
                <div class="card-body">

                    <h6 class="mb-4 text-xl">Add Notice</h6>

                    <form id="noticeForm" action="" method="post" enctype="multipart/form-data" autocomplete="off">

                        <div class="row gy-3">

                            <!-- Notice Title -->
                            <div class="col-sm-6">
                                <label class="form-label">
                                    Notice Title
                                    <span class="text-danger">*</span>
                                </label>

                                <input type="text" name="notice_title" class="form-control"
                                    placeholder="Enter Notice Title">
                            </div>

                            <!-- Publish Date -->
                            <div class="col-sm-6">
                                <label class="form-label">
                                    Publish Date
                                    <span class="text-danger">*</span>
                                </label>

                                <input type="text" id="publishDate" name="publish_date" class="form-control"
                                    placeholder="DD-MM-YYYY" readonly>
                            </div>

                            <!-- Expiry Date -->
                            <div class="col-sm-6">
                                <label class="form-label">
                                    Expiry Date
                                    <span class="text-danger">*</span>
                                </label>

                                <input type="text" id="expiryDate" name="expiry_date" class="form-control"
                                    placeholder="DD-MM-YYYY" readonly>
                            </div>


                            <!-- Notice Attachment -->
                            <div class="col-sm-6">
                                <label class="form-label">
                                    Notice Attachment
                                    <span class="text-danger">*</span>
                                </label>

                                <input type="file" name="notice_attachment" id="noticeAttachment" class="form-control"
                                    accept="image/*,.pdf">

                                <!-- Preview -->
                                <div id="attachmentPreview"
                                    class="mt-3 d-none border rounded-3 p-2 bg-white text-center">

                                    <!-- Image Preview -->
                                    <img id="previewImage" src="" alt="Preview" class="img-fluid rounded d-none"
                                        style="width: 100%; max-height: 220px; object-fit: contain;">

                                    <!-- PDF Preview -->
                                    <div id="pdfPreview" class="d-none align-items-center gap-2">

                                        <i class="bi bi-file-earmark-pdf text-danger fs-2"></i>

                                        <div>
                                            <p class="mb-0 fw-semibold" id="pdfName"></p>
                                            <small class="text-muted">PDF Selected</small>
                                        </div>
                                    </div>

                                </div>
                            </div>

                            <!-- Description -->
                            <div class="col-sm-12">
                                <label class="form-label">
                                    Description
                                    <span class="text-danger">*</span>
                                </label>

                                <textarea name="description" rows="4" class="form-control"
                                    placeholder="Enter Description"></textarea>
                            </div>

                        </div>

                        <!-- Save Button -->
                        <div class="form-group text-end mt-4">
                            <button type="submit" class="btn btn-primary-600">
                                <i class="bi bi-floppy"></i>
                            </button>
                        </div>

                    </form>

                </div>
            </div>

        </div>
    </div>
</div>

<!-- Litepicker -->
<script src="https://cdn.jsdelivr.net/npm/litepicker/dist/bundle.js"></script>

<script>
    // Publish Date
    new Litepicker({
        element: document.getElementById('publishDate'),
        singleMode: true,
        format: 'DD-MM-YYYY',
        dropdowns: {
            months: true,
            years: true
        }
    });

    // Expiry Date
    new Litepicker({
        element: document.getElementById('expiryDate'),
        singleMode: true,
        format: 'DD-MM-YYYY',
        dropdowns: {
            months: true,
            years: true
        }
    });
</script>

<!-- Validation -->
<script>
    document.addEventListener('DOMContentLoaded', function () {

        const form = document.getElementById('noticeForm');

        function showError(input, message) {

            removeError(input);

            const error = document.createElement('div');

            error.className = 'text-danger small mt-1';

            error.innerText = message;

            input.parentNode.appendChild(error);
        }

        function removeError(input) {

            const existing = input.parentNode.querySelector('.text-danger.small');

            if (existing) {
                existing.remove();
            }
        }

        function validateInput(input, message) {

            if (!input.value.trim()) {
                showError(input, message);
                return false;
            }

            removeError(input);
            return true;
        }

        form.addEventListener('submit', function (e) {

            e.preventDefault();

            const title = document.querySelector('[name="notice_title"]');
            const publishDate = document.querySelector('[name="publish_date"]');
            const expiryDate = document.querySelector('[name="expiry_date"]');
            const attachment = document.querySelector('[name="notice_attachment"]');
            const description = document.querySelector('[name="description"]');

            let isValid = true;

            if (!validateInput(title, 'Notice title is required')) {
                isValid = false;
            }

            if (!validateInput(publishDate, 'Publish date is required')) {
                isValid = false;
            }

            if (!validateInput(expiryDate, 'Expiry date is required')) {
                isValid = false;
            }

            if (!attachment.value) {
                showError(attachment, 'Notice attachment is required');
                isValid = false;
            } else {
                removeError(attachment);
            }

            if (!validateInput(description, 'Description is required')) {
                isValid = false;
            }

            if (isValid) {

                Swal.fire({
                    icon: 'success',
                    title: 'Success!',
                    html: 'Notice added successfully',
                    width: '450px',
                    heightAuto: false,
                    confirmButtonColor: '#4a63ff',
                    timer: 2000,
                    width: '350px',
                    timerProgressBar: true,
                    customClass: {
                        popup: 'swal-modern',
                        title: 'swal-title',
                        htmlContainer: 'swal-text',
                        confirmButton: 'swal-confirm',
                        cancelButton: 'swal-cancel',
                    }
                }).then(() => {
                    form.submit();
                });

            } else {

                Swal.fire({
                    icon: 'error',
                    title: 'Missing Information',
                    html: 'Please fill all fields correctly!',
                    width: '450px',
                    heightAuto: false,
                    confirmButtonColor: '#dc3545',
                    width: '350px',
                    customClass: {
                        popup: 'swal-modern',
                        title: 'swal-title',
                        htmlContainer: 'swal-text',
                        confirmButton: 'swal-confirm',
                        cancelButton: 'swal-cancel',
                    }
                });

            }

        });

    });
</script>

<script>
    document.addEventListener('DOMContentLoaded', function () {

        const fileInput = document.getElementById('noticeAttachment');
        const previewBox = document.getElementById('attachmentPreview');

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

        const pdfPreview = document.getElementById('pdfPreview');
        const pdfName = document.getElementById('pdfName');

        fileInput.addEventListener('change', function (e) {

            const file = e.target.files[0];

            if (!file) {
                previewBox.classList.add('d-none');
                return;
            }

            previewBox.classList.remove('d-none');

            const fileType = file.type;

            // Reset
            previewImage.classList.add('d-none');
            pdfPreview.classList.add('d-none');

            // Image Preview
            if (fileType.startsWith('image/')) {

                const reader = new FileReader();

                reader.onload = function (event) {

                    previewImage.src = event.target.result;

                    previewImage.classList.remove('d-none');
                };

                reader.readAsDataURL(file);
            }

            // PDF Preview
            else if (fileType === 'application/pdf') {

                pdfPreview.classList.remove('d-none');

                pdfName.innerText = file.name;
            }

        });

    });
</script>

<?php include 'footer.php'; ?>