{{--
    Partial: ряд 2 дашборда — графики Chart.js + последние заявки
    Переменные: $leadsUnread, $recentLeads
    Данные для графиков ($leadsChart, $visitsChart) передаются в @push('js') основного файла
--}}
<div class="row">

    {{-- Графики --}}
    <div class="col-md-8">

        {{-- График заявок --}}
        <div class="card card-outline card-primary shadow-sm mb-3">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-chart-line mr-2 text-primary"></i>Заявки за 14 дней</h3>
                <div class="card-tools">
                    <a href="{{ route('admin.leads.index') }}" class="btn btn-sm btn-primary">
                        Все заявки
                    </a>
                </div>
            </div>
            <div class="card-body p-2">
                <canvas id="chartLeads" height="90"></canvas>
            </div>
        </div>

        {{-- График посещаемости --}}
        <div class="card card-outline card-info shadow-sm mb-3">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-chart-bar mr-2 text-info"></i>Посещаемость за 14 дней</h3>
            </div>
            <div class="card-body p-2">
                <canvas id="chartVisits" height="90"></canvas>
            </div>
        </div>

    </div>

    {{-- Последние заявки --}}
    <div class="col-md-4">
        <div class="card card-outline card-danger shadow-sm" style="height:calc(100% - 1rem)">
            <div class="card-header">
                <h3 class="card-title">
                    <i class="fas fa-bell mr-2 text-danger"></i>Последние заявки
                    @if($leadsUnread > 0)
                        <span class="badge badge-danger ml-1">{{ $leadsUnread }}</span>
                    @endif
                </h3>
                <div class="card-tools">
                    <a href="{{ route('admin.leads.index') }}" class="btn btn-sm btn-outline-secondary">
                        Все
                    </a>
                </div>
            </div>
            <div class="card-body p-0" style="overflow-y:auto;max-height:400px">
                @forelse($recentLeads as $lead)
                    <a href="{{ route('admin.leads.show', $lead) }}"
                       class="d-flex align-items-start p-3 border-bottom {{ is_null($lead->read_at) ? 'bg-light' : '' }}"
                       style="text-decoration:none;color:inherit;transition:background .15s">
                        <div class="mr-3 mt-1 flex-shrink-0">
                            <div style="width:36px;height:36px;border-radius:50%;background:{{ is_null($lead->read_at) ? '#dc3545' : '#6c757d' }};
                                 display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px">
                                <i class="fas fa-envelope{{ is_null($lead->read_at) ? '' : '-open' }}"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 min-width-0">
                            @php
                                $name  = data_get($lead->data, 'name', data_get($lead->data, 'Имя', '—'));
                                $phone = data_get($lead->data, 'phone', data_get($lead->data, 'Телефон', ''));
                            @endphp
                            <div class="font-weight-bold text-truncate small">{{ $name }}</div>
                            @if($phone)
                                <div class="text-muted" style="font-size:11px">{{ $phone }}</div>
                            @endif
                            <div class="text-muted" style="font-size:11px">
                                {{ $lead->created_at->diffForHumans() }}
                            </div>
                        </div>
                        @if(is_null($lead->read_at))
                            <span class="badge badge-danger align-self-center ml-2">NEW</span>
                        @endif
                    </a>
                @empty
                    <div class="p-4 text-center text-muted">
                        <i class="fas fa-inbox fa-2x mb-2 d-block opacity-50"></i>
                        Заявок пока нет
                    </div>
                @endforelse
            </div>
        </div>
    </div>

</div>