@if($restaurant->waafipayAccount)
<div class="card border-0 shadow-sm">
    <div class="card-body">
        <div class="d-flex justify-content-between align-items-start mb-3">
            <div>
                <span class="badge bg-{{ $restaurant->waafipayAccount->account_type == 'MERCHANT' ? 'primary' : ($restaurant->waafipayAccount->account_type == 'EVC' ? 'success' : 'info') }}-transparent fs-11 fw-semibold">
                    {{ $restaurant->waafipayAccount->account_type }} Account
                </span>
                <div class="mt-2">
                    <span class="badge bg-{{ $restaurant->waafipayAccount->is_active ? 'success' : 'danger' }}-transparent fs-10">
                        {{ $restaurant->waafipayAccount->is_active ? 'Active' : 'Inactive' }}
                    </span>
                    <!-- <span class="badge bg-{{ $restaurant->waafipayAccount->is_verified ? 'success' : 'warning' }}-transparent fs-10 ms-1">
                        {{ $restaurant->waafipayAccount->is_verified ? 'Verified' : 'Unverified' }}
                    </span> -->
                </div>
            </div>
            <div class="dropdown">
                <button class="btn btn-light btn-sm" type="button" data-bs-toggle="dropdown">
                    <i class="ri-more-2-line"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                    <!-- <li>
                        <button class="dropdown-item" onclick="toggleAccountStatus({{ $restaurant->id }})">
                            <i class="ri-toggle-line me-2"></i>
                            {{ $restaurant->waafipayAccount->is_active ? 'Deactivate' : 'Activate' }}
                        </button>
                    </li> -->
                    <li>
                        <hr class="dropdown-divider">
                    </li>
                    <li>
                        <button class="dropdown-item text-danger" onclick="deleteWaafipayAccount({{ $restaurant->id }})">
                            <i class="ri-delete-bin-line me-2"></i>Delete Account
                        </button>
                    </li>
                </ul>
            </div>
        </div>

        <div class="row g-3">
            <div class="col-md-6">
                <div class="d-flex align-items-center">
                    <div class="flex-fill">
                        <p class="text-muted fs-12 mb-1">Account Holder</p>
                        <p class="fw-semibold fs-14 mb-0">{{ $restaurant->waafipayAccount->account_holder_name }}</p>
                    </div>
                </div>
            </div>

            <div class="col-md-6">
                <div class="d-flex align-items-center">
                    <div class="flex-fill">
                        <p class="text-muted fs-12 mb-1">Phone Number</p>
                        <p class="fw-semibold fs-14 mb-0">
                            <i class="ri-phone-line me-2 text-muted"></i>
                            {{ $restaurant->waafipayAccount->formatted_phone }}
                        </p>
                    </div>
                </div>
            </div>

            @if($restaurant->waafipayAccount->account_no)
            <div class="col-md-6">
                <div class="d-flex align-items-center">
                    <div class="flex-fill">
                        <p class="text-muted fs-12 mb-1">Account Number</p>
                        <p class="fw-semibold fs-14 mb-0">{{ $restaurant->waafipayAccount->account_no }}</p>
                    </div>
                </div>
            </div>
            @endif

            @if($restaurant->waafipayAccount->isMerchant())
            <div class="col-12">
                <hr class="my-3">
                <h6 class="text-primary mb-3">
                    <i class="ri-store-2-line me-2"></i>Merchant Details
                </h6>
            </div>

            @if($restaurant->waafipayAccount->merchant_uid)
            <div class="col-md-6">
                <div class="d-flex align-items-center">
                    <div class="flex-fill">
                        <p class="text-muted fs-12 mb-1">Merchant UID</p>
                        <p class="fw-semibold fs-14 mb-0">{{ $restaurant->waafipayAccount->merchant_uid }}</p>
                    </div>
                </div>
            </div>
            @endif {{-- merchant_uid --}}


            @if($restaurant->waafipayAccount->api_user_id)
            <div class="col-md-6">
                <div class="d-flex align-items-center">
                    <div class="flex-fill">
                        <p class="text-muted fs-12 mb-1">Api User ID</p>
                        <p class="fw-semibold fs-14 mb-0">{{ $restaurant->waafipayAccount->api_user_id }}</p>
                    </div>
                </div>
            </div>
            @endif {{-- merchant_uid --}}
            @endif {{-- isMerchant --}}
        </div>
    </div>
</div>
@endif {{-- waafipayAccount --}}