@extends('layouts.app')
@section('title', 'Leads')

@section('content')
    <x-page-header title="Leads" :lede="$pipeline->name">
        <x-slot:actions>
            @if ($pipelines->count() > 1)
                <form method="GET" data-autosubmit>
                    <select name="pipeline" aria-label="Pipeline">
                        @foreach ($pipelines as $option)
                            <option value="{{ $option->public_id }}" @selected($option->id === $pipeline->id)>{{ $option->name }}</option>
                        @endforeach
                    </select>
                </form>
            @endif
            <a class="btn secondary" href="{{ route('app.leads.index') }}">List view</a>
            @can('create', \App\Models\Lead::class)
                <a class="btn primary" href="{{ route('app.leads.create') }}">New lead</a>
            @endcan
        </x-slot:actions>
    </x-page-header>

    {{-- Stage colours run cool to warm along the funnel, so the board reads at a
         glance without a legend. See docs/DESIGN-TOKENS.md. --}}
    <div class="board" data-board="{{ route('app.leads.move') }}">
        @foreach ($stages as $stage)
            @php $cards = $grouped[$stage->id] ?? collect(); @endphp
            <section class="column {{ $stage->colour_token }}" data-stage="{{ $stage->public_id }}"
                     aria-label="{{ $stage->name }}">
                <header>
                    <div class="row between">
                        <span class="title">{{ $stage->name }}</span>
                        <span class="small muted">{{ $stage->probability }}%</span>
                    </div>
                    <div class="total" data-symbol="">
                        {{ $cards->count() }} {{ \Illuminate\Support\Str::plural('record', $cards->count()) }}
                        @if ($cards->sum('expected_value') > 0)
                            · {{ money((float) $cards->sum('expected_value'), (string) $currency) }}
                        @endif
                    </div>
                </header>

                <div class="cards">
                    @foreach ($cards as $lead)
                        <article class="kcard {{ $lead->isRotting() ? 'rotting' : '' }}"
                                 data-id="{{ $lead->public_id }}" data-value="{{ (float) $lead->expected_value }}">
                            <a class="name" href="{{ route('app.leads.show', $lead) }}">{{ $lead->title }}</a>
                            @if ($lead->company_name)<span class="small muted">{{ $lead->company_name }}</span>@endif
                            <div class="meta">
                                <span class="money">{{ $lead->expected_value ? money((float) $lead->expected_value, (string) ($lead->currency ?: $currency)) : '—' }}</span>
                                @if ($lead->owner)<x-avatar :name="$lead->owner->name" />@endif
                            </div>
                        </article>
                    @endforeach
                </div>
            </section>
        @endforeach
    </div>

    <p class="small muted" style="margin-top:14px">
        Drag a card to move it. A card with an amber edge has sat in its stage longer than that stage allows.
    </p>
@endsection