@extends('layouts.app')

@section('content')
    {{-- İŞLEV ÇUBUĞU --}}
    <header class="w-full px-4">
        <!-- Report Header -->
        <div class="pb-4 sm:flex sm:items-start gap-x-4">
            <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-lg">
                            MALİ RAPOR</div>
                    </nav>
                </div>
            </header>
            <!-- Action Buttons -->
            <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="printMaliReport(); 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 hover:text-stone-700">
                            <span class="material-symbols-rounded text-stone-400">
                                print
                            </span>
                        </a>
                        <a href="{{ route('reports.mali-report.export', ['period' => $period, 'year' => $year, 'value' => $value, 'date' => $period == 'day' ? $startDate->toDateString() : null]) }}"
                            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 hover:text-stone-700">
                            <span class="material-symbols-rounded">
                                file_export
                            </span>
                        </a>
                    </nav>
                </div>
            </header>
        </div>
    </header>

    <div class="">
        <main>
            <div class="px-4 pt-4 mx-auto max-w-screen-7xl pb-60">

                <!-- Period Navigation -->
                <div class="p-4 mb-6 bg-white border rounded-lg shadow-sm border-stone-200">
                    <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
                        <div>
                            <h2 class="text-xl font-semibold text-stone-800">
                                {{ $periodLabel }} - Mali Rapor
                            </h2>
                            <p class="mt-1 text-sm text-stone-500">
                                {{ $startDate->translatedFormat('d.m.Y') }} - {{ $endDate->translatedFormat('d.m.Y') }}
                                <span class="text-stone-400">· Vergi oranlarına göre kırılım raporu</span>
                            </p>
                        </div>

                        <!-- Period Selector -->
                        <form method="GET" action="{{ route('reports.mali-report') }}"
                            class="flex flex-wrap items-end gap-2">
                            <div class="flex flex-col">
                                <label for="period-select" class="mb-1 text-xs text-stone-500">Dönem Tipi</label>
                                <select id="period-select" name="period"
                                    class="py-2 pl-3 pr-8 text-sm border rounded-md border-stone-300 bg-stone-50 focus:outline-none focus:ring-2 focus:ring-stone-500">
                                    <option value="day" {{ $period == 'day' ? 'selected' : '' }}>Günlük</option>
                                    <option value="month" {{ $period == 'month' ? 'selected' : '' }}>Aylık</option>
                                    <option value="quarter" {{ $period == 'quarter' ? 'selected' : '' }}>3 Aylık</option>
                                    <option value="half" {{ $period == 'half' ? 'selected' : '' }}>Yarı Yıl</option>
                                    <option value="year" {{ $period == 'year' ? 'selected' : '' }}>Yıllık</option>
                                </select>
                            </div>

                            <div class="flex flex-col" id="date-wrapper"
                                style="{{ $period == 'day' ? '' : 'display:none' }}">
                                <label for="date-input" class="mb-1 text-xs text-stone-500">Tarih</label>
                                <input type="date" id="date-input" name="date"
                                    value="{{ $period == 'day' ? $startDate->toDateString() : now()->toDateString() }}"
                                    class="py-2 pl-3 pr-3 text-sm border rounded-md border-stone-300 bg-stone-50 focus:outline-none focus:ring-2 focus:ring-stone-500">
                            </div>

                            <div class="flex flex-col" id="value-wrapper">
                                <label for="value-select" class="mb-1 text-xs text-stone-500">Dilim</label>
                                <select id="value-select" name="value"
                                    class="py-2 pl-3 pr-8 text-sm border rounded-md border-stone-300 bg-stone-50 focus:outline-none focus:ring-2 focus:ring-stone-500">
                                    {{-- JS ile doldurulur --}}
                                </select>
                            </div>

                            <div class="flex flex-col" id="year-wrapper"
                                style="{{ $period == 'day' ? 'display:none' : '' }}">
                                <label for="year-select" class="mb-1 text-xs text-stone-500">Yıl</label>
                                <select id="year-select" name="year"
                                    class="py-2 pl-3 pr-8 text-sm border rounded-md border-stone-300 bg-stone-50 focus:outline-none focus:ring-2 focus:ring-stone-500">
                                    @foreach ($availableYears as $availableYear)
                                        <option value="{{ $availableYear }}"
                                            {{ $year == $availableYear ? 'selected' : '' }}>
                                            {{ $availableYear }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <button type="submit"
                                class="px-4 py-2 text-sm text-white transition-colors rounded-md bg-stone-600 hover:bg-stone-700">
                                Görüntüle
                            </button>
                        </form>
                    </div>
                </div>

                <!-- Summary Section -->
                <div class="mb-6">
                    <h3 class="mb-4 text-lg font-medium text-stone-700">Dönem Özeti</h3>
                    <dl class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-5">
                        <div class="px-4 py-5 overflow-hidden bg-white border rounded-lg shadow-sm border-stone-200">
                            <dt class="text-sm font-medium text-gray-500 truncate">Toplam Brüt Satış</dt>
                            <dd class="mt-1 text-2xl font-semibold tracking-tight text-gray-900">
                                {{ number_format($totals['gross_sales'], 2, ',', '.') }} ₺
                            </dd>
                        </div>
                        <div class="px-4 py-5 overflow-hidden bg-white border rounded-lg shadow-sm border-stone-200">
                            <dt class="text-sm font-medium text-gray-500 truncate">Net Satış (Tahsilatlar)</dt>
                            <dd class="mt-1 text-2xl font-semibold tracking-tight text-emerald-600">
                                {{ number_format($totals['net_sales'], 2, ',', '.') }} ₺
                            </dd>
                        </div>
                        <div class="px-4 py-5 overflow-hidden bg-white border rounded-lg shadow-sm border-stone-200">
                            <dt class="text-sm font-medium text-gray-500 truncate">Toplam KDV</dt>
                            <dd class="mt-1 text-2xl font-semibold tracking-tight text-gray-900">
                                {{ number_format($totals['vat'], 2, ',', '.') }} ₺
                            </dd>
                        </div>
                        <div class="px-4 py-5 overflow-hidden bg-white border rounded-lg shadow-sm border-stone-200">
                            <dt class="text-sm font-medium text-gray-500 truncate">Toplam İndirim</dt>
                            <dd class="mt-1 text-2xl font-semibold tracking-tight text-orange-600">
                                {{ number_format($totals['discount'], 2, ',', '.') }} ₺
                            </dd>
                        </div>
                        <div class="px-4 py-5 overflow-hidden bg-white border rounded-lg shadow-sm border-stone-200">
                            <dt class="text-sm font-medium text-gray-500 truncate">Toplam Satış Adedi</dt>
                            <dd class="mt-1 text-2xl font-semibold tracking-tight text-blue-600">
                                {{ number_format($totals['num_sales']) }}
                            </dd>
                        </div>
                    </dl>
                </div>

                <div class="grid sm:flex sm:gap-x-6">
                    <!-- VAT Breakdown Table (CORE) -->
                    <div class="mb-6 overflow-hidden bg-white border rounded-lg shadow-sm border-stone-200 sm:w-1/2">
                        <div class="px-4 py-4 border-b border-stone-200 bg-stone-50">
                            <h3 class="text-lg font-medium text-stone-700">Vergi Oranlarına Göre Dağılım</h3>
                        </div>

                        @if ($vatBreakdown->count() > 0)
                            <div class="overflow-x-auto">
                                <table id="vat-breakdown-table" class="min-w-full text-xs divide-y divide-stone-200">
                                    <thead class="bg-stone-50">
                                        <tr>
                                            <th scope="col"
                                                class="pl-4 pr-2 py-2 text-left text-[12px] font-medium text-stone-500 uppercase tracking-wider whitespace-nowrap">
                                                KDV Oranı
                                            </th>
                                            <th scope="col"
                                                class="px-2 py-2 text-right text-[12px] font-medium text-stone-500 uppercase tracking-wider whitespace-nowrap">
                                                Matrah (KDV Hariç)
                                            </th>
                                            <th scope="col"
                                                class="px-2 py-2 text-right text-[12px] font-medium text-stone-500 uppercase tracking-wider whitespace-nowrap">
                                                KDV Tutarı
                                            </th>
                                            <th scope="col"
                                                class="px-2 py-2 text-right text-[12px] font-medium text-stone-500 uppercase tracking-wider whitespace-nowrap">
                                                Net (KDV Dahil)
                                            </th>
                                            <th scope="col"
                                                class="px-4 py-2 text-right text-[12px] font-medium text-stone-500 uppercase tracking-wider whitespace-nowrap">
                                                Adet
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-stone-200">
                                        @foreach ($vatBreakdown as $row)
                                            <tr class="transition-colors hover:bg-stone-50">
                                                <td
                                                    class="pl-4 pr-2 py-2 whitespace-nowrap text-[12px] font-medium text-stone-900">
                                                    %{{ number_format($row->vat_pct, 0) }}
                                                </td>
                                                <td
                                                    class="px-2 py-2 whitespace-nowrap text-[12px] text-right text-stone-700">
                                                    {{ number_format($row->base_total, 2, ',', '.') }}
                                                </td>
                                                <td
                                                    class="px-2 py-2 whitespace-nowrap text-[12px] text-right font-medium text-stone-900">
                                                    {{ number_format($row->vat_total, 2, ',', '.') }}
                                                </td>
                                                <td
                                                    class="px-2 py-2 whitespace-nowrap text-[12px] text-right text-emerald-600">
                                                    {{ number_format($row->gross_total, 2, ',', '.') }}
                                                </td>
                                                <td
                                                    class="px-4 py-2 whitespace-nowrap text-[12px] text-right text-blue-600 font-medium">
                                                    {{ number_format($row->quantity, 2, ',', '.') }}
                                                </td>
                                            </tr>
                                        @endforeach
                                        <tr class="font-semibold border-t-2 bg-stone-100 border-stone-300">
                                            <td
                                                class="pl-4 pr-2 py-2 whitespace-nowrap text-[12px] font-bold text-stone-900">
                                                TOPLAM
                                            </td>
                                            <td class="px-2 py-2 whitespace-nowrap text-[12px] text-right text-stone-900">
                                                {{ number_format($vatBreakdown->sum('base_total'), 2, ',', '.') }}
                                            </td>
                                            <td
                                                class="px-2 py-2 whitespace-nowrap text-[12px] text-right font-bold text-stone-900">
                                                {{ number_format($vatBreakdown->sum('vat_total'), 2, ',', '.') }}
                                            </td>
                                            <td
                                                class="px-2 py-2 whitespace-nowrap text-[12px] text-right font-bold text-emerald-600">
                                                {{ number_format($vatBreakdown->sum('gross_total'), 2, ',', '.') }}
                                            </td>
                                            <td
                                                class="px-4 py-2 whitespace-nowrap text-[12px] text-right text-blue-600 font-bold">
                                                {{ number_format($vatBreakdown->sum('quantity'), 2, ',', '.') }}
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        @else
                            <div class="px-6 py-12 text-center">
                                <svg class="w-12 h-12 mx-auto text-stone-400" fill="none" viewBox="0 0 24 24"
                                    stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                                </svg>
                                <h3 class="mt-2 text-sm font-medium text-stone-900">Veri Bulunamadı</h3>
                                <p class="mt-1 text-sm text-stone-500">Seçilen dönem için satış verisi bulunmamaktadır.</p>
                            </div>
                        @endif
                    </div>

                    <!-- Payment Method Breakdown -->
                    <div class="mb-6 overflow-hidden bg-white border rounded-lg shadow-sm border-stone-200 sm:w-1/2">
                        <div class="px-4 py-4 border-b border-stone-200 bg-stone-50">
                            <h3 class="text-lg font-medium text-stone-700">Ödeme Yöntemlerine Göre Dağılım</h3>
                        </div>
                        @if ($paymentBreakdown->count() > 0)
                            <div class="overflow-x-auto">
                                <table class="min-w-full text-xs divide-y divide-stone-200">
                                    <thead class="bg-stone-50">
                                        <tr>
                                            <th
                                                class="pl-4 pr-2 py-2 text-left text-[12px] font-medium text-stone-500 uppercase tracking-wider whitespace-nowrap">
                                                Ödeme Yöntemi</th>
                                            <th
                                                class="px-4 py-2 text-right text-[12px] font-medium text-stone-500 uppercase tracking-wider whitespace-nowrap">
                                                Tutar</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-stone-200">
                                        @foreach ($paymentBreakdown as $payment)
                                            <tr class="transition-colors hover:bg-stone-50">
                                                <td
                                                    class="pl-4 pr-2 py-2 whitespace-nowrap text-[12px] font-medium text-stone-900">
                                                    {{ $payment->label }}</td>
                                                <td
                                                    class="px-4 py-2 whitespace-nowrap text-[12px] text-right text-stone-700">
                                                    {{ number_format($payment->total, 2, ',', '.') }}</td>
                                            </tr>
                                        @endforeach
                                        <tr class="font-semibold border-t-2 bg-stone-100 border-stone-300">
                                            <td
                                                class="pl-4 pr-2 py-2 whitespace-nowrap text-[12px] font-bold text-stone-900">
                                                TOPLAM</td>
                                            <td
                                                class="px-4 py-2 whitespace-nowrap text-[12px] text-right font-bold text-emerald-600">
                                                {{ number_format($paymentBreakdown->sum('total'), 2, ',', '.') }}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        @else
                            <div class="px-6 py-12 text-center">
                                <h3 class="mt-2 text-sm font-medium text-stone-900">Veri Bulunamadı</h3>
                                <p class="mt-1 text-sm text-stone-500">Seçilen dönem için ödeme verisi bulunmamaktadır.</p>
                            </div>
                        @endif
                    </div>
                </div>

            </div>
        </main>
    </div>
@endsection

@section('scripts')
    <script>
        // Dönem tipine göre "Dilim" seçeneklerini doldur
        (function() {
            const currentPeriod = @json($period);
            const currentValue = {{ (int) $value }};

            const monthNames = ['Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran',
                'Temmuz', 'Ağustos', 'Eylül', 'Ekim', 'Kasım', 'Aralık'
            ];

            const optionSets = {
                day: [],
                month: monthNames.map((name, i) => ({
                    value: i + 1,
                    label: name
                })),
                quarter: [{
                        value: 1,
                        label: '1. Çeyrek (Ocak-Mart)'
                    },
                    {
                        value: 2,
                        label: '2. Çeyrek (Nisan-Haziran)'
                    },
                    {
                        value: 3,
                        label: '3. Çeyrek (Temmuz-Eylül)'
                    },
                    {
                        value: 4,
                        label: '4. Çeyrek (Ekim-Aralık)'
                    },
                ],
                half: [{
                        value: 1,
                        label: '1. Yarıyıl (Ocak-Haziran)'
                    },
                    {
                        value: 2,
                        label: '2. Yarıyıl (Temmuz-Aralık)'
                    },
                ],
                year: [],
            };

            const periodSelect = document.getElementById('period-select');
            const valueSelect = document.getElementById('value-select');
            const valueWrapper = document.getElementById('value-wrapper');
            const dateWrapper = document.getElementById('date-wrapper');
            const yearWrapper = document.getElementById('year-wrapper');

            function populateValues(period, selectedValue) {
                const isDay = period === 'day';

                // Günlük: sadece tarih alanı; diğerleri: dilim (varsa) + yıl
                dateWrapper.style.display = isDay ? '' : 'none';
                yearWrapper.style.display = isDay ? 'none' : '';

                const options = optionSets[period] || [];
                valueSelect.innerHTML = '';

                if (isDay || options.length === 0) {
                    valueWrapper.style.display = 'none';
                    return;
                }

                valueWrapper.style.display = '';
                options.forEach(opt => {
                    const el = document.createElement('option');
                    el.value = opt.value;
                    el.textContent = opt.label;
                    if (parseInt(selectedValue, 10) === opt.value) {
                        el.selected = true;
                    }
                    valueSelect.appendChild(el);
                });
            }

            // İlk yükleme
            populateValues(currentPeriod, currentValue);

            // Dönem tipi değişince dilim listesini yenile
            periodSelect.addEventListener('change', function() {
                populateValues(this.value, 1);
            });
        })();

        // Yazdırma - iframe tabanlı, popup açmaz
        function printMaliReport() {
            const vatTable = document.getElementById('vat-breakdown-table');
            if (!vatTable) return;

            const periodLabel = @json($periodLabel);

            const iframe = document.createElement('iframe');
            iframe.style.position = 'fixed';
            iframe.style.right = '0';
            iframe.style.bottom = '0';
            iframe.style.width = '0';
            iframe.style.height = '0';
            iframe.style.border = '0';
            document.body.appendChild(iframe);

            const doc = iframe.contentWindow.document;
            doc.open();
            doc.write(`
            <!DOCTYPE html>
            <html lang="tr">
            <head>
                <meta charset="UTF-8">
                <title>Mali Rapor - ${periodLabel}</title>
                <style>
                    body { font-family: Arial, sans-serif; margin: 20px; font-size: 11px; }
                    h2 { text-align: center; margin-bottom: 5px; font-size: 16px; }
                    p { text-align: center; margin-bottom: 15px; color: #666; font-size: 12px; }
                    table { width: 100%; border-collapse: collapse; font-size: 10px; }
                    th, td { border: 1px solid #ccc; padding: 4px 6px; }
                    th { background-color: #f5f5f4; font-weight: bold; text-transform: uppercase; font-size: 9px; }
                    td { text-align: right; }
                    td:first-child { text-align: left; }
                    th:first-child { text-align: left; }
                    @media print { @page { margin: 10mm; } }
                </style>
            </head>
            <body>
                <h2>Mali Rapor</h2>
                <p>${periodLabel} - Vergi Oranlarına Göre KDV Dağılımı</p>
                ${vatTable.outerHTML}
            </body>
            </html>
        `);
            doc.close();

            iframe.onload = function() {
                iframe.contentWindow.focus();
                iframe.contentWindow.print();
                setTimeout(() => document.body.removeChild(iframe), 1000);
            };
        }
    </script>
@endsection