@extends('layouts.app')

@section('content')

@if($error)
<div class="px-4 py-3 mb-6 text-red-700 border border-red-200 rounded-lg bg-red-50">
    <div class="flex items-center">
        <i class="mr-2 fas fa-exclamation-triangle"></i>
        <h4 class="font-semibold">Hata</h4>
    </div>
    <p class="mt-1">{{ $error }}</p>
</div>
@elseif($xml_data)
<div class="px-4 py-8 mx-auto max-w-7xl sm:px-6 lg:px-8">
    <!-- Fatura Başlığı -->
    <div class="mb-8 overflow-hidden shadow-lg bg-gradient-to-r from-slate-700 to-slate-800 rounded-xl">
        <div class="flex items-center justify-between px-6 py-4">
            <div class="flex items-center">
                <i class="mr-3 text-2xl text-white fas fa-file-invoice"></i>
                <h1 class="text-3xl font-bold text-white">E-FATURA</h1>
            </div>
            <div class="flex space-x-3">
                <button onclick="printInvoice()"
                    class="flex items-center px-4 py-2 text-sm font-medium transition-colors duration-200 bg-white rounded-lg text-slate-700 hover:bg-slate-50">
                    <i class="mr-2 fas fa-print"></i> Yazdır
                </button>
                <button onclick="downloadPDF()"
                    class="flex items-center px-4 py-2 text-sm font-medium transition-colors duration-200 bg-white rounded-lg text-slate-700 hover:bg-slate-50">
                    <i class="mr-2 fas fa-download"></i> PDF İndir
                </button>
            </div>
        </div>
    </div>

    <!-- Fatura İçeriği -->
    <div id="invoice-content" class="space-y-8">
        <!-- Fatura Bilgileri -->
        <div class="overflow-hidden bg-white shadow-lg rounded-xl">
            <div class="px-6 py-4 bg-gradient-to-r from-slate-600 to-slate-700">
                <div class="flex items-center">
                    <i class="mr-2 text-lg text-white fas fa-info-circle"></i>
                    <h2 class="text-xl font-semibold text-white">Fatura Bilgileri</h2>
                </div>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
                    <div class="space-y-3">
                        <div class="flex items-center justify-between py-2 border-b border-gray-100">
                            <span class="font-medium text-gray-600">Fatura No:</span>
                            <span id="invoice-number" class="font-semibold text-gray-900">-</span>
                        </div>
                        <div class="flex items-center justify-between py-2 border-b border-gray-100">
                            <span class="font-medium text-gray-600">UUID:</span>
                            <span id="invoice-uuid" class="font-mono text-xs text-gray-500">-</span>
                        </div>
                        <div class="flex items-center justify-between py-2 border-b border-gray-100">
                            <span class="font-medium text-gray-600">Tarih:</span>
                            <span id="invoice-date" class="font-semibold text-gray-900">-</span>
                        </div>
                        <div class="flex items-center justify-between py-2 border-b border-gray-100">
                            <span class="font-medium text-gray-600">Saat:</span>
                            <span id="invoice-time" class="font-semibold text-gray-900">-</span>
                        </div>
                    </div>
                    <div class="space-y-3">
                        <div class="flex items-center justify-between py-2 border-b border-gray-100">
                            <span class="font-medium text-gray-600">Fatura Türü:</span>
                            <span id="invoice-type" class="font-semibold text-gray-900">-</span>
                        </div>
                        <div class="flex items-center justify-between py-2 border-b border-gray-100">
                            <span class="font-medium text-gray-600">Para Birimi:</span>
                            <span id="currency-code" class="font-semibold text-gray-900">-</span>
                        </div>
                        <div class="flex items-center justify-between py-2 border-b border-gray-100">
                            <span class="font-medium text-gray-600">Kalem Sayısı:</span>
                            <span id="line-count" class="font-semibold text-gray-900">-</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Taraflar -->
        <div class="grid grid-cols-1 gap-8 lg:grid-cols-2">
            <!-- Satıcı Bilgileri -->
            <div class="overflow-hidden bg-white shadow-lg rounded-xl">
                <div class="px-6 py-4 bg-gradient-to-r from-slate-600 to-slate-700">
                    <div class="flex items-center">
                        <i class="mr-2 text-lg text-white fas fa-building"></i>
                        <h3 class="text-lg font-semibold text-white">Satıcı Bilgileri</h3>
                    </div>
                </div>
                <div class="p-6" id="supplier-info">
                    <div class="flex items-center justify-center py-8">
                        <div class="w-8 h-8 border-b-2 rounded-full border-slate-500 animate-spin"></div>
                        <span class="ml-2 text-gray-600">Yükleniyor...</span>
                    </div>
                </div>
            </div>

            <!-- Alıcı Bilgileri -->
            <div class="overflow-hidden bg-white shadow-lg rounded-xl">
                <div class="px-6 py-4 bg-gradient-to-r from-slate-600 to-slate-700">
                    <div class="flex items-center">
                        <i class="mr-2 text-lg text-white fas fa-user"></i>
                        <h3 class="text-lg font-semibold text-white">Alıcı Bilgileri</h3>
                    </div>
                </div>
                <div class="p-6" id="customer-info">
                    <div class="flex items-center justify-center py-8">
                        <div class="w-8 h-8 border-b-2 rounded-full animate-spin border-slate-500"></div>
                        <span class="ml-2 text-gray-600">Yükleniyor...</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Fatura Kalemleri -->
        <div class="overflow-hidden bg-white shadow-lg rounded-xl">
            <div class="px-6 py-4 bg-gradient-to-r from-slate-600 to-slate-700">
                <div class="flex items-center">
                    <i class="mr-2 text-lg text-white fas fa-list"></i>
                    <h3 class="text-lg font-semibold text-white">Fatura Kalemleri</h3>
                </div>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full">
                    <thead class="bg-gray-50">
                        <tr>
                            <th
                                class="px-6 py-4 text-xs font-semibold tracking-wider text-center text-gray-600 uppercase">
                                #</th>
                            <th
                                class="px-6 py-4 text-xs font-semibold tracking-wider text-left text-gray-600 uppercase">
                                Ürün/Hizmet</th>
                            <th
                                class="px-6 py-4 text-xs font-semibold tracking-wider text-center text-gray-600 uppercase">
                                Miktar</th>
                            <th
                                class="px-6 py-4 text-xs font-semibold tracking-wider text-center text-gray-600 uppercase">
                                Birim</th>
                            <th
                                class="px-6 py-4 text-xs font-semibold tracking-wider text-right text-gray-600 uppercase">
                                Birim Fiyat</th>
                            <th
                                class="px-6 py-4 text-xs font-semibold tracking-wider text-right text-gray-600 uppercase">
                                Tutar</th>
                            <th
                                class="px-6 py-4 text-xs font-semibold tracking-wider text-right text-gray-600 uppercase">
                                KDV Oranı</th>
                            <th
                                class="px-6 py-4 text-xs font-semibold tracking-wider text-right text-gray-600 uppercase">
                                KDV Tutarı</th>
                            <th
                                class="px-6 py-4 text-xs font-semibold tracking-wider text-right text-gray-600 uppercase">
                                Toplam</th>
                        </tr>
                    </thead>
                    <tbody id="invoice-lines" class="divide-y divide-gray-200">
                        <tr>
                            <td colspan="9" class="px-6 py-8 text-center">
                                <div class="flex items-center justify-center">
                                    <div class="w-6 h-6 border-b-2 rounded-full border-slate-400 animate-spin"></div>
                                    <span class="ml-2 text-gray-500">Yükleniyor...</span>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Alt Bölüm -->
        <div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
            <!-- Notlar -->
            <div class="overflow-hidden bg-white shadow-lg lg:col-span-2 rounded-xl">
                <div class="px-6 py-4 bg-gradient-to-r from-slate-600 to-slate-700">
                    <div class="flex items-center">
                        <i class="mr-2 text-lg text-white fas fa-sticky-note"></i>
                        <h3 class="text-lg font-semibold text-white">Notlar</h3>
                    </div>
                </div>
                <div class="p-6" id="notes-section">
                    <p class="italic text-gray-500">Not bulunamadı.</p>
                </div>
            </div>

            <!-- Toplamlar -->
            <div class="overflow-hidden bg-white shadow-lg rounded-xl">
                <div class="px-6 py-4 bg-gradient-to-r from-slate-600 to-slate-700">
                    <div class="flex items-center">
                        <i class="mr-2 text-lg text-white fas fa-calculator"></i>
                        <h3 class="text-lg font-semibold text-white">Toplam Bilgiler</h3>
                    </div>
                </div>
                <div class="p-6" id="totals-section">
                    <div class="flex items-center justify-center py-8">
                        <div class="w-6 h-6 border-b-2 rounded-full border-slate-500 animate-spin"></div>
                        <span class="ml-2 text-gray-600">Yükleniyor...</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Hidden textarea for raw XML -->
