{% extends 'index.html' %}
{% load static %}
{% load crispy_forms_tags %}

{% block content %}
<body>
<div class="container d-flex justify-content-center align-items-center" style="margin-top: 60px;">
    <div class="bg-light p-4 shadow-lg rounded col-12 col-md-8 col-lg-6">
        <div class="text-center mb-3">
            <h2>Enter a New Transaction</h2>
        </div>

        <form method="post" enctype="multipart/form-data">
            {% csrf_token %}
            {{ form.non_field_errors }}
            {{ form.media }}
        
            {{ form.date|as_crispy_field }}
            {{ form.trans_type|as_crispy_field }}
            {{ form.category|as_crispy_field }}
            {{ form.sub_cat|as_crispy_field }}
            {{ form.amount|as_crispy_field }}
            {{ form.invoice_numb|as_crispy_field }}
            {{ form.keyword|as_crispy_field }}
            {{ form.paid|as_crispy_field }}
            {{ form.team|as_crispy_field }}
            {{ form.transaction|as_crispy_field }}
        
            <!-- Drag & Drop Zone -->
            <div class="mb-3">
                <label for="id_receipt" class="form-label"><strong>Receipt (PDF, JPG, PNG)</strong></label>
                <div id="drop-zone" class="border border-2 rounded p-3 text-center bg-light">
                    <p class="mb-1">Drag & drop your receipt here</p>
                    <p class="text-muted">or click to choose a file</p>
                    {{ form.receipt }}
                </div>
                <div id="receipt-preview" class="mt-3" style="display: none;">
                    <label><strong>Preview:</strong></label><br>
                    <img id="receipt-image" src="#" alt="Receipt Preview" style="max-width: 100%; display: none;" />
                    <a id="receipt-pdf" href="#" target="_blank" style="display: none;">Open PDF</a>
                </div>
            </div>
        
            <div class="d-grid gap-2 mt-3">
                <button type="submit" class="btn btn-primary w-100">Save</button>
                <a href="{% url 'add_transaction' %}" class="btn btn-secondary w-100">Cancel</a>
            </div>
        </form>
        
    </div>
</div>

<style>
    @media (max-width: 768px) {
        .container {
            padding: 0 15px;
        }
    }

    #drop-zone {
        cursor: pointer;
        transition: border 0.3s ease;
    }

    #drop-zone.border-primary {
        border-color: #0d6efd !important;
        background-color: #e9f5ff;
    }
</style>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        const receiptInput = document.getElementById("id_receipt");
        const imagePreview = document.getElementById("receipt-image");
        const pdfLink = document.getElementById("receipt-pdf");
        const previewContainer = document.getElementById("receipt-preview");
    
        if (receiptInput) {
            receiptInput.addEventListener("change", function () {
                const file = receiptInput.files[0];
    
                if (!file) {
                    previewContainer.style.display = "none";
                    return;
                }
    
                const fileType = file.type;
                const fileURL = URL.createObjectURL(file);
    
                if (fileType === "application/pdf") {
                    imagePreview.style.display = "none";
                    pdfLink.href = fileURL;
                    pdfLink.style.display = "block";
                } else if (fileType === "image/jpeg" || fileType === "image/png") {
                    pdfLink.style.display = "none";
                    imagePreview.src = fileURL;
                    imagePreview.style.display = "block";
                } else {
                    alert("Only PDF, JPG, or PNG files are supported.");
                    receiptInput.value = ""; // reset input
                    previewContainer.style.display = "none";
                    return;
                }
    
                previewContainer.style.display = "block";
            });
        }
    });
    </script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const dropZone = document.getElementById("drop-zone");
            const fileInput = document.getElementById("id_receipt");
            const imagePreview = document.getElementById("receipt-image");
            const pdfLink = document.getElementById("receipt-pdf");
            const previewContainer = document.getElementById("receipt-preview");
        
            // Click zone
            dropZone.addEventListener("click", () => fileInput.click());
        
            // Drag over
            dropZone.addEventListener("dragover", function (e) {
                e.preventDefault();
                dropZone.classList.add("border-primary");
            });
        
            // Drag leave
            dropZone.addEventListener("dragleave", function () {
                dropZone.classList.remove("border-primary");
            });
        
            // Drop file
            dropZone.addEventListener("drop", function (e) {
                e.preventDefault();
                dropZone.classList.remove("border-primary");
        
                const file = e.dataTransfer.files[0];
                if (file) {
                    fileInput.files = e.dataTransfer.files; // attach to input
                    previewFile(file);
                }
            });
        
            // Manual select
            fileInput.addEventListener("change", function () {
                const file = fileInput.files[0];
                if (file) previewFile(file);
            });
        
            function previewFile(file) {
                const fileType = file.type;
                const fileURL = URL.createObjectURL(file);
        
                if (fileType === "application/pdf") {
                    imagePreview.style.display = "none";
                    pdfLink.href = fileURL;
                    pdfLink.style.display = "block";
                } else if (fileType === "image/jpeg" || fileType === "image/png") {
                    pdfLink.style.display = "none";
                    imagePreview.src = fileURL;
                    imagePreview.style.display = "block";
                } else {
                    alert("Only PDF, JPG, or PNG files are supported.");
                    fileInput.value = "";
                    previewContainer.style.display = "none";
                    return;
                }
        
                previewContainer.style.display = "block";
            }
        });
        </script>
        
</body>    
{% endblock %}
