@extends('layouts.app')
@section('title')
    {{ 'Macro Dashboard' }}
@endsection

@section('content')
    @push('styles')
        <link rel="stylesheet" type="text/css" href="{{ asset('/css/daterangepicker.css') }}" />
    @endpush
    <!-- breadcrumb -->
    <div class="breadcrumb-header justify-content-between">
        <div class="my-auto">
            <h4 class="page-title">GeoScope</h4>
            <ol class="breadcrumb">
                <li class="breadcrumb-item">
                    @if (Auth::user()->role_id == 1)
                        <a href="{{ route('backend.dashboard') }}">Admin Dashboard</a>
                    @else
                        <a href="{{ route('backend.business.dashboard') }}">Business Dashboard</a>
                    @endif
                </li>
                <li class="breadcrumb-item active" aria-current="page">
                    <a href="javascript:void(0);">GeoScope</a>
                </li>
            </ol>
        </div>
    </div>
    <!-- breadcrumb -->

    <!-- tab view:start-->
    <div class="row row-sm">
        <div class="col-xl-12">
            <div class="card mb-0">
                <div class="card-body">
                    <div class="panel panel-primary tabs-style-3">
                        <div class="tab-menu-heading">
                            <div class="tabs-menu">
                                <!-- Tabs -->
                                <ul class="nav panel-tabs justify-content-center tab-wrap">
                                    <li class="country-li">
                                        <select id="macroCountries" class="macroCountries form-control form-select">
                                            <option></option>
                                            @foreach ($finalDemographics["countryList"] as $singleCountryKey => $singleCountryValue)
                                                <option value="{{ $singleCountryKey }}">{{ $singleCountryValue }}</option>
                                            @endforeach
                                        </select>
                                    </li>
                                    <li>
                                        <a 
                                            data-bs-toggle="tab" 
                                            href="{{ (request('subscription_table_can_access_demographics') !== null && request('subscription_table_can_access_demographics') === '0' &&  $isFree == "no") ? "" : "#demographics" }}"
                                            id="{{ (request('subscription_table_can_access_demographics') !== null && request('subscription_table_can_access_demographics') === '0' &&  $isFree == "no") ? "" : "demographicsTab" }}"  
                                            class="{{ (request('subscription_table_can_access_demographics') !== null && request('subscription_table_can_access_demographics') === '0' &&  $isFree == "no") ? "update-subscription" : " active custom-macro-tab" }}" 
                                        >
                                            <i class="{{-- fa fa-laptop me-1 --}}">
                                                <img alt="" src="{{ asset('images/common/demographics.svg') }}" width="20%">
                                            </i>
                                            Demographics
                                        </a>
                                    </li>
                                    <li>
                                        <a 
                                            data-bs-toggle="tab"
                                            href="{{ (request('subscription_table_can_access_economy') !== null && request('subscription_table_can_access_economy') === '0' &&  $isFree == "no") ?  "" : "#economy" }}"
                                            id="{{ (request('subscription_table_can_access_economy') !== null && request('subscription_table_can_access_economy') === '0' &&  $isFree == "no") ?  "" : "economyTab" }}"
                                            class="{{ (request('subscription_table_can_access_economy') !== null && request('subscription_table_can_access_economy') === '0' &&  $isFree == "no") ? "update-subscription" : "custom-macro-tab" }}"
                                        >
                                            <i class="{{-- fa fa-cube me-1 --}}">
                                                <img alt="" src="{{ asset('images/common/economy.svg') }}" width="20%">
                                            </i>
                                            Economy
                                        </a>
                                    </li>
                                    <li>
                                        
                                        <a 
                                            data-bs-toggle="tab" 
                                            href="{{ (request('subscription_table_can_access_infrastructure') !== null && request('subscription_table_can_access_infrastructure') === '0'  && $isFree == "no") ? "" : "#infrastructure" }}" 
                                            id="{{ (request('subscription_table_can_access_infrastructure') !== null && request('subscription_table_can_access_infrastructure') === '0'  && $isFree == "no") ? "" : "infrastructureTab" }}" 
                                            class="{{ ((request('subscription_table_can_access_infrastructure') !== null && request('subscription_table_can_access_infrastructure') === '0') && $isFree == "no") ? "update-subscription" : "custom-macro-tab" }}"
                                        >
                                            <i class="{{-- fa fa-cogs me-1 --}}">
                                                <img alt="" src="{{ asset('images/common/infrastructure.svg') }}" width="20%">
                                            </i>
                                            Infrastructure
                                        </a>
                                    </li>
                                    <li>
                                        
                                        <a 
                                            data-bs-toggle="tab" 
                                            href="{{ (request('subscription_table_can_access_regulation') !== null && request('subscription_table_can_access_regulation') === '0'  && $isFree == "no") ? "" : "#regulations" }}" 
                                            id="{{ (request('subscription_table_can_access_regulation') !== null && request('subscription_table_can_access_regulation') === '0'  && $isFree == "no") ? "" : "regulationsTab" }}" 
                                            class="{{ (request('subscription_table_can_access_regulation') !== null && request('subscription_table_can_access_regulation') === '0'  && $isFree == "no") ? "update-subscription" : "custom-macro-tab" }}"
                                        >
                                            <i class="{{-- fa fa-tasks me-1 --}}">
                                                <img alt="" src="{{ asset('images/common/regulations.svg') }}" width="20%">
                                            </i>
                                            Regulations
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="panel-body tabs-menu-body">
            <div class="tab-content">
                <div class="tab-pane active" id="demographics">
                    <div id="routeLoadDemographics" data-route="{{ route('geoscope.load-demographics-tab') }}"></div>
                    @include('backend.macro-dashboard.demographics')
                </div>
                <div class="tab-pane" id="economy">
                    <div id="routeLoadEconomy" data-route="{{ route('geoscope.load-economy-tab') }}"></div>
                    @include('backend.macro-dashboard.economy')
                </div>
                <div class="tab-pane" id="infrastructure">
                    <div id="routeLoadInfrastructure" data-route="{{ route('geoscope.load-infrastructure-tab') }}"></div>
                    @include('backend.macro-dashboard.infrastructure')
                </div>
                <div class="tab-pane" id="regulations">
                    <div id="routeLoadRegulations" data-route="{{ route('geoscope.load-regulations-tab') }}"></div>
                    @include('backend.macro-dashboard.regulations')
                </div>
            </div>
        </div>
    </div>
    <!-- tab view:end-->

    @push('scripts')
        <script src="{{ asset('/js/backend/common-macro-support.js') }}?v={{ time() }}"></script>
    @endpush
@endsection