@extends('dashboard.layouts.app')

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

    @php
        $money = function ($value, bool $dashZero = false) {
            if ($value === null) {
                return '-';
            }

            $value = round((float) $value, 2);

            if (abs($value) < 0.00001) {
                return $dashZero ? '-' : '0.00';
            }

            return number_format($value, 2);
        };

        $percent = fn ($value) => $value === null ? '-' : number_format((float) $value, 1) . '%';
        $ratio = fn ($value) => $value === null ? '-' : number_format((float) $value, 2) . 'x';
        $signedClass = fn ($value) => (float) $value < 0 ? 'fi-text-danger' : 'fi-text-success';

        $cards = [
            [
                'title'    => 'Revenue',
                'value'    => $money($kpis['revenue']),
                'hint'     => 'Recognized revenue in this period',
                'tone'     => 'success',
                'card_key' => 'fi_revenue',
                'expected' => $kpis['revenue'],
            ],
            [
                'title'    => 'Total Cost',
                'value'    => $money($kpis['total_cost']),
                'hint'     => 'Posted accounting record costs in this period',
                'tone'     => 'danger',
                'card_key' => 'fi_total_cost',
                'expected' => $kpis['total_cost'],
            ],
            [
                'title'    => 'Net Profit',
                'value'    => $money($kpis['net_profit']),
                'hint'     => 'Revenue minus total costs',
                'tone'     => $kpis['net_profit'] < 0 ? 'danger' : 'success',
                'card_key' => 'fi_net_profit',
                'expected' => $kpis['net_profit'],
            ],
            [
                'title'    => 'Gross Profit',
                'value'    => $money($kpis['gross_profit']),
                'hint'     => 'Revenue minus cost of revenue',
                'tone'     => $kpis['gross_profit'] < 0 ? 'danger' : 'success',
                'card_key' => 'fi_gross_profit',
                'expected' => $kpis['gross_profit'],
            ],
            [
                'title'    => 'Net Profit Margin',
                'value'    => $percent($kpis['net_profit_margin']),
                'hint'     => 'Net profit as a percentage of revenue',
                'tone'     => $kpis['net_profit_margin'] !== null && $kpis['net_profit_margin'] < 0 ? 'danger' : 'success',
                'card_key' => null,
                'expected' => null,
            ],
            [
                'title'    => 'Gross Profit Margin',
                'value'    => $percent($kpis['gross_profit_margin']),
                'hint'     => 'Gross profit as a percentage of revenue',
                'tone'     => $kpis['gross_profit_margin'] !== null && $kpis['gross_profit_margin'] < 0 ? 'danger' : 'success',
                'card_key' => null,
                'expected' => null,
            ],
            [
                'title'    => 'Debt to Equity',
                'value'    => $ratio($kpis['debt_to_equity']),
                'hint'     => 'Liabilities compared to equity',
                'tone'     => 'neutral',
                'card_key' => null,
                'expected' => null,
            ],
            [
                'title'    => 'Return on Equity',
                'value'    => $percent($kpis['return_on_equity']),
                'hint'     => 'Profit generated from equity',
                'tone'     => $kpis['return_on_equity'] !== null && $kpis['return_on_equity'] < 0 ? 'danger' : 'success',
                'card_key' => null,
                'expected' => null,
            ],
            [
                'title'    => 'Break-even Point',
                'value'    => $money($kpis['break_even_point']),
                'hint'     => 'Revenue needed to cover fixed costs',
                'tone'     => 'neutral',
                'card_key' => null,
                'expected' => null,
            ],
        ];
    @endphp

    <style>
        .financial-indicators-page {
            background: #f4f7fb;
            color: #0f172a;
        }
        .fi-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: 1rem;
        }
        .fi-title {
            margin: 0;
            color: #0f172a;
            font-size: 1.35rem;
            font-weight: 850;
        }
        .fi-subtitle {
            margin: 0.25rem 0 0;
            color: #64748b;
            font-size: 0.86rem;
            font-weight: 650;
        }
        .fi-button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.45rem;
            min-height: 38px;
            border: 1px solid #dbe3ef;
            border-radius: 8px;
            background: #fff;
            color: #0f172a;
            padding: 0.5rem 0.8rem;
            font-weight: 750;
            text-decoration: none;
            white-space: nowrap;
        }
        .fi-button:hover {
            background: #f8fafc;
            color: #0f172a;
        }
        .fi-card,
        .fi-panel {
            border: 1px solid #e4ebf4;
            border-radius: 8px;
            background: #fff;
            box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
        }
        .fi-filters {
            padding: 0.9rem;
            margin-bottom: 1rem;
        }
        .fi-filter-form {
            display: flex;
            align-items: flex-end;
            gap: 0.75rem;
            flex-wrap: wrap;
        }
        .fi-field {
            display: grid;
            gap: 0.3rem;
        }
        .fi-field span {
            color: #64748b;
            font-size: 0.76rem;
            font-weight: 750;
        }
        .fi-field .form-control,
        .fi-field .form-select {
            width: 160px;
            border-radius: 8px;
            font-size: 0.84rem;
            font-weight: 650;
        }
        .fi-filter-actions {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            flex-wrap: wrap;
        }
        .fi-filter-actions .btn {
            border-radius: 8px;
            min-height: 38px;
            font-weight: 750;
        }
        .fi-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.9rem;
            margin-bottom: 1rem;
        }
        .fi-card {
            min-height: 118px;
            padding: 1rem;
        }
        .fi-card-title {
            color: #64748b;
            font-size: 0.8rem;
            font-weight: 800;
        }
        .fi-card-value {
            margin-top: 0.5rem;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
            font-size: 1.55rem;
            line-height: 1.1;
            font-weight: 900;
            word-break: break-word;
        }
        .fi-card-hint {
            margin-top: 0.5rem;
            color: #64748b;
            font-size: 0.76rem;
            font-weight: 650;
            line-height: 1.45;
        }
        .fi-text-success { color: #047857; }
        .fi-text-danger { color: #b91c1c; }
        .fi-text-neutral { color: #0f172a; }
        .fi-break-even {
            padding: 1rem;
            margin-bottom: 1rem;
        }
        .fi-panel-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            padding: 1rem;
            border-bottom: 1px solid #e8eef6;
        }
        .fi-panel-head div {
            margin: 0;
            color: #0f172a;
            font-size: 1rem;
            font-weight: 850;
        }
        .fi-panel-head p {
            margin: 0.25rem 0 0;
            color: #64748b;
            font-size: 0.8rem;
            font-weight: 650;
        }
        .fi-progress-track {
            height: 20px;
            border-radius: 999px;
            background: #eef2f7;
            overflow: hidden;
        }
        .fi-progress-fill {
            height: 100%;
            min-width: 2px;
            background: #13734a;
        }
        .fi-break-even-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            margin-top: 0.7rem;
            color: #475569;
            font-size: 0.8rem;
            font-weight: 700;
            flex-wrap: wrap;
        }
        .fi-table-wrap {
            overflow-x: auto;
        }
        .fi-table {
            width: 100%;
            min-width: 1040px;
            border-collapse: collapse;
        }
        .fi-table th,
        .fi-table td {
            border-bottom: 1px solid #e8eef6;
            padding: 0.8rem 0.9rem;
            vertical-align: middle;
            white-space: nowrap;
        }
        .fi-table th {
            background: #f8fafc;
            color: #64748b;
            font-size: 0.74rem;
            font-weight: 850;
            text-transform: uppercase;
        }
        .fi-table td {
            color: #0f172a;
            font-size: 0.84rem;
            font-weight: 700;
        }
        .fi-course-name {
            display: grid;
            gap: 0.16rem;
            min-width: 230px;
        }
        .fi-course-name strong {
            color: #0f172a;
            font-weight: 850;
            white-space: normal;
        }
        .fi-course-name span {
            color: #64748b;
            font-size: 0.74rem;
            font-weight: 650;
            white-space: normal;
        }
        .fi-money {
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
            font-weight: 850;
        }
        .fi-total-row td {
            border-top: 1px solid #cbd5e1;
            background: #f8fafc;
            color: #0f172a;
            font-weight: 850;
        }
        .fi-empty {
            padding: 2.5rem 1rem !important;
            text-align: center;
            color: #94a3b8 !important;
        }
        @media (max-width: 1199.98px) {
            .fi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        }
        @media (max-width: 767.98px) {
            .fi-header,
            .fi-panel-head {
                display: grid;
            }
            .fi-grid { grid-template-columns: 1fr; }
            .fi-filter-form,
            .fi-filter-actions {
                display: grid;
                width: 100%;
            }
            .fi-field .form-control,
            .fi-field .form-select,
            .fi-filter-actions .btn,
            .fi-button {
                width: 100%;
            }
        }
    </style>

    <div class="container-fluid app-bg financial-indicators-page">
        <div class="page-shell">
            <div class="fi-header">
                <div>
                    <div class="fi-title">Financial Indicators</div>
                    <p class="fi-subtitle">A quick view of profitability, break-even, and course performance.</p>
                </div>

                <a class="fi-button" href="{{ route('financial_indicators.index', [...request()->query(), 'export' => 'csv']) }}">
                    <iconify-icon icon="ri:download-2-line"></iconify-icon>
                    <span>Export</span>
                </a>
            </div>

            <div class="fi-panel fi-filters">
                <form method="GET" action="{{ route('financial_indicators.index') }}" class="fi-filter-form">
                    <label class="fi-field">
                        <span>From</span>
                        <input type="date" name="from_date" class="form-control" value="{{ $filters['from_date'] }}">
                    </label>

                    <label class="fi-field">
                        <span>To</span>
                        <input type="date" name="to_date" class="form-control" value="{{ $filters['to_date'] }}">
                    </label>

                    <div class="fi-filter-actions">
                        <button type="submit" class="btn btn-primary">
                            <iconify-icon icon="ri:refresh-line"></iconify-icon>
                            Apply
                        </button>
                        <a href="{{ route('financial_indicators.index') }}" class="btn btn-light">Reset</a>
                    </div>
                </form>
            </div>

            <div class="fi-grid">
                @foreach($cards as $card)
                    @if($card['card_key'])
                        <div class="fi-card fi-drill-card"
                             role="button" tabindex="0"
                             data-card="{{ $card['card_key'] }}"
                             data-title="{{ $card['title'] }}"
                             data-expected="{{ $card['expected'] }}">
                            <div class="fi-card-title">
                                {{ $card['title'] }}
                                <span class="fi-drill-icon" title="Click to view records">
                                    <iconify-icon icon="ri:search-eye-line"></iconify-icon>
                                </span>
                            </div>
                            <div class="fi-card-value fi-text-{{ $card['tone'] }}">{{ $card['value'] }}</div>
                            <div class="fi-card-hint">{{ $card['hint'] }}</div>
                        </div>
                    @else
                        <div class="fi-card">
                            <div class="fi-card-title">{{ $card['title'] }}</div>
                            <div class="fi-card-value fi-text-{{ $card['tone'] }}">{{ $card['value'] }}</div>
                            <div class="fi-card-hint">{{ $card['hint'] }}</div>
                        </div>
                    @endif
                @endforeach
            </div>

            <div class="fi-panel fi-break-even">
                @php
                    $progress = $kpis['break_even_progress'];
                    $progressWidth = $progress === null ? 0 : max(min($progress, 100), 0);
                    $isCovered = $kpis['break_even_point'] !== null && $kpis['revenue'] >= $kpis['break_even_point'];
                @endphp
                <div class="fi-panel-head" style="padding: 0 0 1rem; border-bottom: 0;">
                    <div>
                        <div>Break-even Progress</div>
                        <p>Current revenue compared with the revenue needed to cover fixed costs.</p>
                    </div>
                    <strong class="{{ $isCovered ? 'fi-text-success' : 'fi-text-danger' }}">
                        {{ $progress === null ? '-' : number_format($progress, 0) . '%' }}
                    </strong>
                </div>

                <div class="fi-progress-track">
                    <div class="fi-progress-fill" style="width: {{ $progressWidth }}%;"></div>
                </div>

                <div class="fi-break-even-meta">
                    <span>Revenue: {{ $money($kpis['revenue']) }}</span>
                    <span>Break-even: {{ $money($kpis['break_even_point']) }}</span>
                    <span>{{ $isCovered ? 'Covered' : 'Not covered yet' }}</span>
                </div>
            </div>

            @if ($courseProfitabilityVisible)
                <div class="fi-panel">
                    <div class="fi-panel-head">
                        <div>
                            <div>Course Profitability</div>
                            <p>Recognized revenue and direct purchase costs by course.</p>
                        </div>
                    </div>

                    <div class="fi-table-wrap">
                        <table class="fi-table">
                            <thead>
                                <tr>
                                    <th>Course</th>
                                    <th class="text-center">Sessions</th>
                                    <th class="text-center">Revenue</th>
                                    <th class="text-center">Direct Cost</th>
                                    <th class="text-center">Gross Profit</th>
                                    <th class="text-center">Margin</th>
                                    <th class="text-center">Cost / Session</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($courseRows as $row)
                                    <tr>
                                        <td>
                                            <div class="fi-course-name">
                                                <strong>{{ $row['course_name'] }}</strong>
                                                <span>{{ $row['course_meta'] ?: 'Course #' . $row['course_id'] }}</span>
                                            </div>
                                        </td>
                                        <td class="text-center fi-money">{{ $row['sessions_done'] }}/{{ $row['sessions_total'] }}</td>
                                        <td class="text-center fi-money fi-text-success">{{ $money($row['recognized_revenue']) }}</td>
                                        <td class="text-center fi-money fi-text-danger">{{ $money($row['direct_cost'], true) }}</td>
                                        <td class="text-center fi-money {{ $signedClass($row['gross_profit']) }}">{{ $money($row['gross_profit']) }}</td>
                                        <td class="text-center fi-money {{ $signedClass($row['margin'] ?? 0) }}">{{ $percent($row['margin']) }}</td>
                                        <td class="text-center fi-money">{{ $money($row['cost_per_session'], true) }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="7" class="fi-empty">No course data found for this period.</td>
                                    </tr>
                                @endforelse

                                <tr class="fi-total-row">
                                    <td>Total</td>
                                    <td class="text-center fi-money">{{ $courseTotals['sessions_done'] }}/{{ $courseTotals['sessions_total'] }}</td>
                                    <td class="text-center fi-money">{{ $money($courseTotals['recognized_revenue']) }}</td>
                                    <td class="text-center fi-money">{{ $money($courseTotals['direct_cost'], true) }}</td>
                                    <td class="text-center fi-money">{{ $money($courseTotals['gross_profit']) }}</td>
                                    <td class="text-center fi-money">{{ $percent($courseTotals['margin']) }}</td>
                                    <td class="text-center fi-money">{{ $money($courseTotals['cost_per_session'], true) }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            @endif
        </div>
    </div>

    {{-- ── Drilldown Modal ──────────────────────────────────────────────────── --}}
    <div class="modal fade fi-drill-modal" id="fiDrilldownModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <div>
                        <h5 class="modal-title" id="fiDrilldownTitle">Records</h5>
                        <p class="fi-drill-subtitle mb-0" id="fiDrilldownSubtitle">
                            {{ $filters['from_date'] }} – {{ $filters['to_date'] }}
                        </p>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="fi-drill-status" id="fiDrilldownStatus">Loading records…</div>
                    <div class="fi-detail-table-wrap d-none" id="fiDrilldownTableWrap">
                        <table class="fi-drill-table">
                            <thead>
                                <tr>
                                    <th>Date</th>
                                    <th>Account</th>
                                    <th>Party</th>
                                    <th>Cost Center</th>
                                    <th class="text-end">Amount</th>
                                </tr>
                            </thead>
                            <tbody id="fiDrilldownRows"></tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="4" class="text-end">Displayed Total</td>
                                    <td class="text-end fi-money" id="fiDrilldownTotal">0.00</td>
                                </tr>
                                <tr>
                                    <td colspan="4" class="text-end">Card Value</td>
                                    <td class="text-end fi-money" id="fiDrilldownExpected">0.00</td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

@push('styles')
<style>
    .fi-drill-card {
        cursor: pointer;
        transition: box-shadow 0.15s, transform 0.15s;
        user-select: none;
    }
    .fi-drill-card:hover {
        box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
        transform: translateY(-2px);
    }
    .fi-drill-card:focus {
        outline: 2px solid #3b82f6;
        outline-offset: 2px;
    }
    .fi-card-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.4rem;
    }
    .fi-drill-icon {
        color: #94a3b8;
        font-size: 1rem;
        flex-shrink: 0;
        transition: color 0.15s;
    }
    .fi-drill-card:hover .fi-drill-icon {
        color: #3b82f6;
    }
    .fi-drill-status {
        padding: 0.6rem 0;
        font-size: 0.875rem;
        color: #64748b;
        font-weight: 600;
    }
    .fi-drill-status.is-match    { color: #16a34a; }
    .fi-drill-status.is-mismatch { color: #dc2626; }
    .fi-detail-table-wrap {
        overflow-x: auto;
        margin-top: 0.75rem;
    }
    .fi-drill-table {
        width: 100%;
        min-width: 680px;
        border-collapse: collapse;
        font-size: 0.84rem;
    }
    .fi-drill-table th,
    .fi-drill-table td {
        border-bottom: 1px solid #e8eef6;
        padding: 0.55rem 0.75rem;
        vertical-align: middle;
    }
    .fi-drill-table th {
        background: #f8fafc;
        color: #64748b;
        font-size: 0.74rem;
        font-weight: 850;
        text-transform: uppercase;
        white-space: nowrap;
    }
    .fi-drill-table tfoot td {
        background: #f8fafc;
        font-weight: 750;
        border-top: 2px solid #e2e8f0;
    }
    .fi-entry-link {
        color: #2563eb;
        text-decoration: none;
    }
    .fi-entry-link:hover { text-decoration: underline; }
    .fi-money--positive { color: #16a34a; }
    .fi-money--negative { color: #dc2626; }
    .fi-money--muted    { color: #94a3b8; }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const modalEl  = document.getElementById('fiDrilldownModal');
    const modal    = modalEl && window.bootstrap ? new bootstrap.Modal(modalEl) : null;
    const titleEl  = document.getElementById('fiDrilldownTitle');
    const subtitleEl = document.getElementById('fiDrilldownSubtitle');
    const statusEl = document.getElementById('fiDrilldownStatus');
    const rowsEl   = document.getElementById('fiDrilldownRows');
    const tableEl  = document.getElementById('fiDrilldownTableWrap');
    const totalEl  = document.getElementById('fiDrilldownTotal');
    const expEl    = document.getElementById('fiDrilldownExpected');
    const drillUrl = @json(route('financial_indicators.card_records'));

    @php
        $baseDrillParams = [
            'from_date' => $filters['from_date'],
            'to_date'   => $filters['to_date'],
        ];
    @endphp
    const baseDrillParams = @json($baseDrillParams);

    if (!modal) { return; }

    const escHtml = function (v) {
        return String(v ?? '-')
            .replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
            .replace(/"/g,'&quot;').replace(/'/g,'&#039;');
    };

    const fmtMoney = function (v) {
        const n = Number(v || 0);
        return n.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 });
    };

    const setStatus = function (msg, state) {
        statusEl.textContent = msg;
        statusEl.className   = 'fi-drill-status' + (state ? ' is-' + state : '');
    };

    const openDrilldown = function (card) {
        const title    = card.dataset.title || 'Records';
        const expected = card.dataset.expected || '0';

        titleEl.textContent    = title;
        subtitleEl.textContent = baseDrillParams.from_date + ' – ' + baseDrillParams.to_date;
        rowsEl.innerHTML       = '';
        tableEl.classList.add('d-none');
        totalEl.textContent    = '0.00';
        expEl.textContent      = fmtMoney(expected);
        setStatus('Loading records…', null);
        modal.show();

        const params = new URLSearchParams(baseDrillParams);
        params.set('card',     card.dataset.card);
        params.set('expected', expected);

        fetch(drillUrl + '?' + params.toString(), { headers: { 'Accept': 'application/json' } })
            .then(function (r) {
                if (!r.ok) throw new Error('Unable to load records.');
                return r.json();
            })
            .then(function (payload) {
                const records = payload.records || [];
                rowsEl.innerHTML = records.length
                    ? records.map(function (rec) {
                        const amtClass = Number(rec.amount) > 0 ? 'fi-money--positive'
                                       : Number(rec.amount) < 0 ? 'fi-money--negative' : 'fi-money--muted';
                        const acct = rec.link
                            ? '<a href="' + escHtml(rec.link) + '" class="fi-entry-link" target="_blank">' + escHtml(rec.account) + '</a>'
                            : escHtml(rec.account);
                        return '<tr>'
                            + '<td>' + escHtml(rec.date)        + '</td>'
                            + '<td>' + acct                      + '</td>'
                            + '<td>' + escHtml(rec.party)        + '</td>'
                            + '<td>' + escHtml(rec.cost_center)  + '</td>'
                            + '<td class="text-end fi-money ' + amtClass + '">' + fmtMoney(rec.amount) + '</td>'
                            + '</tr>';
                    }).join('')
                    : '<tr><td colspan="5" class="text-center" style="color:#94a3b8;padding:1.5rem">No records found.</td></tr>';

                totalEl.textContent = fmtMoney(payload.total);
                expEl.textContent   = fmtMoney(payload.expected);
                tableEl.classList.remove('d-none');
                setStatus(
                    payload.matches
                        ? 'Displayed records total matches the card value.'
                        : 'Displayed records total does not match the card value.',
                    payload.matches ? 'match' : 'mismatch'
                );
            })
            .catch(function (err) {
                rowsEl.innerHTML = '';
                tableEl.classList.add('d-none');
                setStatus(err.message || 'Unable to load records.', 'mismatch');
            });
    };

    document.querySelectorAll('.fi-drill-card').forEach(function (card) {
        card.addEventListener('click', function (e) {
            if (e.target.closest('a,button,input,select,textarea,label')) return;
            openDrilldown(card);
        });
        card.addEventListener('keydown', function (e) {
            if (e.key !== 'Enter' && e.key !== ' ') return;
            e.preventDefault();
            openDrilldown(card);
        });
    });
});
</script>
@endpush

@endsection