@extends('layouts.app')

@section('content')
<!--begin::Toolbar-->
<div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
    <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
        <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
            <h1 class="page-heading d-flex text-gray-900 fw-bold fs-3 flex-column justify-content-center my-0">{{ __('reports.financial_reports') }}</h1>
            <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                <li class="breadcrumb-item text-muted">
                    <a href="{{ route('dashboard', app('current_company')->uuid) }}" class="text-muted text-hover-primary">{{ __('common.home') ?? 'Anasayfa' }}</a>
                </li>
                <li class="breadcrumb-item">
                    <span class="bullet bg-gray-500 w-5px h-2px"></span>
                </li>
                <li class="breadcrumb-item text-muted">{{ __('reports.financial_analysis_reports') }}</li>
            </ul>
        </div>
    </div>
</div>
<!--end::Toolbar-->

<!--begin::Content-->
<div id="kt_app_content" class="app-content flex-column-fluid">
    <div id="kt_app_content_container" class="app-container container-xxl">

        <!--begin::Filter Card-->
        <div class="card mb-9">
            <div class="card-body py-4">
                <form action="{{ route('reports.index', app('current_company')->uuid) }}" method="GET" class="d-flex flex-wrap align-items-center gap-4">
                    <div class="d-flex align-items-center gap-2">
                        <label class="fs-6 fw-semibold mb-0">{{ __('reports.period_selection') }}</label>
                        <input type="date" name="date_from" value="{{ $dateFromStr }}" class="form-control form-control-solid w-175px" />
                        <span class="text-muted">-</span>
                        <input type="date" name="date_to" value="{{ $dateToStr }}" class="form-control form-control-solid w-175px" />
                    </div>

                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary btn-sm">
                            <i class="ki-outline ki-filter fs-5 me-1"></i> {{ __('reports.filter') }}
                        </button>
                        <a href="{{ route('reports.index', app('current_company')->uuid) }}" class="btn btn-light-danger btn-sm">{{ __('reports.clear') }}</a>
                    </div>
                </form>
            </div>
        </div>
        <!--end::Filter Card-->

        <!--begin::Stats Summary Title-->
        <h3 class="mb-5 text-gray-800 fw-bold">{{ __('reports.financial_summary') }}</h3>

        <!--begin::Stats Row-->
        <div class="row g-6 g-xl-9 mb-9">
            <!-- Accrual Income -->
            <div class="col-md-6 col-lg-4">
                <div class="card card-flush h-md-100 border-start border-primary border-4">
                    <div class="card-header pt-5">
                        <div class="card-title d-flex flex-column">
                            <div class="d-flex align-items-center">
                                <span class="fs-2hx fw-bold text-gray-900 me-2 lh-1 ls-n2 font-monospace">@moneyWithCurrency($totals['total_accrual_income'], app('current_company')->currency)</span>
                            </div>
                            <span class="text-gray-500 pt-2 fw-semibold fs-6">{{ __('reports.total_invoiced_income') }}</span>
                        </div>
                        <div class="card-toolbar">
                            <div class="symbol symbol-45px symbol-circle bg-light-primary">
                                <span class="symbol-label">
                                    <i class="ki-outline ki-document fs-2x text-primary"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Accrual Expense -->
            <div class="col-md-6 col-lg-4">
                <div class="card card-flush h-md-100 border-start border-danger border-4">
                    <div class="card-header pt-5">
                        <div class="card-title d-flex flex-column">
                            <div class="d-flex align-items-center">
                                <span class="fs-2hx fw-bold text-gray-900 me-2 lh-1 ls-n2 font-monospace">@moneyWithCurrency($totals['total_accrual_expense'], app('current_company')->currency)</span>
                            </div>
                            <span class="text-gray-500 pt-2 fw-semibold fs-6">{{ __('reports.total_invoiced_expense') }}</span>
                        </div>
                        <div class="card-toolbar">
                            <div class="symbol symbol-45px symbol-circle bg-light-danger">
                                <span class="symbol-label">
                                    <i class="ki-outline ki-wallet fs-2x text-danger"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Accrual Net Balance -->
            <div class="col-md-6 col-lg-4">
                <div class="card card-flush h-md-100 border-start @if($totals['accrual_balance'] >= 0) border-success @else border-danger @endif border-4">
                    <div class="card-header pt-5">
                        <div class="card-title d-flex flex-column">
                            <div class="d-flex align-items-center">
                                <span class="fs-2hx fw-bold @if($totals['accrual_balance'] >= 0) text-success @else text-danger @endif me-2 lh-1 ls-n2 font-monospace">@moneyWithCurrency($totals['accrual_balance'], app('current_company')->currency)</span>
                            </div>
                            <span class="text-gray-500 pt-2 fw-semibold fs-6">{{ __('reports.net_income_expense_balance') }}</span>
                        </div>
                        <div class="card-toolbar">
                            <div class="symbol symbol-45px symbol-circle @if($totals['accrual_balance'] >= 0) bg-light-success @else bg-light-danger @endif">
                                <span class="symbol-label">
                                    <i class="ki-outline ki-chart-line-up fs-2x @if($totals['accrual_balance'] >= 0) text-success @else text-danger @endif"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Cash Collections -->
            <div class="col-md-6 col-lg-4">
                <div class="card card-flush h-md-100 border-start border-success border-4">
                    <div class="card-header pt-5">
                        <div class="card-title d-flex flex-column">
                            <div class="d-flex align-items-center">
                                <span class="fs-2hx fw-bold text-gray-900 me-2 lh-1 ls-n2 font-monospace">@moneyWithCurrency($totals['total_cash_income'], app('current_company')->currency)</span>
                            </div>
                            <span class="text-gray-500 pt-2 fw-semibold fs-6">{{ __('reports.total_cash_collection') }}</span>
                        </div>
                        <div class="card-toolbar">
                            <div class="symbol symbol-45px symbol-circle bg-light-success">
                                <span class="symbol-label">
                                    <i class="ki-outline ki-dollar fs-2x text-success"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Cash Payments -->
            <div class="col-md-6 col-lg-4">
                <div class="card card-flush h-md-100 border-start border-warning border-4">
                    <div class="card-header pt-5">
                        <div class="card-title d-flex flex-column">
                            <div class="d-flex align-items-center">
                                <span class="fs-2hx fw-bold text-gray-900 me-2 lh-1 ls-n2 font-monospace">@moneyWithCurrency($totals['total_cash_expense'], app('current_company')->currency)</span>
                            </div>
                            <span class="text-gray-500 pt-2 fw-semibold fs-6">{{ __('reports.total_expense_payment') }}</span>
                        </div>
                        <div class="card-toolbar">
                            <div class="symbol symbol-45px symbol-circle bg-light-warning">
                                <span class="symbol-label">
                                    <i class="ki-outline ki-percentage fs-2x text-warning"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Net Cash Flow -->
            <div class="col-md-6 col-lg-4">
                <div class="card card-flush h-md-100 border-start @if($totals['cash_balance'] >= 0) border-success @else border-danger @endif border-4">
                    <div class="card-header pt-5">
                        <div class="card-title d-flex flex-column">
                            <div class="d-flex align-items-center">
                                <span class="fs-2hx fw-bold @if($totals['cash_balance'] >= 0) text-success @else text-danger @endif me-2 lh-1 ls-n2 font-monospace">@moneyWithCurrency($totals['cash_balance'], app('current_company')->currency)</span>
                            </div>
                            <span class="text-gray-500 pt-2 fw-semibold fs-6">{{ __('reports.net_cash_flow') }}</span>
                        </div>
                        <div class="card-toolbar">
                            <div class="symbol symbol-45px symbol-circle @if($totals['cash_balance'] >= 0) bg-light-success @else bg-light-danger @endif">
                                <span class="symbol-label">
                                    <i class="ki-outline ki-bank fs-2x @if($totals['cash_balance'] >= 0) text-success @else text-danger @endif"></i>
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--end::Stats Row-->

        <!--begin::Charts Card-->
        <div class="card card-flush mb-9">
            <div class="card-header pt-5">
                <h3 class="card-title align-items-start flex-column">
                    <span class="card-label fw-bold text-gray-900">{{ __('reports.periodic_profit_loss_analysis') }}</span>
                    <span class="text-gray-500 mt-1 fw-semibold fs-7">{{ __('reports.follow_balance_charts') }}</span>
                </h3>
                <div class="card-toolbar">
                    <ul class="nav nav-tabs nav-line-tabs nav-stretch fs-6 border-0" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-bs-toggle="tab" href="#kt_reports_accrual_tab" role="tab">{{ __('reports.invoiced_profit_loss') }}</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#kt_reports_cash_tab" role="tab">{{ __('reports.cash_flow_actual') }}</a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="card-body">
                <div class="tab-content">
                    <!-- Tab 1: Accrual Chart -->
                    <div class="tab-pane fade show active" id="kt_reports_accrual_tab" role="tabpanel">
                        <div id="kt_reports_accrual_chart" style="height: 350px;"></div>
                    </div>
                    
                    <!-- Tab 2: Cash Chart -->
                    <div class="tab-pane fade" id="kt_reports_cash_tab" role="tabpanel">
                        <div id="kt_reports_cash_chart" style="height: 350px;"></div>
                    </div>
                </div>
            </div>
        </div>
        <!--end::Charts Card-->

        <!--begin::Table Card-->
        <div class="card card-flush mb-9">
            <div class="card-header pt-7">
                <h3 class="card-title align-items-start flex-column">
                    <span class="card-label fw-bold text-gray-900">{{ __('reports.monthly_financial_detail_table') }}</span>
                    <span class="text-gray-500 mt-1 fw-semibold fs-7">{{ __('reports.breakdown_monthly_figures') }}</span>
                </h3>
            </div>
            <div class="card-body pt-0">
                <div class="table-responsive">
                    <table class="table align-middle table-row-dashed fs-6 gy-5">
                        <thead>
                            <tr class="text-start text-gray-500 fw-bold fs-7 text-uppercase gs-0">
                                <th>{{ __('reports.month_year') }}</th>
                                <th class="text-end">{{ __('reports.invoiced_income') }}</th>
                                <th class="text-end">{{ __('reports.invoiced_expense') }}</th>
                                <th class="text-end">{{ __('reports.net_invoice_balance') }}</th>
                                <th class="text-end">{{ __('reports.cash_collection') }}</th>
                                <th class="text-end">{{ __('reports.expense_payment') }}</th>
                                <th class="text-end">{{ __('reports.net_cash_flow_table') }}</th>
                            </tr>
                        </thead>
                        <tbody class="fw-semibold text-gray-700">
                            @foreach($monthlyData as $data)
                                <tr>
                                    <td class="fw-bold">{{ $data['month_name'] }}</td>
                                    <td class="text-end text-success font-monospace">@money($data['accrual_income'])</td>
                                    <td class="text-end text-danger font-monospace">@money($data['accrual_expense'])</td>
                                    <td class="text-end font-monospace @if($data['accrual_income'] - $data['accrual_expense'] >= 0) text-success @else text-danger @endif">
                                        @money($data['accrual_income'] - $data['accrual_expense'])
                                    </td>
                                    <td class="text-end text-success font-monospace">@money($data['cash_income'])</td>
                                    <td class="text-end text-danger font-monospace">@money($data['cash_expense'])</td>
                                    <td class="text-end font-monospace @if($data['cash_income'] - $data['cash_expense'] >= 0) text-success @else text-danger @endif">
                                        @money($data['cash_income'] - $data['cash_expense'])
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!--end::Table Card-->

    </div>
