@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">Agent Console</h4>
        <div class="text-secondary small mt-1">Phase 1 session controls for agent login/logout and queue-aware webphone integration.</div>
    </div>
    <a href="{{ url('/webphone?mode=embedded') }}" class="btn btn-outline-primary btn-sm">Open Webphone</a>
</div>

<div class="row g-3">
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">Agent Session</div>
            <div class="card-body row g-3">
                <div class="col-12">
                    <label class="form-label">Agent</label>
                    <select id="ccAgentId" class="form-select">
                        <option value="">Select agent</option>
                        @foreach($agents as $agent)
                            <option value="{{ $agent->id }}" data-extension="{{ $agent->extension }}">{{ $agent->agent_code }} · {{ $agent->name }}{{ $agent->extension ? ' · Ext '.$agent->extension : '' }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-6">
                    <label class="form-label">Extension</label>
                    <input type="text" id="ccExtension" class="form-control" placeholder="e.g. 1000">
                </div>
                <div class="col-md-6">
                    <label class="form-label">Webphone Extension</label>
                    <input type="text" id="ccWebphoneExtension" class="form-control" placeholder="e.g. 1000">
                </div>
                <div class="col-12 d-flex gap-2">
                    <button class="btn btn-success" id="ccLoginBtn">Login Agent</button>
                    <button class="btn btn-outline-danger" id="ccLogoutBtn">Logout Agent</button>
                </div>
                <div class="col-12 small text-secondary" id="ccAgentConsoleStatus">No active action yet.</div>
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">Available Queues</div>
            <div class="list-group list-group-flush">
                @forelse($queues as $queue)
                    <div class="list-group-item d-flex justify-content-between align-items-center">
                        <div>
                            <div class="fw-semibold">{{ $queue->name }}</div>
                            <div class="text-secondary small">{{ $queue->number }} · {{ $queue->strategy }}</div>
                        </div>
                        <span class="badge bg-secondary">Ready</span>
                    </div>
                @empty
                    <div class="list-group-item text-secondary">No queues configured yet.</div>
                @endforelse
            </div>
        </div>
    </div>
</div>

<script>
(function () {
    const agentSelect = document.getElementById('ccAgentId');
    const extensionInput = document.getElementById('ccExtension');
    const webphoneInput = document.getElementById('ccWebphoneExtension');
    const statusEl = document.getElementById('ccAgentConsoleStatus');
    const loginBtn = document.getElementById('ccLoginBtn');
    const logoutBtn = document.getElementById('ccLogoutBtn');

    if (agentSelect) {
        agentSelect.addEventListener('change', function () {
            const option = this.options[this.selectedIndex];
            const ext = option?.dataset?.extension || '';
            if (ext && !extensionInput.value) extensionInput.value = ext;
            if (ext && !webphoneInput.value) webphoneInput.value = ext;
        });
    }

    async function postJson(url, payload) {
        const response = await fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
            },
            body: JSON.stringify(payload),
        });
        return response.json();
    }

    if (loginBtn) {
        loginBtn.addEventListener('click', async function () {
            const agent_id = agentSelect.value;
            if (!agent_id) {
                statusEl.textContent = 'Select an agent first.';
                return;
            }
            statusEl.textContent = 'Logging in agent...';
            try {
                const result = await postJson('{{ route('call-center.agent-console.login') }}', {
                    agent_id,
                    extension: extensionInput.value,
                    webphone_extension: webphoneInput.value,
                });
                statusEl.textContent = result.ok ? 'Agent logged in.' : 'Agent login failed.';
            } catch (e) {
                statusEl.textContent = 'Agent login failed.';
            }
        });
    }

    if (logoutBtn) {
        logoutBtn.addEventListener('click', async function () {
            const agent_id = agentSelect.value;
            if (!agent_id) {
                statusEl.textContent = 'Select an agent first.';
                return;
            }
            statusEl.textContent = 'Logging out agent...';
            try {
                const result = await postJson('{{ route('call-center.agent-console.logout') }}', { agent_id });
                statusEl.textContent = result.ok ? 'Agent logged out.' : 'Agent logout failed.';
            } catch (e) {
                statusEl.textContent = 'Agent logout failed.';
            }
        });
    }
})();
</script>
@endsection