@extends('dashboard.layouts.app')

@push('styles')
    <style>
        .profit-loss-page {
            background: #f4f7fb;
            padding-bottom: 32px;
        }

        .profit-loss-page .page-shell {
            max-width: 1600px;
            margin: 0 auto;
            padding: 24px 12px 40px;
        }

        .pl-stack {
            display: grid;
            gap: 16px;
        }

        .pl-card,
        .pl-period-card {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
            overflow: hidden;
        }

        .pl-card {
            padding: 18px;
        }

        .pl-card-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 12px;
            padding-bottom: 14px;
            margin-bottom: 14px;
            border-bottom: 1px solid #edf2f7;
            flex-wrap: wrap;
        }

        .pl-title {
            margin: 0;
            color: #111827;
            font-size: 16px !important;
            font-weight: 900;
        }

        .pl-muted {
            margin: 4px 0 0;
            color: #64748b;
            font-size: 13px;
            line-height: 1.5;
        }

        .pl-export-actions {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        .pl-filter-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
        }

        .pl-filter-box {
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            background: #f8fafc;
            padding: 14px;
        }

        .pl-filter-box--a {
            border-left: 4px solid #16a34a;
        }

        .pl-filter-box--b {
            border-left: 4px solid #2563eb;
        }

        .pl-filter-title {
            margin: 0 0 12px;
            color: #111827;
            font-size: 14px !important;
            font-weight: 900;
        }

        .pl-input-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }

        .pl-label {
            display: block;
            margin-bottom: 6px;
            color: #374151;
            font-size: 13px;
            font-weight: 800;
        }

        .pl-input {
            width: 100%;
            min-height: 42px;
            border: 1px solid #dbe2ea;
            border-radius: 8px;
            background: #fff;
            padding: 8px 10px;
            color: #111827;
        }

        .pl-actions {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            margin-top: 14px;
            flex-wrap: wrap;
        }

        .pl-overview-grid {
            display: grid;
            grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr);
            gap: 12px;
            align-items: stretch;
        }

        .pl-equity-card {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            padding: 16px;
        }

        .pl-equity-card--danger {
            border-color: #ef4444;
        }

        .pl-equity-label {
            color: #64748b;
            font-size: 12px;
            font-weight: 900;
            text-transform: uppercase;
        }

        .pl-equity-hint {
            margin-top: 4px;
            color: #64748b;
            font-size: 12px;
        }

        .pl-equity-value {
            margin-top: 10px;
            color: #111827;
            font-size: 22px;
            font-weight: 950;
        }

        .pl-equity-change {
            display: grid;
            place-items: center;
            color: #047857;
            font-weight: 900;
            text-align: center;
        }

        .pl-equity-change--down {
            color: #b91c1c;
        }

        .pl-bar-card {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            overflow: hidden;
        }

        .pl-bar-head {
            padding: 14px 16px;
            border-bottom: 1px solid #edf2f7;
            color: #111827;
            font-weight: 900;
        }

        .pl-bars {
            display: grid;
            gap: 12px;
            padding: 16px;
        }

        .pl-bar-row {
            display: grid;
            grid-template-columns: 120px minmax(0, 1fr) 120px;
            gap: 12px;
            align-items: center;
        }

        .pl-bar-track {
            height: 24px;
            border-radius: 8px;
            background: #f1f5f9;
            overflow: hidden;
        }

        .pl-bar-fill {
            display: block;
            height: 100%;
        }

        .pl-bar-fill--income { background: #16a34a; }
        .pl-bar-fill--expense { background: #dc2626; }
        .pl-bar-fill--net { background: #0f766e; }
        .pl-bar-fill--profit { background: #16a34a; }
        .pl-bar-fill--loss { background: #dc2626; }

        .pl-summary-grid,
        .pl-period-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px;
        }

        .pl-summary-grid {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        .pl-summary-item {
            border: 1px solid #edf2f7;
            border-radius: 8px;
            background: #f8fafc;
            padding: 14px;
        }

        .pl-summary-label {
            color: #64748b;
            font-size: 12px;
            font-weight: 900;
            text-transform: uppercase;
        }

        .pl-summary-value {
            margin-top: 6px;
            color: #111827;
            font-size: 18px;
            font-weight: 900;
        }

        .pl-period-card__head {
            padding: 14px 16px;
            color: #111827;
        }

        .pl-period-card__head small {
            margin-left: 6px;
            color: #334155;
            font-size: 12px;
        }

        .pl-period-card--a .pl-period-card__head {
            background: #d8eee4;
        }

        .pl-period-card--b .pl-period-card__head {
            background: #d7e8ff;
        }

        .pl-period-chart {
            height: 220px;
            padding: 14px 16px;
            border-bottom: 1px solid #edf2f7;
        }

        .pl-period-chart canvas {
            width: 100% !important;
            height: 100% !important;
        }

        .pl-period-table-wrap {
            max-height: 560px;
            overflow: auto;
        }

        .pl-period-table {
            width: 100%;
            min-width: 720px;
            margin: 0;
            border-collapse: collapse;
        }

        .pl-period-table th,
        .pl-period-table td {
            padding: 12px 14px;
            border-bottom: 1px solid #edf2f7;
            vertical-align: middle;
            color: #334155;
            font-size: 13px;
        }

        .pl-period-table th {
            position: sticky;
            top: 0;
            z-index: 2;
            background: #f8fafc;
            color: #111827;
            font-weight: 900;
        }

        .pl-period-total td {
            position: sticky;
            top: 45px;
            z-index: 2;
            background: #f8fafc;
            font-weight: 900;
            box-shadow: 0 1px 0 #edf2f7;
        }

        .pl-items {
            margin: 0;
            padding-left: 0;
            list-style: none;
            text-align: left;
        }

        .pl-items li + li {
            margin-top: 4px;
        }

        .pl-money,
        .pl-money--success,
        .text-success {
            color: #047857 !important;
            font-weight: 900;
        }

        .pl-money--danger,
        .text-danger {
            color: #dc2626 !important;
            font-weight: 900;
        }

        .pl-date {
            white-space: nowrap;
        }

        .pl-period-empty {
            padding: 48px 16px;
            text-align: center;
            color: #64748b;
        }

        @media (max-width: 991.98px) {
            .pl-filter-grid,
            .pl-overview-grid,
            .pl-summary-grid,
            .pl-period-grid {
                grid-template-columns: 1fr;
            }

            .pl-equity-change {
                min-height: 70px;
            }
        }

        @media (max-width: 575.98px) {
            .pl-input-grid,
            .pl-bar-row {
                grid-template-columns: 1fr;
            }

            .pl-actions,
            .pl-export-actions {
                justify-content: flex-start;
            }
        }
    </style>
@endpush

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

    @php
        $hasAnyPeriod = ($fromA && $toA) || ($fromB && $toB);

        $incomeA = collect($dailyA ?? [])->sum('income');
        $expenseA = collect($dailyA ?? [])->sum('expense');
        $totalA = $incomeA - $expenseA;

        $incomeB = collect($dailyB ?? [])->sum('income');
        $expenseB = collect($dailyB ?? [])->sum('expense');
        $totalB = $incomeB - $expenseB;

        $difference = $totalA - $totalB;
        $percentage = $totalB != 0
            ? ($difference / $totalB) * 100
            : ($difference == 0 ? 0 : ($difference > 0 ? 999999 : -999999));
    @endphp

    <div class="profit-loss-page">
        <div class="page-shell">
            <div class="pl-stack">
                <x-page-title
                    title="Period Comparison"
                    description="Compare profit and loss between two selected periods using posted journal entries and chart of accounts classifications.">
                    <div class="pl-export-actions">
                        <x-table-action type="pdf" url="{{ route('profit_loss.export.pdf', request()->query()) }}" label="PDF" />
                        <x-table-action type="excel" url="{{ route('profit_loss.export.excel', request()->query()) }}" label="Excel" />
                        <x-table-action type="csv" url="{{ route('profit_loss.export.csv', request()->query()) }}" label="CSV" />
                    </div>
                </x-page-title>

                <section class="pl-card">
                    <div class="pl-card-head">
                        <div>
                            <h2 class="pl-title">Comparison Filters</h2>
                            <p class="pl-muted">Select the two periods you want to compare.</p>
                        </div>

                        <span class="badge {{ $hasAnyPeriod ? 'bg-primary' : 'bg-secondary' }}">
                            {{ $hasAnyPeriod ? 'Custom Periods Selected' : 'Waiting for Date Range' }}
                        </span>
                    </div>

                    <form method="GET" action="{{ route('profit_loss.index') }}">
                        <div class="pl-filter-grid">
                            <div class="pl-filter-box pl-filter-box--b">
                                <h3 class="pl-filter-title">Period B</h3>
                                <div class="pl-input-grid">
                                    <div>
                                        <label class="pl-label">From</label>
                                        <input type="date" name="from_date_b" class="pl-input" value="{{ old('from_date_b', $fromB) }}">
                                    </div>
                                    <div>
                                        <label class="pl-label">To</label>
                                        <input type="date" name="to_date_b" class="pl-input" value="{{ old('to_date_b', $toB) }}">
                                    </div>
                                </div>
                            </div>

                            <div class="pl-filter-box pl-filter-box--a">
                                <h3 class="pl-filter-title">Period A</h3>
                                <div class="pl-input-grid">
                                    <div>
                                        <label class="pl-label">From</label>
                                        <input type="date" name="from_date_a" class="pl-input" value="{{ old('from_date_a', $fromA) }}">
                                    </div>
                                    <div>
                                        <label class="pl-label">To</label>
                                        <input type="date" name="to_date_a" class="pl-input" value="{{ old('to_date_a', $toA) }}">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="pl-actions">
                            <a href="{{ route('profit_loss.index') }}" class="btn btn-outline-secondary rounded-pill">
                                <i class="fas fa-undo me-1"></i>
                                Clear
                            </a>
                            <x-table-action type="search" buttonType="submit" label="Show Comparison" />
                        </div>
                    </form>
                </section>

                @if ($profitLossOverview)
                    @php
                        $overview = $profitLossOverview;
                        $overviewNet = $overview['netIncome'];
                    @endphp

                    <div class="pl-overview-grid">
                        <div class="pl-equity-card">
                            <div class="pl-equity-label">Opening Balance</div>
                            <div class="pl-equity-hint">Equity before {{ $overview['period_label'] }} ({{ $overview['from_date'] }} to {{ $overview['to_date'] }})</div>
                            <div class="pl-equity-value">{{ number_format($overview['openingEquityBalance'], 2) }}</div>
                        </div>

                        <div class="pl-equity-change {{ $overview['equityChange'] >= 0 ? '' : 'pl-equity-change--down' }}">
                            <div>
                                <iconify-icon icon="{{ $overview['equityChange'] >= 0 ? 'ri:arrow-up-line' : 'ri:arrow-down-line' }}"></iconify-icon>
                                <div>{{ number_format($overview['equityChange'], 2) }}</div>
                                <small>{{ $overview['equityChangePercent'] !== null ? number_format(abs($overview['equityChangePercent']), 2) . '%' : '-' }}</small>
                            </div>
                        </div>

                        <div class="pl-equity-card {{ $overview['closingEquityBalance'] < $overview['openingEquityBalance'] ? 'pl-equity-card--danger' : '' }}">
                            <div class="pl-equity-label">Closing Balance</div>
                            <div class="pl-equity-hint">Equity after selected period</div>
                            <div class="pl-equity-value">{{ number_format($overview['closingEquityBalance'], 2) }}</div>
                        </div>
                    </div>

                    <section class="pl-bar-card">
                        <div class="pl-bar-head">Profit And Loss During {{ $overview['period_label'] }}</div>
                        <div class="pl-bars">
                            <div class="pl-bar-row">
                                <div class="text-success">Revenue</div>
                                <div class="pl-bar-track"><span class="pl-bar-fill pl-bar-fill--income" style="width: {{ $overview['comparisonBars']['income'] }}%;"></span></div>
                                <div class="text-success">{{ number_format(abs($overview['totalIncome']), 2) }}</div>
                            </div>
                            <div class="pl-bar-row">
                                <div class="text-danger">Expenses</div>
                                <div class="pl-bar-track"><span class="pl-bar-fill pl-bar-fill--expense" style="width: {{ $overview['comparisonBars']['expense'] }}%;"></span></div>
                                <div class="text-danger">{{ number_format(abs($overview['totalExpense']), 2) }}</div>
                            </div>
                            <div class="pl-bar-row">
                                <div class="{{ $overviewNet >= 0 ? 'text-success' : 'text-danger' }}">Net {{ $overviewNet >= 0 ? 'Profit' : 'Loss' }}</div>
                                <div class="pl-bar-track">
                                    <span class="pl-bar-fill {{ $overviewNet >= 0 ? 'pl-bar-fill--profit' : 'pl-bar-fill--loss' }}"
                                        style="width: {{ $overview['comparisonBars']['net'] }}%;"></span>
                                </div>
                                <div class="{{ $overviewNet >= 0 ? 'text-success' : 'text-danger' }}">{{ number_format(abs($overviewNet), 2) }}</div>
                            </div>
                        </div>
                    </section>
                @endif

                @if ($hasAnyPeriod)
                    <section class="pl-card">
                        <div class="pl-card-head">
                            <div>
                                <h2 class="pl-title">Comparison Summary</h2>
                                <p class="pl-muted">Net profit/loss comparison between Period A and Period B.</p>
                            </div>
                            <span class="badge {{ $difference >= 0 ? 'bg-success' : 'bg-danger' }}">
                                {{ $percentage >= 0 ? '+' : '' }}{{ number_format($percentage, 2) }}%
                            </span>
                        </div>

                        <div class="pl-summary-grid">
                            <div class="pl-summary-item">
                                <div class="pl-summary-label">Period A Income</div>
                                <div class="pl-summary-value text-success">{{ number_format($incomeA, 2) }}</div>
                            </div>
                            <div class="pl-summary-item">
                                <div class="pl-summary-label">Period A Expense</div>
                                <div class="pl-summary-value text-danger">{{ number_format($expenseA, 2) }}</div>
                            </div>
                            <div class="pl-summary-item">
                                <div class="pl-summary-label">Period B Income</div>
                                <div class="pl-summary-value text-success">{{ number_format($incomeB, 2) }}</div>
                            </div>
                            <div class="pl-summary-item">
                                <div class="pl-summary-label">Period B Expense</div>
                                <div class="pl-summary-value text-danger">{{ number_format($expenseB, 2) }}</div>
                            </div>
                        </div>
                    </section>
                @endif

                <div class="pl-period-grid">
                    @include('dashboard.profit_loss.period-column', [
                        'period' => 'B',
                        'title' => 'Period B',
                        'daily' => $dailyB ?? [],
                        'from' => $fromB,
                        'to' => $toB,
                        'chartId' => 'chartB',
                        'borderColor' => 'border-primary-subtle'
                    ])

                    @include('dashboard.profit_loss.period-column', [
                        'period' => 'A',
                        'title' => 'Period A',
                        'daily' => $dailyA ?? [],
                        'from' => $fromA,
                        'to' => $toA,
                        'chartId' => 'chartA',
                        'borderColor' => 'border-success-subtle'
                    ])
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            @if(isset($dailyA) && count($dailyA))
                createChart('chartA', {!! json_encode(array_keys($dailyA)) !!},
                    {!! json_encode(array_values(array_map(fn($d) => $d['income'] ?? 0, $dailyA))) !!},
                    {!! json_encode(array_values(array_map(fn($d) => $d['expense'] ?? 0, $dailyA))) !!});
            @endif

            @if(isset($dailyB) && count($dailyB))
                createChart('chartB', {!! json_encode(array_keys($dailyB)) !!},
                    {!! json_encode(array_values(array_map(fn($d) => $d['income'] ?? 0, $dailyB))) !!},
                    {!! json_encode(array_values(array_map(fn($d) => $d['expense'] ?? 0, $dailyB))) !!});
            @endif
        });

        function createChart(canvasId, labels, incomeData, expenseData) {
            const chartElement = document.getElementById(canvasId);

            if (!chartElement || typeof Chart === 'undefined') {
                return;
            }

            new Chart(chartElement, {
                type: 'bar',
                data: {
                    labels: labels,
                    datasets: [
                        {
                            label: 'Income',
                            data: incomeData,
                            backgroundColor: '#16a34a',
                            borderRadius: 8,
                            maxBarThickness: 34
                        },
                        {
                            label: 'Expense',
                            data: expenseData,
                            backgroundColor: '#dc2626',
                            borderRadius: 8,
                            maxBarThickness: 34
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                usePointStyle: true,
                                boxWidth: 8,
                                boxHeight: 8,
                                font: {
                                    size: 12,
                                    weight: '600'
                                }
                            }
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                color: 'rgba(148, 163, 184, 0.18)'
                            },
                            ticks: {
                                font: {
                                    size: 11
                                }
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            },
                            ticks: {
                                font: {
                                    size: 11
                                }
                            }
                        }
                    }
                }
            });
        }
    </script>
@endpush