@extends('admin.layouts.master')

@section('contents')
@if(isset($error))
    <div class="alert alert-danger m-2">
        {{ $error }}
    </div>
@else
    @can('view_dashboard')
        <div class="content-wrapper">
            <div class="content-header row">
                <div class="content-header-left col-md-9 col-12 mb-2">
                    <div class="row breadcrumbs-top">
                        <div class="col-12">
                            <h2 class="content-header-title float-left mb-0">{{ __('Dashboard') }}</h2>
                            <div class="breadcrumb-wrapper col-12">
                                <ol class="breadcrumb">
                                    <li class="breadcrumb-item active">{{ __('Home') }}</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="content-body">
                @include('admin.dashboard._date-filter')

                @include('admin.dashboard._action-required')

                @if(!empty($kpis))
                    <section id="dashboard-kpis" class="mb-2">
                        <div class="row">
                            @foreach($kpis as $kpi)
                                <div class="col-xl col-md-6 col-12 mb-1">
                                    @include('admin.dashboard._stat-card', [
                                        'label' => $kpi['label'],
                                        'value' => $kpi['value'],
                                        'sub' => $kpi['sub'] ?? null,
                                        'sub_url' => $kpi['sub_url'] ?? null,
                                        'icon' => $kpi['icon'],
                                        'color' => $kpi['color'],
                                        'url' => $kpi['url'] ?? null,
                                        'size' => 'lg',
                                    ])
                                </div>
                            @endforeach
                        </div>
                    </section>
                @endif

                @include('admin.dashboard._financial-summary')

                @if(!empty($projectBreakdown) || !empty($offerBreakdown))
                    <section id="dashboard-breakdown" class="mb-2">
                        <div class="row">
                            @if(!empty($projectBreakdown))
                                <div class="col-lg-6 col-12 mb-1">
                                    @include('admin.dashboard._status-breakdown', [
                                        'title' => __('Project Status Distribution'),
                                        'breakdown' => $projectBreakdown,
                                    ])
                                </div>
                            @endif
                            @if(!empty($offerBreakdown))
                                <div class="col-lg-6 col-12 mb-1">
                                    @include('admin.dashboard._status-breakdown', [
                                        'title' => __('Offer Status Distribution'),
                                        'breakdown' => $offerBreakdown,
                                    ])
                                </div>
                            @endif
                        </div>
                    </section>
                @endif

                @if(!empty($charts))
                    <section id="dashboard-charts" class="mb-2">
                        <div class="row">
                            <div class="col-12 mb-1">
                                <div class="card">
                                    <div class="card-header">
                                        <h4 class="card-title mb-0">{{ $charts['title'] ?? __('Projects & Offers') }} — {{ $dateRangeLabel ?? '' }}</h4>
                                    </div>
                                    <div class="card-content">
                                        <div class="card-body">
                                            <div id="combined-monthly-chart"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @if(!empty($topCategories) && $topCategories->isNotEmpty())
                                <div class="col-12 mb-1">
                                    <div class="card">
                                        <div class="card-header">
                                            <h4 class="card-title mb-0">{{ __('Top Project Categories') }}</h4>
                                        </div>
                                        <div class="card-content">
                                            <div class="card-body">
                                                <div id="top-categories-chart"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endif
                        </div>
                    </section>
                @endif

                @include('admin.dashboard._recent-activity')
            </div>
        </div>
    @endcan
@endif
@endsection

@section('css')
<style>
    .dashboard-stat-card {
        transition: box-shadow 0.2s ease, transform 0.2s ease;
    }
    .dashboard-stat-card:hover {
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
    }
    .dashboard-stat-card__sub a:hover {
        color: #63bf7c !important;
        text-decoration: underline;
    }
    .dashboard-stat-card--urgent {
        border-right: 4px solid #FF9F43;
    }
    [dir="ltr"] .dashboard-stat-card--urgent {
        border-right: none;
        border-left: 4px solid #FF9F43;
    }
    .dashboard-stat-card--lg .dashboard-stat-card__value {
        font-size: 2rem;
    }
    .dashboard-stat-card__label {
        white-space: normal;
        line-height: 1.35;
        font-size: 0.95rem;
        padding: 0 4px;
    }
    .dashboard-stat-card__sub {
        line-height: 1.35;
    }
    #dashboard-action-required .col-xl,
    #dashboard-kpis .col-xl {
        flex: 1 1 0;
        min-width: 180px;
    }
    #top-categories-chart {
        overflow: visible;
    }
    #top-categories-chart .apexcharts-canvas {
        overflow: visible;
    }
    #top-categories-chart .apexcharts-yaxis-label {
        font-weight: 500;
        fill: #5e5873;
    }
</style>
@endsection

@section('scripts')
@if(!empty($charts))
<script>
    (function () {
        var $primary = '#63bf7c',
            $success = '#28C76F',
            $info = '#00cfe8';

        var chartLabels = @json($charts['labels'] ?? []);
        var projectsData = @json($charts['projects'] ?? []);
        var offersData = @json($charts['offers'] ?? []);
        var chartType = @json($charts['type'] ?? 'hourly');

        var combinedOptions = {
            chart: { height: 360, type: 'line', toolbar: { show: false } },
            colors: [$primary, $info],
            stroke: { width: [0, 3], curve: 'smooth' },
            plotOptions: {
                bar: { columnWidth: chartType === 'daily' ? '60%' : '45%', endingShape: 'rounded' }
            },
            dataLabels: { enabled: false },
            series: [
                { name: @json(__('Projects')), type: 'column', data: projectsData },
                { name: @json(__('Offers')), type: 'line', data: offersData }
            ],
            xaxis: {
                categories: chartLabels,
                labels: {
                    rotate: chartType === 'daily' ? -45 : 0,
                    hideOverlappingLabels: true,
                }
            },
            yaxis: [
                { title: { text: @json(__('Projects')) } },
                { opposite: true, title: { text: @json(__('Offers')) } }
            ],
            legend: { position: 'top' },
            tooltip: { shared: true, intersect: false }
        };

        if (document.querySelector('#combined-monthly-chart')) {
            new ApexCharts(document.querySelector('#combined-monthly-chart'), combinedOptions).render();
        }

        @if(!empty($topCategories) && $topCategories->isNotEmpty())
        var categoryNames = @json($topCategories->pluck('name')->values());
        var categoryCounts = @json($topCategories->pluck('project_count')->values());
        var isRtl = document.documentElement.getAttribute('data-textdirection') === 'rtl'
            || document.documentElement.dir === 'rtl';

        var categoriesOptions = {
            chart: {
                height: Math.max(280, categoryNames.length * 56),
                type: 'bar',
                toolbar: { show: false }
            },
            colors: [$success],
            plotOptions: {
                bar: {
                    horizontal: true,
                    barHeight: '50%',
                    borderRadius: 4,
                    dataLabels: { position: 'top' }
                }
            },
            dataLabels: {
                enabled: true,
                offsetX: isRtl ? -10 : 10,
                style: { fontSize: '12px', fontWeight: 600 }
            },
            series: [{ name: @json(__('Projects')), data: categoryCounts }],
            xaxis: {
                categories: categoryNames,
                labels: {
                    show: true,
                    trim: false,
                    hideOverlappingLabels: false,
                    maxWidth: 320,
                    style: {
                        fontSize: '13px',
                        fontWeight: 500,
                        colors: ['#5e5873']
                    }
                },
                axisBorder: { show: false },
                axisTicks: { show: false }
            },
            yaxis: {
                labels: {
                    show: true,
                    style: { fontSize: '12px', colors: ['#b9b9c3'] }
                }
            },
            grid: {
                borderColor: '#e8e8e8',
                padding: { top: 4, bottom: 4, left: 8, right: 8 },
                xaxis: { lines: { show: true } }
            },
            tooltip: {
                y: {
                    formatter: function (val, opts) {
                        var name = categoryNames[opts.dataPointIndex] || '';
                        return name + ': ' + val;
                    }
                }
            }
        };

        if (document.querySelector('#top-categories-chart')) {
            new ApexCharts(document.querySelector('#top-categories-chart'), categoriesOptions).render();
        }
        @endif
    })();
</script>
@endif
@endsection