@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])

    @push('css')
        <link rel="stylesheet" href="{{ asset('/') }}assets/css/pu-consolidated.css">
    @endpush

    @php
        $currentUser   = $user_login ?? auth()->user();
        if (!$currentUser && session()->has('username')) {
            $currentUser = \Illuminate\Support\Facades\DB::table('users')
                ->where('username', session('username'))
                ->first();
        }
        $currentUserId    = $currentUser ? $currentUser->id : null;
        $currentUserRoles = $currentUser ? (string) ($currentUser->idroles ?? '') : '';
        $rolesArray       = array_map('trim', explode(',', strtolower($currentUserRoles)));

        $isAdmin     = in_array('admins', $rolesArray) || in_array('admin', $rolesArray);
        $isHead      = in_array('headxx', $rolesArray);
        $isHrd       = in_array('hrdxxx', $rolesArray) || in_array('hrd', $rolesArray);
        $isUser      = in_array('usersx', $rolesArray);
        $isPetugasPU = in_array('ptgspu', $rolesArray);
        $puRouteBases = [
            'truser' => 'user',
            'trreq' => 'pengajuan',
            'trhrd' => 'pengajuan-hrd',
            'trpetn' => 'pekerjaan-nonperiodic',
        ];

        $tabs = [];
        if ($isAdmin) {
            $tabs = [
                'truser' => ['label' => 'Pengajuan PU',       'icon' => 'fas fa-paper-plane'],
                'trreq'  => ['label' => 'Approval Head',      'icon' => 'fas fa-clipboard-check'],
                'trhrd'  => ['label' => 'Approval HRD',       'icon' => 'fas fa-user-tie'],
                'trpetn' => ['label' => 'Pekerjaan Petugas',   'icon' => 'fas fa-hard-hat'],
            ];
        } elseif ($isHrd) {
            $tabs = [
                'trhrd'  => ['label' => 'Approval HRD',  'icon' => 'fas fa-user-tie'],
                'truser' => ['label' => 'Pengajuan PU',   'icon' => 'fas fa-paper-plane'],
            ];
        } elseif ($isHead) {
            $tabs = [
                'trreq' => ['label' => 'Approval Head', 'icon' => 'fas fa-clipboard-check'],
            ];
        } elseif ($isPetugasPU) {
            $tabs = [
                'trpetn' => ['label' => 'Pekerjaan Non-Periodic', 'icon' => 'fas fa-hard-hat'],
            ];
        } else {
            $tabs = [
                'truser' => ['label' => 'Pengajuan PU', 'icon' => 'fas fa-paper-plane'],
            ];
        }

        $showTabs   = count($tabs) > 1;
        $defaultTab = $isHrd && array_key_exists('trhrd', $tabs) ? 'trhrd' : array_key_first($tabs);
        $activeTab  = request()->has('tab') ? request('tab') : $defaultTab;
        if (!array_key_exists($activeTab, $tabs)) {
            $activeTab = $defaultTab;
        }
    @endphp

    <div class="container-fluid py-4 pu-wrap">
        <div class="pu-hero">
            <div class="row align-items-center">
                <div class="col-lg-8">
                    <h2 class="mb-1">Daftar PU</h2>
                    <p class="text-sm">Kelola seluruh siklus pengajuan, persetujuan, dan pelaksanaan pekerjaan umum.</p>
                </div>
            </div>
        </div>

        @include('components.alert')

        @if ($showTabs)
            <div class="pu-tab-nav mb-3">
                <ul class="nav nav-pills nav-fill p-1" id="puTabs" role="tablist" data-no-moving-tab="true">
                    @foreach ($tabs as $tabKey => $tabInfo)
                        <li class="nav-item" role="presentation">
                            <button class="nav-link {{ $activeTab === $tabKey ? 'active' : '' }}"
                                    id="tab-btn-{{ $tabKey }}" data-bs-toggle="pill"
                                    data-bs-target="#tab-pane-{{ $tabKey }}" type="button"
                                    role="tab" aria-controls="tab-pane-{{ $tabKey }}"
                                    aria-selected="{{ $activeTab === $tabKey ? 'true' : 'false' }}">
                                <i class="{{ $tabInfo['icon'] }} me-2"></i>{{ $tabInfo['label'] }}
                            </button>
                        </li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="tab-content" id="puTabContent">

            @if (isset($tabs['truser']))
                <div class="tab-pane fade {{ $activeTab === 'truser' ? 'show active' : '' }}"
                     id="tab-pane-truser" role="tabpanel">
                    @include('transc.auto.partials.tab_pengajuan_pu')
                </div>
            @endif
            @if (isset($tabs['trreq']))
                <div class="tab-pane fade {{ $activeTab === 'trreq' ? 'show active' : '' }}"
                     id="tab-pane-trreq" role="tabpanel">
                    @include('transc.auto.partials.tab_approval_head')
                </div>
            @endif

            @if (isset($tabs['trhrd']))
                <div class="tab-pane fade {{ $activeTab === 'trhrd' ? 'show active' : '' }}"
                     id="tab-pane-trhrd" role="tabpanel">
                    @include('transc.auto.partials.tab_approval_hrd')
                </div>
            @endif

            @if (isset($tabs['trpetn']))
                <div class="tab-pane fade {{ $activeTab === 'trpetn' ? 'show active' : '' }}"
                     id="tab-pane-trpetn" role="tabpanel">
                    @include('transc.auto.partials.tab_pekerjaan_petugas')
                </div>
            @endif

        </div>
    </div>

    @push('js')
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const tabEls = document.querySelectorAll('#puTabs button[data-bs-toggle="pill"]');
                tabEls.forEach(function (tabEl) {
                    tabEl.addEventListener('shown.bs.tab', function (event) {
                        const targetId = event.target.getAttribute('data-bs-target');
                        const pane = document.querySelector(targetId);
                        if (pane) {
                            const tables = pane.querySelectorAll('table.display, table.pu-table');
                            tables.forEach(function (table) {
                                if ($.fn.DataTable.isDataTable(table)) {
                                    $(table).DataTable().columns.adjust().draw();
                                }
                            });
                        }

                        const tabKey = event.target.getAttribute('data-bs-target').replace('#tab-pane-', '');
                        const url = new URL(window.location);
                        url.searchParams.set('tab', tabKey);
                        window.history.replaceState({}, '', url);
                    });
                });
            });
        </script>
    @endpush
@endsection