@extends('layouts.app')

@section('headScripts')
<script src="https://cdn.tiny.cloud/1/opnb5tiaxvfkkojbej4xw1cr9h524cvb9aaw2srmg8t13cf9/tinymce/7/tinymce.min.js"
    referrerpolicy="origin"></script>
@endsection

@section('content')

<div class="">
    <main>
        <div class="w-full px-4 pb-60">
            <div class="">
                <div class="sm:flex sm:items-center gap-x-2">

                    <header class="rounded-lg shadow bg-gradient-to-b from-stone-100 to-white">
                        <div class="lg:divide-y lg:divide-stone-200">
                            <nav class="items-center content-center hidden lg:flex" aria-label="Global">
                                <div
                                    class="bg-gradient-to-b from-stone-600 to-stone-500 px-3.5 py-2 text-sm text-stone-50 shadow-sm rounded-s-lg">
                                    GİDEN E-BELGELER</div>
                                <a href="{{ route('invoices', ['filter' => 'all']) }}" type="button"
                                    class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ request()->routeIs('invoices') && request()->query('filter') == 'all' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">
                                    Tüm kayıtlar</a>
                                <a href="{{ route('invoices', ['filter' => 'sales']) }}" type="button"
                                    class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ request()->routeIs('invoices') && request()->query('filter') == 'sales' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">Satışlar</a>
                                <a href="{{ route('invoices', ['filter' => 'purchase']) }}" type="button"
                                    class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ request()->routeIs('invoices') && request()->query('filter') == 'purchase' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">Alışlar</a>
                            </nav>
                        </div>
                    </header>

                    <header class="rounded-lg shadow bg-gradient-to-b from-stone-100 to-white">
                        <div class="lg:divide-y lg:divide-stone-200">
                            <nav class="items-center content-center hidden lg:flex" aria-label="Global">
                                <div class="flex items-center content-center px-2.5 text-sm rounded-s-lg">
                                    <span class="material-symbols-rounded text-stone-400">
                                        date_range
                                    </span>
                                </div>
                                <a href="{{ route('invoices', ['filter' => request()->query('filter', 'all'), 'date' => 'this_week']) }}"
                                    type="button"
                                    class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ request()->query('date') == 'this_week' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">Bu
                                    hafta</a>
                                <a href="{{ route('invoices', ['filter' => request()->query('filter', 'all'), 'date' => 'this_month']) }}"
                                    type="button"
                                    class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ request()->query('date') == 'this_month' || !request()->has('date') ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">Bu
                                    ay</a>
                                <a href="{{ route('invoices', ['filter' => request()->query('filter', 'all'), 'date' => 'this_year']) }}"
                                    type="button"
                                    class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ request()->query('date') == 'this_year' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">Bu
                                    yıl</a>
                                <a href="{{ route('invoices', ['filter' => request()->query('filter', 'all'), 'date' => 'all']) }}"
                                    type="button"
                                    class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ request()->query('date') == 'all' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">Tüm
                                    zamanlar</a>
                            </nav>
                        </div>
                    </header>

                    <header class="rounded-lg shadow bg-gradient-to-b from-stone-100 to-white">
                        <div class="lg:divide-y lg:divide-stone-200">
                            <nav class="items-center content-center hidden lg:flex" aria-label="Global">
                                <a href="#" onclick="printTable(); return false;" type="button"
                                    class="flex items-center content-center px-3.5 py-1.5 text-sm hover:bg-stone-100 transition-all rounded-lg {{ request()->query('date') == 'this_week' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">
                                    <span class="material-symbols-rounded text-stone-400">
                                        print
                                    </span>
                                </a>
                                <a href="{{ route('invoices', ['filter' => request()->query('filter', 'all'), 'date' => 'this_week']) }}"
                                    type="button"
                                    class="flex items-center content-center px-3.5 py-1.5 text-sm hover:bg-stone-100 transition-all rounded-lg {{ request()->query('date') == 'this_week' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">
                                    <span class="material-symbols-rounded text-stone-400">
                                        file_export
                                    </span>
                                </a>
                            </nav>
                        </div>
                    </header>

                </div>
                <div class="flow-root mt-2">
                    <div class="-my-2 overflow-x-auto">
                        <div class="inline-block min-w-full py-2 align-middle">
                            <div x-data="{
                                sortField: 'date',
                                sortDirection: 'desc',
                                sortedInvoices: [],
                                init() {
                                    this.sortedInvoices = [...this.parseInvoices()];
                                    this.sort();
                                },
                                parseInvoices() {
                                    return Array.from(document.querySelectorAll('tbody tr')).map((row) => row);
                                },
                                toggleSort(field) {
                                    if (this.sortField === field) {
                                        this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
                                    } else {
                                        this.sortField = field;
                                        this.sortDirection = 'asc';
                                    }
                                    this.sort();
                                },
                                sort() {
                                    const tbody = document.querySelector('tbody');
                                    this.sortedInvoices.sort((a, b) => {
                                        let aValue, bValue;
                                        const cellIndex = Array.from(document.querySelectorAll('th')).findIndex(
                                            th => th.getAttribute('data-field') === this.sortField
                                        );

                                        if (cellIndex !== -1) {
                                            aValue = a.children[cellIndex].textContent.trim();
                                            bValue = b.children[cellIndex].textContent.trim();
                                        }

                                        if (this.sortField === 'date') {
                                            const dateA = this.parseDate(aValue);
                                            const dateB = this.parseDate(bValue);
                                            return this.sortDirection === 'asc' ? dateA - dateB : dateB - dateA;
                                        }

                                        if (['total_sub', 'total_vat', 'total_amount'].includes(this.sortField)) {
                                            const numA = parseFloat(aValue.replace(/[^0-9,]/g, '').replace(',', '.'));
                                            const numB = parseFloat(bValue.replace(/[^0-9,]/g, '').replace(',', '.'));
                                            return this.sortDirection === 'asc' ? numA - numB : numB - numA;
                                        }

                                        return this.sortDirection === 'asc' ?
                                            aValue.localeCompare(bValue) :
                                            bValue.localeCompare(aValue);
                                    });

                                    // Clear and refill tbody
                                    while (tbody.firstChild) {
                                        tbody.removeChild(tbody.firstChild);
                                    }

                                    this.sortedInvoices.forEach(row => {
                                        tbody.appendChild(row);
                                    });
                                },
                                sortIcon(field) {
                                    if(this.sortField !== field) return '↕';
                                    return this.sortDirection === 'asc' ? '↑' : '↓';
                                },
                                parseDate(dateString) {
                                    // Parse date from format DD.MM.YYYY
                                    const parts = dateString.split('.');
                                    return new Date(parts[2], parts[1] - 1, parts[0]);
                                }
                            }">
                                <table class="min-w-full divide-y divide-stone-300">
                                    <thead>
                                        <tr class="p-2 text-sm font-light text-right whitespace-nowrap text-stone-500">
                                            <th scope="col" data-field="type" @click="toggleSort('type')"
                                                class="p-2 text-left cursor-pointer hover:bg-stone-100">
                                                Hareket Tipi <span x-text="sortIcon('type')"></span></th>
                                            <th scope="col" data-field="date" @click="toggleSort('date')"
                                                class="p-2 text-left cursor-pointer hover:bg-stone-100">
                                                Tarihi <span x-text="sortIcon('date')"></span></th>
                                            <th scope="col" data-field="company" @click="toggleSort('company')"
                                                class="p-2 text-left cursor-pointer hover:bg-stone-100">
                                                Cari Hesap <span x-text="sortIcon('company')"></span></th>
                                            <th scope="col" data-field="number" @click="toggleSort('number')"
                                                class="p-2 text-left cursor-pointer hover:bg-stone-100">
                                                Numara <span x-text="sortIcon('number')"></span></th>
                                            <th scope="col" data-field="number" @click="toggleSort('durum')"
                                                class="p-2 text-left cursor-pointer hover:bg-stone-100">
                                                Durum <span x-text="sortIcon('durum')"></span></th>
                                            <th scope="col" data-field="details" class="p-2 text-left">
                                                Detaylar</th>
                                            <th scope="col" data-field="total_sub" @click="toggleSort('total_sub')"
                                                class="p-2 text-right cursor-pointer hover:bg-stone-100">
                                                Ara toplam <span x-text="sortIcon('total_sub')"></span></th>
                                            <th scope="col" data-field="total_vat" @click="toggleSort('total_vat')"
                                                class="p-2 text-right cursor-pointer hover:bg-stone-100">
                                                Vergiler <span x-text="sortIcon('total_vat')"></span></th>
                                            <th scope="col" data-field="total_amount"
                                                @click="toggleSort('total_amount')"
                                                class="p-2 text-right cursor-pointer hover:bg-stone-100">
                                                Genel Toplam <span x-text="sortIcon('total_amount')"></span></th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-stone-200">
                                        @if(count($invoices) > 0)
                                        @foreach ($invoices as $item)
                                        <tr class="transition-all hover:bg-stone-100">
                                            <td class="px-2 py-2 text-sm text-stone-500 whitespace-nowrap">
                                                @if($item->type == 'sales_invoice')
                                                <p class="text-sm font-semibold leading-6 text-stone-800">SATIŞ FATURASI
                                                </p>
                                                @elseif($item->type == 'purchase_invoice')
                                                <p class="text-sm font-semibold leading-6 text-stone-500">ALIŞ FATURASI
                                                </p>
                                                @elseif($item->type == 'sales_receipt')
                                                <p class="text-sm font-semibold leading-6 text-stone-800">SATIŞ FİŞİ</p>
                                                @elseif($item->type == 'purchase_receipt')
                                                <p class="text-sm font-semibold leading-6 text-stone-500">ALIŞ FİŞİ</p>
                                                @endif
                                            </td>
                                            <td class="px-2 py-2 text-sm text-stone-500 whitespace-nowrap">
                                                {{ date('d.m.Y', strtotime($item->date)) }}</td>
                                            <td class="px-2 py-2 text-sm font-medium text-stone-900 whitespace-nowrap">
                                                <x-popover class=""
                                                    route="{{ route('companies.show', $item->company->slug) }}"
                                                    data="{{ $item->company->name }}" text="Cari hesaba git" />
                                            </td>
                                            <td class="px-2 py-2 text-sm text-stone-900 whitespace-nowrap">
                                                <x-popover class="" route="{{ route('invoices.show', $item->id) }}"
                                                    data="{{ $item->number }}" text="Belgeyi görüntüle" />
                                            </td>
                                            <td class="px-2 py-2 text-sm text-stone-500 whitespace-nowrap">
                                                @if ($item->durum == 2)
                                                <span
                                                    class="inline-flex items-center rounded-md bg-green-50 px-1.5 py-0.5 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-600/20">E-belge</span>
                                                @elseif ($item->durum == 1)
                                                <span
                                                    class="inline-flex items-center rounded-md bg-rose-50 px-1.5 py-0.5 text-xs font-medium text-rose-700 ring-1 ring-inset ring-rose-600/20">İşleme
                                                    Hatası</span>
                                                @endif
                                            </td>
                                            <td class="px-2 py-2 text-sm text-stone-500 whitespace-nowrap">
                                                @if ($item->type == 'sales_invoice' || $item->type ==
                                                'purchase_invoice')
                                                @foreach($item->lines as $line)
                                                <span class="uppercase text-stone-400">{{ $line->product->name }}{{
                                                    !$loop->last ? ',' : '' }}</span>
                                                @endforeach
                                                @elseif ($item->type == 'sales_receipt' || $item->type ==
                                                'purchase_receipt')
                                                <span class="uppercase text-stone-400">{{ $item->note }}</span>
                                                @endif
                                            </td>
                                            <td class="px-2 py-2 text-sm text-right text-stone-500 whitespace-nowrap">{{
                                                number_format($item->total_sub, 2, ',', '.') }}</td>
                                            <td class="px-2 py-2 text-sm text-right text-stone-500 whitespace-nowrap">{{
                                                number_format($item->total_vat, 2, ',', '.') }}</td>
                                            <td
                                                class="px-2 py-2 text-sm font-bold text-right text-stone-600 whitespace-nowrap">
                                                {{
                                                number_format($item->total_amount, 2, ',', '.') }} {{ $item->currency }}
                                            </td>
                                        </tr>
                                        @endforeach
                                        @else
                                        <x-alert-standard color="stone">
                                            Seçili aralıkta veri bulunmuyor.
                                        </x-alert-standard>
                                        @endif
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>

