@extends('layouts.main')

@once
    @push('stylesheets')
        <link rel="stylesheet" href="{{asset('css/requests.css')}}"/>
    @endpush
@endonce

@php
    //move to controller? maybe not
    $activeTab = request('tab') ?? 'dua';
@endphp

@section('content')
    <div blade="{{ $viewName ?? 'unknown' }}">

    <div class="requests-management">
        <x-page-header>
            VIEWING <span class="header-span">{{$activeTab}}</span> REQUESTS
        </x-page-header>
        <div class="top-bar">
            <ul class="nav form-tabs-container nav-pills mb-5" id="pills-tab" role="tablist">
                <li class="nav-item" role="presentation">
                    <x-ui.blue-button
                        class="{{$activeTab==='dua' ? 'active': ''}}"
                        id="pills-dua-tab"
                        pill="#pills-dua">
                        D.U.A.: ({{$userActivationRequestCounter}})
                    </x-ui.blue-button>
                </li>
                <li class="nav-item" role="presentation">
                    <x-ui.blue-button
                        class="{{$activeTab==='contacts' ? 'active': ''}}"
                        id="pills-contacts-tab"
                        pill="#pills-contacts">
                        CONTACTS: ({{$contactRequestCounter}})
                    </x-ui.blue-button>
                </li>
            </ul>
        </div>

        <div class="tab-content">

            <div class="tab-pane @if($activeTab === 'dua') active @endif" id="pills-dua" role="tabpanel"
                 aria-labelledby="pills-dua-tab">
                @include('management-requests.partials.dua-requests-list')
            </div>
            <div class="tab-pane @if($activeTab === 'contacts') active @endif" id="pills-contacts" role="tabpanel"
                 aria-labelledby="pills-contacts-tab">
                @include('management-requests.partials.contacts-requests-list')
            </div>

            {{--            <div class="tab-pane @if($activeTab === 'net-support') active @endif" id="pills-net-support" role="tabpanel"--}}
            {{--                 aria-labelledby="pills-net-support-tab">--}}
            {{--                @include('management-requests.partials.net-support-requests-list')--}}
            {{--            </div>--}}
        </div>
    </div>
    </div>
@endsection

@section('javascripts')
    <script>
        $q = jQuery.noConflict();
        $q(document).ready(function () {
            {{--// Function to show the contacts-json div--}}
            {{--function showContactsJson() {--}}
            {{--    $q('.contacts-json').show(); // Show the div--}}
            {{--}--}}

            {{--// Function to hide the contacts-json div--}}
            {{--function hideContactsJson() {--}}
            {{--    $q('.contacts-json').hide(); // Hide the div--}}
            {{--}--}}

            {{--// Initial visibility based on activeTab--}}
            {{--if ('{{ $activeTab }}' === 'contacts') {--}}
            {{--    showContactsJson();--}}
            {{--} else {--}}
            {{--    hideContactsJson();--}}
            {{--}--}}

            document.addEventListener('show.bs.tab', function (e) {
                const newTab = e.target.id.split('-')[1];
                const newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname + `?tab=${newTab}`;
                window.history.pushState({path: newUrl}, '', newUrl);
                $q('.header-span').text(`${newTab}`);
                // if (newTab === 'contacts') {
                //     showContactsJson(); // Show the div when the "CONTACTS" tab is active
                // } else {
                //     hideContactsJson(); // Hide it for other tabs
                // }
            });
        });
    </script>
@endsection