@extends('layouts.app')

@section('title', ($paymentMethod->label ?? 'Payment Method') . ' — Details')

@push('styles')
<style>
    .page-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 1.5rem;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .page-header-left {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .page-header .back-btn {
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        color: var(--text-secondary);
        transition: all var(--transition);
    }

    .page-header .back-btn:hover { background: var(--accent-light); color: var(--accent); border-color: var(--accent); }
    .page-header h1 { font-size: 1.5rem; font-weight: 700; }

    .pm-detail-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
        max-width: 720px;
    }

    .card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 1.5rem;
    }

    .card-title {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 1.25rem;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .card-title i { color: var(--accent); }

    .pm-type-icon {
        width: 64px;
        height: 64px;
        border-radius: var(--radius-md);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.75rem;
        margin-bottom: 1.25rem;
    }

    .pm-type-icon.bank_account { background: var(--success-light); color: var(--success); }
    .pm-type-icon.card { background: var(--accent-light); color: var(--accent); }
    .pm-type-icon.crypto_wallet { background: rgba(255, 165, 2, 0.15); color: #ffa502; }

    .detail-row {
        display: flex;
        justify-content: space-between;
        padding: 0.625rem 0;
        border-bottom: 1px solid var(--border);
        font-size: 0.875rem;
    }

    .detail-row:last-child { border-bottom: none; }
    .detail-label { color: var(--text-muted); }
    .detail-value { font-weight: 500; }

    .badge-default {
        display: inline-flex;
        align-items: center;
        padding: 0.2rem 0.625rem;
        border-radius: 4px;
        font-size: 0.7rem;
        font-weight: 700;
        background: var(--accent);
        color: #fff;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .pm-actions {
        display: flex;
        gap: 0.75rem;
        margin-top: 1.5rem;
    }

    @media (max-width: 768px) {
        .pm-detail-grid { grid-template-columns: 1fr; }
    }
</style>
@endpush

@section('content')
    <div class="page-header">
        <div class="page-header-left">
            <a href="{{ route('escrow.payment-methods.index') }}" class="back-btn"><i class="fas fa-arrow-left"></i></a>
            <h1>{{ $paymentMethod->label }}</h1>
        </div>
        <a href="{{ route('escrow.payment-methods.edit', $paymentMethod->id) }}" class="btn btn-primary">
            <i class="fas fa-pen"></i> Edit
        </a>
    </div>

    <div class="pm-detail-grid">
        <div class="card">
            <h3 class="card-title"><i class="fas fa-credit-card"></i> Payment Method</h3>

            @php
                $typeIcon = match($paymentMethod->type) {
                    'card' => 'fa-credit-card',
                    'crypto_wallet' => 'fa-wallet',
                    default => 'fa-university',
                };
                $typeLabel = match($paymentMethod->type) {
                    'card' => 'Card',
                    'crypto_wallet' => 'Crypto Wallet',
                    default => 'Bank Account',
                };
            @endphp

            <div class="pm-type-icon {{ $paymentMethod->type }}">
                <i class="fas {{ $typeIcon }}"></i>
            </div>

            <div class="detail-row">
                <span class="detail-label">Label</span>
                <span class="detail-value">{{ $paymentMethod->label }}</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Type</span>
                <span class="detail-value">{{ $typeLabel }}</span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Default</span>
                <span class="detail-value">
                    @if($paymentMethod->is_default)
                        <span class="badge-default">Default</span>
                    @else
                        No
                    @endif
                </span>
            </div>
            <div class="detail-row">
                <span class="detail-label">Added</span>
                <span class="detail-value">{{ $paymentMethod->created_at ? $paymentMethod->created_at->format('M d, Y') : '—' }}</span>
            </div>
        </div>

        <div class="card">
            <h3 class="card-title"><i class="fas fa-info-circle"></i> Details</h3>

            @php
                $details = $paymentMethod->details;
                if (is_string($details)) $details = json_decode($details, true);
                $details = $details ?? [];
            @endphp

            @forelse($details as $key => $value)
                <div class="detail-row">
                    <span class="detail-label">{{ ucwords(str_replace('_', ' ', $key)) }}</span>
                    <span class="detail-value">{{ $value }}</span>
                </div>
            @empty
                <p style="color: var(--text-muted); font-size: 0.85rem;">No additional details.</p>
            @endforelse

            <div class="pm-actions">
                @unless($paymentMethod->is_default)
                    <form method="POST" action="{{ route('escrow.payment-methods.default', $paymentMethod->id) }}">
                        @csrf
                        @method('PUT')
                        <button type="submit" class="btn btn-secondary"><i class="fas fa-star"></i> Set as Default</button>
                    </form>
                @endunless
                <form method="POST" action="{{ route('escrow.payment-methods.destroy', $paymentMethod->id) }}" data-confirm="This payment method will be removed from your account." data-confirm-title="Remove Payment Method?" data-confirm-type="danger" data-confirm-button="Remove">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger"><i class="fas fa-trash"></i> Remove</button>
                </form>
            </div>
        </div>
    </div>
@endsection