@extends("admin.layout.master_layout")
@section("title")
    الرئيسية
@endsection

@section("page-content")

<div class="m-grid__item m-grid__item--fluid m-grid m-grid--ver-desktop m-grid--desktop m-page__container m-body">
    <div class="m-grid__item m-grid__item--fluid m-wrapper">

        <div class="m-subheader">
            <div class="d-flex align-items-center">
                <div class="mr-auto">
                    <h3 class="m-subheader__title m-subheader__title--separator">الرئيسية</h3>
                </div>
            </div>
        </div>

        <div class="m-content">
            <div class="m-portlet__body row" style="justify-content: center;">

                @php
                    // ألوان الكروت — تدور بشكل تلقائي
                    $colors = [
                        ['bg' => '#C9F7F5', 'text' => '#1BC5BD', 'icon' => 'fa-folder-open'],
                        ['bg' => '#FFF4DE', 'text' => '#FFA800', 'icon' => 'fa-newspaper'],
                        ['bg' => '#EEE5FF', 'text' => '#8950FC', 'icon' => 'fa-book'],
                        ['bg' => '#FFE2E5', 'text' => '#F64E60', 'icon' => 'fa-bullhorn'],
                        ['bg' => '#caf7c9', 'text' => '#35c51b', 'icon' => 'fa-heart'],
                        ['bg' => '#d2c9f7', 'text' => '#6610f2', 'icon' => 'fa-briefcase'],
                        ['bg' => '#f0c9f7', 'text' => '#a31bc5', 'icon' => 'fa-file-alt'],
                        ['bg' => '#c9dbf7', 'text' => '#1b67c5', 'icon' => 'fa-chart-bar'],
                    ];
                    $colorIndex = 0;
                @endphp

                {{-- ======== كرت المشاريع ======== --}}
                @php $c = $colors[$colorIndex % count($colors)]; $colorIndex++; @endphp
                <div class="col-md-3 col-lg-6 col-xl-3"
                     style="background-color: {{ $c['bg'] }} !important; margin-bottom: 30px; border-radius: 0.675rem; margin-left: 25px;">
                    <div class="m-widget24" style="padding: 2rem 2.25rem; margin-bottom: 0.75rem !important; margin-top: 0.75rem !important;">
                        <div class="m-widget24__item">
                            <h4 class="m-widget24__title" style="color: {{ $c['text'] }} !important; font-size: 1.175rem !important;">
                                <i class="fa {{ $c['icon'] }}"></i> عدد المشاريع
                            </h4>
                            <br>
                            <span class="m-widget24__stats m--font-brand" style="color: #3F4254 !important; font-size: 1.75rem !important;">
                                {{ $data['projects_count'] ?? 0 }}
                            </span>
                        </div>
                    </div>
                </div>

                {{-- ======== كرت الاستديو ======== --}}
                @php $c = $colors[$colorIndex % count($colors)]; $colorIndex++; @endphp
                <div class="col-md-3 col-lg-6 col-xl-3"
                     style="background-color: {{ $c['bg'] }} !important; margin-bottom: 30px; border-radius: 0.675rem; margin-left: 25px;">
                    <div class="m-widget24" style="padding: 2rem 2.25rem; margin-bottom: 0.75rem !important; margin-top: 0.75rem !important;">
                        <div class="m-widget24__item">
                            <h4 class="m-widget24__title" style="color: {{ $c['text'] }} !important; font-size: 1.175rem !important;">
                                <i class="fa fa-camera"></i> الاستديو
                            </h4>
                            <br>
                            <span class="m-widget24__stats m--font-brand" style="color: #3F4254 !important; font-size: 1.75rem !important;">
                                {{ $data['studios_count'] ?? 0 }}
                            </span>
                        </div>
                    </div>
                </div>

                {{-- ======== كروت تصنيفات الأخبار — ديناميكية ======== --}}
                @if(isset($data['category_stats']))
                    @foreach($data['category_stats'] as $stat)
                        @php $c = $colors[$colorIndex % count($colors)]; $colorIndex++; @endphp
                        <div class="col-md-3 col-lg-6 col-xl-3"
                             style="background-color: {{ $c['bg'] }} !important; margin-bottom: 30px; border-radius: 0.675rem; margin-left: 25px;">
                            <div class="m-widget24" style="padding: 2rem 2.25rem; margin-bottom: 0.75rem !important; margin-top: 0.75rem !important;">
                                <div class="m-widget24__item">
                                    <h4 class="m-widget24__title" style="color: {{ $c['text'] }} !important; font-size: 1.175rem !important;">
                                        <i class="fa {{ $c['icon'] }}"></i> {{ $stat['name_ar'] }}
                                    </h4>
                                    <br>
                                    <span class="m-widget24__stats m--font-brand" style="color: #3F4254 !important; font-size: 1.75rem !important;">
                                        {{ $stat['count'] }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    @endforeach
                @endif

                {{-- ======== كرت إجمالي الأخبار والقصص ======== --}}
                @php $c = $colors[$colorIndex % count($colors)]; $colorIndex++; @endphp
                <div class="col-md-3 col-lg-6 col-xl-3"
                     style="background-color: {{ $c['bg'] }} !important; margin-bottom: 30px; border-radius: 0.675rem; margin-left: 25px;">
                    <div class="m-widget24" style="padding: 2rem 2.25rem; margin-bottom: 0.75rem !important; margin-top: 0.75rem !important;">
                        <div class="m-widget24__item">
                            <h4 class="m-widget24__title" style="color: {{ $c['text'] }} !important; font-size: 1.175rem !important;">
                                <i class="fa fa-globe"></i> إجمالي المنشورات
                            </h4>
                            <br>
                            <span class="m-widget24__stats m--font-brand" style="color: #3F4254 !important; font-size: 1.75rem !important;">
                                {{ $data['news_total'] ?? 0 }}
                            </span>
                        </div>
                    </div>
                </div>


                @php $c = $colors[$colorIndex % count($colors)]; $colorIndex++; @endphp
                <div class="col-md-3 col-lg-6 col-xl-3"
                     style="background-color: {{ $c['bg'] }} !important; margin-bottom: 30px; border-radius: 0.675rem; margin-left: 25px;">
                    <div class="m-widget24" style="padding: 2rem 2.25rem; margin-bottom: 0.75rem !important; margin-top: 0.75rem !important;">
                        <div class="m-widget24__item">
                            <h4 class="m-widget24__title" style="color: {{ $c['text'] }} !important; font-size: 1.175rem !important;">
                                <i class="fa {{ $c['icon'] }}"></i> عدد الشركاء
                            </h4>
                            <br>
                            <span class="m-widget24__stats m--font-brand" style="color: #3F4254 !important; font-size: 1.75rem !important;">
                                {{ $data['parenter_total'] ?? 0 }}
                            </span>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>
</div>

@endsection