@extends('layouts.main')

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

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

    <div class="activation-management">
        <x-ui.page-title>Please choose what you want to manage today:</x-ui.page-title>
        <div class="row g-5">
            <div class="col-6">
                <x-ui.panel-box
                    link="{{route('management-activation.invitations-links')}}"
                    title="Invitation Links"
                    description="View Activcation Links filtered by Phase and Act"
                ></x-ui.panel-box>
            </div>
            <div class="col-6">
                <x-ui.panel-box
                    link="{{route('management-activation.activation-phases')}}"
                    title="Activation Phases Management"
                    description="CRUD for Activation Phases and Acts"
                ></x-ui.panel-box>
            </div>

            <div class="col-6">
                <x-ui.panel-box
                    link="{{route('management-activation.automated-activation-request')}}"
                    title="Automated Activation Request"
                    description=""
                ></x-ui.panel-box>
            </div>
        </div>
        <x-ui.page-title>Phases & Acts</x-ui.page-title>

        <div class="phases-acts row justify-content-start">

            @if( isset($stats['activation_phases']))
            @forelse($stats['activation_phases'] as $title => $phase)
                <x-stats-info colNumber='4' title='{{$title}}'>
                    @forelse($phase as $act)
                        <a class=""
                           href="{{ $act['route'] }}">
                            <div class="info-content">
                                <p class="info-content-text"><span
                                        class="info-content-text-index">{{$loop->iteration}}. </span>{{ $act['name'] }}:
                                </p>
                                <p class="info-content-counter">{{ $act['count'] }}</p>
                                <img class="info-content-img" src="{{ asset('images/next.svg') }}"/>
                            </div>
                        </a>
                    @empty
                        <div class="empty empty-acts">
                            <img class="empty-img" src="{{asset('images/desert.svg')}}"/>
                            <p class="empty-text">Oh no there is nothing here!</p>
                        </div>
                    @endforelse
                </x-stats-info>
            @empty
                <div class="empty empty-phases">
                    <img class="empty-img" src="{{asset('images/desert.svg')}}"/>
                    <p class="empty-text">Oh no there is nothing here!</p>
                </div>
            @endforelse
@endif
        </div>

        <x-ui.page-title>Total Numbers</x-ui.page-title>
        <div class="total-numbers row justify-content-evenly">


            @forelse($stats['totals'] as $key => $value)
                <x-stats-info colNumber='4'>
                    <div class="info-content">
                        <p class="info-content-notitle">{{ $key }}</p>
                        <p class="info-content-notitle">{{ $value }}</p>
                    </div>
                </x-stats-info>
            @empty
                <x-stats-info colNumber='4'>
                    <div class="info-content">
                        <p class="info-content-notitle">Total Phases</p>
                        <p class="info-content-notitle">0</p>
                    </div>
                </x-stats-info>
                <x-stats-info colNumber='4'>
                    <div class="info-content">
                        <p class="info-content-notitle">Total Acts</p>
                        <p class="info-content-notitle">0</p>
                    </div>
                </x-stats-info>
                <x-stats-info colNumber='4'>
                    <div class="info-content">
                        <p class="info-content-notitle">Total Users</p>
                        <p class="info-content-notitle">0</p>
                    </div>
                </x-stats-info>
            @endforelse

        </div>

    </div>

    </div>
@endsection