<textarea id="raw-xml" class="hidden">{!! $xml_data !!}</textarea>

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

function parseInvoiceXML() {
    const rawXml = document.getElementById('raw-xml').value;

    try {
        const parser = new DOMParser();
        const xmlDoc = parser.parseFromString(rawXml, 'text/xml');

        // Parse error check
        if (xmlDoc.getElementsByTagName('parsererror').length > 0) {
            throw new Error('XML parse edilemedi');
        }

        // Parse invoice details
        parseInvoiceDetails(xmlDoc);

        // Parse supplier info
        parseSupplierInfo(xmlDoc);

        // Parse customer info
        parseCustomerInfo(xmlDoc);

        // Parse invoice lines
        parseInvoiceLines(xmlDoc);

        // Parse totals
        parseTotals(xmlDoc);

    } catch (error) {
        console.error('XML parsing error:', error);
        showError('XML verisi işlenirken hata oluştu: ' + error.message);
    }
}

function parseInvoiceDetails(xmlDoc) {
    // Invoice basic info
    const invoiceId = getElementText(xmlDoc, 'ID');
    const uuid = getElementText(xmlDoc, 'UUID');
    const issueDate = getElementText(xmlDoc, 'IssueDate');
    const issueTime = getElementText(xmlDoc, 'IssueTime');
    const invoiceType = getElementText(xmlDoc, 'InvoiceTypeCode') || getElementText(xmlDoc, 'CreditNoteTypeCode');
    const currency = getElementText(xmlDoc, 'DocumentCurrencyCode');
    const lineCount = xmlDoc.querySelectorAll('InvoiceLine, CreditNoteLine').length;

    document.getElementById('invoice-number').textContent = invoiceId || '-';
    document.getElementById('invoice-uuid').textContent = uuid || '-';
    document.getElementById('invoice-date').textContent = formatDate(issueDate);
    document.getElementById('invoice-time').textContent = issueTime || '-';
    document.getElementById('invoice-type').textContent = getInvoiceTypeText(invoiceType);
    document.getElementById('currency-code').textContent = currency || 'TRY';
    document.getElementById('line-count').textContent = lineCount;
}

