@extends('layouts.site')

@section('content')

<section class="wrapper bg-light">
    <div class="container pt-14 pb-14 xl:pt-20 xl:pb-20 lg:pt-20 lg:pb-20 md:pt-20 md:pb-20">
        
        <div class="row text-center mb-10">
            <div class="col-md-10 col-lg-8 col-xl-7 mx-auto">
                <h1 class="display-1 mb-3">{!! $page->title !!}</h1>
                @if($page->excerpt)
                    <p class="lead fs-lg mb-0">{!! $page->excerpt !!}</p>
                @endif
            </div>
        </div>

        <div class="row gy-6">
            @php
                $accounts = $page->data['bank_accounts'] ?? [];
            @endphp

            @forelse($accounts as $account)
            <div class="col-md-6 col-lg-4">
                <div class="card shadow-lg lift h-100 border-0 rounded-xl overflow-hidden group hover:shadow-2xl transition-all duration-300">
                    <div class="card-body p-8">
                        <div class="flex items-center justify-between mb-6">
                            @if(!empty($account['logo']))
                                <div class="bg-gray-50 flex items-center justify-center p-2 rounded-lg" style="width: 120px; height: 60px;">
                                    <img src="{{ asset('storage/' . $account['logo']) }}" class="img-fluid" style="max-height: 100%; max-width: 100%;" alt="{{ $account['bank_name'] }}">
                                </div>
                            @else
                                <div class="bg-primary/10 text-primary w-16 h-16 rounded-lg flex items-center justify-center text-2xl">
                                    <i class="uil uil-university"></i>
                                </div>
                            @endif
                            
                            <span class="badge bg-pale-primary text-primary rounded-pill px-3 py-1 text-sm font-semibold">
                                {{ $account['currency'] ?? 'TRY' }}
                            </span>
                        </div>

                        <h3 class="h4 mb-1 text-dark group-hover:text-primary transition-colors">{{ $account['bank_name'] }}</h3>
                        @if(!empty($account['branch_name']))
                            <p class="text-muted text-sm mb-4">{{ $account['branch_name'] }}</p>
                        @else
                            <div class="mb-4"></div>
                        @endif

                        <div class="space-y-3">
                            <div>
                                <label class="text-xs uppercase text-gray-500 font-bold tracking-wider block mb-1">HESAP SAHİBİ</label>
                                <div class="text-dark font-medium">{{ $account['account_holder'] }}</div>
                            </div>
                            
                            <div class="pt-2 border-t border-gray-100">
                                <label class="text-xs uppercase text-gray-500 font-bold tracking-wider block mb-1">IBAN</label>
                                <div class="font-mono text-lg text-primary font-bold tracking-tight break-all select-all selection:bg-primary/20 cursor-text">
                                    {{ $account['iban'] }}
                                </div>
                                <button onclick="navigator.clipboard.writeText('{{ $account['iban'] }}'); alert('IBAN kopyalandı!');" class="text-xs text-primary mt-1 hover:underline flex items-center gap-1 cursor-pointer">
                                    <i class="uil uil-copy"></i> Kopyala
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="h-1 w-full bg-gradient-to-r from-primary to-blue-500 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left"></div>
                </div>
            </div>
            @empty
                <div class="col-12 text-center py-10">
                    <div class="bg-white p-10 rounded-xl shadow-sm border border-gray-100 inline-block">
                        <i class="uil uil-wallet text-6xl text-gray-300 mb-4 block"></i>
                        <h3 class="h4 text-gray-400">Henüz banka hesabı eklenmemiş.</h3>
                        <p class="text-gray-400">Yönetim panelinden banka hesaplarınızı ekleyebilirsiniz.</p>
                    </div>
                </div>
            @endforelse
        </div>

        @if($page->content)
        <div class="row mt-14">
            <div class="col-lg-10 mx-auto">
                <div class="prose max-w-none text-center text-gray-600">
                    {!! $page->content !!}
                </div>
            </div>
        </div>
        @endif

    </div>
</section>

@endsection