@extends('layouts.app')
@section('title', __('leads.leads'))

@section('content')
<x-filter-card>
    <x-filter-field filter="status" :label="__('leads.status')" col="col-6 col-md-3"
        :options="collect(\App\Models\Lead::STATUSES)->mapWithKeys(fn($s) => [$s => __('leads.statuses.' . $s)])->all()" />
    <x-filter-field filter="finance_product_id" :label="__('leads.finance_product')" col="col-6 col-md-3"
        :options="$products->mapWithKeys(fn($p) => [$p->id => $p->name])->all()" />
    <x-filter-field filter="source" :label="__('leads.source')" col="col-6 col-md-2"
        :options="collect($sources)->mapWithKeys(fn($s) => [$s => __('leads.sources.' . $s)])->all()" />
    <x-filter-field filter="owner_id" :label="__('leads.owner')" col="col-6 col-md-2"
        :options="$owners->mapWithKeys(fn($o) => [$o->id => $o->name])->all()" />
    <x-filter-field filter="overdue" :label="__('leads.follow_up')" col="col-6 col-md-2"
        :options="['1' => __('leads.overdue')]" />
</x-filter-card>

<div class="card shadow-sm">
    <div class="card-header bg-white d-flex justify-content-between align-items-center">
        <span class="fw-bold"><i class="bi bi-person-lines-fill me-1"></i> {{ __('leads.leads') }}</span>
        @can('leads.create')
            <a href="{{ route('leads.create') }}" class="btn btn-primary btn-sm"><i class="bi bi-plus-lg"></i> {{ __('app.create') }}</a>
        @endcan
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover table-striped align-middle w-100" id="leads-table">
                <thead class="table-light">
                    <tr>
                        <th>#</th>
                        <th>{{ __('app.reference') }}</th>
                        <th>{{ __('leads.contact_name') }}</th>
                        <th>{{ __('leads.finance_product') }}</th>
                        <th>{{ __('leads.owner') }}</th>
                        <th class="text-end">{{ __('leads.estimated_amount') }}</th>
                        <th>{{ __('leads.status') }}</th>
                        <th>{{ __('leads.next_follow_up') }}</th>
                        <th>{{ __('app.created_at') }}</th>
                        <th>{{ __('app.actions') }}</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(function () {
    window.dtFilteredTable('#leads-table', '{{ route('leads.data') }}', [
        { data: 'id' },
        { data: 'reference' },
        { data: 'contact_name' },
        { data: 'finance_product', orderable: false },
        { data: 'owner', orderable: false },
        { data: 'estimated_amount', className: 'text-end' },
        { data: 'status' },
        { data: 'follow_up' },
        { data: 'created_at' },
        { data: 'actions', orderable: false, searchable: false, className: 'text-center' },
    ]);
});
</script>
@endpush