@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 — My Calling Screen</h4>
        <div class="text-secondary small mt-1">Manage your availability, device, and campaign calls.</div>
    </div>
</div>

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

@if(!$agent)
    <div class="card"><div class="card-body text-center text-muted py-5">
        You are not assigned as a Call Centre agent. Contact your administrator.
    </div></div>
@else
<div class="row g-3">
    {{-- Left: Device + Status --}}
    <div class="col-lg-4">
        {{-- Device selection --}}
        <div class="card mb-3">
            <div class="card-header fw-semibold">My Calling Device</div>
            <div class="card-body">
                @if(empty($devices))
                    <p class="text-muted mb-0">No calling devices found for your extension.</p>
                @else
                    <form method="POST" action="{{ route('dialer.agent.device') }}">
                        @csrf
                        @foreach($devices as $d)
                        <div class="form-check mb-2">
                            <input class="form-check-input" type="radio" name="device_ref" value="{{ $d['ref'] }}"
                                id="dev-{{ $d['endpoint_id'] }}" @checked($session->selected_device_ref === $d['ref'])>
                            <label class="form-check-label" for="dev-{{ $d['endpoint_id'] }}">
                                {{ $d['label'] }}
                            </label>
                        </div>
                        @endforeach
                        <button type="submit" class="btn btn-sm btn-outline-primary mt-2">Save Device</button>
                    </form>
                @endif
            </div>
        </div>

        {{-- Status --}}
        <div class="card">
            <div class="card-header fw-semibold">Status</div>
            <div class="card-body">
                @php
                    $statusLabels = ['offline'=>'Offline','available'=>'Available','paused'=>'Paused','reserved'=>'Reserved','calling'=>'Calling','on_call'=>'On Call','wrap_up'=>'Completing Notes'];
                    $statusStyles = ['available'=>'text-success','on_call'=>'text-primary','paused'=>'text-warning','offline'=>'text-secondary'];
                @endphp
                <div class="mb-3">
                    <span class="fw-semibold {{ $statusStyles[$session->status] ?? 'text-muted' }}">
                        {{ $statusLabels[$session->status] ?? ucfirst($session->status) }}
                    </span>
                </div>
                <div class="d-flex gap-2 flex-wrap">
                    @if($session->status !== 'available')
                        <form method="POST" action="{{ route('dialer.agent.available') }}" class="d-inline">@csrf
                            <button class="btn btn-success btn-sm">Go Available</button>
                        </form>
                    @endif
                    @if($session->status === 'available')
                        <form method="POST" action="{{ route('dialer.agent.pause') }}" class="d-inline">@csrf
                            <button class="btn btn-warning btn-sm">Pause Calls</button>
                        </form>
                    @endif
                    @if($session->status !== 'offline')
                        <form method="POST" action="{{ route('dialer.agent.offline') }}" class="d-inline">@csrf
                            <button class="btn btn-outline-secondary btn-sm">Go Offline</button>
                        </form>
                    @endif
                </div>
            </div>
        </div>
    </div>

    {{-- Right: Contact + Actions --}}
    <div class="col-lg-8">
        @if($pendingOutcome)
            {{-- Outcome required before continuing --}}
            <div class="card border-warning">
                <div class="card-header fw-semibold text-warning">Outcome Required</div>
                <div class="card-body">
                    <p>Please record the outcome of your last call before continuing.</p>
                    <p class="text-muted small">Call Attempt #{{ $pendingOutcome->id }}</p>
                    {{-- Outcome form would go here in the full implementation --}}
                </div>
            </div>
        @elseif($nextContact)
            {{-- Contact to call --}}
            <div class="card">
                <div class="card-header fw-semibold d-flex justify-content-between align-items-center">
                    <span>Next Contact</span>
                    <span class="badge bg-primary-subtle text-primary">{{ $campaigns->first()?->name }}</span>
                </div>
                <div class="card-body">
                    <div class="row g-3 mb-3">
                        <div class="col-md-6">
                            <span class="text-muted small">Customer Name</span>
                            <div class="fw-semibold fs-5">{{ $nextContact->name }}</div>
                        </div>
                        <div class="col-md-6">
                            <span class="text-muted small">Telephone Number</span>
                            <div class="fw-semibold fs-5">{{ $nextContact->phone_e164 ?? $nextContact->phone_raw }}</div>
                        </div>
                        @if($nextContact->extra)
                            @foreach($nextContact->extra as $key => $val)
                                @if($val)
                                <div class="col-md-4">
                                    <span class="text-muted small">{{ ucfirst(str_replace('_',' ',$key)) }}</span>
                                    <div>{{ $val }}</div>
                                </div>
                                @endif
                            @endforeach
                        @endif
                    </div>
                    <div class="d-flex gap-2">
                        <form method="POST" action="{{ route('dialer.agent.call') }}" class="d-inline">
                            @csrf
                            <input type="hidden" name="contact_id" value="{{ $nextContact->id }}">
                            <button class="btn btn-primary">
                                <i data-lucide="phone" style="width:14px;height:14px;"></i> Call Customer
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        @elseif($session->status === 'available')
            <div class="card"><div class="card-body text-center text-muted py-5">
                <i data-lucide="phone-outgoing" style="width:32px;height:32px;" class="mb-2"></i>
                <div>You are available for campaign calls.</div>
                <div class="small">The next contact will appear here when ready.</div>
            </div></div>
        @else
            <div class="card"><div class="card-body text-center text-muted py-5">
                <i data-lucide="coffee" style="width:32px;height:32px;" class="mb-2"></i>
                <div>Go available to start receiving campaign contacts.</div>
            </div></div>
        @endif
    </div>
</div>
@endif
@endsection