@extends('layouts.default')

@section('content')
<div class="container">
    <div class="row">
        <x-sidebar />
        
        <div class="col-lg-9">
            <!-- Credit Cards Section -->
            <div class="bg-white shadow-sm rounded p-4 mb-4">
                <h3 class="text-5 fw-400 mb-4">{{ __('Kredi Kartı veya Banka Kartı') }} <span class="text-muted text-4">{{ __('Ödemeler İçin') }}</span></h3>
                <hr class="mb-4 mx-n4">
                <div class="row g-3">
                    @foreach($creditCards as $card)
                        @include('pages.components.cards.list-item', ['card' => $card])
                    @endforeach
                    
                    <div class="col-12 col-md-6 col-lg-4">
                        <a href="#" data-bs-target="#add-new-card-details" data-bs-toggle="modal" class="account-card-new d-flex align-items-center rounded h-100 p-3">
                            <p class="w-100 text-center lh-base m-0">
                                <span class="text-3"><i class="fas fa-plus-circle"></i></span>
                                <span class="d-block text-body text-3">{{ __('Yeni Kart Ekle') }}</span>
                            </p>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Bank Accounts Section -->
            <div class="bg-white shadow-sm rounded p-4 mb-4">
                <h3 class="text-5 fw-400 mb-4">{{ __('Banka Hesabı') }} <span class="text-muted text-4">{{ __('Çekimler ve yatırım işlemleri için') }}</span></h3>
                <hr class="mb-4 mx-n4">
                <div class="row g-3">
                    @foreach($bankAccounts as $account)
                        @include('pages.components.bank-accounts.list-item', ['account' => $account])
                    @endforeach

                    <div class="col-12 col-md-6">
                        <a href="#" data-bs-target="#add-new-bank-account" data-bs-toggle="modal" class="account-card-new d-flex align-items-center rounded h-100 p-3">
                            <p class="w-100 text-center lh-base m-0">
                                <span class="text-3"><i class="fas fa-plus-circle"></i></span>
                                <span class="d-block text-body text-3">{{ __('Banka Hesabı Ekle') }}</span>
                            </p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@include('pages.components.cards.add-modal')
@include('pages.components.cards.edit-modal')
@include('pages.components.bank-accounts.add-modal')
@include('pages.components.bank-accounts.details-modal')
@endsection