<div>

    <x-title>
        {{ $leadSource->display_name }} <span
                class="text-md badge {{ $leadSource->status === 'active' ? 'bg-success' : 'bg-danger' }}">{{ ucfirst($leadSource->status) }}</span>
        @can('toggle', $leadSource)
            <x-slot:buttons>
                <div class="d-flex align-items-center gap-3">
                    <div class="form-check form-switch m-0">
                        <input
                                class="form-check-input"
                                type="checkbox"
                                role="switch"
                                id="statusToggle"
                                wire:click="toggleStatus"
                                @checked($leadSource->status === 'active')
                        >
                        <label class="form-check-label fw-semibold" for="statusToggle">
                            {{ $leadSource->status === 'active' ? 'Live' : 'Paused' }}
                        </label>
                    </div>

                    <div wire:loading wire:target="toggleStatus" class="small text-muted">
                        Updating…
                    </div>
                </div>
            </x-slot:buttons>
        @endcan
    </x-title>

    <div class="row g-4">

        {{-- METRICS --}}
        <div class="col-12 col-lg-7">

            <div class="card shadow-sm mb-4">
                <div class="card-body">

                    <h4 class="fw-bold mb-4 d-flex justify-content-between align-items-center">
                        Overview
                        <div class="d-flex gap-2 align-items-center">
                            <input type="date" class="form-control form-control-sm" wire:model.live="dateFrom">
                            <input type="date" class="form-control form-control-sm" wire:model.live="dateTo">

                            <button
                                    class="btn btn-outline-secondary btn-sm"
                                    wire:click="$set('dateFrom', null); $set('dateTo', null);"
                            >
                                Reset
                            </button>
                        </div>
                    </h4>


                    @php
                        $leads = $this->leads;

                        $total      = $leads->count();
                        $today      = $leads->filter(fn ($l) => $l->created_at?->isToday())->count();
                        $last7      = $leads->filter(fn ($l) => $l->created_at?->gte(now()->subDays(7)))->count();

                        $totalValue = $leads->sum('value');
                        $avgValue   = $total ? $totalValue / $total : 0;

                        $byStatus = $leads->groupBy('status')->map->count();
                    @endphp

                    {{-- TOP METRICS --}}
                    <div class="row g-3 mb-4">
                        <div class="col-6 col-md-3">
                            <div class="bg-light rounded p-3 h-100">
                                <div class="small text-muted">Total</div>
                                <div class="fs-4 fw-bold">{{ number_format($total) }}</div>
                            </div>
                        </div>

                        <div class="col-6 col-md-3">
                            <div class="bg-light rounded p-3 h-100">
                                <div class="small text-muted">Today</div>
                                <div class="fs-4 fw-bold">{{ number_format($today) }}</div>
                            </div>
                        </div>

                        <div class="col-6 col-md-3">
                            <div class="bg-light rounded p-3 h-100">
                                <div class="small text-muted">Last 7 Days</div>
                                <div class="fs-4 fw-bold">{{ number_format($last7) }}</div>
                            </div>
                        </div>

                        <div class="col-6 col-md-3">
                            <div class="bg-light rounded p-3 h-100">
                                <div class="small text-muted">Total Value</div>
                                <div class="fs-5 fw-bold">£{{ number_format($totalValue, 2) }}</div>
                                <div class="small text-muted">
                                    Avg £{{ number_format($avgValue, 2) }}
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- STATUS BREAKDOWN --}}
                    <div>
                        <div class="fw-bold mb-2">Status Breakdown</div>

                        @if($total === 0)
                            <div class="text-muted text-center py-4">
                                No leads in this range
                            </div>
                        @else
                            <div class="row g-3">
                                @foreach($byStatus as $status => $count)
                                    @php
                                        $percent = round(($count / $total) * 100);
                                        $label = ucfirst(str_replace('_', ' ', $status));
                                    @endphp

                                    <div class="col-12 col-md-6">
                                        <div class="border rounded p-3 h-100">
                                            <div class="d-flex justify-content-between align-items-center mb-2">
                                                <div class="fw-semibold">{{ $label }}</div>
                                                <span class="badge bg-primary">{{ $percent }}%</span>
                                            </div>

                                            <div class="progress" style="height: 8px;">
                                                <div
                                                        class="progress-bar"
                                                        style="width: {{ $percent }}%;"
                                                ></div>
                                            </div>

                                            <div class="small text-muted mt-2">
                                                {{ number_format($count) }} leads
                                            </div>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        @endif
                    </div>

                </div>
            </div>

        </div>


        {{-- ENDPOINTS --}}
        <div class="col-12 col-lg-5">
            <livewire:leadSource.endpoints :leadSource="$leadSource"/>

        </div>

    </div>

</div>
