@extends('dashboard.layouts.master')
@section('title', 'Transaction Details | Admin Panel')

@push('after-styles')
<style>
    /* ── Section Headers ── */
    .section-header {
        display: flex; align-items: center; gap: 10px;
        padding: 12px 16px; background: #f0f4ff;
        border-left: 4px solid #002868; border-radius: 4px;
        margin: 28px 0 18px;
    }
    .section-header h5 { margin: 0; font-weight: 700; color: #002868; font-size: 15px; }
    .section-header .material-icons { color: #002868; }

    /* ── Field labels ── */
    .info-label {
        font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
        color: #888; margin-bottom: 4px; font-weight: 700;
    }

    /* ── Status strip ── */
    .status-strip {
        display: flex; align-items: center; justify-content: space-between;
        padding: 14px 20px; border-radius: 8px; margin-bottom: 20px;
    }
    .status-strip.pending      { background:#fff8e1; border:1px solid #ffe082; }
    .status-strip.completed    { background:#e8f5e9; border:1px solid #a5d6a7; }
    .status-strip.refunded     { background:#ffebee; border:1px solid #ef9a9a; }

    .badge-pill-lg {
        padding: 5px 14px; border-radius: 20px; font-size: 12px;
        font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    }
    .pill-pending      { background:#fff3cd; color:#856404; }
    .pill-completed    { background:#d4edda; color:#155724; }
    .pill-refunded     { background:#f8d7da; color:#721c24; }

    .receipt-box {
        background: #f8f9fa; border-radius: 12px; padding: 24px;
        border: 1px dashed #ddd; margin-top: 20px;
    }
</style>
@endpush

@section('content')
<div class="padding website-label">
    <div class="box">
        {{-- ── Page Header ── --}}
        <div class="box-header m-b-2">
            <div class="box-header-left">
                <h3 class="d-block">Transaction Details</h3>
                <small class="d-inline-block">
                    <a href="{{ route('adminHome') }}">Dashboard</a> /
                    <a href="{{ route('financial-reports.index') }}">Financial Reports</a> /
                    <span>Transaction #{{ $transaction->transaction_number }}</span>
                </small>
            </div>
            <div class="box-header-right">
                <a href="{{ route('financial-reports.export-single-pdf', $transaction->id) }}" class="btn btn-default btn-sm m-r-xs">
                    <i class="material-icons md-18">file_download</i> Export PDF
                </a>
                <button type="button" onclick="window.print()" class="btn btn-default btn-sm m-r-xs">
                    <i class="material-icons md-18">print</i> Print Receipt
                </button>
                <a href="{{ route('financial-reports.index') }}" class="btn btn-default btn-sm">
                    <i class="material-icons md-18">arrow_back</i> Back to List
                </a>
            </div>
        </div>

        <div class="box-body">
            {{-- ── Status Strip ── --}}
            @php
                $status = $transaction->status;
                $statusMap = [
                    'pending'   => ['label'=>'Pending',   'strip'=>'pending',   'pill'=>'pill-pending'],
                    'completed' => ['label'=>'Completed', 'strip'=>'completed', 'pill'=>'pill-completed'],
                    'refunded'  => ['label'=>'Refunded',  'strip'=>'refunded',  'pill'=>'pill-refunded'],
                ];
                $si = $statusMap[$status] ?? $statusMap['pending'];
            @endphp

            <div class="status-strip {{ $si['strip'] }}">
                <div>
                    <strong>Transaction Status:</strong>&nbsp;
                    <span class="badge-pill-lg {{ $si['pill'] }}">{{ $si['label'] }}</span>
                    <small class="text-muted m-l-sm">
                        &mdash; {{ $transaction->created_at->format('d M Y, H:i') }}
                    </small>
                </div>
                <div class="text-right">
                    <span class="text-muted text-xs">REFERENCE NO.</span>
                    <div class="_600">#{{ $transaction->transaction_number }}</div>
                </div>
            </div>

            {{-- ── Financial Summary ── --}}
            <div class="receipt-box text-center">
                <span class="info-label">Current Transaction Total</span>
                <h1 class="display-4 _700 text-primary m-y-sm">
                    {{ $transaction->currency }} {{ number_format($transaction->amount, 2) }}
                </h1>
                <span class="badge badge-lg {{ $transaction->type == 'subscription' ? 'badge-info' : 'badge-success' }}">
                    {{ ucfirst(str_replace('_', ' ', $transaction->type)) }} Revenue
                </span>
            </div>

            {{-- ── Transaction Info ── --}}
            <div class="section-header">
                <i class="material-icons">receipt</i>
                <h5>Financial Information</h5>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <div class="info-label">Transaction Type</div>
                        <input type="text" class="form-control" value="{{ ucfirst(str_replace('_', ' ', $transaction->type)) }}" readonly>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <div class="info-label">Payment Method</div>
                        <input type="text" class="form-control text-primary _600" value="{{ ucfirst($transaction->payment_method) }}" readonly>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <div class="info-label">Currency</div>
                        <input type="text" class="form-control" value="{{ $transaction->currency }} (Bahraini Dinar)" readonly>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <div class="info-label">Processed Date</div>
                        <input type="text" class="form-control" value="{{ $transaction->created_at->format('l, F j, Y - H:i') }}" readonly>
                    </div>
                </div>
            </div>

            {{-- ── Entity Info ── --}}
            <div class="section-header">
                <i class="material-icons">account_balance</i>
                <h5>Entity / Party Information</h5>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <div class="info-label">Associated User / Admin</div>
                        <input type="text" class="form-control" value="{{ $transaction->user->name ?? 'N/A' }}" readonly>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <div class="info-label">User Email</div>
                        <input type="text" class="form-control" value="{{ $transaction->user->email ?? 'N/A' }}" readonly>
                    </div>
                </div>
                @if($transaction->business)
                <div class="col-md-6">
                    <div class="form-group">
                        <div class="info-label">Business Name</div>
                        <input type="text" class="form-control _600" value="{{ $transaction->business->business_name }}" readonly>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <div class="info-label">Business Email</div>
                        <input type="text" class="form-control" value="{{ $transaction->business->business_email ?? 'N/A' }}" readonly>
                    </div>
                </div>
                @endif
            </div>

            @if($transaction->description)
            <div class="section-header">
                <i class="material-icons">notes</i>
                <h5>Additional Notes</h5>
            </div>
            <div class="p-a bd rounded bg-light">
                <p class="m-0 italic text-muted">{{ $transaction->description }}</p>
            </div>
            @endif

        </div>{{-- end box-body --}}
    </div>{{-- end box --}}
</div>
@endsection