function parseSupplierInfo(xmlDoc) {
    const supplierParty = xmlDoc.querySelector('AccountingSupplierParty Party');
    if (!supplierParty) return;

    const name = getElementText(supplierParty, 'PartyName Name') || getElementText(supplierParty, 'Person FirstName');
    const vkn = getElementText(supplierParty, 'PartyIdentification ID');
    const address = getElementText(supplierParty, 'PostalAddress StreetName');
    const city = getElementText(supplierParty, 'PostalAddress CityName');
    const country = getElementText(supplierParty, 'PostalAddress Country Name');
    const taxOffice = getElementText(supplierParty, 'PartyTaxScheme TaxScheme Name');
    const phone = getElementText(supplierParty, 'Contact Telephone');
    const email = getElementText(supplierParty, 'Contact ElectronicMail');

    let html = '';
    if (name) html += `<div class="mb-3 text-lg font-bold text-slate-700">${name}</div>`;
    if (vkn) html += `<div class="flex items-center justify-between py-1"><span class="text-sm text-gray-600">VKN/TCKN:</span> <span class="font-semibold">${vkn}</span></div>`;
    if (address) html += `<div class="flex items-center justify-between py-1"><span class="text-sm text-gray-600">Adres:</span> <span class="text-right">${address}</span></div>`;
    if (city) html += `<div class="flex items-center justify-between py-1"><span class="text-sm text-gray-600">Şehir:</span> <span>${city}</span></div>`;
    if (country) html += `<div class="flex items-center justify-between py-1"><span class="text-sm text-gray-600">Ülke:</span> <span>${country}</span></div>`;
    if (taxOffice) html += `<div class="flex items-center justify-between py-1"><span class="text-sm text-gray-600">Vergi Dairesi:</span> <span>${taxOffice}</span></div>`;
    if (phone) html += `<div class="flex items-center justify-between py-1"><span class="text-sm text-gray-600">Telefon:</span> <span>${phone}</span></div>`;
    if (email) html += `<div class="flex items-center justify-between py-1"><span class="text-sm text-gray-600">E-posta:</span> <span class="text-blue-600">${email}</span></div>`;

    document.getElementById('supplier-info').innerHTML = html || '<div class="py-8 text-center text-gray-500">Bilgi bulunamadı</div>';
}

function parseCustomerInfo(xmlDoc) {
    const customerParty = xmlDoc.querySelector('AccountingCustomerParty Party');
    if (!customerParty) return;

    const name = getElementText(customerParty, 'PartyName Name') || getElementText(customerParty, 'Person FirstName');
    const vkn = getElementText(customerParty, 'PartyIdentification ID');
    const address = getElementText(customerParty, 'PostalAddress StreetName');
    const city = getElementText(customerParty, 'PostalAddress CityName');
    const country = getElementText(customerParty, 'PostalAddress Country Name');
    const taxOffice = getElementText(customerParty, 'PartyTaxScheme TaxScheme Name');

    let html = '';
    if (name) html += `<div class="mb-3 text-lg font-bold text-slate-700">${name}</div>`;
    if (vkn) html += `<div class="flex items-center justify-between py-1"><span class="text-sm text-gray-600">VKN/TCKN:</span> <span class="font-semibold">${vkn}</span></div>`;
    if (address) html += `<div class="flex items-center justify-between py-1"><span class="text-sm text-gray-600">Adres:</span> <span class="text-right">${address}</span></div>`;
    if (city) html += `<div class="flex items-center justify-between py-1"><span class="text-sm text-gray-600">Şehir:</span> <span>${city}</span></div>`;
    if (country) html += `<div class="flex items-center justify-between py-1"><span class="text-sm text-gray-600">Ülke:</span> <span>${country}</span></div>`;
    if (taxOffice) html += `<div class="flex items-center justify-between py-1"><span class="text-sm text-gray-600">Vergi Dairesi:</span> <span>${taxOffice}</span></div>`;

    document.getElementById('customer-info').innerHTML = html || '<div class="py-8 text-center text-gray-500">Bilgi bulunamadı</div>';
}

function parseInvoiceLines(xmlDoc) {
    const lines = xmlDoc.querySelectorAll('InvoiceLine, CreditNoteLine');
    let html = '';

    if (lines.length === 0) {
        html = '<tr><td colspan="9" class="px-6 py-8 text-center text-gray-500">Fatura kalemi bulunamadı</td></tr>';
    } else {
        lines.forEach((line, index) => {
            const id = getElementText(line, 'ID') || (index + 1);
            const itemName = getElementText(line, 'Item Name') || 'Belirtilmemiş';
            const quantity = getElementText(line, 'InvoicedQuantity') || getElementText(line, 'CreditedQuantity') || '1';
            const unit = line.querySelector('InvoicedQuantity')?.getAttribute('unitCode') ||
                        line.querySelector('CreditedQuantity')?.getAttribute('unitCode') || 'Adet';
            const unitPrice = getElementText(line, 'Price PriceAmount') || '0';
            const lineAmount = getElementText(line, 'LineExtensionAmount') || '0';
            const taxPercent = getElementText(line, 'TaxTotal TaxSubtotal TaxCategory Percent') || '0';
            const taxAmount = getElementText(line, 'TaxTotal TaxAmount') || '0';
            const totalAmount = parseFloat(lineAmount) + parseFloat(taxAmount);
            const currency = getElementText(xmlDoc, 'DocumentCurrencyCode') || 'TRY';

            html += `
                <tr class="transition-colors duration-150 hover:bg-gray-50">
                    <td class="px-6 py-4 text-sm font-medium text-center text-gray-900">${id}</td>
                    <td class="px-6 py-4 text-sm font-medium text-gray-900">${itemName}</td>
                    <td class="px-6 py-4 text-sm text-center text-gray-900">${formatNumber(quantity)}</td>
                    <td class="px-6 py-4 text-sm text-center text-gray-600">${unit}</td>
                    <td class="px-6 py-4 text-sm font-medium text-right text-gray-900">${formatCurrency(unitPrice, currency)}</td>
                    <td class="px-6 py-4 text-sm text-right text-gray-900">${formatCurrency(lineAmount, currency)}</td>
                    <td class="px-6 py-4 text-sm font-medium text-right text-slate-600">%${taxPercent}</td>
                    <td class="px-6 py-4 text-sm text-right text-gray-900">${formatCurrency(taxAmount, currency)}</td>
                    <td class="px-6 py-4 text-sm font-bold text-right text-slate-700">${formatCurrency(totalAmount, currency)}</td>
                </tr>
            `;
        });
    }

    document.getElementById('invoice-lines').innerHTML = html;
}

