@extends('admin.layout.master')

@section('css')
    <link rel="stylesheet" type="text/css" href="{{ asset('admin/app-assets/vendors/css/charts/apexcharts.css') }}">
    <style>
        .finance-page {
            --finance-ink: #1f2937;
            --finance-muted: #64748b;
            --finance-border: #e5e7eb;
            --finance-soft: #f8fafc;
            --finance-green: #16a34a;
            --finance-blue: #2563eb;
            --finance-gold: #d97706;
            --finance-red: #dc2626;
        }

        .finance-page .finance-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            flex-wrap: wrap;
            margin-bottom: 1.25rem;
        }

        .finance-page .finance-title {
            font-size: 1.45rem;
            font-weight: 800;
            color: var(--finance-ink);
            margin-bottom: .35rem;
        }

        .finance-page .finance-range {
            color: var(--finance-muted);
            font-size: .92rem;
        }

        .finance-page .finance-filter-card,
        .finance-page .finance-card {
            border: 1px solid var(--finance-border);
            border-radius: 8px;
            box-shadow: 0 10px 24px rgba(15, 23, 42, .055);
        }

        .finance-page .finance-filter-card .form-control {
            min-height: 42px;
        }

        .finance-page .finance-quick-links {
            display: flex;
            flex-wrap: wrap;
            gap: .45rem;
        }

        .finance-page .finance-chip {
            border: 1px solid var(--finance-border);
            color: var(--finance-muted);
            background: #fff;
            border-radius: 999px;
            padding: .45rem .85rem;
            line-height: 1;
            font-size: .85rem;
        }

        .finance-page .finance-chip.active {
            background: #111827;
            color: #fff;
            border-color: #111827;
        }

        .finance-page .kpi-card {
            position: relative;
            overflow: hidden;
            min-height: 142px;
        }

        .finance-page .kpi-card .card-body {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 100%;
        }

        .finance-page .kpi-icon {
            width: 42px;
            height: 42px;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-bottom: .9rem;
        }

        .finance-page .kpi-label {
            color: var(--finance-muted);
            font-size: .84rem;
            margin-bottom: .35rem;
        }

        .finance-page .kpi-value {
            font-size: 1.45rem;
            line-height: 1.2;
            font-weight: 800;
            color: var(--finance-ink);
            word-break: break-word;
        }

        .finance-page .kpi-sub {
            margin-top: .55rem;
            color: var(--finance-muted);
            font-size: .82rem;
        }

        .finance-page .soft-green { background: rgba(22, 163, 74, .12); color: var(--finance-green); }
        .finance-page .soft-blue { background: rgba(37, 99, 235, .12); color: var(--finance-blue); }
        .finance-page .soft-gold { background: rgba(217, 119, 6, .13); color: var(--finance-gold); }
        .finance-page .soft-red { background: rgba(220, 38, 38, .12); color: var(--finance-red); }

        .finance-page .section-title {
            font-size: 1rem;
            font-weight: 800;
            color: var(--finance-ink);
            margin-bottom: .2rem;
        }

        .finance-page .section-subtitle {
            color: var(--finance-muted);
            font-size: .84rem;
        }

        .finance-page .chart-box {
            min-height: 315px;
        }

        .finance-page .finance-table th {
            white-space: nowrap;
            color: var(--finance-muted);
            font-size: .78rem;
            text-transform: uppercase;
            background: #f8fafc;
            border-top: 0;
        }

        .finance-page .finance-table td {
            vertical-align: middle;
            white-space: nowrap;
            height: 47px;
        }

        .finance-page .finance-empty {
            color: var(--finance-muted);
            background: var(--finance-soft);
            border: 1px dashed var(--finance-border);
            border-radius: 8px;
            padding: 2rem 1rem;
            text-align: center;
        }

        .finance-page .finance-empty-sm {
            padding: 4rem 1rem;
        }

        .finance-page .finance-table-widget {
            min-height: 430px;
        }

        .finance-page .finance-table-widget.is-loading {
            opacity: .62;
            pointer-events: none;
        }

        .finance-page .finance-table-card {
            height: 100%;
            min-height: 430px;
            display: flex;
            flex-direction: column;
        }

        .finance-page .finance-table-card .card-body {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding-bottom: .75rem;
        }

        .finance-page .finance-table-header {
            min-height: 74px;
            align-items: flex-start;
        }

        .finance-page .finance-table-scroll {
            flex: 1;
            min-height: 284px;
            max-height: 284px;
            overflow: auto;
        }

        .finance-page .finance-table-pagination {
            min-height: 52px;
            display: flex;
            align-items: center;
            justify-content: center;
            padding-top: .75rem;
            border-top: 1px solid var(--finance-border);
        }

        .finance-page .finance-table-pagination .pagination {
            margin-bottom: 0;
            flex-wrap: wrap;
            justify-content: center;
        }

        .finance-page .finance-table-pagination .page-link {
            min-width: 34px;
            text-align: center;
            border-radius: 6px;
            margin: 0 .12rem;
        }

        @media (max-width: 767.98px) {
            .finance-page .finance-header {
                display: block;
            }

            .finance-page .finance-quick-links {
                margin-top: 1rem;
            }

            .finance-page .kpi-value {
                font-size: 1.2rem;
            }

            .finance-page .finance-table-card,
            .finance-page .finance-table-widget {
                min-height: 400px;
            }

            .finance-page .finance-table-scroll {
                min-height: 250px;
                max-height: 250px;
            }
        }
    </style>
