@extends('dashboard.layouts.app')

@section('content')
    @include('components.alert')

    <style>
        .payments-show-page .ui-card {
            border: 1px solid #e5e7eb;
            border-radius: 20px;
            background: #fff;
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
            overflow: hidden;
        }

        .payments-show-page .ui-card__header {
            padding: 1rem 1.25rem;
            border-bottom: 1px solid #eef2f7;
            background: #fff;
        }

        .show-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 1rem;
        }

        .show-col-6 { grid-column: span 6 / span 6; }
        .show-col-12 { grid-column: span 12 / span 12; }

        .info-box {
            border: 1px solid #e5e7eb;
            border-radius: 18px;
            padding: 1rem;
            background: #fff;
            height: 100%;
        }

        .info-label {
            color: #64748b;
            font-size: 0.78rem;
            font-weight: 850;
            text-transform: uppercase;
            letter-spacing: 0.04em;
        }

        .info-value {
            color: #111827;
            font-size: 0.96rem;
            font-weight: 850;
            margin-top: 0.25rem;
            word-break: break-word;
        }

        .ui-pill {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            border-radius: 999px;
            padding: 0.36rem 0.72rem;
            font-size: 0.74rem;
            font-weight: 850;
            line-height: 1.2;
            white-space: nowrap;
        }

        .ui-pill--success { background: #f0fdf4; color: #166534; }
        .ui-pill--warn { background: #fffbeb; color: #92400e; }
        .ui-pill--danger { background: #fef2f2; color: #b91c1c; }
        .ui-pill--neutral { background: #f3f4f6; color: #374151; }
        .ui-pill--primary { background: #eff6ff; color: #1d4ed8; }

        .payment-table-wrap {
            width: 100%;
            overflow-x: auto;
        }

        .payment-lines-table {
            min-width: 820px;
            width: 100%;
            margin: 0;
            vertical-align: middle;
        }

        .payment-lines-table thead th {
            background: #f8fafc;
            color: #475569;
            font-size: 0.74rem;
            font-weight: 850;
            text-transform: uppercase;
            letter-spacing: 0.04em;
            border-bottom: 1px solid #e5e7eb;
            white-space: nowrap;
            padding: 0.8rem 0.9rem;
        }

        .payment-lines-table tbody td {
            color: #334155;
            font-size: 0.88rem;
            font-weight: 600;
            border-color: #eef2f7;
            vertical-align: middle;
            padding: 0.85rem 0.9rem;
        }

        .money-debit { color: #166534; font-weight: 900; }
        .money-credit { color: #b91c1c; font-weight: 900; }

        @media (max-width: 991.98px) {
            .show-col-6 { grid-column: span 12 / span 12; }
        }
    </style>

    <div class="container-fluid app-bg payments-show-page">
        <div class="page-shell">
            <div class="space-y-4">
                <x-page-title
                    title="Payment Details"
                    description="Review payment metadata, party, allocations, and journal entry posting.">
                    <div class="d-flex gap-2 flex-wrap">
                        <a href="{{ route('payments.index') }}" class="btn btn-outline-secondary rounded-pill">Back</a>
                        @if (in_array($payment->status, ['draft', 'pending'], true))
                            <a href="{{ route('payments.edit', $payment->id) }}" class="btn btn-outline-primary rounded-pill">Edit</a>
                            <form action="{{ route('payments.post', $payment->id) }}" method="POST" class="d-inline">
                                @csrf
                                <button type="submit" class="btn btn-primary rounded-pill">Post</button>
                            </form>
                        @endif
                    </div>
                </x-page-title>

                <div class="ui-card">
                    <div class="ui-card__header d-flex align-items-center justify-content-between flex-wrap gap-2">
                        <div>
                            <h5 class="mb-0 fw-bold">{{ $payment->payment_no }}</h5>
                            <div class="text-muted small">{{ $payment->partyLabel }}</div>
                        </div>

                        @php
                            $statusClass = match ($payment->status) {
                                'posted' => 'ui-pill--success',
                                'draft' => 'ui-pill--warn',
                                'pending' => 'ui-pill--primary',
                                'reversed' => 'ui-pill--danger',
                                'voided' => 'ui-pill--neutral',
                                default => 'ui-pill--neutral',
                            };
                        @endphp
                        <span class="ui-pill {{ $statusClass }}">{{ ucfirst($payment->status) }}</span>
                    </div>

                    <div class="p-3 p-md-4">
                        <div class="show-grid mb-3">
                            <div class="show-col-6">
                                <div class="info-box">
                                    <div class="info-label">Payment Date</div>
                                    <div class="info-value">{{ optional($payment->payment_date)->format('Y-m-d') ?? $payment->payment_date }}</div>
                                </div>
                            </div>
                            <div class="show-col-6">
                                <div class="info-box">
                                    <div class="info-label">Journal Reference</div>
                                    <div class="info-value">{{ $payment->journalEntry?->reference_no ?? '-' }}</div>
                                </div>
                            </div>
                            <div class="show-col-6">
                                <div class="info-box">
                                    <div class="info-label">Direction</div>
                                    <div class="info-value">{{ ucfirst($payment->direction) }}</div>
                                </div>
                            </div>
                            <div class="show-col-6">
                                <div class="info-box">
                                    <div class="info-label">Payment Method</div>
                                    <div class="info-value">{{ ucwords(str_replace('_', ' ', $payment->payment_method ?? 'cash')) }}</div>
                                </div>
                            </div>
                            <div class="show-col-6">
                                <div class="info-box">
                                    <div class="info-label">Cost Center</div>
                                    <div class="info-value">{{ $payment->costCenter ? $payment->costCenter->code . ' - ' . $payment->costCenter->title : '-' }}</div>
                                </div>
                            </div>
                            <div class="show-col-6">
                                <div class="info-box">
                                    <div class="info-label">From Account</div>
                                    <div class="info-value">{{ $payment->fromAccount?->code }} - {{ $payment->fromAccount?->title }}</div>
                                </div>
                            </div>
                            <div class="show-col-6">
                                <div class="info-box">
                                    <div class="info-label">To Account</div>
                                    <div class="info-value">{{ $payment->toAccount?->code }} - {{ $payment->toAccount?->title }}</div>
                                </div>
                            </div>
                            <div class="show-col-6">
                                <div class="info-box">
                                    <div class="info-label">Party</div>
                                    <div class="info-value">{{ $payment->partyLabel }}</div>
                                </div>
                            </div>
                            <div class="show-col-6">
                                <div class="info-box">
                                    <div class="info-label">Amount</div>
                                    <div class="info-value">{{ number_format((float) ($payment->treasury_amount ?? $payment->amount), 2) }} {{ $payment->treasury_currency ?: $payment->currency }}</div>
                                </div>
                            </div>
                        </div>

                        <div class="ui-card mb-3">
                            <div class="ui-card__header">
                                <strong>Journal Entry</strong>
                            </div>
                            <div class="payment-table-wrap">
                                @if ($payment->journalEntry)
                                    <table class="payment-lines-table">
                                        <thead>
                                            <tr>
                                                <th>Account</th>
                                                <th>Cost Center</th>
                                                <th>Debit</th>
                                                <th>Credit</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($payment->journalEntry->lines as $line)
                                                <tr>
                                                    <td>
                                                        <div class="fw-bold">{{ $line->account?->title }}</div>
                                                        <div class="text-muted small">{{ $line->account?->code }}</div>
                                                    </td>
                                                    <td>
                                                        @if ($line->costCenter)
                                                            <div class="fw-bold">{{ $line->costCenter->title }}</div>
                                                            <div class="text-muted small">{{ $line->costCenter->code }}</div>
                                                        @else
                                                            -
                                                        @endif
                                                    </td>
                                                    <td class="money-debit">{{ $line->debit > 0 ? number_format($line->debit, 2) : '-' }}</td>
                                                    <td class="money-credit">{{ $line->credit > 0 ? number_format($line->credit, 2) : '-' }}</td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                @else
                                    <div class="p-3 text-muted">This payment has not been posted yet.</div>
                                @endif
                            </div>
                        </div>

                        <div class="ui-card mb-3">
                            <div class="ui-card__header">
                                <strong>Allocations</strong>
                            </div>
                            <div class="payment-table-wrap">
                                <table class="payment-lines-table">
                                    <thead>
                                        <tr>
                                            <th>Document</th>
                                            <th>Amount</th>
                                            <th>Reversal</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse ($payment->allocations as $allocation)
                                            <tr>
                                                <td>{{ class_basename($allocation->allocatable_type) }} #{{ $allocation->allocatable_id }}</td>
                                                <td>{{ number_format((float) $allocation->allocated_amount, 2) }}</td>
                                                <td>{{ $allocation->is_reversal ? 'Yes' : 'No' }}</td>
                                            </tr>
                                        @empty
                                            <tr>
                                                <td colspan="3" class="text-center text-muted py-4">No allocations linked.</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="show-grid">
                            <div class="show-col-6">
                                <div class="info-box">
                                    <div class="info-label">Notes</div>
                                    <div class="info-value">{{ $payment->notes ?: '-' }}</div>
                                </div>
                            </div>
                            <div class="show-col-6">
                                <div class="info-box">
                                    <div class="info-label">Reversal Reason</div>
                                    <div class="info-value">{{ $payment->reversal_reason ?: '-' }}</div>
                                </div>
                            </div>
                        </div>

                        @if ($payment->status === 'posted')
                            <form action="{{ route('payments.reverse', $payment->id) }}" method="POST" class="mt-4">
                                @csrf
                                <div class="row g-3">
                                    <div class="col-md-9">
                                        <label class="form-label">Reversal Reason</label>
                                        <input type="text" name="reason" class="form-control" placeholder="Why is this payment being reversed?">
                                    </div>
                                    <div class="col-md-3 d-flex align-items-end">
                                        <button type="submit" class="btn btn-outline-danger w-100 rounded-pill">Reverse Payment</button>
                                    </div>
                                </div>
                            </form>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection