@extends('dashboard.layouts.app')

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

    <style>
        .treasury-show-page .ui-card {
            border: 1px solid #e5e7eb;
            border-radius: 22px;
            background: #fff;
            box-shadow: 0 14px 38px rgba(15, 23, 42, 0.07);
            overflow: hidden;
        }

        .treasury-profile-card {
            padding: 1.25rem;
            text-align: center;
        }

        .treasury-profile-icon {
            width: 92px;
            height: 92px;
            border-radius: 28px;
            margin: 0 auto 1rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #eff6ff, #eef2ff);
            color: #2563eb;
            font-size: 2.1rem;
            box-shadow: 0 12px 28px rgba(37, 99, 235, 0.12);
        }

        .treasury-profile-name {
            color: #111827;
            font-size: 1.2rem;
            font-weight: 950;
            line-height: 1.25;
            margin-bottom: 0.55rem;
            overflow-wrap: anywhere;
        }

        .treasury-balance-box {
            border: 1px solid #e5e7eb;
            border-radius: 20px;
            background: #f8fafc;
            padding: 1rem;
            margin-top: 1rem;
        }

        .treasury-balance-label {
            color: #64748b;
            font-size: 0.76rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 0.3rem;
        }

        .treasury-balance-value {
            color: #2563eb;
            font-size: 1.45rem;
            font-weight: 950;
            line-height: 1.15;
        }

        .treasury-balance-currency {
            color: #64748b;
            font-size: 0.82rem;
            font-weight: 850;
        }

        .quick-info-card {
            padding: 0;
        }

        .quick-info-head,
        .treasury-details-head {
            padding: 1rem 1.25rem;
            border-bottom: 1px solid #eef2f7;
            background: #fff;
        }

        .section-title {
            color: #111827;
            font-size: 1.02rem !important;
            font-weight: 900;
            margin: 0;
        }

        .section-sub {
            color: #64748b;
            font-size: 0.86rem;
            margin: 0.2rem 0 0;
            line-height: 1.5;
        }

        .quick-info-list {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .quick-info-item {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            padding: 1rem 1.25rem;
            border-bottom: 1px solid #eef2f7;
        }

        .quick-info-item:last-child {
            border-bottom: 0;
        }

        .quick-info-label {
            color: #64748b;
            font-size: 0.84rem;
            font-weight: 800;
        }

        .quick-info-value {
            color: #111827;
            font-size: 0.88rem;
            font-weight: 850;
            text-align: right;
            overflow-wrap: anywhere;
        }

        .treasury-details-card {
            min-height: 100%;
        }

        .treasury-details-body {
            padding: 1.25rem;
        }

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

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

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

        .detail-box {
            border: 1px solid #eef2f7;
            border-radius: 18px;
            background: #f8fafc;
            padding: 1rem;
            min-height: 100%;
        }

        .detail-label {
            display: block;
            color: #64748b;
            font-size: 0.74rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 0.35rem;
        }

        .detail-value {
            color: #111827;
            font-size: 1rem;
            font-weight: 900;
            line-height: 1.35;
            overflow-wrap: anywhere;
        }

        .detail-value--money {
            color: #166534;
            font-size: 1.25rem;
            font-weight: 950;
        }

        .bank-panel {
            border: 1px solid #fed7aa;
            border-left: 5px solid #f59e0b;
            border-radius: 20px;
            background: #fff7ed;
            padding: 1rem;
        }

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

        .bank-detail {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            min-width: 0;
        }

        .bank-detail-icon {
            width: 42px;
            height: 42px;
            border-radius: 14px;
            background: #fff;
            color: #c2410c;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .transaction-alert {
            border: 1px solid #bfdbfe;
            border-radius: 20px;
            background: #eff6ff;
            padding: 1rem;
            display: flex;
            align-items: flex-start;
            gap: 0.85rem;
            margin-top: 1.25rem;
        }

        .transaction-alert__icon {
            width: 44px;
            height: 44px;
            border-radius: 15px;
            background: #fff;
            color: #1d4ed8;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            font-size: 1.15rem;
        }

        .transaction-alert__title {
            color: #111827;
            font-size: 0.98rem !important;
            font-weight: 900;
            margin-bottom: 0.25rem;
        }

        .transaction-alert__text {
            color: #475569;
            font-size: 0.9rem;
            line-height: 1.6;
            margin: 0;
        }

        .treasury-entry-card {
            margin-top: 1rem;
        }

        .treasury-entry-head {
            padding: 1rem 1.25rem;
            border-bottom: 1px solid #eef2f7;
            background: #fff;
        }

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

        .treasury-entry-table-wrap table {
            min-width: 1120px;
        }

        .treasury-entry-table-wrap table thead th {
            background: #f8fafc;
            color: #475569;
            font-size: 0.72rem;
            font-weight: 850;
            text-transform: uppercase;
            letter-spacing: 0.035em;
            white-space: nowrap;
        }

        .treasury-entry-table-wrap table tbody td {
            color: #334155;
            font-size: 0.8rem;
            font-weight: 650;
            vertical-align: middle;
            white-space: nowrap;
        }

        .treasury-entry-ref {
            color: #111827;
            font-weight: 900;
        }

        .treasury-entry-muted {
            color: #64748b;
            font-size: 0.74rem;
            font-weight: 750;
        }

        .treasury-entry-desc {
            max-width: 300px;
            white-space: normal !important;
        }

        .treasury-entry-in {
            color: #15803d !important;
            font-weight: 900 !important;
        }

        .treasury-entry-out {
            color: #dc2626 !important;
            font-weight: 900 !important;
        }

        .treasury-entry-empty {
            padding: 1.5rem;
            text-align: center;
            color: #64748b;
            font-weight: 750;
        }

        .asset-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.4rem;
            min-height: 42px;
            border-radius: 999px;
            padding: 0.65rem 1rem;
            font-size: 0.86rem;
            font-weight: 850;
            text-decoration: none;
            transition: 0.18s ease;
            border: 1px solid transparent;
            white-space: nowrap;
        }

        .asset-btn--secondary {
            background: #fff;
            color: #374151;
            border-color: #dbe2ea;
        }

        .asset-btn--secondary:hover {
            background: #f8fafc;
            color: #111827;
        }

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

        .ui-pill--info {
            background: #eef2ff;
            color: #4338ca;
        }

        .ui-pill--warn {
            background: #fffbeb;
            color: #92400e;
        }

        .ui-pill--success {
            background: #f0fdf4;
            color: #166534;
        }

        .ui-pill--danger {
            background: #fef2f2;
            color: #b91c1c;
        }

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

            .bank-panel-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 575.98px) {
            .treasury-profile-card,
            .treasury-details-body,
            .quick-info-head,
            .treasury-details-head {
                padding: 1rem;
            }

            .quick-info-item {
                padding: 1rem;
                flex-direction: column;
            }

            .quick-info-value {
                text-align: left;
            }
        }
    </style>

    <div class="container-fluid app-bg treasury-show-page">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title
                    title="Treasury Details"
                    description="Review treasury balance, type, bank information, status, creator, and recent movement summary.">
                    <a href="{{ route('treasuries.index') }}" class="asset-btn asset-btn--secondary">
                        <i class="fas fa-arrow-left"></i>
                        Back to Treasuries
                    </a>
                </x-page-title>

                <div class="row g-4">
                    <div class="col-lg-4">
                        <div class="ui-card treasury-profile-card mb-4">
                            <div class="treasury-profile-icon">
                                <i class="fas {{ $treasury->type == 'Cash' ? 'fa-wallet' : 'fa-university' }}"></i>
                            </div>

                            <div class="treasury-profile-name">
                                {{ $treasury->name }}
                            </div>

                            <span class="ui-pill {{ $treasury->type == 'Cash' ? 'ui-pill--info' : 'ui-pill--warn' }}">
                                <i class="fas {{ $treasury->type == 'Cash' ? 'fa-money-bill-wave' : 'fa-building-columns' }}"></i>
                                {{ $treasury->type }}
                            </span>

                            <div class="treasury-balance-box">
                                <div class="treasury-balance-label">Current Balance</div>
                                <div class="treasury-balance-value">
                                    {{ number_format($treasury->current_balance ?? 0, 2) }}
                                    <span class="treasury-balance-currency">
                                        {{ $treasury->currency }}
                                    </span>
                                </div>
                            </div>
                        </div>

                        <div class="ui-card quick-info-card">
                            <div class="quick-info-head">
                                <h5 class="section-title">Quick Info</h5>
                                <p class="section-sub">Status and creation details.</p>
                            </div>

                            <ul class="quick-info-list">
                                <li class="quick-info-item">
                                    <span class="quick-info-label">Status</span>
                                    <span class="ui-pill {{ $treasury->status == 'Active' ? 'ui-pill--success' : 'ui-pill--danger' }}">
                                        <i class="fas {{ $treasury->status == 'Active' ? 'fa-check-circle' : 'fa-times-circle' }}"></i>
                                        {{ $treasury->status }}
                                    </span>
                                </li>

                                <li class="quick-info-item">
                                    <span class="quick-info-label">Created By</span>
                                    <span class="quick-info-value">
                                        {{ $treasury->createdBy ? $treasury->createdBy->full_name : 'System' }}
                                    </span>
                                </li>

                                <li class="quick-info-item">
                                    <span class="quick-info-label">Created At</span>
                                    <span class="quick-info-value">
                                        {{ $treasury->created_at?->format('Y-m-d H:i') ?? '' }}
                                    </span>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="col-lg-8">
                        <div class="ui-card treasury-details-card">
                            <div class="treasury-details-head">
                                <h5 class="section-title">Treasury Details</h5>
                                <p class="section-sub">
                                    Main treasury information and related transaction status.
                                </p>
                            </div>

                            <div class="treasury-details-body">
                                <div class="details-grid">
                                    <div class="detail-col-6">
                                        <div class="detail-box">
                                            <span class="detail-label">Treasury Name</span>
                                            <div class="detail-value">
                                                {{ $treasury->name }}
                                            </div>
                                        </div>
                                    </div>

                                    <div class="detail-col-6">
                                        <div class="detail-box">
                                            <span class="detail-label">Treasury Type</span>
                                            <div class="detail-value">
                                                {{ $treasury->type }}
                                            </div>
                                        </div>
                                    </div>

                                    @if ($treasury->type == 'Bank')
                                        <div class="detail-col-12">
                                            <div class="bank-panel">
                                                <div class="bank-panel-grid">
                                                    <div class="bank-detail">
                                                        <div class="bank-detail-icon">
                                                            <i class="fas fa-university"></i>
                                                        </div>

                                                        <div>
                                                            <span class="detail-label">Bank Name</span>
                                                            <div class="detail-value">
                                                                {{ $treasury->bank_name ?: '-' }}
                                                            </div>
                                                        </div>
                                                    </div>

                                                    @if (($treasury->payment_flow ?? 'manual') === 'manual')
                                                        <div class="bank-detail">
                                                            <div class="bank-detail-icon"><i class="fas fa-user"></i></div>
                                                            <div>
                                                                <span class="detail-label">Account Name</span>
                                                                <div class="detail-value">{{ $treasury->account_name ?: '-' }}</div>
                                                            </div>
                                                        </div>
                                                    @endif

                                                    <div class="bank-detail">
                                                        <div class="bank-detail-icon">
                                                            <i class="fas fa-id-card"></i>
                                                        </div>

                                                        <div>
                                                            <span class="detail-label">Account Number</span>
                                                            <div class="detail-value">
                                                                {{ $treasury->account_number ?: '-' }}
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <div class="bank-detail">
                                                        <div class="bank-detail-icon">
                                                            <i class="fas fa-barcode"></i>
                                                        </div>

                                                        <div>
                                                            <span class="detail-label">IBAN</span>
                                                            <div class="detail-value">
                                                                {{ $treasury->iban ?: '-' }}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endif

                                    <div class="detail-col-6">
                                        <div class="detail-box">
                                            <span class="detail-label">Opening Balance</span>
                                            <div class="detail-value detail-value--money">
                                                {{ number_format($treasury->opening_balance, 2) }}
                                                {{ $treasury->currency }}
                                            </div>
                                        </div>
                                    </div>

                                    <div class="detail-col-6">
                                        <div class="detail-box">
                                            <span class="detail-label">Currency</span>
                                            <div class="detail-value">
                                                {{ $treasury->currency }}
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="transaction-alert">
                                    <div class="transaction-alert__icon">
                                        <i class="fas fa-info-circle"></i>
                                    </div>

                                    <div>
                                        <div class="transaction-alert__title">Movement Summary</div>
                                        <p class="transaction-alert__text">
                                            This treasury is currently <strong>{{ $treasury->status }}</strong>.
                                            @if($treasury->hasTransactions())
                                                It has recorded movements and cannot be deleted or updated in ways that affect existing records.
                                            @else
                                                No movements have been recorded yet.
                                            @endif
                                        </p>
                                    </div>
                                </div>

                                <div class="treasury-entry-card">
                                    <div class="treasury-entry-head">
                                        <h5 class="section-title">Treasury Account Entries</h5>
                                        <p class="section-sub">
                                            Journal entry lines posted to accounts linked with this treasury.
                                        </p>
                                    </div>

                                    <div class="treasury-entry-table-wrap">
                                        <x-table :headers="['Date', 'Reference', 'Type', 'Account', 'Description', 'Cost Center', 'Party Type', 'Party', 'Incoming', 'Outgoing', 'Status', 'Entry']">
                                            @forelse (($treasury->treasury_account_entries ?? collect()) as $entryLine)
                                                <tr>
                                                    <td>{{ $entryLine->entry_date }}</td>
                                                    <td>
                                                        <div class="treasury-entry-ref">{{ $entryLine->reference_no }}</div>
                                                        <div class="treasury-entry-muted">Line #{{ $entryLine->id }}</div>
                                                    </td>
                                                    <td>{{ $entryLine->entry_type_label }}</td>
                                                    <td>{{ $entryLine->account_label }}</td>
                                                    <td class="treasury-entry-desc">{{ $entryLine->entry_description }}</td>
                                                    <td>{{ $entryLine->cost_center_label }}</td>
                                                    <td>{{ $entryLine->party_type_label }}</td>
                                                    <td>{{ $entryLine->party_label }}</td>
                                                    <td class="treasury-entry-in">
                                                        {{ $entryLine->incoming_amount > 0 ? number_format((float) $entryLine->incoming_amount, 2) : '-' }}
                                                    </td>
                                                    <td class="treasury-entry-out">
                                                        {{ $entryLine->outgoing_amount > 0 ? number_format((float) $entryLine->outgoing_amount, 2) : '-' }}
                                                    </td>
                                                    <td>{{ $entryLine->entry_status }}</td>
                                                    <td>
                                                        <a href="{{ route('journal_entries.show', $entryLine->journal_entry_id) }}" class="asset-btn asset-btn--secondary">
                                                            <i class="fas fa-eye"></i>
                                                        </a>
                                                    </td>
                                                </tr>
                                            @empty
                                                <tr>
                                                    <td colspan="12">
                                                        <div class="treasury-entry-empty">No journal entries found for this treasury account.</div>
                                                    </td>
                                                </tr>
                                            @endforelse
                                        </x-table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
@endsection