</div>
<!--end::Content-->
@endsection

@push('scripts')
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const labels = {!! json_encode($chartLabels) !!};
        
        // --- 1. Accrual Chart Options ---
        const accrualIncomeData = {!! json_encode($chartAccrualIncome) !!};
        const accrualExpenseData = {!! json_encode($chartAccrualExpense) !!};
        
        const accrualOptions = {
            series: [
                {
                    name: '{{ __('reports.invoiced_income') }}',
                    data: accrualIncomeData
                }, 
                {
                    name: '{{ __('reports.invoiced_expense') }}',
                    data: accrualExpenseData
                }
            ],
            chart: {
                fontFamily: 'inherit',
                type: 'area',
                height: 350,
                toolbar: {
                    show: false
                }
            },
            colors: ['#00b2ff', '#f1416c'],
            dataLabels: {
                enabled: false
            },
            stroke: {
                curve: 'smooth',
                width: 3
            },
            xaxis: {
                categories: labels,
                axisBorder: {
                    show: false,
                },
                axisTicks: {
                    show: false
                }
            },
            yaxis: {
                labels: {
                    formatter: function (val) {
                        return val.toLocaleString('tr-TR', { minimumFractionDigits: 2 }) + ' {{ app('current_company')->currency?->symbol }}';
                    }
                }
            },
            fill: {
                type: 'gradient',
                gradient: {
                    shadeIntensity: 1,
                    opacityFrom: 0.3,
                    opacityTo: 0.05,
                    stops: [0, 90, 100]
                }
            },
            tooltip: {
                y: {
                    formatter: function (val) {
                        return val.toLocaleString('tr-TR', { minimumFractionDigits: 2 }) + ' {{ app('current_company')->currency?->symbol }}';
                    }
                }
            }
        };

        const accrualChart = new ApexCharts(document.querySelector("#kt_reports_accrual_chart"), accrualOptions);
        accrualChart.render();

        // --- 2. Cash Chart Options ---
        const cashIncomeData = {!! json_encode($chartCashIncome) !!};
        const cashExpenseData = {!! json_encode($chartCashExpense) !!};

        const cashOptions = {
            series: [
                {
                    name: '{{ __('reports.cash_collection') }}',
                    data: cashIncomeData
                }, 
                {
                    name: '{{ __('reports.cash_payment') }}',
                    data: cashExpenseData
                }
            ],
            chart: {
                fontFamily: 'inherit',
                type: 'area',
                height: 350,
                toolbar: {
                    show: false
                }
            },
            colors: ['#50cd89', '#ffc700'],
            dataLabels: {
                enabled: false
            },
            stroke: {
                curve: 'smooth',
                width: 3
            },
            xaxis: {
                categories: labels,
                axisBorder: {
                    show: false,
                },
                axisTicks: {
                    show: false
                }
            },
            yaxis: {
                labels: {
                    formatter: function (val) {
                        return val.toLocaleString('tr-TR', { minimumFractionDigits: 2 }) + ' {{ app('current_company')->currency?->symbol }}';
                    }
                }
            },
            fill: {
                type: 'gradient',
                gradient: {
                    shadeIntensity: 1,
                    opacityFrom: 0.3,
                    opacityTo: 0.05,
                    stops: [0, 90, 100]
                }
            },
            tooltip: {
                y: {
                    formatter: function (val) {
                        return val.toLocaleString('tr-TR', { minimumFractionDigits: 2 }) + ' {{ app('current_company')->currency?->symbol }}';
                    }
                }
            }
        };

        const cashChart = new ApexCharts(document.querySelector("#kt_reports_cash_chart"), cashOptions);
        cashChart.render();

        // Redraw charts on tab change to resolve sizing quirks inside bootstrap tabs
        $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
            accrualChart.windowResizeHandler();
            cashChart.windowResizeHandler();
        });
    });
</script>
@endpush