@extends('admin.layouts.master')
@section('title', $pageTitle)

@section('content')
<div class="page-content-wrapper"><div class="content-container"><div class="page-content">

    <div class="content-header d-flex justify-content-between align-items-center mb-3">
        <h4 class="mb-0"><i class="ti {{ $pageIcon ?? 'ti-report-analytics' }} me-2 text-primary"></i>{{ $pageTitle }}</h4>
        <a href="{{ route('admin.reports.index') }}" class="btn btn-outline-secondary btn-sm">
            <i class="ti ti-layout-dashboard me-1"></i>مركز التقارير
        </a>
    </div>

    <div class="card border-0 shadow-sm mb-3">
        <div class="card-body py-2">
            <div class="d-flex flex-wrap gap-2">
                @foreach($sectionNavigation as $nav)
                    @php
                        $navUrl = Route::has($nav['route']) ? route($nav['route']) : '#';
                        $navPattern = str_ends_with($nav['route'], '.index') ? str_replace('.index', '.*', $nav['route']) : $nav['route'];
                    @endphp
                    <a href="{{ $navUrl }}" class="btn btn-sm {{ request()->routeIs($navPattern) ? 'btn-primary' : 'btn-outline-primary' }}">
                        <i class="ti {{ $nav['icon'] }} me-1"></i>{{ $nav['label'] }}
                    </a>
                @endforeach
            </div>
        </div>
    </div>

    @include('admin.reports.partials.summary-cards', ['summaryCards' => $summaryCards])
    @include('admin.reports.partials.filters')

    <div class="row g-3 mb-3">
        <div class="col-xl-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-transparent border-0 pt-3">
                    <h6 class="mb-0"><i class="ti ti-chart-donut me-1 text-info"></i>بيانات الرسم البياني</h6>
                </div>
                <div class="card-body">
                    <div id="report-chart" style="min-height: 260px"></div>
                </div>
            </div>
        </div>
        <div class="col-xl-8">
            @include('admin.reports.partials.datatable-shell')
        </div>
    </div>

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

@push('scripts')
<script>
(function () {
    const filterSelector = '.report-filter';

    const table = $('#report-table').DataTable({
        processing: true,
        serverSide: true,
        responsive: true,
        language: { url: 'https://cdn.datatables.net/plug-ins/1.13.8/i18n/ar.json' },
        ajax: {
            url: @json($tableUrl),
            data: function (d) {
                $(filterSelector).each(function () {
                    d[$(this).attr('name')] = $(this).val();
                });
            }
        },
        columns: @json($columns)
    });

    function fetchChart() {
        const params = {};
        $(filterSelector).each(function () {
            const key = $(this).attr('name');
            const value = $(this).val();
            if (value !== '') {
                params[key] = value;
            }
        });

        $.get(@json($chartUrl), params, function (payload) {
            const root = document.getElementById('report-chart');
            root.innerHTML = '';

            const chartOptions = {
                series: payload.series || [],
                labels: payload.labels || [],
                chart: {
                    type: payload.chart?.type || 'bar',
                    height: 260,
                    toolbar: { show: false },
                    fontFamily: 'inherit',
                },
                dataLabels: { enabled: false },
                stroke: { curve: 'smooth', width: 2 },
                xaxis: { categories: payload.labels || [] },
                legend: { position: 'bottom' },
            };

            new ApexCharts(root, chartOptions).render();
        });
    }

    $('#btn-apply-filters').on('click', function () {
        table.ajax.reload();
        fetchChart();
        const params = {};
        $(filterSelector).each(function () {
            const key = $(this).attr('name');
            const value = $(this).val();
            if (value !== '') params[key] = value;
        });
        const url = new URL(@json($exportUrl), window.location.origin);
        Object.entries(params).forEach(([k, v]) => url.searchParams.set(k, v));
        $('#btn-export-report').attr('href', url.pathname + url.search);
    });

    $('#btn-reset-filters').on('click', function () {
        $(filterSelector).val('');
        table.ajax.reload();
        fetchChart();
    });

    fetchChart();
})();
</script>
@endpush