@extends('dashboard.layouts.app')

@section('content')
    <style>
        .journal-review-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;
        }

        .journal-document {
            /* max-width: 1120px; */
            margin: 0 auto;
        }

        .journal-document-head {
            padding: 1.35rem;
            border-bottom: 1px solid #eef2f7;
            background:
                radial-gradient(circle at 10% 10%, rgba(37, 99, 235, 0.08), transparent 35%),
                linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .journal-title-block {
            display: flex;
            align-items: center;
            gap: 0.9rem;
            min-width: 0;
        }

        .journal-title-icon {
            width: 56px;
            height: 56px;
            border-radius: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #eff6ff, #eef2ff);
            color: #2563eb;
            font-size: 1.45rem;
            flex-shrink: 0;
        }

        .journal-title {
            color: #111827;
            font-size: 1.25rem;
            font-weight: 950;
            line-height: 1.2;
            margin: 0;
        }

        .journal-subtitle {
            color: #64748b;
            font-size: 0.9rem;
            line-height: 1.5;
            margin: 0.3rem 0 0;
        }

        .journal-reference-box {
            text-align: right;
            min-width: 220px;
        }

        .journal-reference-label {
            color: #64748b;
            font-size: 0.74rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            margin-bottom: 0.4rem;
        }

        .journal-reference-value {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            border-radius: 999px;
            padding: 0.48rem 0.85rem;
            background: #eef2ff;
            color: #4338ca;
            font-size: 0.82rem;
            font-weight: 900;
        }

        .journal-document-body {
            padding: 1.35rem;
        }

        .journal-info-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 360px;
            gap: 1rem;
            margin-bottom: 1.2rem;
        }

        .journal-info-card {
            border: 1px solid #e5e7eb;
            border-radius: 18px;
            background: #fff;
            box-shadow: 0 8px 22px rgba(15, 23, 42, 0.045);
            padding: 1rem;
            min-width: 0;
        }

        .journal-info-title {
            color: #64748b;
            font-size: 0.75rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            margin-bottom: 0.45rem;
        }

        .journal-info-text {
            color: #111827;
            font-size: 1rem;
            font-weight: 750;
            line-height: 1.65;
            margin: 0;
            overflow-wrap: anywhere;
        }

        .journal-meta-list {
            display: flex;
            flex-direction: column;
            gap: 0.7rem;
        }

        .journal-meta-row {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            border-bottom: 1px solid #eef2f7;
            padding-bottom: 0.7rem;
        }

        .journal-meta-row:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }

        .journal-meta-label {
            color: #64748b;
            font-size: 0.78rem;
            font-weight: 850;
            white-space: nowrap;
        }

        .journal-meta-value {
            color: #111827;
            font-size: 0.9rem;
            font-weight: 850;
            text-align: right;
            overflow-wrap: anywhere;
        }

        .journal-lines-card {
            border: 1px solid #e5e7eb;
            border-radius: 20px;
            background: #fff;
            overflow: hidden;
            margin-top: 1rem;
        }

        .journal-lines-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
            padding: 1rem 1.15rem;
            border-bottom: 1px solid #eef2f7;
            background: #fff;
        }

        .journal-lines-title {
            color: #111827;
            font-size: 1.02rem;
            font-weight: 900;
            margin: 0;
        }

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

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

        .journal-review-table {
            min-width: 860px;
            width: 100%;
            margin: 0;
            vertical-align: middle;
        }

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

        .journal-review-table tbody td {
            color: #334155;
            font-size: 0.9rem;
            font-weight: 600;
            border-color: #eef2f7;
            vertical-align: middle;
            padding: 1rem;
        }

        .journal-review-table tbody tr:hover {
            background: #fbfdff;
        }

        .journal-review-table tfoot td {
            background: #f8fafc;
            border-top: 1px solid #e5e7eb;
            padding: 1rem;
            font-weight: 950;
        }

        .account-cell {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            min-width: 320px;
        }

        .account-icon {
            width: 42px;
            height: 42px;
            border-radius: 15px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: #eff6ff;
            color: #2563eb;
            flex-shrink: 0;
        }

        .account-title {
            color: #111827;
            font-size: 0.92rem;
            font-weight: 900;
            line-height: 1.35;
        }

        .account-code {
            color: #94a3b8;
            font-size: 0.78rem;
            font-weight: 750;
            margin-top: 0.12rem;
        }

        .account-tags {
            display: flex;
            align-items: center;
            gap: 0.4rem;
            flex-wrap: wrap;
            margin-top: 0.45rem;
        }

        .money-debit {
            color: #166534;
            font-weight: 950;
        }

        .money-credit {
            color: #b91c1c;
            font-weight: 950;
        }

        .money-empty {
            color: #cbd5e1;
            font-weight: 900;
        }

        .journal-balance-strip {
            margin-top: 1rem;
            border-radius: 18px;
            background: #111827;
            color: #fff;
            padding: 1rem 1.15rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .journal-balance-label {
            color: rgba(255, 255, 255, 0.72);
            font-size: 0.76rem;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            margin-bottom: 0.2rem;
        }

        .journal-balance-title {
            color: #fff;
            font-size: 1rem;
            font-weight: 950;
            margin: 0;
        }

        .journal-balance-values {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            flex-wrap: wrap;
        }

        .journal-balance-pill {
            border-radius: 999px;
            padding: 0.5rem 0.85rem;
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            font-size: 0.85rem;
            font-weight: 900;
        }

        .journal-actions {
            margin-top: 1.25rem;
            padding-top: 1.1rem;
            border-top: 1px solid #eef2f7;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .journal-actions-group {
            display: flex;
            align-items: center;
            gap: 0.65rem;
            flex-wrap: wrap;
        }

        .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;
            cursor: pointer;
        }

        .asset-btn--primary {
            background: #2563eb;
            color: #fff;
            border-color: #2563eb;
        }

        .asset-btn--primary:hover {
            background: #1d4ed8;
            color: #fff;
            transform: translateY(-1px);
            box-shadow: 0 12px 26px rgba(37, 99, 235, 0.18);
        }

        .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.36rem 0.72rem;
            font-size: 0.74rem;
            font-weight: 850;
            line-height: 1.2;
            white-space: nowrap;
        }

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

        .ui-pill--neutral {
            background: #f3f4f6;
            color: #374151;
        }

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

        @media (max-width: 991.98px) {
            .journal-info-grid {
                grid-template-columns: 1fr;
            }

            .journal-reference-box {
                text-align: left;
                min-width: 0;
            }

            .journal-actions {
                align-items: flex-start;
            }
        }

        @media (max-width: 575.98px) {
            .journal-document-head,
            .journal-document-body {
                padding: 1rem;
            }

            .journal-actions,
            .journal-actions-group,
            .journal-actions .asset-btn {
                width: 100%;
            }

            .journal-actions {
                flex-direction: column;
            }

            .account-cell {
                min-width: 260px;
            }
        }

        @media print {
            body * {
                visibility: hidden;
            }

            #journalPrintable,
            #journalPrintable * {
                visibility: visible;
            }

            #journalPrintable {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                box-shadow: none !important;
                border: 0 !important;
            }

            .no-print {
                display: none !important;
            }

            .journal-review-page,
            .page-shell,
            .space-y-4 {
                padding: 0 !important;
                margin: 0 !important;
                background: #fff !important;
            }

            .journal-document-head,
            .journal-document-body {
                padding: 12mm !important;
            }

            .journal-balance-strip {
                background: #111827 !important;
                color: #fff !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }
        }
    </style>

    @php
        $totalDebit = 0;
        $totalCredit = 0;
    @endphp

    <div class=" app-bg journal-review-page">
        <div class="page-shell">
            <div class="space-y-4">

                <x-page-title
                    title="Journal Entry Review"
                    description="Review entry metadata, account lines, debit totals, credit totals, and reference information.">
                    <a href="{{ route('journal_entries.index') }}" class="asset-btn asset-btn--secondary no-print">
                        <i class="fas fa-arrow-left"></i>
                        Back to List
                    </a>
                </x-page-title>

                <div class="journal-document ui-card" id="journalPrintable">
                    <div class="journal-document-head">
                        <div class="journal-title-block">
                            <div class="journal-title-icon">
                                <i class="fas fa-file-invoice-dollar"></i>
                            </div>

                            <div>
                                <h4 class="journal-title">Journal Entry #{{ $journalEntry->id }}</h4>
                                <p class="journal-subtitle">
                                    Registered on {{ $journalEntry->date->format('M d, Y') }}
                                </p>
                            </div>
                        </div>

                        <div class="journal-reference-box">
                            <div class="journal-reference-label">Reference</div>
                            <div class="journal-reference-value">
                                <i class="fas fa-hashtag"></i>
                                JE-{{ str_pad($journalEntry->id, 5, '0', STR_PAD_LEFT) }}
                            </div>
                        </div>
                    </div>

                    <div class="journal-document-body">
                        <div class="journal-info-grid">
                            <div class="journal-info-card">
                                <div class="journal-info-title">Description / Memo</div>
                                <p class="journal-info-text">
                                    {{ $journalEntry->description ?: 'No description provided.' }}
                                </p>
                            </div>

                            <div class="journal-info-card">
                                <div class="journal-info-title">Metadata</div>

                                <div class="journal-meta-list">
                                    <div class="journal-meta-row">
                                        <span class="journal-meta-label">Created By</span>
                                        {{-- <span class="journal-meta-value">
                                            {{ $journalEntry->creator->name ?? 'System' }}
                                        </span> --}}
                                    </div>

                                    <div class="journal-meta-row">
                                        <span class="journal-meta-label">Created At</span>
                                        <span class="journal-meta-value">
                                            {{ $journalEntry->created_at->format('Y-m-d H:i') }}
                                        </span>
                                    </div>

                                    <div class="journal-meta-row">
                                        <span class="journal-meta-label">Entry Date</span>
                                        <span class="journal-meta-value">
                                            {{ $journalEntry->date->format('Y-m-d') }}
                                        </span>
                                    </div>

                                    @php
                                        $displayPartyName = $journalEntry->payment?->party_name ?: $journalEntry->party_name;
                                        $displayPartyType = $journalEntry->payment?->party_type ?: $journalEntry->party_type;
                                        $displayPartyRef = $journalEntry->payment?->party_ref ?: $journalEntry->party_ref;
                                    @endphp

                                    @if($displayPartyName || $displayPartyType)
                                        <div class="journal-meta-row">
                                            <span class="journal-meta-label">Party</span>
                                            <span class="journal-meta-value">
                                                {{ $displayPartyName ?: '-' }}
                                                @if($displayPartyType)
                                                    ({{ ucfirst($displayPartyType) }})
                                                @endif
                                                @if($displayPartyRef)
                                                    - {{ $displayPartyRef }}
                                                @endif
                                            </span>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="journal-lines-card">
                            <div class="journal-lines-head">
                                <div>
                                    <h5 class="journal-lines-title">Account Lines</h5>
                                    <p class="journal-lines-sub">
                                        Debit and credit breakdown for this journal entry.
                                    </p>
                                </div>

                                <span class="ui-pill ui-pill--info">
                                    <i class="fas fa-list"></i>
                                    {{ $journalEntry->lines->count() }} Line(s)
                                </span>
                            </div>

                            <div class="journal-table-wrap">
                                <table class="journal-review-table">
                                    <thead>
                                        <tr>
                                            <th>Account Details</th>
                                            <th class="text-center" style="width: 15%">Debit</th>
                                            <th class="text-center" style="width: 15%">Credit</th>
                                        </tr>
                                    </thead>

                                    <tbody>
                                        @foreach ($journalEntry->lines as $line)
                                            <tr>
                                                <td>
                                                    <div class="account-cell">
                                                        <div class="account-icon">
                                                            <i class="fas fa-university"></i>
                                                        </div>

                                                        <div>
                                                            <div class="account-title">
                                                                {{ $line->account->title }}
                                                            </div>

                                                            <div class="account-code">
                                                                Code: {{ $line->account->code }}
                                                            </div>

                                                            @if(in_array((int) $line->account_id, $receivableAccountIds ?? [], true) && $displayPartyName)
                                                                <div class="account-code">
                                                                    Party: {{ $displayPartyName }}
                                                                    @if($displayPartyType)
                                                                        ({{ ucfirst($displayPartyType) }})
                                                                    @endif
                                                                </div>
                                                            @endif

                                                            @if($line->costCenter)
                                                                <div class="account-tags">
                                                                    <span class="ui-pill ui-pill--neutral">
                                                                        <i class="fas fa-layer-group"></i>
                                                                        {{ $line->costCenter->title }}
                                                                    </span>
                                                                </div>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </td>

                                                <td class="text-center">
                                                    @if($line->debit > 0)
                                                        <span class="money-debit">
                                                            {{ number_format($line->debit, 2) }} {{ $journalEntry->currency ?? '' }}
                                                        </span>
                                                    @else
                                                        <span class="money-empty">-</span>
                                                    @endif
                                                </td>

                                                <td class="text-center">
                                                    @if($line->credit > 0)
                                                        <span class="money-credit">
                                                            {{ number_format($line->credit, 2) }} {{ $journalEntry->currency ?? '' }}
                                                        </span>
                                                    @else
                                                        <span class="money-empty">-</span>
                                                    @endif
                                                </td>
                                            </tr>

                                            @php
                                                $totalDebit += $line->debit;
                                                $totalCredit += $line->credit;
                                            @endphp
                                        @endforeach
                                    </tbody>

                                    <tfoot>
                                        <tr>
                                            <td class="text-end">Grand Totals</td>
                                            <td class="text-center money-debit">
                                                {{ number_format($totalDebit, 2) }} {{ $journalEntry->currency ?? '' }}
                                            </td>
                                            <td class="text-center money-credit">
                                                {{ number_format($totalCredit, 2) }} {{ $journalEntry->currency ?? '' }}
                                            </td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>

                        <div class="journal-balance-strip">
                            <div>
                                <div class="journal-balance-label">Balance Check</div>
                                <h6 class="journal-balance-title">
                                    {{ abs($totalDebit - $totalCredit) < 0.001 ? 'Balanced Journal Entry' : 'Unbalanced Journal Entry' }}
                                </h6>
                            </div>

                            <div class="journal-balance-values">
                                <span class="journal-balance-pill">
                                    Debit: {{ number_format($totalDebit, 2) }} {{ $journalEntry->currency ?? '' }}
                                </span>

                                <span class="journal-balance-pill">
                                    Credit: {{ number_format($totalCredit, 2) }} {{ $journalEntry->currency ?? '' }}
                                </span>

                                <span class="journal-balance-pill">
                                    Difference: {{ number_format(abs($totalDebit - $totalCredit), 2) }}
                                </span>
                            </div>
                        </div>

                        <div class="journal-actions no-print">
                            <a href="{{ route('journal_entries.index') }}" class="asset-btn asset-btn--secondary">
                                <i class="fas fa-arrow-left"></i>
                                Back to List
                            </a>

                            <div class="journal-actions-group">
                                <button type="button" class="asset-btn asset-btn--secondary" onclick="window.print()">
                                    <i class="fas fa-print"></i>
                                    Print JE
                                </button>

                                <button type="button" class="asset-btn asset-btn--primary">
                                    <i class="fas fa-download"></i>
                                    Export PDF
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

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