@extends('layouts.app')

@section('content')

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

                    {{-- BAŞLIK + TİP FİLTRESİ --}}
                    <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="flex flex-wrap items-center content-center" 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">
                                    TEKRARLAYAN GELİR / GİDER RAPORU</div>
                                <a href="{{ route('recurring-movements.report', ['filter' => 'payment', 'date' => request()->query('date', 'this_month'), 'from' => request()->query('from'), 'to' => request()->query('to')]) }}"
                                    type="button"
                                    class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ $filter == 'payment' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">
                                    Gider Ödemeleri</a>
                                <a href="{{ route('recurring-movements.report', ['filter' => 'income', 'date' => request()->query('date', 'this_month'), 'from' => request()->query('from'), 'to' => request()->query('to')]) }}"
                                    type="button"
                                    class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ $filter == 'income' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">Gelirler</a>
                                <a href="{{ route('recurring-movements.report', ['filter' => 'statement', 'date' => request()->query('date', 'this_month'), 'from' => request()->query('from'), 'to' => request()->query('to')]) }}"
                                    type="button"
                                    class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ $filter == 'statement' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">Ekstreler</a>
                                <a href="{{ route('recurring-movements.report', ['filter' => 'all', 'date' => request()->query('date', 'this_month'), 'from' => request()->query('from'), 'to' => request()->query('to')]) }}"
                                    type="button"
                                    class="px-3.5 py-2 text-sm hover:bg-stone-100 hover:rounded-r-lg transition-all {{ $filter == 'all' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">Tümü</a>
                            </nav>
                        </div>
                    </header>

                    {{-- PERİYOT KISAYOLLARI --}}
                    <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('recurring-movements.report', ['filter' => $filter, '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('recurring-movements.report', ['filter' => $filter, 'date' => 'this_quarter']) }}"
                                    type="button"
                                    class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ request()->query('date', 'this_month') == 'this_quarter' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">Bu
                                    çeyrek</a>
                                <a href="{{ route('recurring-movements.report', ['filter' => $filter, 'date' => 'this_year']) }}"
                                    type="button"
                                    class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ request()->query('date', 'this_month') == 'this_year' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">Bu
                                    yıl</a>
                                <a href="{{ route('recurring-movements.report', ['filter' => $filter, 'date' => 'this_year_remaining']) }}"
                                    type="button"
                                    class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ request()->query('date', 'this_month') == 'this_year_remaining' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">Bu
                                    yıl (Kalan)</a>
                                <a href="{{ route('recurring-movements.report', ['filter' => $filter, 'date' => 'next_12_months']) }}"
                                    type="button"
                                    class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ request()->query('date', 'this_month') == 'next_12_months' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">Önümüzdeki
                                    12 ay</a>
                            </nav>
                        </div>
                    </header>

                    {{-- ÖZEL ARALIK --}}
                    <header class="rounded-lg shadow bg-gradient-to-b from-stone-100 to-white">
                        <form action="{{ route('recurring-movements.report') }}" method="GET"
                            class="flex items-center content-center px-2 py-1 gap-x-1">
                            <input type="hidden" name="filter" value="{{ $filter }}">
                            <input type="hidden" name="date" value="custom">
                            <input type="date" name="from"
                                value="{{ request()->query('from', $from->format('Y-m-d')) }}"
                                class="block px-2 py-1 text-xs bg-white rounded-md text-stone-900 focus:outline" />
                            <span class="text-xs text-stone-400">→</span>
                            <input type="date" name="to" value="{{ request()->query('to', $to->format('Y-m-d')) }}"
                                class="block px-2 py-1 text-xs bg-white rounded-md text-stone-900 focus:outline" />
                            <button type="submit"
                                class="px-2.5 py-1 text-xs text-stone-500 hover:bg-stone-100 transition-all {{ request()->query('date') == 'custom' ? 'font-bold text-stone-700 bg-stone-300/30 rounded' : '' }}">Getir</button>
                        </form>
                    </header>

                    {{-- YAZDIR --}}
                    <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 text-stone-400">
                                    <span class="material-symbols-rounded text-stone-400">
                                        print
                                    </span>
                                </a>
                                <a href="{{ route('recurring-movements.report') }}" 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>

                {{-- Income, expenses, and net balance by currency. --}}
                <p class="mt-4 text-xs text-stone-500">
                    Seçili aralık için tahmini tutarlar gösterilir. Net = Gelir − Gider. Ekstreler giderlere dahildir.
                </p>
                @if ($currencies->count() > 0)
                <div id="report-summary" class="grid grid-cols-1 gap-2 mt-4 sm:grid-cols-2 xl:grid-cols-3">
                    @foreach ($currencies as $currency)
                    <div class="p-4 rounded-lg shadow bg-gradient-to-b from-stone-100 to-white">
                        <p class="text-xs tracking-wide uppercase text-stone-500">Seçili periyot · {{ $currency }}</p>
                        <dl class="mt-3 space-y-2">
                            <div class="flex flex-wrap items-baseline justify-between gap-x-3 text-emerald-700">
                                <dt class="text-sm">Toplam Gelir</dt>
                                <dd class="text-lg font-bold">{{ number_format($grandTotals[$currency]['income'], 2,
                                    ',', '.') }} {{ $currency }}</dd>
                            </div>
                            <div class="flex flex-wrap items-baseline justify-between gap-x-3 text-rose-700">
                                <dt class="text-sm">Toplam Gider</dt>
                                <dd class="text-lg font-bold">{{ number_format($grandTotals[$currency]['expense'], 2,
                                    ',', '.') }} {{ $currency }}</dd>
                            </div>
                            <div
                                class="flex flex-wrap items-baseline justify-between pt-2 border-t border-stone-200 gap-x-3 text-stone-700">
                                <dt class="text-sm font-medium">Net (Gelir − Gider)</dt>
                                <dd class="text-lg font-bold">{{ number_format($grandTotals[$currency]['net'], 2, ',',
                                    '.') }} {{ $currency }}</dd>
                            </div>
                        </dl>
                    </div>
                    @endforeach
                    @if ($currencies->count() > 1 || ($currencies->count() === 1 && $currencies->first() !== 'TRL'))
                    <div class="p-4 rounded-lg shadow bg-gradient-to-b from-teal-50 to-white ring-1 ring-teal-200">
                        <p class="text-xs tracking-wide text-teal-700 uppercase">Tahmini TL karşılığı</p>
                        <dl class="mt-3 space-y-2">
                            <div class="flex flex-wrap items-baseline justify-between gap-x-3 text-emerald-700">
                                <dt class="text-sm">Toplam Gelir</dt>
                                <dd class="text-lg font-bold">{{ number_format($trlEquivalent['income'], 2, ',', '.') }}
                                    TRL</dd>
                            </div>
                            <div class="flex flex-wrap items-baseline justify-between gap-x-3 text-rose-700">
                                <dt class="text-sm">Toplam Gider</dt>
                                <dd class="text-lg font-bold">{{ number_format($trlEquivalent['expense'], 2, ',', '.')
                                    }} TRL</dd>
                            </div>
                            <div
                                class="flex flex-wrap items-baseline justify-between pt-2 border-t border-teal-200 gap-x-3 text-stone-700">
                                <dt class="text-sm font-medium">Net (Gelir − Gider)</dt>
                                <dd class="text-lg font-bold">{{ number_format($trlEquivalent['net'], 2, ',', '.') }}
                                    TRL</dd>
                            </div>
                        </dl>
                        @if (count($missingRates) > 0)
                        <p class="mt-2 text-xs text-stone-500">
                            Kur bulunamadı: {{ implode(', ', $missingRates) }} (TL gelir, gider ve net hesaplamasına
                            dahil edilmedi)
                        </p>
                        @endif
                    </div>
                    @endif
                </div>
                @endif

                {{-- KALEM BAZLI TABLO --}}
                <div class="flow-root mt-4">
                    <div class="-my-2 overflow-x-auto">
                        <div class="inline-block min-w-full py-2 align-middle">
                            <table class="min-w-full divide-y divide-stone-300">
                                <thead>
                                    <tr class="p-2 text-sm font-light whitespace-nowrap text-stone-500">
                                        <th scope="col" class="p-2 text-left">İşlem Kalemi</th>
                                        <th scope="col" class="p-2 text-left">Gelir / Gider</th>
                                        <th scope="col" class="p-2 text-left">Periyot</th>
                                        <th scope="col" class="p-2 text-right">Birim Tutar</th>
                                        <th scope="col" class="p-2 text-right">Tekrar Sayısı</th>
                                        <th scope="col" class="p-2 text-left">İlk / Son Tekrar</th>
                                        <th scope="col" class="p-2 text-right">Seçili Periyot Toplamı</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-stone-200">
                                    @if ($rows->count() > 0)
                                    @foreach ($rows as $row)
                                    <tr class="transition-all hover:bg-stone-100">
                                        <td class="px-2 py-2 text-sm font-medium text-stone-900 whitespace-nowrap">
                                            {{ $row['movement']->title }}
                                            @if ($row['movement']->type == 'statement')
                                            <span
                                                class="ml-1 inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-sky-100 text-sky-700">EKSTRE</span>
                                            @endif
                                        </td>
                                        <td class="px-2 py-2 text-sm whitespace-nowrap">
                                            <span
                                                class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium {{ $row['direction'] === 'income' ? 'bg-emerald-100 text-emerald-700' : 'bg-rose-100 text-rose-700' }}">
                                                {{ $row['direction'] === 'income' ? 'GELİR' : 'GİDER' }}
                                            </span>
                                        </td>
                                        <td class="px-2 py-2 text-sm text-stone-500 whitespace-nowrap">
                                            {{ $row['movement']->period_label }}
                                        </td>
                                        <td class="px-2 py-2 text-sm text-right text-stone-500 whitespace-nowrap">
                                            {{ number_format($row['movement']->amount, 2, ',', '.') }}
                                            {{ $row['currency'] }}
                                        </td>
                                        <td class="px-2 py-2 text-sm text-right text-stone-500 whitespace-nowrap">
                                            {{ $row['occurrence_count'] }}
                                        </td>
                                        <td class="px-2 py-2 text-sm text-stone-500 whitespace-nowrap">
                                            {{ $row['first_date']->format('d.m.Y') }} /
                                            {{ $row['last_date']->format('d.m.Y') }}
                                        </td>
                                        <td
                                            class="px-2 py-2 text-sm font-bold text-right text-stone-600 whitespace-nowrap">
                                            {{ number_format($row['total'], 2, ',', '.') }}
                                            {{ $row['currency'] }}
                                        </td>
                                    </tr>
                                    @endforeach
                                    @else
                                    <tr>
                                        <td colspan="7" class="px-2 py-4 text-sm text-center text-stone-500">
                                            Seçili aralıkta tekrarlayan işlem bulunmuyor.
                                        </td>
                                    </tr>
                                    @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                {{-- AY BAZINDA DAĞILIM --}}
                @if (count($monthlyTotals) > 0)
                <div class="mt-6">
                    <h3 class="flex items-center mb-2 text-lg leading-6 gap-x-1 font-jbmono-bold text-stone-700">
                        <span class="material-symbols-rounded">calendar_month</span>
                        Ay Bazında Dağılım
                    </h3>
                    <div class="-my-2 overflow-x-auto">
                        <div class="inline-block min-w-full py-2 align-middle">
                            <table class="min-w-full divide-y divide-stone-300">
                                <thead>
                                    <tr class="p-2 text-sm font-light whitespace-nowrap text-stone-500">
                                        <th scope="col" rowspan="2" class="p-2 text-left">Ay</th>
                                        @foreach ($currencies as $currency)
                                        <th scope="colgroup" colspan="3"
                                            class="p-2 text-center border-l border-stone-200">{{ $currency }}</th>
                                        @endforeach
                                    </tr>
                                    <tr class="text-xs whitespace-nowrap">
                                        @foreach ($currencies as $currency)
                                        <th scope="col"
                                            class="p-2 text-right border-l border-stone-200 text-emerald-700">Gelir</th>
                                        <th scope="col" class="p-2 text-right text-rose-700">Gider</th>
                                        <th scope="col" class="p-2 text-right text-stone-700">Net (Gelir − Gider)</th>
                                        @endforeach
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-stone-200">
                                    @foreach ($monthlyTotals as $monthKey => $monthTotals)
                                    <tr class="transition-all hover:bg-stone-100">
                                        <td
                                            class="px-2 py-2 text-sm font-medium capitalize text-stone-900 whitespace-nowrap">
                                            {{ \Carbon\Carbon::parse($monthKey . '-01')->locale('tr')->isoFormat('MMMM
                                            YYYY') }}
                                        </td>
                                        @foreach ($currencies as $currency)
                                        <td
                                            class="px-2 py-2 text-sm text-right border-l border-stone-200 text-emerald-700 whitespace-nowrap">
                                            {{ number_format($monthTotals[$currency]['income'] ?? '0.00', 2, ',', '.')
                                            }}
                                        </td>
                                        <td class="px-2 py-2 text-sm text-right text-rose-700 whitespace-nowrap">
                                            {{ number_format($monthTotals[$currency]['expense'] ?? '0.00', 2, ',', '.')
                                            }}
                                        </td>
                                        <td
                                            class="px-2 py-2 text-sm font-bold text-right text-stone-700 whitespace-nowrap">
                                            {{ number_format($monthTotals[$currency]['net'] ?? '0.00', 2, ',', '.') }}
                                        </td>
                                        @endforeach
                                    </tr>
                                    @endforeach
                                </tbody>
                                <tfoot>
                                    <tr class="bg-stone-100">
                                        <td class="px-2 py-2 text-sm font-bold text-stone-700 whitespace-nowrap">
                                            GENEL
                                            TOPLAM</td>
                                        @foreach ($currencies as $currency)
                                        <td
                                            class="px-2 py-2 text-sm font-bold text-right border-l border-stone-200 text-emerald-700 whitespace-nowrap">
                                            {{ number_format($grandTotals[$currency]['income'], 2, ',', '.') }}
                                        </td>
                                        <td
                                            class="px-2 py-2 text-sm font-bold text-right text-rose-700 whitespace-nowrap">
                                            {{ number_format($grandTotals[$currency]['expense'], 2, ',', '.') }}
                                        </td>
                                        <td
                                            class="px-2 py-2 text-sm font-bold text-right text-stone-700 whitespace-nowrap">
                                            {{ number_format($grandTotals[$currency]['net'], 2, ',', '.') }}
                                        </td>
                                        @endforeach
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
                @endif

            </div>
        </div>
    </main>
</div>

@endsection

@section('scripts')
<script>
    function printTable() {
            let printWindow = window.open('', '_blank');
            let tables = Array.from(document.querySelectorAll('table')).map(t => t.cloneNode(true));

            let html = `
    <!DOCTYPE html>
    <html>
    <head>
        <title>Tekrarlayan Gelir / Gider Raporu</title>
        <meta charset="utf-8">
        <style>
            body { font-family: Arial, sans-serif; margin: 20px; }
            table { width: 100%; border-collapse: collapse; margin-bottom: 30px; }
            th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
            th { background-color: #f2f2f2; }
            #report-summary { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
            #report-summary > div { border: 1px solid #ddd; padding: 12px; min-width: 240px; break-inside: avoid; }
            #report-summary dl > div { display: flex; justify-content: space-between; gap: 16px; margin-top: 8px; }
            #report-summary dd { margin: 0; font-weight: bold; }
            .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>Tekrarlayan Gelir / Gider Raporu</h1>
            <p>Aralık: {{ $from->format('d.m.Y') }} - {{ $to->format('d.m.Y') }}</p>
            <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>
    `;

            printWindow.document.write(html);
            let container = printWindow.document.getElementById('table-container');
            let summary = document.getElementById('report-summary');
            if (summary) {
                container.appendChild(summary.cloneNode(true));
            }
            tables.forEach(table => container.appendChild(table));
            printWindow.document.close();
        }
</script>
@endsection