@extends('patent::layouts.master')

@section('title', 'Transaction Details - ' . $transaction->reference_no)

@section('content')
<div class="container-fluid mt-4">
    <div class="row">
        <div class="col-12">
            <div class="card shadow">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <div>
                        <h5 class="mb-0">Transaction Details</h5>
                        <small class="text-muted">{{ $transaction->reference_no }}</small>
                    </div>
                    <div>
                        <a href="{{ route('patent.transactions.edit', [$patent->id, $transaction->id]) }}" class="btn btn-primary">
                            <i class="fas fa-edit"></i> Edit
                        </a>
                        <a href="{{ route('patent.transactions.index', $patent->id) }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Back to Transactions
                        </a>
                    </div>
                </div>

                <div class="card-body">
                    <div class="row">
                        <!-- Transaction Information -->
                        <div class="col-md-8">
                            <div class="card">
                                <div class="card-header">
                                    <h6 class="mb-0">Transaction Information</h6>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                        <div class="col-md-6">
                                            <table class="table table-borderless">
                                                <tr>
                                                    <td><strong>Reference No:</strong></td>
                                                    <td>{{ $transaction->reference_no }}</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Transaction Type:</strong></td>
                                                    <td>{{ $transaction->transactionType->name ?? 'N/A' }}</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>AIPT Reference:</strong></td>
                                                    <td>
                                                        <span class="badge bg-primary">{{ $transaction->aipt_ref }}</span>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Country:</strong></td>
                                                    <td>{{ $transaction->country ?? 'N/A' }}</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Amount:</strong></td>
                                                    <td>
                                                        <strong class="text-primary">{{ $transaction->formatted_amount_usd }}</strong>
                                                        @if($transaction->currency !== 'USD')
                                                            <br><small class="text-muted">{{ $transaction->amount }} {{ $transaction->currency }}</small>
                                                        @endif
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                        <div class="col-md-6">
                                            <table class="table table-borderless">
                                                <tr>
                                                    <td><strong>Exchange Rate:</strong></td>
                                                    <td>{{ number_format($transaction->exchange_rate, 4) }}</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Transaction Date:</strong></td>
                                                    <td>{{ $transaction->transaction_date ? $transaction->transaction_date->format('M d, Y') : 'N/A' }}</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Deadline:</strong></td>
                                                    <td>
                                                        @if($transaction->deadline)
                                                            {{ $transaction->deadline->format('M d, Y') }}
                                                            @if($transaction->is_overdue)
                                                                <span class="badge bg-danger ms-2">Overdue</span>
                                                            @elseif($transaction->days_until_deadline !== null && $transaction->days_until_deadline <= 7)
                                                                <span class="badge bg-warning ms-2">{{ $transaction->days_until_deadline }} days left</span>
                                                            @endif
                                                        @else
                                                            N/A
                                                        @endif
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Bill Deadline:</strong></td>
                                                    <td>{{ $transaction->bill_deadline ? $transaction->bill_deadline->format('M d, Y') : 'N/A' }}</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Payment Method:</strong></td>
                                                    <td>{{ $transaction->payment_method ? ucfirst(str_replace('_', ' ', $transaction->payment_method)) : 'N/A' }}</td>
                                                </tr>
                                                <tr>
                                                    <td><strong>Transaction Reference:</strong></td>
                                                    <td>{{ $transaction->transaction_reference ?? 'N/A' }}</td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>

                                    @if($transaction->description)
                                    <div class="mt-3">
                                        <h6>Description</h6>
                                        <p class="text-muted">{{ $transaction->description }}</p>
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <!-- Status and Actions -->
                        <div class="col-md-4">
                            <div class="card">
                                <div class="card-header">
                                    <h6 class="mb-0">Status & Actions</h6>
                                </div>
                                <div class="card-body">
                                    <div class="mb-3">
                                        <label class="form-label"><strong>Status:</strong></label>
                                        <div>
                                            <span class="badge bg-{{ $transaction->status_badge }} fs-6">
                                                {{ ucfirst($transaction->status) }}
                                            </span>
                                        </div>
                                    </div>

                                    <div class="mb-3">
                                        <label class="form-label"><strong>Bill Status:</strong></label>
                                        <div>
                                            <span class="badge bg-{{ $transaction->bill_status_badge }} fs-6">
                                                {{ ucfirst(str_replace('_', ' ', $transaction->bill_status)) }}
                                            </span>
                                        </div>
                                    </div>

                                    @if($transaction->invoice_no)
                                    <div class="mb-3">
                                        <label class="form-label"><strong>Invoice No:</strong></label>
                                        <div>{{ $transaction->invoice_no }}</div>
                                    </div>
                                    @endif

                                    <!-- Action Buttons -->
                                    <div class="d-grid gap-2">
                                        @if($transaction->status === 'pending')
                                            <form method="POST" action="{{ route('patent.transactions.approve', [$patent->id, $transaction->id]) }}">
                                                @csrf
                                                <button type="submit" class="btn btn-success w-100">
                                                    <i class="fas fa-check"></i> Approve Transaction
                                                </button>
                                            </form>
                                            <form method="POST" action="{{ route('patent.transactions.reject', [$patent->id, $transaction->id]) }}">
                                                @csrf
                                                <button type="submit" class="btn btn-danger w-100">
                                                    <i class="fas fa-times"></i> Reject Transaction
                                                </button>
                                            </form>
                                        @elseif($transaction->status === 'approved')
                                            <form method="POST" action="{{ route('patent.transactions.mark-paid', [$patent->id, $transaction->id]) }}">
                                                @csrf
                                                <button type="submit" class="btn btn-info w-100">
                                                    <i class="fas fa-dollar-sign"></i> Mark as Paid
                                                </button>
                                            </form>
                                        @endif
                                    </div>
                                </div>
                            </div>

                            <!-- Transaction History -->
                            <div class="card mt-3">
                                <div class="card-header">
                                    <h6 class="mb-0">Transaction History</h6>
                                </div>
                                <div class="card-body">
                                    <div class="timeline">
                                        <div class="timeline-item">
                                            <div class="timeline-marker bg-primary"></div>
                                            <div class="timeline-content">
                                                <h6 class="timeline-title">Transaction Created</h6>
                                                <p class="timeline-text text-muted">
                                                    Created by {{ $transaction->creator->name ?? 'Unknown' }}
                                                </p>
                                                <small class="text-muted">{{ $transaction->created_at->format('M d, Y H:i') }}</small>
                                            </div>
                                        </div>

                                        @if($transaction->approved_at)
                                        <div class="timeline-item">
                                            <div class="timeline-marker bg-success"></div>
                                            <div class="timeline-content">
                                                <h6 class="timeline-title">Transaction Approved</h6>
                                                <p class="timeline-text text-muted">
                                                    Approved by {{ $transaction->approver->name ?? 'Unknown' }}
                                                </p>
                                                <small class="text-muted">{{ $transaction->approved_at->format('M d, Y H:i') }}</small>
                                            </div>
                                        </div>
                                        @endif

                                        @if($transaction->status === 'paid')
                                        <div class="timeline-item">
                                            <div class="timeline-marker bg-info"></div>
                                            <div class="timeline-content">
                                                <h6 class="timeline-title">Payment Completed</h6>
                                                <p class="timeline-text text-muted">
                                                    Transaction marked as paid
                                                </p>
                                                <small class="text-muted">{{ $transaction->updated_at->format('M d, Y H:i') }}</small>
                                            </div>
                                        </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Comments Section -->
                    @if($transaction->comments->count() > 0)
                    <div class="row mt-4">
                        <div class="col-12">
                            <div class="card">
                                <div class="card-header">
                                    <h6 class="mb-0">Comments</h6>
                                </div>
                                <div class="card-body">
                                    @foreach($transaction->comments as $comment)
                                    <div class="comment-item border-bottom pb-3 mb-3">
                                        <div class="d-flex justify-content-between align-items-start">
                                            <div>
                                                <strong>{{ $comment->addedBy->name ?? 'Unknown' }}</strong>
                                                <span class="text-muted ms-2">{{ $comment->created_at->format('M d, Y H:i') }}</span>
                                            </div>
                                            <span class="badge bg-{{ $comment->status === 'active' ? 'success' : 'secondary' }}">
                                                {{ ucfirst($comment->status) }}
                                            </span>
                                        </div>
                                        <p class="mt-2 mb-0">{{ $comment->comment }}</p>
                                    </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.timeline {
    position: relative;
    padding-left: 30px;
}

.timeline-item {
    position: relative;
    margin-bottom: 20px;
}

.timeline-marker {
    position: absolute;
    left: -35px;
    top: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.timeline-content {
    padding-left: 15px;
}

.timeline-title {
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: 600;
}

.timeline-text {
    font-size: 13px;
    margin-bottom: 5px;
}
</style>
@endsection