{% extends "base.html" %}

{% block title %}Otomatik Fatura Yükle - FaturaYol{% endblock %}
{% block page_title %}Otomatik Fatura Yükle{% endblock %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-8">
        {% if messages %}
            {% for message in messages %}
                <div class="alert alert-{{ message.tags }} alert-dismissible fade show rounded-4 border-0 shadow-sm mb-4" role="alert">
                    {{ message }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            {% endfor %}
        {% endif %}

        <div class="card border-0 shadow-sm">
            <div class="card-body p-5 text-center">
                <div class="mb-4">
                    <div class="bg-primary bg-opacity-10 rounded-circle d-inline-flex align-items-center justify-content-center mb-3" style="width: 100px; height: 100px;">
                        <i class="bi bi-file-earmark-pdf text-primary" style="font-size: 3rem;"></i>
                    </div>
                    <h3 class="fw-bold mt-2">Yapay Zeka ile Otomatik Analiz</h3>
                    <p class="text-muted">Fatura PDF dosyasını seçin, sistemimiz bilgileri otomatik olarak çıkarsın.</p>
                </div>
                
                <form method="post" enctype="multipart/form-data" id="auto-upload-form">
                    {% csrf_token %}
                    <div class="upload-zone p-5 border border-2 border-dashed rounded-4 mb-4" id="drop-zone">
                        <input type="file" name="pdf_dosyasi" id="pdf_file" class="d-none" accept=".pdf">
                        <div id="upload-prompt">
                            <i class="bi bi-cloud-arrow-up fs-1 text-primary mb-3 d-block"></i>
                            <label for="pdf_file" class="btn btn-primary rounded-pill px-4 py-2 mb-2 cursor-pointer">
                                Dosya Seçin
                            </label>
                            <p class="mb-0 text-secondary">Veya faturayı buraya sürükleyip bırakın</p>
                            <small class="text-muted d-block mt-2">Sadece PDF dosyaları desteklenmektedir.</small>
                        </div>
                    </div>
                    
                    <div id="loading-spinner" class="d-none mb-4 py-4">
                        <div class="spinner-grow text-primary" style="width: 3rem; height: 3rem;" role="status">
                            <span class="visually-hidden">Analiz ediliyor...</span>
                        </div>
                        <h5 class="mt-4 fw-bold text-primary">Fatura Analiz Ediliyor</h5>
                        <p class="text-muted">Yapay zeka verileri ayrıştırıyor, bu işlem yaklaşık 10-15 saniye sürebilir...</p>
                        <div class="progress mt-4 mx-auto" style="height: 6px; max-width: 300px;">
                            <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%"></div>
                        </div>
                    </div>

                    <div class="d-flex justify-content-center gap-3" id="action-buttons">
                        <a href="{% url 'home' %}" class="btn btn-light rounded-pill px-4 border">Vazgeç</a>
                    </div>
                </form>
            </div>
        </div>
        
        <div class="row mt-4">
            <div class="col-md-6">
                <div class="card border-0 shadow-sm h-100 rounded-4">
                    <div class="card-body p-4">
                        <h6 class="fw-bold text-primary mb-3"><i class="bi bi-search me-2"></i>Akıllı Eşleştirme</h6>
                        <p class="small text-muted mb-0">Sistemimiz Mersis, VKN ve TCKN bilgilerini otomatik tanıyarak firmaları eşleştirir. Firma kayıtlı değilse otomatik oluşturulur.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="card border-0 shadow-sm h-100 rounded-4">
                    <div class="card-body p-4">
                        <h6 class="fw-bold text-primary mb-3"><i class="bi bi-list-check me-2"></i>Kalem Detayları</h6>
                        <p class="small text-muted mb-0">Fatura içerisindeki tüm ürün ve hizmet kalemleri, adetleri ve KDV oranları ile birlikte otomatik olarak listelenir.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .upload-zone {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        background-color: #f8fafc;
        cursor: pointer;
        border-color: #e2e8f0 !important;
    }
    .upload-zone:hover, .upload-zone.dragover {
        border-color: var(--primary-color) !important;
        background-color: #f0f7ff;
        transform: scale(1.01);
    }
    .cursor-pointer {
        cursor: pointer;
    }
</style>

<script>
    const fileInput = document.getElementById('pdf_file');
    const dropZone = document.getElementById('drop-zone');
    const form = document.getElementById('auto-upload-form');
    const loadingSpinner = document.getElementById('loading-spinner');
    const uploadPrompt = document.getElementById('upload-prompt');
    const actionButtons = document.getElementById('action-buttons');

    function startUpload() {
        if (fileInput.files.length > 0) {
            loadingSpinner.classList.remove('d-none');
            uploadPrompt.classList.add('d-none');
            dropZone.classList.add('border-0', 'bg-white');
            dropZone.style.pointerEvents = 'none';
            actionButtons.classList.add('d-none');
            form.submit();
        }
    }

    fileInput.onchange = startUpload;

    dropZone.onclick = (e) => {
        if (e.target.tagName !== 'INPUT') {
            fileInput.click();
        }
    };

    dropZone.ondragover = (e) => {
        e.preventDefault();
        dropZone.classList.add('dragover');
    };

    dropZone.ondragleave = () => {
        dropZone.classList.remove('dragover');
    };

    dropZone.ondrop = (e) => {
        e.preventDefault();
        dropZone.classList.remove('dragover');
        if (e.dataTransfer.files.length > 0) {
            const files = e.dataTransfer.files;
            if (files[0].type === 'application/pdf') {
                fileInput.files = files;
                startUpload();
            } else {
                alert('Lütfen sadece PDF dosyası yükleyin.');
            }
        }
    };
</script>
{% endblock %}
