@extends('components.dashboard.layout.layout')

@section('content')
    @include('components.alert')

    <div class="container-fluid app-bg">
        <div class="page-shell">
            <div class="space-y-4">
                <x-page-title
                    :title="($agent->full_name ?? $agent->name ?? 'Agent').' Leads'"
                    description="All active leads currently assigned to this agent.">
                    <a href="{{ route('leads.index') }}" class="asset-btn asset-btn--secondary">
                        Back to Leads
                    </a>
                </x-page-title>

                <div class="ui-card ui-card--table">
                    <x-table :headers="[
                        'First Name',
                        'Last Name',
                        'Email',
                        'Phone',
                        'Flag',
                        'Workflow',
                        'Actions',
                    ]" :paginator="$leads" emptyMessage="No assigned leads found for this agent.">

                        @foreach ($leads as $lead)
                            <tr class="ui-row-click"
                                @can('crm_leads-update')
                                    onclick="window.location='{{ route('leads.edit', $lead->id) }}'"
                                @endcan>
                                <td class="text-center">
                                    @can('crm_leads-update')
                                        <a href="{{ route('leads.edit', $lead->id) }}" class="leads-name-link"
                                            onclick="event.stopPropagation()">
                                            <div class="ui-title">{{ $lead->first_name ?: '-' }}</div>
                                        </a>
                                    @else
                                        <div class="ui-title">{{ $lead->first_name ?: '-' }}</div>
                                    @endcan
                                </td>

                                <td class="ui-muted text-center">
                                    {{ $lead->last_name ?: '-' }}
                                </td>

                                <td class="text-center">
                                    <span class="ui-muted leads-email">{{ $lead->email ?: '-' }}</span>
                                </td>

                                <td class="text-center">
                                    <span class="secure-mobile ui-muted leads-phone">
                                        {{ $lead->phone_masked ?: '-' }}
                                    </span>
                                </td>

                                <td class="text-center">
                                    @php
                                        $flagVariant =
                                            $lead->flag === 'high'
                                                ? 'danger'
                                                : ($lead->flag === 'medium'
                                                    ? 'warn'
                                                    : 'neutral');
                                    @endphp

                                    <span class="ui-pill ui-pill--{{ $flagVariant }}">
                                        {{ str($lead->flag)->title() }}
                                    </span>
                                </td>

                                <td class="text-center">
                                    @if ($lead->workflow?->name)
                                        <span class="ui-pill ui-pill--info">
                                            {{ $lead->workflow->name }}
                                        </span>
                                    @else
                                        <span class="ui-muted">-</span>
                                    @endif
                                </td>

                                <td class="text-center" onclick="event.stopPropagation()">
                                    <div class="ui-actions justify-content-center">
                                        @can('crm_leads-update')
                                            <x-table-action type="edit" :url="route('leads.edit', $lead->id)" />
                                        @endcan
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </x-table>
                </div>
            </div>
        </div>
    </div>
@endsection