@endsection

@section('content')
@php
    $money = fn ($value) => number_format((float) $value, 2) . ' ' . __('admin.sar');
    $number = fn ($value) => number_format((float) $value);
    $operationClass = fn ($operation) => $operation === 'deposit' ? 'badge-success' : 'badge-warning';
@endphp

<div class="finance-page">
    <div class="finance-header">
        <div>
            <div class="finance-title">{{ __('routes.finance.index') }}</div>
            <div class="finance-range">
                <i class="feather icon-calendar mr-50"></i>
                {{ $filters['label'] }}
            </div>
        </div>

        @haspermission('admin.settlements.index')
            <a href="{{ route('admin.settlements.index') }}" class="btn btn-outline-warning">
                <i class="feather icon-dollar-sign mr-50"></i>{{ __('admin.settlements') }}
            </a>
        @endhaspermission
    </div>

    <div class="card finance-filter-card mb-2">
        <div class="card-body">
            <form method="GET" action="{{ route('admin.finance.index') }}" id="finance-filter-form">
                <div class="row align-items-end">
                    <div class="col-xl-3 col-md-6 mb-1">
                        <label for="finance-period">{{ __('admin.period') }}</label>
                        <select name="period" id="finance-period" class="form-control">
                            @foreach($period_options as $key => $label)
                                <option value="{{ $key }}" @selected($filters['period'] === $key)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-xl-3 col-md-6 mb-1 finance-date-field" data-finance-field="single_day">
                        <label for="finance-date">{{ __('admin.date') }}</label>
                        <input type="date" name="date" id="finance-date" value="{{ $filters['date'] }}" class="form-control">
                    </div>
                    <div class="col-xl-2 col-md-6 mb-1 finance-date-field" data-finance-field="custom">
                        <label for="finance-from">{{ __('admin.from') }}</label>
                        <input type="date" name="from" id="finance-from" value="{{ $filters['from'] }}" class="form-control">
                    </div>
                    <div class="col-xl-2 col-md-6 mb-1 finance-date-field" data-finance-field="custom">
                        <label for="finance-to">{{ __('admin.to') }}</label>
                        <input type="date" name="to" id="finance-to" value="{{ $filters['to'] }}" class="form-control">
                    </div>
                    <div class="col-xl-2 col-md-12 mb-1 d-flex">
                        <button type="submit" class="btn btn-primary flex-fill mr-50">
                            <i class="feather icon-filter mr-50"></i>{{ __('admin.filter') }}
                        </button>
                        <a href="{{ route('admin.finance.index') }}" class="btn btn-outline-secondary" title="{{ __('admin.reset') }}">
                            <i class="feather icon-rotate-ccw"></i>
                        </a>
                    </div>
                </div>
            </form>

            <div class="finance-quick-links mt-1">
                @foreach($period_options as $key => $label)
                    @continue(in_array($key, ['single_day', 'custom'], true))
                    <a href="{{ route('admin.finance.index', ['period' => $key]) }}"
                       class="finance-chip {{ $filters['period'] === $key ? 'active' : '' }}">
                        {{ $label }}
                    </a>
                @endforeach
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xl-3 col-md-6 mb-2">
            <div class="card finance-card kpi-card mb-0">
                <div class="card-body">
                    <div>
                        <span class="kpi-icon soft-green"><i class="feather icon-trending-up"></i></span>
                        <div class="kpi-label">{{ __('admin.gross_ride_revenue') }}</div>
                        <div class="kpi-value">{{ $money($summary['gross_revenue']) }}</div>
                    </div>
                    <div class="kpi-sub">{{ __('admin.completed_rides') }}: {{ $number($summary['rides_count']) }}</div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-2">
            <div class="card finance-card kpi-card mb-0">
                <div class="card-body">
                    <div>
                        <span class="kpi-icon soft-blue"><i class="feather icon-pocket"></i></span>
                        <div class="kpi-label">{{ __('admin.company_net_revenue') }}</div>
                        <div class="kpi-value">{{ $money($summary['company_net_revenue']) }}</div>
                    </div>
                    <div class="kpi-sub">{{ __('admin.after_investor_share') }}</div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-2">
            <div class="card finance-card kpi-card mb-0">
                <div class="card-body">
                    <div>
                        <span class="kpi-icon soft-gold"><i class="feather icon-users"></i></span>
                        <div class="kpi-label">{{ __('admin.investor_share_estimated') }}</div>
                        <div class="kpi-value">{{ $money($summary['investor_share_estimated']) }}</div>
                    </div>
                    <div class="kpi-sub">{{ __('admin.unsettled_revenue') }}: {{ $money($summary['unsettled_revenue']) }}</div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-2">
            <div class="card finance-card kpi-card mb-0">
                <div class="card-body">
                    <div>
                        <span class="kpi-icon soft-red"><i class="feather icon-activity"></i></span>
                        <div class="kpi-label">{{ __('admin.average_ride_revenue') }}</div>
                        <div class="kpi-value">{{ $money($summary['average_ride_revenue']) }}</div>
                    </div>
                    <div class="kpi-sub">
                        {{ __('admin.duration_hours') }}: {{ number_format((float) $summary['duration_hours'], 1) }}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xl-8 mb-2">
            <div class="card finance-card mb-0">
                <div class="card-header d-flex align-items-start justify-content-between">
                    <div>
                        <div class="section-title">{{ __('admin.revenue_performance') }}</div>
                        <div class="section-subtitle">{{ __('admin.gross_net_and_rides') }}</div>
                    </div>
                </div>
                <div class="card-body">
                    <div id="finance-performance-chart" class="chart-box"></div>
                </div>
            </div>
        </div>

        <div class="col-xl-4 mb-2">
            <div class="card finance-card mb-0">
                <div class="card-header">
                    <div class="section-title">{{ __('admin.period_snapshot') }}</div>
                    <div class="section-subtitle">{{ __('admin.operational_revenue_scope') }}</div>
                </div>
                <div class="card-body">
                    <div class="row text-center">
                        <div class="col-6 mb-2">
                            <small class="text-muted d-block">{{ __('admin.clients') }}</small>
                            <strong>{{ $number($summary['clients_count']) }}</strong>
                        </div>
                        <div class="col-6 mb-2">
                            <small class="text-muted d-block">{{ __('admin.scooters') }}</small>
                            <strong>{{ $number($summary['scooters_count']) }}</strong>
                        </div>
                        <div class="col-6 mb-2">
                            <small class="text-muted d-block">{{ __('admin.providers') }}</small>
                            <strong>{{ $number($summary['providers_count']) }}</strong>
                        </div>
                        <div class="col-6 mb-2">
                            <small class="text-muted d-block">{{ __('admin.settled_revenue') }}</small>
                            <strong>{{ $money($summary['active_settlement_revenue']) }}</strong>
                        </div>
                    </div>

                    <hr>

                    <div class="d-flex justify-content-between mb-1">
                        <span>{{ __('admin.open_pending_settlements') }}</span>
                        <strong>{{ $money($settlements['open']['total_amount']) }}</strong>
                    </div>
                    <div class="d-flex justify-content-between mb-1">
                        <span>{{ __('admin.period_pending_settlements') }}</span>
                        <strong>{{ $money($settlements['pending']['total_amount']) }}</strong>
                    </div>
                    <div class="d-flex justify-content-between mb-1">
                        <span>{{ __('admin.period_paid_settlements') }}</span>
                        <strong>{{ $money($settlements['accepted']['total_amount']) }}</strong>
                    </div>
                    <div class="d-flex justify-content-between">
                        <span>{{ __('admin.period_rejected_settlements') }}</span>
                        <strong>{{ $number($settlements['rejected']['count']) }}</strong>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xl-3 col-md-6 mb-2">
            <div class="card finance-card kpi-card mb-0">
                <div class="card-body">
                    <div>
                        <span class="kpi-icon soft-green"><i class="feather icon-plus-circle"></i></span>
                        <div class="kpi-label">{{ __('admin.wallet_deposits') }}</div>
                        <div class="kpi-value">{{ $money($wallet['deposits']) }}</div>
                    </div>
                    <div class="kpi-sub">{{ __('admin.wallet_top_ups') }}: {{ $money($wallet['top_ups']) }}</div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-2">
            <div class="card finance-card kpi-card mb-0">
                <div class="card-body">
                    <div>
                        <span class="kpi-icon soft-gold"><i class="feather icon-minus-circle"></i></span>
                        <div class="kpi-label">{{ __('admin.wallet_withdrawals') }}</div>
                        <div class="kpi-value">{{ $money($wallet['withdrawals']) }}</div>
                    </div>
                    <div class="kpi-sub">{{ __('admin.ride_wallet_deductions') }}: {{ $money($wallet['ride_deductions']) }}</div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-2">
            <div class="card finance-card kpi-card mb-0">
                <div class="card-body">
                    <div>
                        <span class="kpi-icon soft-blue"><i class="feather icon-credit-card"></i></span>
                        <div class="kpi-label">{{ __('admin.wallet_net_flow') }}</div>
                        <div class="kpi-value">{{ $money($wallet['net_flow']) }}</div>
                    </div>
                    <div class="kpi-sub">{{ __('admin.transactions') }}: {{ $number($wallet['transactions_count']) }}</div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-2">
            <div class="card finance-card kpi-card mb-0">
                <div class="card-body">
                    <div>
                        <span class="kpi-icon soft-red"><i class="feather icon-refresh-cw"></i></span>
                        <div class="kpi-label">{{ __('admin.refunds_and_adjustments') }}</div>
                        <div class="kpi-value">{{ $money($wallet['refunds'] + $wallet['admin_adjustments']) }}</div>
                    </div>
                    <div class="kpi-sub">{{ __('admin.package_deductions') }}: {{ $money($wallet['package_deductions']) }}</div>
                </div>
            </div>
        </div>
    </div>

    <div class="row finance-tables-grid">
        @foreach($table_widgets as $table => $widget)
            <div class="col-xl-6 mb-2 finance-table-widget" data-finance-table-widget data-table="{{ $table }}">
                @include('admin.finance.partials.table-widget', compact('widget'))
            </div>
        @endforeach
    </div>
