@extends('admin.layouts.admin')

@section('content')
    <div class="main-side re-tas-pro">
        <div class="d-flex align-items-center justify-content-between flex-wrap mb-3 not-print">
            <div class="main-title mb-0">
                <div class="small">الرئيسية</div>
                <div class="large">تقرير العملاء</div>
            </div>
            <div class="btn-holder">
                <a href="{{ route('admin.reports.index') }}" class="main-btn bg-secondary">رجوع <i
                        class="fas fa-angle-left"></i></a>
            </div>
        </div>

        @php
            use App\Models\Client;
            use App\Models\CustomerSource;

            $total_clients = Client::count();
            $sources = CustomerSource::withCount('clients')->get();
            $colors = [
                'card-blue',
                'card-green',
                'card-orange',
                'card-purple',
                'card-cyan',
                'card-pink',
                'card-teal',
                'card-yellow',
                'card-brown',
                'card-indigo',
            ];
        @endphp

        <form action="" class="issue-main-info">
            <div class="content-header not-print">
                عرض كل تقرير العملاء
                <button class="btn btn-sm btn-warning" onclick="window.print()"><i class="fas fa-print"></i></button>
            </div>
            <x-header-invoice></x-header-invoice>
            <div class="row justify-content-center mb-4">
                <div class="col-md-4 mb-3">
                    <div class="card-stat card-gray">
                        <span>إجمالي العملاء</span>
                        <h4>{{ $total_clients }}</h4>
                    </div>
                </div>
            </div>
            <div class="row text-center">
                @foreach ($sources as $index => $source)
                    @php $color = $colors[$index % count($colors)]; @endphp
                    <div class="col-md-4 mb-3">
                        <div class="card-stat1 {{ $color }}">
                            <span>{{ $source->name }}</span>
                            <h4>{{ $source->clients_count }}</h4>
                        </div>
                    </div>
                @endforeach
            </div>
        </form>
    </div>
@endsection
@push('css')
    <style>
        .card-stat1 {
            border-radius: 8px;
            padding: 20px;
            color: #000;
            background-color: #f9f9f9;
            border-left: 6px solid transparent;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
            text-align: center;
            font-weight: bold;
        }

        .card-blue {
            background-color: #e8f4fd;
            border-left-color: #2196f3;
        }

        .card-green {
            background-color: #e6f4ea;
            border-left-color: #4caf50;
        }

        .card-orange {
            background-color: #fff3e0;
            border-left-color: #fb8c00;
        }

        .card-purple {
            background-color: #f3e8fd;
            border-left-color: #9c27b0;
        }

        .card-cyan {
            background-color: #e0f7fa;
            border-left-color: #00acc1;
        }

        .card-pink {
            background-color: #fce4ec;
            border-left-color: #e91e63;
        }

        .card-teal {
            background-color: #e0f2f1;
            border-left-color: #009688;
        }

        .card-yellow {
            background-color: #fffde7;
            border-left-color: #fbc02d;
        }

        .card-brown {
            background-color: #efebe9;
            border-left-color: #8d6e63;
        }

        .card-indigo {
            background-color: #e8eaf6;
            border-left-color: #3f51b5;
        }
    </style>
@endpush