@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">

                    {{-- 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="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">
                                    TEKRARLAYAN İŞLEMLER</div>
                                <a href="{{ route('recurring-movements.index', ['filter' => 'expense', 'status' => $status]) }}"
                                    type="button"
                                    class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ $filter == 'expense' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">
                                    Giderler</a>
                                <a href="{{ route('recurring-movements.index', ['filter' => 'income', 'status' => $status]) }}"
                                    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.index', ['filter' => 'all', 'status' => $status]) }}"
                                    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>

                    {{-- DURUM 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="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">filter_alt</span>
                                </div>
                                <a href="{{ route('recurring-movements.index', ['filter' => $filter, 'status' => 'active']) }}"
                                    type="button"
                                    class="px-3.5 py-2 text-sm hover:bg-stone-100 transition-all {{ $status == 'active' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">Aktif</a>
                                <a href="{{ route('recurring-movements.index', ['filter' => $filter, 'status' => 'all']) }}"
                                    type="button"
                                    class="px-3.5 py-2 text-sm hover:bg-stone-100 hover:rounded-r-lg transition-all {{ $status == 'all' ? 'font-bold text-stone-700 bg-stone-300/30' : 'text-stone-400' }}">Tümü</a>
                            </nav>
                        </div>
                    </header>

                    {{-- YENİ KAYIT + RAPOR --}}
                    <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="{{ route('recurring-movements.create') }}" type="button"
                                    class="flex items-center content-center gap-x-1 px-3.5 py-2 text-sm text-stone-400 hover:bg-stone-100 hover:rounded-l-lg transition-all">
                                    <span class="text-sm material-symbols-rounded text-stone-400">add</span>
                                    Yeni Kayıt</a>
                                <a href="{{ route('recurring-movements.report') }}" type="button"
                                    class="flex items-center content-center gap-x-1 px-3.5 py-2 text-sm text-stone-400 hover:bg-stone-100 hover:rounded-r-lg transition-all">
                                    <span class="text-sm material-symbols-rounded text-stone-400">event_repeat</span>
                                    Maliyet Raporu</a>
                            </nav>
                        </div>
                    </header>

                </div>

                {{-- GRAFİK --}}
                <div class="p-4 mt-4 rounded-lg shadow bg-gradient-to-b from-stone-100 to-white">
                    <div class="flex flex-wrap items-center mb-3 gap-x-3 gap-y-2">
                        <h3 class="text-sm font-medium text-stone-600">
                            <span class="mr-1 text-base align-middle material-symbols-rounded">bar_chart</span>
                            Aylık Gelir / Gider
                        </h3>
                        <div class="flex items-center ml-auto gap-x-2">
                            <a href="{{ route('recurring-movements.index', ['filter' => $filter, 'status' => $status, 'date' => 'this_year_remaining']) }}"
                                class="px-2 py-1 text-xs rounded transition-all {{ request('date', 'this_year_remaining') == 'this_year_remaining' ? 'bg-stone-200 text-stone-700 font-medium' : 'text-stone-400 hover:bg-stone-100' }}">Bu
                                Yıl</a>
                            <a href="{{ route('recurring-movements.index', ['filter' => $filter, 'status' => $status, 'date' => 'next_12_months']) }}"
                                class="px-2 py-1 text-xs rounded transition-all {{ request('date') == 'next_12_months' ? 'bg-stone-200 text-stone-700 font-medium' : 'text-stone-400 hover:bg-stone-100' }}">Son
                                12 Ay</a>
                            <a href="{{ route('recurring-movements.index', ['filter' => $filter, 'status' => $status, 'date' => 'this_year']) }}"
                                class="px-2 py-1 text-xs rounded transition-all {{ request('date') == 'this_year' ? 'bg-stone-200 text-stone-700 font-medium' : 'text-stone-400 hover:bg-stone-100' }}">Tüm
                                Yıl</a>
                            <form action="{{ route('recurring-movements.index') }}" method="GET"
                                class="flex items-center ml-2 gap-x-1">
                                <input type="hidden" name="filter" value="{{ $filter }}">
                                <input type="hidden" name="status" value="{{ $status }}">
                                <input type="hidden" name="date" value="custom">
                                <input type="date" name="from" value="{{ $fromStr }}"
                                    class="text-xs border border-stone-300 rounded px-1.5 py-1 text-stone-600 focus:outline-none focus:ring-1 focus:ring-stone-400">
                                <span class="text-xs text-stone-400">—</span>
                                <input type="date" name="to" value="{{ $toStr }}"
                                    class="text-xs border border-stone-300 rounded px-1.5 py-1 text-stone-600 focus:outline-none focus:ring-1 focus:ring-stone-400">
                                <button type="submit"
                                    class="px-2 py-1 text-xs transition-all rounded text-stone-500 hover:text-stone-700 hover:bg-stone-100">
                                    <span class="text-sm material-symbols-rounded">arrow_forward</span>
                                </button>
                            </form>
                        </div>
                    </div>
                    <div class="relative h-56">
                        <canvas id="recurringChart" data-labels="{{ json_encode($chartLabels) }}"
                            data-income="{{ json_encode($chartIncome) }}"
                            data-expense="{{ json_encode($chartExpense) }}"></canvas>
                    </div>
                </div>

                {{-- BİLDİRİM --}}
                @if (session('message'))
                <div class="mt-4">
                    <x-alert-standard color="teal">
                        {{ session('message') }}
                    </x-alert-standard>
                </div>
                @endif

                {{-- LİSTE --}}
                <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">Başlık</th>
                                        <th scope="col" class="p-2 text-left">İşletme</th>
                                        <th scope="col" class="p-2 text-left">Periyot</th>
                                        <th scope="col" class="p-2 text-right">Tutar</th>
                                        <th scope="col" class="p-2 text-left">Sonraki Tarih</th>
                                        <th scope="col" class="p-2 text-left">Başlangıç / Bitiş</th>
                                        <th scope="col" class="p-2 text-left">Durum</th>
                                        <th scope="col" class="p-2 text-right">İşlemler</th>
                                    </tr>
                                </thead>
                                <tbody class="bg-white divide-y divide-stone-200">
                                    @if ($movements->count() > 0)
                                    @foreach ($movements as $movement)
                                    <tr class="transition-all hover:bg-stone-100">
                                        <td class="px-2 py-2 text-sm font-medium text-stone-900 whitespace-nowrap">
                                            {{ $movement->title }}
                                            @if ($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>
                                            @elseif ($movement->type == 'income')
                                            <span
                                                class="ml-1 inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-emerald-100 text-emerald-700">GELİR</span>
                                            @endif
                                            @if ($movement->category_id)
                                            <span
                                                class="ml-1 inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-stone-200 text-stone-600">{{
                                                $movement->category_label }}</span>
                                            @endif
                                        </td>
                                        <td class="px-2 py-2 text-sm text-stone-500 whitespace-nowrap">
                                            {{ $movement->company ? $movement->company->name : '—' }}
                                        </td>
                                        <td class="px-2 py-2 text-sm text-stone-500 whitespace-nowrap">
                                            {{ $movement->period_label }}
                                        </td>
                                        <td
                                            class="px-2 py-2 text-sm text-right whitespace-nowrap {{ $movement->type == 'income' ? 'text-emerald-600 font-medium' : 'text-stone-500' }}">
                                            {{ $movement->type == 'income' ? '+' : '-' }}{{
                                            number_format($movement->amount, 2, ',', '.') }}
                                            {{ $movement->currency }}
                                        </td>
                                        <td class="px-2 py-2 text-sm text-stone-500 whitespace-nowrap">
                                            {{ $movement->next_date ? $movement->next_date->format('d.m.Y') : '—' }}
                                        </td>
                                        <td class="px-2 py-2 text-sm text-stone-500 whitespace-nowrap">
                                            {{ $movement->start_date ? $movement->start_date->format('d.m.Y') : '—' }}
                                            /
                                            {{ $movement->end_date ? $movement->end_date->format('d.m.Y') : 'Süresiz' }}
                                        </td>
                                        <td class="px-2 py-2 text-sm whitespace-nowrap">
                                            @if ($movement->is_active && $movement->status != 'ended')
                                            <span
                                                class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-emerald-100 text-emerald-700">Aktif</span>
                                            @elseif ($movement->status == 'ended')
                                            <span
                                                class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-stone-200 text-stone-600">Bitti</span>
                                            @else
                                            <span
                                                class="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium bg-amber-100 text-amber-700">Pasif</span>
                                            @endif
                                        </td>
                                        <td class="px-2 py-2 text-sm text-right whitespace-nowrap">
                                            <div class="flex items-center justify-end gap-x-1">
                                                <a href="{{ route('recurring-movements.edit', $movement) }}"
                                                    class="p-1 transition-all text-stone-400 hover:text-stone-600"
                                                    title="Düzenle">
                                                    <span class="material-symbols-rounded">edit</span>
                                                </a>
                                                <form action="{{ route('recurring-movements.toggle', $movement) }}"
                                                    method="POST" class="inline">
                                                    @csrf
                                                    @method('PATCH')
                                                    <button type="submit"
                                                        class="p-1 {{ $movement->is_active ? 'text-amber-500 hover:text-amber-600' : 'text-emerald-500 hover:text-emerald-600' }} transition-all"
                                                        title="{{ $movement->is_active ? 'Pasifleştir' : 'Aktifleştir' }}">
                                                        <span class="material-symbols-rounded">{{ $movement->is_active ?
                                                            'pause_circle' : 'play_circle' }}</span>
                                                    </button>
                                                </form>
                                                <a href="{{ route('recurring-movements.destroy', $movement) }}"
                                                    class="p-1 transition-all text-stone-400 hover:text-red-600"
                                                    title="Sil"
                                                    onclick="return confirm('Bu kaydı silmek istediğinize emin misiniz?');">
                                                    <span class="material-symbols-rounded">delete</span>
                                                </a>
                                            </div>
                                        </td>
                                    </tr>
                                    @endforeach
                                    @else
                                    <x-alert-standard color="stone">
                                        Listelenecek tekrarlayan işlem bulunmuyor.
                                    </x-alert-standard>
                                    @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

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

@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"
    integrity="sha384-NrKB+u6Ts6AtkIhwPixiKTzgSKNblyhlk0Sohlgar9UHUBzai/sgnNNWWd291xqt" crossorigin="anonymous">
</script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        var canvas = document.getElementById('recurringChart');
        if (!canvas || typeof Chart === 'undefined') return;

        var labels = JSON.parse(canvas.dataset.labels || '[]');
        var incomeData = JSON.parse(canvas.dataset.income || '[]');
        var expenseData = JSON.parse(canvas.dataset.expense || '[]');

        new Chart(canvas.getContext('2d'), {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [
                    {
                        label: 'Gelir',
                        data: incomeData,
                        backgroundColor: 'rgba(16, 185, 129, 0.5)',
                        borderColor: 'rgba(16, 185, 129, 1)',
                        borderWidth: 1,
                        borderRadius: 3
                    },
                    {
                        label: 'Gider',
                        data: expenseData,
                        backgroundColor: 'rgba(239, 68, 68, 0.5)',
                        borderColor: 'rgba(239, 68, 68, 1)',
                        borderWidth: 1,
                        borderRadius: 3
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'top',
                        align: 'end',
                        labels: { boxWidth: 12, padding: 16, font: { size: 11 }, color: '#78716c' }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(ctx) {
                                return ctx.dataset.label + ': ' +
                                    ctx.parsed.y.toLocaleString('tr-TR', {minimumFractionDigits: 2, maximumFractionDigits: 2}) + ' \u20ba';
                            }
                        }
                    }
                },
                scales: {
                    x: { grid: { display: false }, ticks: { font: { size: 10 }, color: '#a8a29e' } },
                    y: {
                        beginAtZero: true,
                        grid: { color: 'rgba(214, 211, 209, 0.3)' },
                        ticks: {
                            font: { size: 10 }, color: '#a8a29e',
                            callback: function(v) { return v.toLocaleString('tr-TR') + ' \u20ba'; }
                        }
                    }
                }
            }
        });
    });
</script>
@endsection