@extends('layouts.app')

@section('content')
<div class="d-flex justify-content-between align-items-center flex-wrap grid-margin mb-3">
    <div>
        <h4 class="mb-0">Automatic Calling — Campaigns</h4>
        <div class="text-secondary small mt-1">Create and manage outbound campaign calling.</div>
    </div>
    <a href="{{ route('dialer.campaigns.create') }}" class="btn btn-primary">
        <i data-lucide="plus" style="width:14px;height:14px;"></i> New Campaign
    </a>
</div>

@if(session('success'))
    <div class="alert alert-success">{{ session('success') }}</div>
@endif

{{-- Filters --}}
<div class="card mb-3">
    <div class="card-body py-2">
        <form method="GET" class="row g-2 align-items-end">
            <div class="col-auto">
                <input type="text" name="q" class="form-control form-control-sm" placeholder="Search name…" value="{{ request('q') }}">
            </div>
            <div class="col-auto">
                <select name="status" class="form-select form-select-sm">
                    <option value="">All Statuses</option>
                    @foreach(['draft','scheduled','running','paused','completed','stopped','needs_attention','archived'] as $s)
                        <option value="{{ $s }}" @selected(request('status') === $s)>{{ ucfirst(str_replace('_',' ',$s)) }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-auto">
                <select name="mode" class="form-select form-select-sm">
                    <option value="">All Methods</option>
                    <option value="preview" @selected(request('mode')==='preview')>Agent Calls Customer</option>
                    <option value="direct_agent" @selected(request('mode')==='direct_agent')>Automatic for Available Agents</option>
                    <option value="send_to_team" @selected(request('mode')==='send_to_team')>Send Answered Customers to Team</option>
                </select>
            </div>
            <div class="col-auto">
                <button type="submit" class="btn btn-sm btn-outline-primary">Filter</button>
                <a href="{{ route('dialer.campaigns.index') }}" class="btn btn-sm btn-outline-secondary">Clear</a>
            </div>
        </form>
    </div>
</div>

{{-- Campaign table --}}
<div class="card">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0 align-middle">
                <thead>
                    <tr>
                        <th>Campaign</th>
                        <th>Team</th>
                        <th>Method</th>
                        <th>Status</th>
                        <th>Contacts</th>
                        <th>Progress</th>
                        <th class="text-end">Action</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($campaigns as $c)
                    <tr>
                        <td class="fw-semibold">{{ $c->name }}</td>
                        <td>{{ $c->team?->name ?? '—' }}</td>
                        <td class="small">
                            @php
                                $modeLabels = ['preview'=>'Agent Calls Customer','direct_agent'=>'Automatic for Available Agents','send_to_team'=>'Send Answered Customers to Team'];
                            @endphp
                            {{ $modeLabels[$c->calling_mode] ?? $c->calling_mode }}
                        </td>
                        <td>
                            @php
                                $stateStyles = ['running'=>'bg-primary-subtle text-primary','paused'=>'bg-warning-subtle text-warning','completed'=>'bg-success-subtle text-success','stopped'=>'bg-secondary-subtle text-secondary','draft'=>'bg-secondary-subtle text-secondary','needs_attention'=>'bg-danger-subtle text-danger','scheduled'=>'bg-info-subtle text-info','archived'=>'bg-secondary-subtle text-secondary'];
                            @endphp
                            <span class="badge {{ $stateStyles[$c->state] ?? 'bg-secondary-subtle text-secondary' }}">
                                {{ ucfirst(str_replace('_', ' ', $c->state)) }}
                            </span>
                        </td>
                        <td>{{ number_format($c->contact_count) }}</td>
                        <td>
                            <div class="progress" style="height:6px;width:80px;">
                                <div class="progress-bar" style="width:{{ $c->progress_percent }}%"></div>
                            </div>
                            <span class="small text-muted">{{ $c->progress_percent }}%</span>
                        </td>
                        <td class="text-end">
                            <a href="{{ route('dialer.campaigns.show', $c->id) }}" class="btn btn-sm btn-outline-primary">View</a>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="7" class="text-center text-muted py-4">
                            No campaigns yet. <a href="{{ route('dialer.campaigns.create') }}">Create your first campaign</a>.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
{{ $campaigns->links() }}
@endsection