@extends('layouts.master')
@section('title') @lang('translation.payment-methods') @endsection

@section('breadcrumb')
@component('components.breadcrumb')
@slot('title')
@lang('translation.payment-methods')
@endslot
@endcomponent
@endsection

@section('content')

<h3 class="mb-4">@lang('translation.payment-methods')</h3>

<div x-data="paymentMethodsHandler()" x-init="init()" class="row row-cols-1 g-4 mb-4">
    @forelse($paymentMethods as $pMethod)
    @php
    $iconClass = match($pMethod->type) {
        'bank' => 'ri-bank-line',
        'card' => 'ri-bank-card-line',
        'crypto' => 'ri-bit-coin-line',
        default => 'ri-question-line',
    };
    @endphp

    <div class="col">
        <div class="card card-animate-custom p-3 shadow-sm mb-0">
            <div class="d-flex justify-content-between align-items-center">
                <div class="d-flex align-items-center gap-3">
                    <i class="{{ $iconClass }} text-primary fs-3"></i>
                    <div>
                        @if($pMethod->type === 'bank')
                            <strong>{{ $pMethod->account_title ?? __('translation.bank-account') }}</strong> – {{ $pMethod->account_number_masked }}<br>
                            <small class="text-muted">{{ $pMethod->bank->name ?? '' }} | @lang('translation.bank-transfer') </small>
                        @elseif($pMethod->type === 'card')
                            <strong>{{ $pMethod->card_holder ?? __('translation.card-holder') }}</strong> – {{ $pMethod->card_number_masked }}<br>
                            <small class="text-muted">{{ $pMethod->card_brand ?? __('translation.card') }} | @lang('translation.card-payment')</small>
                        @elseif($pMethod->type === 'crypto')
                            <strong>{{ "{$pMethod->wallet_type} ({$pMethod->crypto_network})" }}</strong> – {{ $pMethod->wallet_address_masked ?? $pMethod->okx_uid ?? $pMethod->binance_pay_id }}<br>
                            <small class="text-muted">{{ $pMethod->network ?? __('translation.crypto') }}</small>
                        @else
                            <strong>@lang('translation.payment-method')</strong> – {{ $pMethod->label ?? __('translation.unknown') }}<br>
                            <small class="text-muted">{{ ucfirst($pMethod->type) }}</small>
                        @endif
                    </div>
                </div>
                <button class="btn border-0 p-0 delete-method-btn" @click="confirmDelete({{ $pMethod->id }})">
                    <i class="ri-close-fill text-danger fs-4"></i>
                </button>
            </div>
        </div>
    </div>
    @empty
    <div class="col">
        <div class="card p-5 shadow-sm text-center mb-0">
            <i class="ri-wallet-line text-muted display-4 mb-3"></i>
            <h5 class="text-muted mb-1">@lang('translation.no-payment-methods')</h5>
            <p class="text-muted">@lang('translation.add-payment-method-description')</p>
        </div>
    </div>
    @endforelse

    <div class="col">
        <a href="{{ route('setup-payment-method') }}"
            class="border border-2 border-dashed border-primary text-primary bg-light text-center p-3 rounded d-flex align-items-center justify-content-center gap-2 text-decoration-none"
            style="cursor: pointer; transition: background-color 0.2s ease"
        >
            <i class="ri-add-circle-line fs-4"></i>
            <div>@lang('translation.add-payment-method')</div>
        </a>

    </div>
</div>

@endsection

@section('script')
<script>
    function paymentMethodsHandler() {
        return {
            init() {},
            confirmDelete(id) {
                Swal.fire({
                    title: "@lang('translation.are-you-sure')",
                    text: "@lang('translation.delete-confirmation-text')",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#f06548",
                    cancelButtonColor: "#6c757d",
                    confirmButtonText: "@lang('translation.yes-delete')"
                }).then((result) => {
                    if (result.isConfirmed) {
                        fetch(`{{ route('payment-methods.destroy', ':id') }}`.replace(':id', id), {
                            method: 'DELETE',
                            headers: {
                                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                'Accept': 'application/json',
                            },
                        })
                        .then(response => {
                            if (!response.ok) throw new Error();
                            Swal.fire(
                                "@lang('translation.deleted')",
                                "@lang('translation.deleted-successfully')",
                                "success"
                            ).then(() => location.reload());
                        })
                        .catch(() => {
                            Swal.fire(
                                "@lang('translation.error')",
                                "@lang('translation.delete-failed')",
                                "error"
                            );
                        });
                    }
                });
            }
        }
    }
</script>
@endsection