</div>
@endsection

@section('js')
    <script src="{{ asset('admin/app-assets/vendors/js/charts/apexcharts.min.js') }}"></script>
    <script>
        (function () {
            const periodSelect = document.getElementById('finance-period');
            const dateFields = document.querySelectorAll('.finance-date-field');

            function syncDateFields() {
                const period = periodSelect ? periodSelect.value : 'today';
                dateFields.forEach(function (field) {
                    const mode = field.getAttribute('data-finance-field');
                    field.style.display = mode === period ? '' : 'none';
                });
            }

            if (periodSelect) {
                periodSelect.addEventListener('change', syncDateFields);
                syncDateFields();
            }

            const financeUrl = '{{ route('admin.finance.index') }}';
            const tableWidgets = document.querySelectorAll('[data-finance-table-widget]');

            function currentFinanceFilters() {
                const form = document.getElementById('finance-filter-form');
                const params = new URLSearchParams();

                if (!form) {
                    return params;
                }

                new FormData(form).forEach(function (value, key) {
                    if (value !== null && value !== '') {
                        params.set(key, value);
                    }
                });

                return params;
            }

            function loadFinanceTable(table, page) {
                const widget = document.querySelector('[data-finance-table-widget][data-table="' + table + '"]');
                if (!widget) return;

                const params = currentFinanceFilters();
                params.set('table', table);
                params.set('page', page || 1);

                widget.classList.add('is-loading');

                fetch(financeUrl + '?' + params.toString(), {
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json',
                    },
                })
                    .then(response => response.json())
                    .then(data => {
                        if (data && data.html) {
                            widget.innerHTML = data.html;
                        }
                    })
                    .catch(() => {
                        window.location.href = financeUrl + '?' + params.toString();
                    })
                    .finally(() => {
                        widget.classList.remove('is-loading');
                    });
            }

            tableWidgets.forEach(function (widget) {
                widget.addEventListener('click', function (event) {
                    const link = event.target.closest('.pagination a');
                    if (!link) return;

                    event.preventDefault();

                    const url = new URL(link.href);
                    const table = widget.getAttribute('data-table') || url.searchParams.get('table');
                    const page = url.searchParams.get('page') || 1;

                    loadFinanceTable(table, page);
                });
            });

            const chartRows = @json($performance_chart);
            const chartEl = document.querySelector('#finance-performance-chart');
            const isDark = document.body.classList.contains('dark-layout');
            const labelColor = isDark ? '#cbd5e1' : '#64748b';
            const gridColor = isDark ? '#334155' : '#e5e7eb';

            if (chartEl && chartRows.length) {
                new ApexCharts(chartEl, {
                    chart: {
                        type: 'line',
                        height: 315,
                        toolbar: { show: false },
                        fontFamily: 'inherit',
                        background: 'transparent',
                    },
                    series: [
                        { name: '{{ __('admin.gross') }}', type: 'column', data: chartRows.map(row => row.gross_revenue) },
                        { name: '{{ __('admin.net') }}', type: 'column', data: chartRows.map(row => row.company_net) },
                        { name: '{{ __('admin.rides') }}', type: 'line', data: chartRows.map(row => row.rides_count) },
                    ],
                    xaxis: {
                        categories: chartRows.map(row => row.label),
                        labels: { style: { colors: labelColor, fontSize: '12px' }, rotate: -25 },
                        axisBorder: { show: false },
                        axisTicks: { show: false },
                    },
                    yaxis: [
                        {
                            labels: { style: { colors: labelColor }, formatter: value => Number(value).toLocaleString() },
                            title: { text: '{{ __('admin.sar') }}', style: { color: labelColor } },
                            min: 0,
                        },
                        {
                            opposite: true,
                            labels: { style: { colors: labelColor }, formatter: value => Math.round(value) },
                            title: { text: '{{ __('admin.rides') }}', style: { color: labelColor } },
                            min: 0,
                        },
                    ],
                    colors: ['#16a34a', '#2563eb', '#d97706'],
                    plotOptions: { bar: { borderRadius: 5, columnWidth: '42%' } },
                    stroke: { width: [0, 0, 3], curve: 'smooth' },
                    grid: { borderColor: gridColor, strokeDashArray: 4 },
                    dataLabels: { enabled: false },
                    legend: { position: 'top', labels: { colors: labelColor } },
                    tooltip: {
                        theme: isDark ? 'dark' : 'light',
                        shared: true,
                        intersect: false,
                        y: [
                            { formatter: value => Number(value).toLocaleString() + ' {{ __('admin.sar') }}' },
                            { formatter: value => Number(value).toLocaleString() + ' {{ __('admin.sar') }}' },
                            { formatter: value => Math.round(value) },
                        ],
                    },
                    theme: { mode: isDark ? 'dark' : 'light' },
                }).render();
            } else if (chartEl) {
                chartEl.innerHTML = '<div class="finance-empty">{{ __('admin.there_is_no_data_at_the_moment') }}</div>';
            }
        })();
    </script>
@endsection