@extends('layouts.app')

@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">
                                    FİRMA BAZLI FİŞ/FATURA RAPORU</div>
                                <a href="{{ route('reports.company-and-invoice', ['filter' => 'all', 'distribution' => request()->query('distribution', 'all'), 'date' => request()->query('date', 'this_month')]) }}"
                                    type="button"
                                    class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ request()->query('filter', 'all') == 'all' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">
                                    Tüm kayıtlar</a>
                                <a href="{{ route('reports.company-and-invoice', ['filter' => 'sale', 'distribution' => request()->query('distribution', 'all'), 'date' => request()->query('date', 'this_month')]) }}"
                                    type="button"
                                    class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ request()->query('filter', 'all') == 'sale' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">Satışlar</a>
                                <a href="{{ route('reports.company-and-invoice', ['filter' => 'purchase', 'distribution' => request()->query('distribution', 'all'), 'date' => request()->query('date', 'this_month')]) }}"
                                    type="button"
                                    class="px-3.5 py-2 text-sm hover:bg-stone-100 hover:rounded-r-lg transition-all {{ request()->query('filter', 'all') == '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('reports.company-and-invoice', ['filter' => request()->query('filter', 'all'), 'distribution' => request()->query('distribution', 'all'), 'date' => 'this_week']) }}"
                                    type="button"
                                    class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ request()->query('date', 'this_month') == 'this_week' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">Bu
                                    hafta</a>
                                <a href="{{ route('reports.company-and-invoice', ['filter' => request()->query('filter', 'all'), 'distribution' => request()->query('distribution', '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') == 'this_month' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">Bu
                                    ay</a>
                                <a href="{{ route('reports.company-and-invoice', ['filter' => request()->query('filter', 'all'), 'distribution' => request()->query('distribution', 'all'), 'date' => 'last_month']) }}"
                                    type="button"
                                    class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ request()->query('date', 'this_month') == 'last_month' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">Geçen
                                    ay</a>
                                <a href="{{ route('reports.company-and-invoice', ['filter' => request()->query('filter', 'all'), 'distribution' => request()->query('distribution', 'all'), 'date' => 'last_3_months']) }}"
                                    type="button"
                                    class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ request()->query('date', 'this_month') == 'last_3_months' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">Son
                                    3
                                    ay</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">
                                        call_split
                                    </span>
                                </div>
                                <a href="{{ route('reports.company-and-invoice', ['filter' => request()->query('filter', 'all'), 'distribution' => 'yes', 'date' => request()->query('date', 'this_month')]) }}"
                                    type="button"
                                    class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ request()->query('distribution', 'all') == 'yes' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">Dağıtımı
                                    olanlar</a>
                                <a href="{{ route('reports.company-and-invoice', ['filter' => request()->query('filter', 'all'), 'distribution' => 'no', 'date' => request()->query('date', 'this_month')]) }}"
                                    type="button"
                                    class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ request()->query('distribution', 'all') == 'no' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">Olmayanlar</a>
                                <a href="{{ route('reports.company-and-invoice', ['filter' => request()->query('filter', 'all'), 'distribution' => 'all', 'date' => request()->query('date', 'this_month')]) }}"
                                    type="button"
                                    class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ request()->query('distribution', 'all') == 'all' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">Tümü</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('reports.company-and-invoice', ['filter' => request()->query('filter', 'all'), 'distribution' => request()->query('distribution', 'all'), 'date' => request()->query('date', 'all')]) }}"
                                    type="button"
                                    class="flex items-center content-center px-3.5 py-1.5 text-sm hover:bg-stone-100 transition-all rounded-lg text-stone-400">
                                    <span class="material-symbols-rounded text-stone-400">
                                        file_export
                                    </span>
                                </a>
                                <a href="{{ route('reports.company-and-invoice') }}" type="button"
                                    class="flex items-center content-center px-3.5 py-1.5 text-sm hover:bg-stone-100 transition-all rounded-lg text-stone-400">
                                    <span class="material-symbols-rounded text-stone-400">refresh</span>
                                </a>
                            </nav>
                        </div>
                    </header>

                </div>

                <div class="flow-root mt-4">
                    <div class="-my-2 overflow-x-auto">
                        <div class="inline-block min-w-full py-2 align-middle">
                            @if($companies->count() > 0)
                            @foreach($companies as $companyData)
                            <!-- Company header row -->
                            <div class="">
                                <div class="p-3 text-lg font-bold text-stone-700">
                                    {{ $companyData['company']->name }}
                                </div>
                            </div>

                            <!-- Company invoices table -->
                            <div class="overflow-hidden rounded-t-lg shadow">
                                <table class="min-w-full divide-y table-auto divide-stone-300">
                                    <thead class="bg-stone-100">
                                        <tr>
                                            <th scope="col"
                                                class="px-4 py-2 text-xs font-medium tracking-wider text-left uppercase text-stone-500">
                                                Tarih
                                            </th>
                                            <th scope="col"
                                                class="px-4 py-2 text-xs font-medium tracking-wider text-left uppercase text-stone-500">
                                                Tip
                                            </th>
                                            <th scope="col"
                                                class="px-4 py-2 text-xs font-medium tracking-wider text-left uppercase text-stone-500">
                                                Fatura No
                                            </th>
                                            <th scope="col"
                                                class="px-4 py-2 text-xs font-medium tracking-wider text-right uppercase text-stone-500">
                                                Tutar
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-stone-200">
                                        @foreach($companyData['invoices'] as $invoice)
                                        <tr class="transition-all hover:bg-stone-50">
                                            <td class="px-4 py-2 text-sm w-36 whitespace-nowrap text-stone-500">
                                                {{ date('d.m.Y', strtotime($invoice->date)) }}
                                            </td>
                                            <td class="px-4 py-2 text-sm w-28 whitespace-nowrap text-stone-500">
                                                @if(in_array($invoice->type, ['sales_invoice', 'sales_receipt']))
                                                <span class="font-semibold text-teal-600">SATIŞ</span>
                                                @elseif(in_array($invoice->type, ['purchase_invoice',
                                                'purchase_receipt']))
                                                <span class="font-semibold text-rose-600">ALIŞ</span>
                                                @else
                                                <span class="text-stone-500">{{ ucfirst($invoice->type) }}</span>
                                                @endif
                                            </td>
                                            <td class="px-4 py-2 text-sm font-medium whitespace-nowrap text-stone-900">
                                                <a href="{{ route('invoices.show', $invoice->id) }}">{{ $invoice->number
                                                    }}</a>
                                            </td>
                                            <td
                                                class="px-4 py-2 text-sm font-bold text-right whitespace-nowrap text-stone-700">
                                                {{ number_format($invoice->total_amount, 2, ',', '.') }} {{
                                                $invoice->currency }}
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>

                            <!-- Company total row -->
                            <div class="mb-6 rounded-b-lg shadow bg-stone-100">
                                <div class="px-3 py-2 font-bold text-right text-stone-700">
                                    {{ number_format($companyData['total_amount'], 2, ',', '.') }} {{
                                    $invoice->currency ?? 'TRL' }}
                                </div>
                            </div>
                            @endforeach
                            @else
                            <x-alert-standard color="stone">
                                Seçili aralıkta veri bulunmuyor.
                            </x-alert-standard>
                            @endif
                        </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 only the table content without the filter menus
        let tableContent = document.querySelector('.flow-root').innerHTML;

        // Create HTML for the print window
        let html = `
        <!DOCTYPE html>
        <html>
        <head>
            <title>Şirketlere Göre Faturalar Raporu</title>
            <meta charset="utf-8">
            <style>
                body { font-family: Arial, sans-serif; margin: 20px; }
                table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
                th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
                th { background-color: #f2f2f2; }
                .company-header { background-color: #e2e2e2; padding: 10px; font-weight: bold; margin: 5px 0; }
                .company-total { background-color: #f0f0f0; padding: 10px; text-align: right; font-weight: bold; margin: 5px 0; }
                .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>Şirketlere Göre Faturalar</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="content">${tableContent}</div>

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

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

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