@extends('layouts.app')

@section('title', 'Refund #' . $refund->id)

@section('content')
<div class="container-fluid px-4">
    {{-- Breadcrumb --}}
    <div class="d-flex flex-wrap align-items-center justify-content-between mb-4">
        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-1">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.refunds.index') }}">Refunds</a></li>
                    <li class="breadcrumb-item active" aria-current="page">#{{ $refund->id }}</li>
                </ol>
            </nav>
            <h1 class="h3 mb-0 fw-700">Refund Request #{{ $refund->id }}</h1>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('admin.refunds.index') }}" class="btn btn-sm btn-outline-secondary">
                <i class="fas fa-arrow-left me-1"></i> Back
            </a>
        </div>
    </div>

    {{-- Refund Status Banner --}}
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body">
            <div class="row g-3 align-items-center">
                <div class="col-md-8">
                    <div class="d-flex flex-wrap gap-3 align-items-center">
                        <div>
                            <span class="text-muted small text-uppercase d-block">Status</span>
                            <span class="badge fs-6 px-3 py-2
                                @if($refund->status === 0) bg-warning text-dark
                                @elseif($refund->status === 2) bg-danger
                                @elseif($refund->status === 1 && $refund->is_completed) bg-success
                                @elseif($refund->status === 1) bg-info
                                @else bg-secondary
                                @endif
                            ">
                                @if($refund->status === 0) Pending
                                @elseif($refund->status === 2) Declined
                                @elseif($refund->status === 1 && $refund->is_completed) Completed
                                @elseif($refund->status === 1) Processing
                                @else Unknown
                                @endif
                            </span>
                        </div>
                        <div>
                            <span class="text-muted small text-uppercase d-block">Order</span>
                            <a href="{{ route('admin.orders.show', $order ?? $refund->orderItem?->order) }}"
                               class="fw-600 text-decoration-none">
                                #{{ $refund->order_number ?? $refund->orderItem?->order?->order_number ?? 'N/A' }}
                            </a>
                        </div>
                        <div>
                            <span class="text-muted small text-uppercase d-block">Product</span>
                            <span class="fw-600">{{ $refund->orderItem?->product_title ?? 'Unknown' }}</span>
                        </div>
                        <div>
                            <span class="text-muted small text-uppercase d-block">Amount</span>
                            <span class="fw-700 fs-5">
                                ₦{{ number_format($refund->orderItem?->product_total_price ?? 0, 2) }}
                            </span>
                        </div>
                        <div>
                            <span class="text-muted small text-uppercase d-block">Requested</span>
                            <span>{{ $refund->created_at ? $refund->created_at->diffForHumans() : 'N/A' }}</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 text-md-end">
                    @if($availableActions['can_decide'] ?? false)
                        <button type="button" class="btn btn-success me-1" onclick="scrollToDecision()">
                            <i class="fas fa-check me-1"></i> Decide
                        </button>
                    @endif
                    @if($availableActions['can_complete'] ?? false)
                        <button type="button" class="btn btn-info" onclick="scrollToComplete()">
                            <i class="fas fa-check-double me-1"></i> Complete
                        </button>
                    @endif
                </div>
            </div>
        </div>
    </div>

    {{-- Stats Row --}}
    <div class="row g-3 mb-4">
        @php
            $detailStats = [
                ['label' => 'Item Amount', 'value' => '₦' . number_format($stats['item_amount'] ?? 0, 2), 'icon' => 'fa-shopping-cart', 'color' => 'primary'],
                ['label' => 'Shipping', 'value' => '₦' . number_format($stats['shipping_amount'] ?? 0, 2), 'icon' => 'fa-truck', 'color' => 'info'],
                ['label' => 'Total Refund', 'value' => '₦' . number_format($stats['wallet_refund_amount'] ?? 0, 2), 'icon' => 'fa-money-bill-wave', 'color' => 'success'],
                ['label' => 'Messages', 'value' => $stats['message_count'] ?? 0, 'icon' => 'fa-comments', 'color' => 'warning'],
                ['label' => 'Days Open', 'value' => $stats['days_open'] ?? 0, 'icon' => 'fa-calendar-day', 'color' => 'secondary'],
                ['label' => 'Payment Method', 'value' => $summary['payment_method'] ?? 'N/A', 'icon' => 'fa-credit-card', 'color' => 'info'],
            ];
        @endphp

        @foreach($detailStats as $stat)
            <div class="col-xl-4 col-lg-6 col-md-6">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <p class="text-muted mb-1 small fw-600 text-uppercase">{{ $stat['label'] }}</p>
                                <h5 class="mb-0 fw-700">{{ $stat['value'] }}</h5>
                            </div>
                            <div class="rounded-3 p-2" style="background: rgba(var(--bs-{{ $stat['color'] }}-rgb),0.1);">
                                <i class="fas {{ $stat['icon'] }} text-{{ $stat['color'] }}"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    {{-- Summary Card --}}
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body">
            <div class="row g-3">
                <div class="col-md-6">
                    <h6 class="fw-700 mb-3"><i class="fas fa-info-circle me-2 text-primary"></i>Refund Summary</h6>
                    <dl class="row mb-0 small">
                        <dt class="col-5 text-muted">Order Number</dt>
                        <dd class="col-7 fw-600">#{{ $summary['order_number'] ?? 'N/A' }}</dd>

                        <dt class="col-5 text-muted">Product</dt>
                        <dd class="col-7">{{ $summary['product_title'] ?? 'N/A' }}</dd>

                        <dt class="col-5 text-muted">Quantity</dt>
                        <dd class="col-7">{{ $summary['quantity'] ?? 0 }}</dd>

                        <dt class="col-5 text-muted">Item Amount</dt>
                        <dd class="col-7 fw-600">₦{{ number_format($summary['item_amount'] ?? 0, 2) }}</dd>

                        <dt class="col-5 text-muted">Shipping</dt>
                        <dd class="col-7">₦{{ number_format($summary['shipping_amount'] ?? 0, 2) }}</dd>

                        <dt class="col-5 text-muted">Currency</dt>
                        <dd class="col-7">{{ $summary['currency'] ?? 'NGN' }}</dd>
                    </dl>
                </div>
                <div class="col-md-6">
                    <h6 class="fw-700 mb-3"><i class="fas fa-users me-2 text-primary"></i>Parties</h6>
                    <dl class="row mb-0 small">
                        <dt class="col-5 text-muted">Buyer</dt>
                        <dd class="col-7">
                            <span class="fw-600">{{ $summary['buyer_name'] ?? 'Unknown' }}</span>
                            <br>
                            <span class="text-muted">{{ $refund->buyer?->email ?? '' }}</span>
                        </dd>

                        <dt class="col-5 text-muted">Seller</dt>
                        <dd class="col-7">
                            <span class="fw-600">{{ $summary['seller_name'] ?? 'Unknown' }}</span>
                            <br>
                            <span class="text-muted">{{ $refund->seller?->email ?? '' }}</span>
                        </dd>

                        @if($refund->refund_reference)
                            <dt class="col-5 text-muted">Reference</dt>
                            <dd class="col-7"><code>{{ $refund->refund_reference }}</code></dd>
                        @endif

                        @if($refund->completed_at)
                            <dt class="col-5 text-muted">Completed At</dt>
                            <dd class="col-7">{{ $refund->completed_at->format('M d, Y H:i') }}</dd>
                        @endif

                        @if($completedBy)
                            <dt class="col-5 text-muted">Completed By</dt>
                            <dd class="col-7">{{ $completedBy->username ?? 'Unknown' }}</dd>
                        @endif
                    </dl>
                </div>
            </div>
        </div>
    </div>

    {{-- Tabs --}}
    <div class="card border-0 shadow-sm">
        <div class="card-body">
            <ul class="nav nav-tabs nav-tabs-custom mb-3" id="refundTabs" role="tablist">
                <li class="nav-item">
                    <button class="nav-link active" id="messages-tab" data-bs-toggle="tab" data-bs-target="#messages" type="button" role="tab">
                        <i class="fas fa-comments me-1"></i> Messages
                        <span class="badge bg-secondary ms-1">{{ $refund->messages->count() }}</span>
                    </button>
                </li>
                <li class="nav-item">
                    <button class="nav-link" id="decision-tab" data-bs-toggle="tab" data-bs-target="#decision" type="button" role="tab">
                        <i class="fas fa-gavel me-1"></i> Decision
                    </button>
                </li>
                @if($availableActions['can_complete'] ?? false)
                    <li class="nav-item">
                        <button class="nav-link" id="complete-tab" data-bs-toggle="tab" data-bs-target="#complete" type="button" role="tab">
                            <i class="fas fa-check-double me-1"></i> Complete
                        </button>
                    </li>
                @endif
                <li class="nav-item">
                    <button class="nav-link" id="timeline-tab" data-bs-toggle="tab" data-bs-target="#timeline" type="button" role="tab">
                        <i class="fas fa-history me-1"></i> Timeline
                    </button>
                </li>
                @if($relatedRefunds->count() > 0)
                    <li class="nav-item">
                        <button class="nav-link" id="related-tab" data-bs-toggle="tab" data-bs-target="#related" type="button" role="tab">
                            <i class="fas fa-link me-1"></i> Related
                            <span class="badge bg-secondary ms-1">{{ $relatedRefunds->count() }}</span>
                        </button>
                    </li>
                @endif
                @if($walletEntries->count() > 0)
                    <li class="nav-item">
                        <button class="nav-link" id="wallet-tab" data-bs-toggle="tab" data-bs-target="#wallet" type="button" role="tab">
                            <i class="fas fa-wallet me-1"></i> Wallet
                            <span class="badge bg-secondary ms-1">{{ $walletEntries->count() }}</span>
                        </button>
                    </li>
                @endif
            </ul>

            <div class="tab-content">
                {{-- Messages Tab --}}
                <div class="tab-pane fade show active" id="messages" role="tabpanel">
                    @include('admin.refunds.partials.tab-messages', ['refund' => $refund])
                </div>

                {{-- Decision Tab --}}
                <div class="tab-pane fade" id="decision" role="tabpanel">
                    @include('admin.refunds.partials.tab-decision', [
                        'refund' => $refund,
                        'availableActions' => $availableActions,
                    ])
                </div>

                {{-- Complete Tab --}}
                @if($availableActions['can_complete'] ?? false)
                    <div class="tab-pane fade" id="complete" role="tabpanel">
                        @include('admin.refunds.partials.tab-complete', [
                            'refund' => $refund,
                            'availableActions' => $availableActions,
                        ])
                    </div>
                @endif

                {{-- Timeline Tab --}}
                <div class="tab-pane fade" id="timeline" role="tabpanel">
                    @include('admin.refunds.partials.tab-timeline', ['timeline' => $timeline])
                </div>

                {{-- Related Refunds Tab --}}
                @if($relatedRefunds->count() > 0)
                    <div class="tab-pane fade" id="related" role="tabpanel">
                        @include('admin.refunds.partials.tab-related', ['relatedRefunds' => $relatedRefunds])
                    </div>
                @endif

                {{-- Wallet Tab --}}
                @if($walletEntries->count() > 0)
                    <div class="tab-pane fade" id="wallet" role="tabpanel">
                        @include('admin.refunds.partials.tab-wallet', ['walletEntries' => $walletEntries])
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .fw-600 { font-weight: 600; }
    .fw-700 { font-weight: 700; }
    .nav-tabs-custom .nav-link {
        color: #6c757d;
        border: none;
        padding: 0.5rem 1rem;
        border-radius: 0.5rem 0.5rem 0 0;
    }
    .nav-tabs-custom .nav-link:hover {
        color: #212529;
        background: #f8f9fa;
    }
    .nav-tabs-custom .nav-link.active {
        color: var(--bs-primary);
        background: transparent;
        border-bottom: 3px solid var(--bs-primary);
    }
    .nav-tabs-custom .nav-link i {
        font-size: 0.9rem;
    }
</style>
@endpush

@push('scripts')
<script>
function scrollToDecision() {
    document.getElementById('decision-tab').click();
    document.getElementById('decision').scrollIntoView({ behavior: 'smooth', block: 'start' });
}

function scrollToComplete() {
    document.getElementById('complete-tab').click();
    document.getElementById('complete').scrollIntoView({ behavior: 'smooth', block: 'start' });
}
</script>
@endpush