@php
    $badges = [
        'new' => 'badge-subtle-info',
        'contacted' => 'badge-subtle-primary',
        'quoted' => 'badge-subtle-warning',
        'won' => 'badge-subtle-success',
        'lost' => 'badge-subtle-danger',
    ];
@endphp

<div>
    <x-slot name="header">{{ __('Leads') }}</x-slot>

    <x-page-head :group="__('Customers')" :title="__('Leads')"
        :lead="__('People who asked about internet and are not connected yet.')">
        <x-slot name="actions">
            <button class="btn btn-sm btn-primary" wire:click="create">
                <i class="bi bi-plus-lg me-1"></i>{{ __('Add lead') }}
            </button>
        </x-slot>
    </x-page-head>

    @if (session('lead-flash'))
        <div class="alert alert-success border-0 rounded-3 py-2 small d-flex align-items-center gap-2">
            <i class="bi bi-check-circle"></i>{{ session('lead-flash') }}
        </div>
    @endif

    <div class="row g-3 mb-3">
        <div class="col-6 col-xl-3">
            <x-stat-card tone="primary" icon="bi-person-plus" :label="__('Open leads')"
                :value="$this->summary['open']" :sub="__('Still in play')" />
        </div>
        <div class="col-6 col-xl-3">
            <x-stat-card :tone="$this->summary['due'] > 0 ? 'danger' : 'neutral'" icon="bi-telephone"
                :label="__('Need calling')" :value="$this->summary['due']" :sub="__('Follow-up due or overdue')" />
        </div>
        <div class="col-6 col-xl-3">
            <x-stat-card tone="success" icon="bi-check2-circle" :label="__('Won')"
                :value="$this->summary['won']" :sub="__('Became subscribers')" />
        </div>
        <div class="col-6 col-xl-3">
            <x-stat-card tone="neutral" icon="bi-x-circle" :label="__('Lost')"
                :value="$this->summary['lost']" :sub="__('Written off')" />
        </div>
    </div>

    @if ($showForm)
        <div class="card dash-panel mb-3">
            <div class="dash-panel__head">
                <h6>{{ $editingId ? __('Edit lead') : __('New lead') }}</h6>
            </div>
            <div class="card-body">
                <form wire:submit="save">
                    <div class="row g-3">
                        <div class="col-12 col-md-4">
                            <label class="form-label small fw-semibold">{{ __('Name') }}</label>
                            <input type="text" class="form-control form-control-sm" wire:model="name">
                            <x-input-error for="name" />
                        </div>
                        <div class="col-6 col-md-3">
                            <label class="form-label small fw-semibold">{{ __('Phone') }}</label>
                            <input type="text" class="form-control form-control-sm" wire:model="phone"
                                placeholder="0712 345 678">
                            <x-input-error for="phone" />
                        </div>
                        <div class="col-6 col-md-3">
                            <label class="form-label small fw-semibold">{{ __('Location') }}</label>
                            <input type="text" class="form-control form-control-sm" wire:model="location">
                            <x-input-error for="location" />
                        </div>
                        <div class="col-6 col-md-2">
                            <label class="form-label small fw-semibold">{{ __('Source') }}</label>
                            <select class="form-select form-select-sm" wire:model="source">
                                @foreach (\App\Models\Lead::SOURCES as $s)
                                    <option value="{{ $s }}">{{ ucfirst($s) }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="col-6 col-md-3">
                            <label class="form-label small fw-semibold">{{ __('Status') }}</label>
                            <select class="form-select form-select-sm" wire:model="status">
                                @foreach (\App\Models\Lead::STATUSES as $s)
                                    <option value="{{ $s }}">{{ ucfirst($s) }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-6 col-md-3">
                            <label class="form-label small fw-semibold">{{ __('Interested in') }}</label>
                            <select class="form-select form-select-sm" wire:model="package_id">
                                <option value="">{{ __('Not sure yet') }}</option>
                                @foreach ($this->packages as $p)
                                    <option value="{{ $p->id }}">{{ $p->package }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-6 col-md-3">
                            <label class="form-label small fw-semibold">{{ __('Owner') }}</label>
                            <select class="form-select form-select-sm" wire:model="assigned_to">
                                <option value="">{{ __('Unassigned') }}</option>
                                @foreach ($this->staff as $u)
                                    <option value="{{ $u->id }}">{{ $u->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-6 col-md-3">
                            <label class="form-label small fw-semibold">{{ __('Call back on') }}</label>
                            <input type="date" class="form-control form-control-sm" wire:model="follow_up_on">
                            <x-input-error for="follow_up_on" />
                        </div>

                        <div class="col-12">
                            <label class="form-label small fw-semibold">{{ __('Notes') }}</label>
                            <textarea class="form-control form-control-sm" rows="2" wire:model="notes"
                                placeholder="{{ __('What they asked for, what you promised.') }}"></textarea>
                            <x-input-error for="notes" />
                        </div>
                    </div>

                    <div class="d-flex gap-2 mt-4">
                        <button type="submit" class="btn btn-sm btn-primary">{{ __('Save lead') }}</button>
                        <button type="button" class="btn btn-sm btn-secondary" wire:click="$set('showForm', false)">
                            {{ __('Cancel') }}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    @endif

    <div class="card dash-panel">
        <div class="dash-panel__head flex-wrap gap-2">
            <h6>{{ __('Pipeline') }}</h6>

            <div class="d-flex flex-wrap gap-2 ms-auto">
                <div class="ledger-search">
                    <i class="bi bi-search"></i>
                    <input type="search" class="form-control form-control-sm"
                        wire:model.live.debounce.400ms="search" placeholder="{{ __('Name, phone or area...') }}">
                </div>

                <select class="form-select form-select-sm w-auto" wire:model.live="statusFilter">
                    <option value="open">{{ __('Open') }}</option>
                    <option value="due">{{ __('Need calling') }}</option>
                    @foreach (\App\Models\Lead::STATUSES as $s)
                        <option value="{{ $s }}">{{ ucfirst($s) }}</option>
                    @endforeach
                    <option value="all">{{ __('All') }}</option>
                </select>
            </div>
        </div>

        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-sm align-middle mb-0 ledger-table">
                    <thead>
                        <tr>
                            <th>{{ __('Lead') }}</th>
                            <th class="d-none d-lg-table-cell">{{ __('Area') }}</th>
                            <th class="d-none d-md-table-cell">{{ __('Wants') }}</th>
                            <th class="d-none d-xl-table-cell">{{ __('Owner') }}</th>
                            <th>{{ __('Call back') }}</th>
                            <th class="text-center">{{ __('Status') }}</th>
                            <th class="text-end">{{ __('Actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($leads as $lead)
                            <tr class="{{ $lead->isOverdue() ? 'lead-overdue' : '' }}">
                                <td>
                                    <span class="fw-semibold">{{ $lead->name }}</span>
                                    @if ($lead->phone)
                                        <a href="tel:{{ preg_replace('/\D/', '', $lead->phone) }}"
                                           class="d-block text-secondary text-decoration-none" style="font-size:0.72rem;">
                                            <i class="bi bi-telephone me-1"></i>{{ $lead->phone }}
                                        </a>
                                    @endif
                                </td>
                                <td class="d-none d-lg-table-cell text-secondary">{{ $lead->location ?: '—' }}</td>
                                <td class="d-none d-md-table-cell text-secondary">{{ $lead->package?->package ?: '—' }}</td>
                                <td class="d-none d-xl-table-cell text-secondary">{{ $lead->owner?->name ?: '—' }}</td>
                                <td style="font-size:0.8rem;">
                                    @if ($lead->follow_up_on)
                                        <span class="{{ $lead->isOverdue() ? 'text-danger fw-semibold' : 'text-secondary' }}">
                                            {{ $lead->follow_up_on->format('d M') }}
                                            @if ($lead->isOverdue())
                                                <i class="bi bi-exclamation-circle ms-1"></i>
                                            @endif
                                        </span>
                                    @else
                                        <span class="text-secondary">—</span>
                                    @endif
                                </td>
                                <td class="text-center">
                                    <span class="badge rounded-pill {{ $badges[$lead->status] ?? 'badge-subtle-info' }}">
                                        {{ ucfirst($lead->status) }}
                                    </span>
                                </td>
                                <td class="text-end text-nowrap">
                                    @if (! in_array($lead->status, ['won', 'lost']))
                                        <button class="btn btn-sm btn-outline-success p-1" title="{{ __('Mark won') }}"
                                            wire:click="setStatus({{ $lead->id }}, 'won')">
                                            <i class="bi bi-check-lg" style="font-size:0.85rem;"></i>
                                        </button>
                                        <button class="btn btn-sm btn-outline-secondary p-1" title="{{ __('Call back next week') }}"
                                            wire:click="snooze({{ $lead->id }})">
                                            <i class="bi bi-clock-history" style="font-size:0.85rem;"></i>
                                        </button>
                                    @endif
                                    <button class="btn btn-sm btn-outline-info p-1" title="{{ __('Edit') }}"
                                        wire:click="edit({{ $lead->id }})">
                                        <i class="bi bi-pencil-square" style="font-size:0.85rem;"></i>
                                    </button>
                                    <button class="btn btn-sm btn-outline-danger p-1" title="{{ __('Delete') }}"
                                        wire:click="destroy({{ $lead->id }})"
                                        wire:confirm="{{ __('Remove this lead?') }}">
                                        <i class="bi bi-trash" style="font-size:0.85rem;"></i>
                                    </button>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="text-center text-secondary py-5">
                                    <i class="bi bi-person-plus fs-4 d-block mb-2 opacity-50"></i>
                                    {{ __('No leads here. Add the people who have asked about connections.') }}
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            @if ($leads->hasPages())
                <div class="px-3 py-2 border-top">{{ $leads->links() }}</div>
            @endif
        </div>
    </div>
</div>