function parseTotals(xmlDoc) {
    const lineExtension = getElementText(xmlDoc, 'LegalMonetaryTotal LineExtensionAmount');
    const taxExclusive = getElementText(xmlDoc, 'LegalMonetaryTotal TaxExclusiveAmount');
    const taxInclusive = getElementText(xmlDoc, 'LegalMonetaryTotal TaxInclusiveAmount');
    const payableAmount = getElementText(xmlDoc, 'LegalMonetaryTotal PayableAmount');
    const taxAmount = getElementText(xmlDoc, 'TaxTotal TaxAmount');
    const currency = getElementText(xmlDoc, 'DocumentCurrencyCode') || 'TRY';

    let html = '';
    if (lineExtension) html += `<div class="flex items-center justify-between py-2 border-b border-gray-100"><span class="text-gray-600">Mal/Hizmet Tutarı:</span><span class="font-semibold text-gray-900">${formatCurrency(lineExtension, currency)}</span></div>`;
    if (taxAmount) html += `<div class="flex items-center justify-between py-2 border-b border-gray-100"><span class="text-gray-600">KDV Tutarı:</span><span class="font-semibold text-slate-600">${formatCurrency(taxAmount, currency)}</span></div>`;
    if (taxExclusive) html += `<div class="flex items-center justify-between py-2 border-b border-gray-100"><span class="text-gray-600">Vergisiz Tutar:</span><span class="font-semibold text-gray-900">${formatCurrency(taxExclusive, currency)}</span></div>`;
    if (taxInclusive) html += `<div class="flex items-center justify-between py-2 border-b border-gray-100"><span class="text-gray-600">Vergili Tutar:</span><span class="font-semibold text-gray-900">${formatCurrency(taxInclusive, currency)}</span></div>`;
    if (payableAmount) html += `<div class="flex items-center justify-between py-3 pt-4 border-t-2 border-gray-300"><strong class="text-lg text-gray-800">Ödenecek Tutar:</strong><strong class="text-lg text-slate-700">${formatCurrency(payableAmount, currency)}</strong></div>`;

    document.getElementById('totals-section').innerHTML = html || '<div class="py-8 text-center text-gray-500">Toplam bilgileri bulunamadı</div>';
}

function getElementText(parent, selector) {
    const element = parent.querySelector(selector);
    return element ? element.textContent.trim() : null;
}

function formatCurrency(amount, currency) {
    if (!amount) return '0,00 ' + currency;
    const num = parseFloat(amount);
    return new Intl.NumberFormat('tr-TR', {
        style: 'decimal',
        minimumFractionDigits: 2,
        maximumFractionDigits: 2
    }).format(num) + ' ' + currency;
}

function formatNumber(num) {
    if (!num) return '0';
    return new Intl.NumberFormat('tr-TR', {
        style: 'decimal',
        minimumFractionDigits: 0,
        maximumFractionDigits: 2
    }).format(parseFloat(num));
}

function formatDate(dateString) {
    if (!dateString) return '-';
    try {
        const date = new Date(dateString);
        return date.toLocaleDateString('tr-TR');
    } catch {
        return dateString;
    }
}

function getInvoiceTypeText(typeCode) {
    const types = {
        'SATIS': 'Satış Faturası',
        'IADE': 'İade Faturası',
        'TEVKIFAT': 'Tevkifatlı Fatura',
        'ISTISNA': 'İstisna Faturası',
        'SGK': 'SGK Faturası',
        'KOMISYONCU': 'Komisyoncu Faturası',
        'SATIS': 'Satış Faturası'
    };
    return types[typeCode] || typeCode || 'Bilinmiyor';
}

function printInvoice() {
    window.print();
}

function downloadPDF() {
    // PDF indirme işlemi için placeholder
    alert('PDF indirme özelliği yakında eklenecek.');
}

function showError(message) {
    const errorDiv = document.createElement('div');
    errorDiv.className = 'bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg mb-6';
    errorDiv.innerHTML = '<div class="flex items-center"><i class="mr-2 fas fa-exclamation-triangle"></i><strong>Hata:</strong></div><p class="mt-1">' + message + '</p>';
    document.querySelector('.max-w-7xl').prepend(errorDiv);
}
</script>

<style>
    @media print {
        .bg-white {
            background-color: white !important;
        }

        .shadow-lg {
            box-shadow: none !important;
        }

        button {
            display: none !important;
        }
    }
</style>

@else
<div class="px-4 py-3 mb-6 text-yellow-700 border border-yellow-200 rounded-lg bg-yellow-50">
    <div class="flex items-center">
        <i class="mr-2 fas fa-exclamation-circle"></i>
        <h4 class="font-semibold">Veri Yok</h4>
    </div>
    <p class="mt-1">XML verisi henüz yüklenmedi.</p>
</div>
@endif

@endsection