@extends('layouts.app')

@section('content')
<div class="px-4 py-6 mx-auto max-w-7xl sm:px-6 lg:px-8">
    {{-- BREADCRUMB --}}
    <nav class="flex py-3 mb-6" aria-label="Breadcrumb">
        <ol role="list" class="flex items-center space-x-4">
            <li>
                <div>
                    <a href="{{ route('dashboard') }}" class="text-stone-400 hover:text-stone-500">
                        <svg class="flex-shrink-0 w-5 h-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                            <path fill-rule="evenodd"
                                d="M9.293 2.293a1 1 0 011.414 0l7 7A1 1 0 0117 11h-1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-3a1 1 0 00-1-1H9a1 1 0 00-1 1v3a1 1 0 01-1 1H5a1 1 0 01-1-1v-6H3a1 1 0 01-.707-1.707l7-7z"
                                clip-rule="evenodd" />
                        </svg>
                        <span class="sr-only">Dashboard</span>
                    </a>
                </div>
            </li>
            <li>
                <div class="flex items-center">
                    <svg class="flex-shrink-0 w-5 h-5 text-stone-400" viewBox="0 0 20 20" fill="currentColor"
                        aria-hidden="true">
                        <path fill-rule="evenodd"
                            d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
                            clip-rule="evenodd" />
                    </svg>
                    <a href="{{ route('bank-accounts') }}"
                        class="ml-4 text-stone-400 hover:text-stone-500">Varlıklar</a>
                </div>
            </li>
            <li>
                <div class="flex items-center">
                    <svg class="flex-shrink-0 w-5 h-5 text-stone-400" viewBox="0 0 20 20" fill="currentColor"
                        aria-hidden="true">
                        <path fill-rule="evenodd"
                            d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
                            clip-rule="evenodd" />
                    </svg>
                    <a href="#" class="ml-4 font-medium text-stone-500" aria-current="page">{{
                        $bankAccount->name }}</a>
                </div>
            </li>
        </ol>
    </nav>

    <div class="grid grid-cols-1 gap-8 lg:grid-cols-3">
        {{-- HESAP BİLGİLERİ --}}
        <div class="lg:col-span-1">
            <div class="overflow-hidden bg-white shadow sm:rounded-lg">
                <div class="px-6 py-4 bg-gradient-to-b from-stone-700 to-stone-900">
                    <h2 class="text-xl font-semibold text-white">{{ $bankAccount->name }}</h2>
                </div>
                <dl class="px-6 py-5 divide-y divide-stone-100">
                    <div class="py-4">
                        <dt class="text-sm font-medium text-stone-900">Hesap Adı</dt>
                        <dd class="mt-1 text-sm text-stone-700">
                            {{ $bankAccount->name }}
                        </dd>
                    </div>
                    @if($bankAccount->iban)
                    <div class="py-4">
                        <dt class="text-sm font-medium text-stone-900">IBAN</dt>
                        <dd class="mt-1 font-mono text-sm text-stone-700">
                            {{ $bankAccount->iban }}
                        </dd>
                    </div>
                    @endif
                    <div class="py-4">
                        <dt class="text-sm font-medium text-stone-900">Hesap Türü</dt>
                        <dd class="mt-1 text-sm text-stone-700">
                            @if($bankAccount->type == 'bank_account')
                            Banka Hesabı
                            @elseif($bankAccount->type == 'cash_vault')
                            Nakit Kasası
                            @elseif($bankAccount->type == 'credit_card')
                            Kredi Kartı
                            @endif
                        </dd>
                    </div>
                    <div class="py-4">
                        <dt class="text-sm font-medium text-stone-900">Para Birimi</dt>
                        <dd class="mt-1 text-sm text-stone-700">
                            {{ $bankAccount->currency }}
                        </dd>
                    </div>
                    <div class="py-4">
                        <dt class="text-sm font-medium text-stone-900">Bakiye</dt>
                        <dd class="mt-1 text-lg font-semibold {{ $balance >= 0 ? 'text-green-600' : 'text-red-600' }}">
                            {{ number_format($balance, 2, ',', '.') }} {{ $bankAccount->currency }}
                        </dd>
                    </div>
                    <div class="py-4">
                        <dt class="text-sm font-medium text-stone-900">Toplam Gelen</dt>
                        <dd class="mt-1 text-sm text-green-600">
                            {{ number_format($total_received, 2, ',', '.') }} {{ $bankAccount->currency }}
                        </dd>
                    </div>
                    <div class="py-4">
                        <dt class="text-sm font-medium text-stone-900">Toplam Giden</dt>
                        <dd class="mt-1 text-sm text-red-600">
                            {{ number_format($total_paid, 2, ',', '.') }} {{ $bankAccount->currency }}
                        </dd>
                    </div>
                    @if($bankAccount->company)
                    <div class="py-4">
                        <dt class="text-sm font-medium text-stone-900">Şirket</dt>
                        <dd class="mt-1 text-sm text-stone-700">
                            <a href="{{ route('companies.show', $bankAccount->company->slug) }}"
                                class="text-indigo-600 hover:text-indigo-500">
                                {{ $bankAccount->company->name }}
                            </a>
                        </dd>
                    </div>
                    @endif
                </dl>
            </div>

            {{-- İŞLEM BUTONLARI --}}
            <div class="mt-6 space-y-3">
                <a href="{{ route('bank-accounts.edit', $bankAccount->id) }}"
                    class="inline-flex items-center justify-center w-full px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-lg shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    <span class="mr-2 material-symbols-rounded">edit</span>
                    Hesap Bilgilerini Düzenle
                </a>
                <a href="{{ route('transactions.create', ['type' => 'received', 'bank_id' => $bankAccount->id]) }}"
                    class="inline-flex items-center justify-center w-full px-4 py-2 text-sm font-medium text-white bg-green-600 border border-transparent rounded-lg shadow-sm hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                    <span class="mr-2 material-symbols-rounded">add</span>
                    Gelen İşlem Ekle
                </a>
                <a href="{{ route('transactions.create', ['type' => 'paid', 'bank_id' => $bankAccount->id]) }}"
                    class="inline-flex items-center justify-center w-full px-4 py-2 text-sm font-medium text-white bg-red-600 border border-transparent rounded-lg shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
                    <span class="mr-2 material-symbols-rounded">remove</span>
                    Giden İşlem Ekle
                </a>
            </div>
        </div>

        {{-- İŞLEMLER LİSTESİ --}}
        <div class="lg:col-span-2">
            <div class="overflow-hidden bg-white shadow sm:rounded-lg">
                <div class="px-6 py-4 border-b border-stone-200">
                    <h3 class="text-lg font-medium text-stone-900">İşlem Geçmişi</h3>
                </div>
                <div class="overflow-x-auto">
                    <div x-data="{
                        sortField: 'date',
                        sortDirection: 'desc',
                        sortedData: [],
                        init() {
                            this.sortedData = [...this.parseData()];
                            this.sort();
                        },
                        parseData() {
                            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.sortedData.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') {
                                        aValue = new Date(aValue.split('.').reverse().join('-'));
                                        bValue = new Date(bValue.split('.').reverse().join('-'));
                                    } else if (this.sortField === 'amount') {
                                        aValue = parseFloat(aValue.replace(/\./g, '').replace(',', '.'));
                                        bValue = parseFloat(bValue.replace(/\./g, '').replace(',', '.'));
                                    }
                                }

                                if (this.sortDirection === 'asc') {
                                    return aValue > bValue ? 1 : aValue < bValue ? -1 : 0;
                                } else {
                                    return aValue < bValue ? 1 : aValue > bValue ? -1 : 0;
                                }
                            });

                            tbody.innerHTML = '';
                            this.sortedData.forEach(row => tbody.appendChild(row));
                        }
                    }">
                        <table class="min-w-full divide-y divide-stone-200">
                            <thead class="bg-stone-50">
                                <tr>
                                    <th scope="col" data-field="date"
                                        class="py-3.5 pl-6 pr-3 text-left text-sm font-semibold text-stone-900 cursor-pointer hover:bg-stone-100 sm:pl-6"
                                        @click="toggleSort('date')">
                                        Tarih
                                        <span x-show="sortField === 'date'" class="ml-1">
                                            <span x-show="sortDirection === 'asc'">↑</span>
                                            <span x-show="sortDirection === 'desc'">↓</span>
                                        </span>
                                    </th>
                                    <th scope="col" data-field="type"
                                        class="px-3 py-3.5 text-left text-sm font-semibold text-stone-900 cursor-pointer hover:bg-stone-100"
                                        @click="toggleSort('type')">
                                        İşlem Türü
                                        <span x-show="sortField === 'type'" class="ml-1">
                                            <span x-show="sortDirection === 'asc'">↑</span>
                                            <span x-show="sortDirection === 'desc'">↓</span>
                                        </span>
                                    </th>
                                    <th scope="col" data-field="company"
                                        class="px-3 py-3.5 text-left text-sm font-semibold text-stone-900 cursor-pointer hover:bg-stone-100"
                                        @click="toggleSort('company')">
                                        Firma
                                        <span x-show="sortField === 'company'" class="ml-1">
                                            <span x-show="sortDirection === 'asc'">↑</span>
                                            <span x-show="sortDirection === 'desc'">↓</span>
                                        </span>
                                    </th>
                                    <th scope="col" data-field="description"
                                        class="px-3 py-3.5 text-left text-sm font-semibold text-stone-900">
                                        Açıklama
                                    </th>
                                    <th scope="col" data-field="amount"
                                        class="px-3 py-3.5 text-right text-sm font-semibold text-stone-900 cursor-pointer hover:bg-stone-100"
                                        @click="toggleSort('amount')">
                                        Tutar
                                        <span x-show="sortField === 'amount'" class="ml-1">
                                            <span x-show="sortDirection === 'asc'">↑</span>
                                            <span x-show="sortDirection === 'desc'">↓</span>
                                        </span>
                                    </th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-stone-200">
                                @forelse($transactions as $transaction)
                                <tr class="transition-colors cursor-pointer hover:bg-stone-50"
                                    onclick="window.location='{{ route('transactions.show', $transaction->id) }}'">
                                    <td class="py-4 pl-6 pr-3 text-sm whitespace-nowrap text-stone-500 sm:pl-6">
                                        {{ \Carbon\Carbon::parse($transaction->date)->format('d.m.Y') }}
                                    </td>
                                    <td class="px-3 py-4 text-sm whitespace-nowrap">
                                        @if($transaction->type == 'received')
                                        <span
                                            class="inline-flex items-center px-2 py-1 text-xs font-medium text-green-700 rounded-md bg-green-50 ring-1 ring-inset ring-green-600/20">
                                            Gelen
                                        </span>
                                        @elseif($transaction->type == 'paid')
                                        <span
                                            class="inline-flex items-center px-2 py-1 text-xs font-medium text-red-700 rounded-md bg-red-50 ring-1 ring-inset ring-red-600/20">
                                            Giden
                                        </span>
                                        @endif
                                    </td>
                                    <td class="px-3 py-4 text-sm whitespace-nowrap text-stone-900">
                                        @if($transaction->company)
                                        <a href="{{ route('companies.show', $transaction->company->slug) }}"
                                            class="text-indigo-600 hover:text-indigo-500"
                                            onclick="event.stopPropagation();">
                                            {{ $transaction->company->name }}
                                        </a>
                                        @else
                                        <span class="text-stone-400">-</span>
                                        @endif
                                    </td>
                                    <td class="px-3 py-4 text-sm text-stone-500">
                                        {{ Str::limit($transaction->description, 50) }}
                                    </td>
                                    <td
                                        class="whitespace-nowrap px-3 py-4 text-sm text-right font-semibold {{ $transaction->type == 'received' ? 'text-green-600' : 'text-red-600' }}">
                                        {{ $transaction->type == 'received' ? '+' : '-' }}
                                        {{ number_format($transaction->amount, 2, ',', '.') }} {{
                                        $transaction->currency }}
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="5" class="px-6 py-12 text-sm text-center text-stone-500 sm:px-6">
                                        <div class="flex flex-col items-center">
                                            <span
                                                class="mb-4 text-6xl material-symbols-rounded text-stone-300">receipt_long</span>
                                            <p>Bu hesapta henüz işlem bulunmuyor.</p>
                                        </div>
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    function printTable() {
        let printWindow = window.open('', '_blank');
        let table = document.querySelector('table').cloneNode(true);

        let html = `
        <!DOCTYPE html>
        <html>
        <head>
            <title>{{ $bankAccount->name }} - İşlem Listesi</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>{{ $bankAccount->name }}</h1>
                <p>Bakiye: {{ number_format($balance, 2, ',', '.') }} {{ $bankAccount->currency }}</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 Finance ile {{ date('d.m.Y') }} tarihinde oluşturulmuştur.</p>
            </div>
        </body>
        </html>
        `;

        printWindow.document.write(html);
        printWindow.document.getElementById('table-container').appendChild(table);
        printWindow.document.close();
    }

    function exportTable() {
        alert('Excel export özelliği yakında eklenecek.');
    }
</script>
@endsection