@extends('layouts.app')
@section('title', 'Transaction Detail')
@section('page-title', 'Transaction Detail')

@section('content')

<div class="page-header">
    <div>
        <h1>Transaction #{{ $transaction->id }}</h1>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('transactions.index') }}">Transactions</a></li>
                <li class="breadcrumb-item active">#{{ $transaction->id }}</li>
            </ol>
        </nav>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('transactions.edit', $transaction) }}" class="btn btn-lions">
            <i class="bi bi-pencil me-1"></i> Edit
        </a>
        <form method="POST" action="{{ route('transactions.destroy', $transaction) }}"
              onsubmit="return confirm('Delete this transaction? This cannot be undone.')">
            @csrf @method('DELETE')
            <button class="btn btn-outline-danger"><i class="bi bi-trash me-1"></i> Delete</button>
        </form>
    </div>
</div>

<div class="row g-4">
    <div class="col-lg-7">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5><i class="bi bi-receipt me-2" style="color:var(--lions-gold)"></i>Transaction Details</h5>
                <span class="badge {{ $transaction->type === 'income' ? 'badge-income' : 'badge-expense' }}" style="font-size:13px">
                    {{ $transaction->type_badge }}
                </span>
            </div>
            <div class="card-body">
                <table class="table table-borderless mb-0">
                    <tbody>
                        <tr>
                            <td class="text-muted" style="width:160px;font-size:13px">Account</td>
                            <td>
                                <span class="badge {{ $transaction->account->type === 'administrative' ? 'badge-admin' : 'badge-activity' }}">
                                    {{ $transaction->account->name }}
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <td class="text-muted" style="font-size:13px">Category</td>
                            <td class="fw-semibold">{{ $transaction->category }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted" style="font-size:13px">Amount</td>
                            <td>
                                <span class="fw-bold {{ $transaction->type === 'income' ? 'text-success' : 'text-danger' }}" style="font-size:22px">
                                    {{ $transaction->type === 'income' ? '+' : '−' }}${{ number_format($transaction->amount, 2) }}
                                </span>
                            </td>
                        </tr>
                        <tr>
                            <td class="text-muted" style="font-size:13px">Date</td>
                            <td>{{ $transaction->transaction_date->format('d F Y') }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted" style="font-size:13px">Reference No.</td>
                            <td>{{ $transaction->reference_no ?? '—' }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted" style="font-size:13px">Description</td>
                            <td>{{ $transaction->description ?? '—' }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted" style="font-size:13px">Recorded By</td>
                            <td>{{ $transaction->user->name ?? '—' }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted" style="font-size:13px">Reconciled</td>
                            <td>
                                @if($transaction->is_reconciled)
                                    <span class="badge bg-success"><i class="bi bi-check-circle me-1"></i>Yes</span>
                                @else
                                    <span class="badge bg-secondary">Not yet reconciled</span>
                                @endif
                            </td>
                        </tr>
                        @if($transaction->notes)
                        <tr>
                            <td class="text-muted" style="font-size:13px">Notes</td>
                            <td style="font-size:13px">{{ $transaction->notes }}</td>
                        </tr>
                        @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="col-lg-5">
        {{-- Receipt --}}
        <div class="card mb-3">
            <div class="card-header"><h5>Receipt / Document</h5></div>
            <div class="card-body text-center">
                @if($transaction->receipt_path)
                    @php $ext = pathinfo($transaction->receipt_path, PATHINFO_EXTENSION); @endphp
                    @if(in_array(strtolower($ext), ['jpg','jpeg','png']))
                        <img src="{{ Storage::url($transaction->receipt_path) }}"
                             alt="Receipt" class="img-fluid rounded mb-2" style="max-height:200px">
                    @else
                        <div class="py-4">
                            <i class="bi bi-file-earmark-pdf" style="font-size:48px;color:#c0392b"></i>
                        </div>
                    @endif
                    <a href="{{ Storage::url($transaction->receipt_path) }}" target="_blank" class="btn btn-sm btn-outline-primary">
                        <i class="bi bi-download me-1"></i> View / Download
                    </a>
                @else
                    <div class="py-4 text-muted">
                        <i class="bi bi-image" style="font-size:36px"></i>
                        <div class="mt-2" style="font-size:13px">No receipt attached.</div>
                        <a href="{{ route('transactions.edit', $transaction) }}" class="btn btn-sm btn-outline-secondary mt-2">
                            Upload Receipt
                        </a>
                    </div>
                @endif
            </div>
        </div>

        {{-- Meta --}}
        <div class="card">
            <div class="card-body" style="font-size:12px;color:#6b7280">
                <div class="d-flex justify-content-between mb-1">
                    <span>Created</span>
                    <span>{{ $transaction->created_at->format('d M Y, h:i A') }}</span>
                </div>
                <div class="d-flex justify-content-between">
                    <span>Last Updated</span>
                    <span>{{ $transaction->updated_at->format('d M Y, h:i A') }}</span>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection