@extends('layouts.app')
@section('title', 'Sindh Development Portfolio Management System')

@push('styles')
<link rel="stylesheet" href="{{ asset('css/dynamic-dashboard.css') }}?v={{ filemtime(public_path('css/dynamic-dashboard.css')) }}">
@endpush

@section('contents')
<section class="content dd-dashboard">
    <div class="container-fluid">
        <div class="sdpms-header mb-3">
            <div class="sdpms-header__glow" aria-hidden="true"></div>
            <div class="sdpms-header__inner">
                <div class="sdpms-header__brand">
                    <img src="{{ asset('assets/dist/img/government_of_sindh_logo-100x100.png') }}" alt="Government of Sindh" class="sdpms-header__logo">
                    <div>
                        <p class="sdpms-header__eyebrow">Government of Sindh · Planning &amp; Development</p>
                        <h1 class="sdpms-header__title">Sindh Development Portfolio Management System</h1>
                    </div>
                </div>
            </div>
        </div>

        @include('dynamic-dashboard.partials.activity-calendar', [
            'activityCalendar' => $activityCalendar ?? null,
        ])

        <div class="dd-dashboard-layout">
            <aside class="dd-dashboard-layout__sidebar dd-dashboard-layout__sidebar--left">
                @include('dynamic-dashboard.partials.pending-actions')
            </aside>

            <div class="dd-dashboard-layout__main">
                <div class="dd-dashboard-tabs-row">
                    <div class="dd-dashboard-tabs" id="dd-dashboard-tabs" role="tablist" aria-label="Dashboard sections">
                        <button
                            type="button"
                            class="dd-dashboard-tabs__btn dd-dashboard-tabs__btn--portfolio is-active"
                            id="dd-tab-sind-portfolio"
                            role="tab"
                            aria-selected="true"
                            aria-controls="dd-tab-panel-sind-portfolio"
                            data-tab="sind-portfolio"
                        >
                            <i class="fas fa-th-large" aria-hidden="true"></i>
                            <span>Sind Portfolio</span>
                        </button>
                    </div>
                    @if ($dashboardFixEnabled ?? false)
                        <div class="dd-dashboard-year-field dd-dashboard-year-field--tabs">
                            <label for="dd-dashboard-budget-year">Budget year</label>
                            <select id="dd-dashboard-budget-year" class="form-control dd-dashboard-year-select">
                                @foreach (($budgetYears ?? []) as $yearOption)
                                    <option value="{{ $yearOption['id'] }}" @selected(($defaultBudgetYear ?? '') === $yearOption['id'])>
                                        {{ $yearOption['label'] }}
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    @endif
                </div>

                <div
                    class="dd-dashboard-tab-panel is-active"
                    id="dd-tab-panel-sind-portfolio"
                    role="tabpanel"
                    aria-labelledby="dd-tab-sind-portfolio"
                    data-tab-panel="sind-portfolio"
                >
                    @if ($dashboardFixEnabled ?? false)
                        @include('dynamic-dashboard.partials.sind-portfolio-cards', [
                            'sindPortfolioCards' => $sindPortfolioCards ?? null,
                            'defaultBudgetYear' => $defaultBudgetYear ?? '',
                        ])
                        @include('dynamic-dashboard.partials.pms-pipeline-cards', [
                            'dashboardFixPipeline' => $dashboardFixPipeline ?? null,
                            'defaultBudgetYear' => $defaultBudgetYear ?? '',
                        ])
                    @endif
                </div>

                <div
                    class="dd-dashboard-tab-panel"
                    id="dd-tab-panel-risk-intelligence"
                    role="tabpanel"
                    aria-labelledby="dd-tab-risk-intelligence"
                    data-tab-panel="risk-intelligence"
                    hidden
                >
                    @include('dynamic-dashboard.partials.scheme-attention', [
                        'budgetYears' => $budgetYears ?? [],
                        'defaultBudgetYear' => $defaultBudgetYear ?? '',
                        'hideBudgetYearSelect' => $dashboardFixEnabled ?? false,
                    ])
                </div>
            </div>{{-- /.dd-dashboard-layout__main --}}

            <aside class="dd-dashboard-layout__sidebar dd-dashboard-layout__sidebar--right">
                @include('dynamic-dashboard.partials.upcoming-meetings')
            </aside>
        </div>{{-- /.dd-dashboard-layout --}}
    </div>
</section>
@endsection

@push('scripts')
<script>
window.ddDashboardConfig = {
    csrfToken: @json(csrf_token()),
    routes: {
        pendingActionsUrl: @json(route('dashboard.pending-actions')),
        pendingActionsDismissUrl: @json(route('dashboard.pending-actions.dismiss')),
        upcomingMeetingsUrl: @json(route('dashboard.upcoming-meetings')),
        tasksPageUrl: @json(route('dashboard.tasks')),
        schemeAttentionUrl: @json(route('dashboard.scheme-attention')),
        dashboardFixPipelineUrl: @json(route('dashboard.dashboard-fix-pipeline')),
        sindPortfolioCardsUrl: @json(route('dashboard.sind-portfolio-cards')),
        pcPipelineReportUrl: @json(route('dashboard.pc-pipeline-report')),
        portfolioIntelligenceUrl: @json(route('dashboard.portfolio-intelligence')),
        prioritySchemesUrl: @json(route('dashboard.priority-schemes')),
        sindhGeoJsonUrl: @json(route('dashboard.sindh-geojson')),
        markNotificationReadBase: @json(url('/notifications')),
    },
    defaultBudgetYear: @json($defaultBudgetYear ?? ''),
    reportMode: 'full',
    dashboardFixEnabled: @json($dashboardFixEnabled ?? false),
    dashboardFixInitial: @json($dashboardFixPipeline),
    sindPortfolioInitial: @json($sindPortfolioCards),
    pcPipelineReportUrl: @json(route('dashboard.pc-pipeline-report')),
    mapLibreCssUrl: @json('https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.css'),
    mapLibreJsUrl: @json('https://unpkg.com/maplibre-gl@3.6.2/dist/maplibre-gl.js'),
    turfJsUrl: @json('https://unpkg.com/@turf/turf@6.5.0/dist/turf.min.js'),
};
</script>
<script src="{{ asset('js/dynamic-dashboard.js') }}?v={{ filemtime(public_path('js/dynamic-dashboard.js')) }}"></script>
@endpush