@endsection

@section('scripts')
<script>
    function printTable() {
    // Create a new window for printing
    let printWindow = window.open('', '_blank');

    // Get the table content
    let table = document.querySelector('table').cloneNode(true);

    // Create HTML for the print window
    let html = `
    <!DOCTYPE html>
    <html>
    <head>
        <title>Faturalar & Fişler Raporu</title>
        <meta charset="utf-8">
        <style>
            body { font-family: Arial, sans-serif; margin: 20px; }
            table { width: 100%; border-collapse: collapse; }
            th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
            th { background-color: #f2f2f2; }
            .text-right { text-align: right; }
            .print-header { margin-bottom: 20px; }
            .print-footer { margin-top: 30px; font-size: 12px; text-align: center; color: #666; }
            @media print {
                button { display: none; }
            }
        </style>
    </head>
    <body>
        <div class="print-header">
            <h1>Faturalar & Fişler</h1>
            <p>Yazdırma Tarihi: ${new Date().toLocaleDateString('tr-TR')}</p>
        </div>

        <button onclick="window.print(); return false;" style="padding: 8px 16px; margin-bottom: 20px; background-color: #4CAF50; color: white; border: none; cursor: pointer;">Yazdır</button>

        <div id="table-container"></div>

        <div class="print-footer">
            <p>Bu rapor Apper {{ $tool_name }} ile {{ date('d.m.Y') }} tarihinde oluşturulmuştur.</p>
        </div>
    </body>
    </html>
    `;

    // Write to the new window
    printWindow.document.write(html);

    // Insert the table into the container
    printWindow.document.getElementById('table-container').appendChild(table);

    // Make all columns visible and properly formatted for print
    let rows = printWindow.document.querySelectorAll('table tr');
    rows.forEach(row => {
        let cells = row.querySelectorAll('th, td');
        cells.forEach(cell => {
            if (cell.classList.contains('text-right')) {
                cell.style.textAlign = 'right';
            }
        });
    });

    // Finish loading the document
    printWindow.document.close();
}
</script>
@endsection