@extends('admin.layouts.layout')

@section('title', 'Power Dialer')

@section('content')
<div class="card mb-4">
    <div class="card-header"><strong>Start New Session</strong></div>
    <div class="card-body">
        <form id="power-dialer-form">
            @csrf
            <div class="row g-3">
                <div class="col-md-6">
                    <label class="form-label">Session Name</label>
                    <input type="text" name="name" class="form-control" placeholder="e.g. Monday Follow-ups">
                </div>
                <div class="col-md-6">
                    <label class="form-label">Lead IDs (comma-separated)</label>
                    <input type="text" name="lead_ids_raw" class="form-control" placeholder="101,102,103">
                </div>
            </div>
            <button type="submit" class="btn btn-primary mt-3">Start Session</button>
        </form>
    </div>
</div>

<div class="card">
    <div class="card-header"><strong>Recent Sessions</strong></div>
    <div class="card-body p-0">
        <table class="table table-hover mb-0">
            <thead>
                <tr><th>Name</th><th>Progress</th><th>Status</th><th>Started</th><th></th></tr>
            </thead>
            <tbody>
                @forelse($sessions as $session)
                <tr>
                    <td>{{ $session->name }}</td>
                    <td>{{ $session->called_count }} / {{ $session->total_leads }}</td>
                    <td>
                        @php $sc = match($session->status) { 1=>'success', 2=>'warning', 3=>'secondary', default=>'light' }; @endphp
                        <span class="badge bg-{{ $sc }}">{{ match($session->status) { 1=>'Active', 2=>'Paused', 3=>'Completed', default=>'Unknown' } }}</span>
                    </td>
                    <td>{{ $session->started_at?->format('M d H:i') ?? '--' }}</td>
                    <td>
                        @if($session->status !== 3)
                        <a href="{{ route('communications.dialer', ['session_id' => $session->id]) }}" class="btn btn-sm btn-primary">Resume</a>
                        @endif
                    </td>
                </tr>
                @empty
                <tr><td colspan="5" class="text-center text-muted py-4">No sessions yet.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
@endsection

@push('scripts')
<script>
$('#power-dialer-form').on('submit', function (e) {
    e.preventDefault();
    var raw = $('[name=lead_ids_raw]').val();
    var ids = raw.split(',').map(function(s){ return parseInt(s.trim()); }).filter(Boolean);
    if (!ids.length) return alert('Enter at least one lead ID.');

    $.ajax({
        url: '{{ route("communications.power-dialer.session") }}',
        method: 'POST',
        data: {
            _token: '{{ csrf_token() }}',
            name: $('[name=name]').val(),
            lead_ids: ids
        },
        success: function (res) {
            if (res.status === 1 && res.data.redirect_url) {
                window.location.href = res.data.redirect_url;
            }
        },
        error: function (xhr) {
            alert(xhr.responseJSON?.message || 'Failed to start session.');
        }
    });
});
</script>
@endpush