@extends('layouts.app')

@section('content')

    <div class="general-info text-center mt-10">
        <img class="w-20 mb-2" src="{{ @asset('img/logo.svg') }}" alt="">
        <h1 class="text-blue font-size-24 uppercase font-extrabold mb-2">
            {{ __('LINFODROME PERFORMANCE DASHBOARD') }}
        </h1>
        @livewire('month-form')
        @livewire('monthly-goal')
    </div>

    @include('components.gap')

    <div class="detailed-information flex flex-col gap-4 lg:grid lg:grid-cols-4">

        <div class="bg-white p-5 py-8 lg:col-span-1">
            @livewire('daily-perf')
        </div>

        <div class="bg-white p-5 py-8 lg:col-span-1">
            @livewire('month-healtbar')
        </div>
        
        <div class="flex flex-col gap-4 lg:col-span-2">
            
            <div class="bg-white p-5 py-8 w-full">
                @livewire('daily-quality-indicator')
            </div>

            <div class="flex flex-col lg:flex-row gap-4">
                <div class="bg-white p-5 py-8 w-full lg:w-[49%]">
                    @livewire('ranking-best-perft')
                </div>
                <div class="bg-white p-5 py-8 w-full lg:w-[49%]">
                    @livewire('forcast-copyrighter')
                </div>
            </div>
        </div>
        {{-- <div class="bg-white p-5 py-8 lg:col-span-2 lg:row-span-1 3xl:row-span-2">
            @livewire('daily-quality-indicator')
        </div>
        
        <div class="bg-white p-5 py-8 lg:col-span-1 lg:row-span-2 3xl:row-span-3">
            @livewire('ranking-best-perft')
        </div>
        
        <div class="bg-white p-5 py-8 lg:col-span-1 lg:row-span-2 3xl:row-span-3">
            @livewire('forcast-copyrighter')
        </div> --}}
    </div>

    @include('components.gap')

    @livewire('must-viewd-article')
@endsection