@extends('admin.layouts.layout')

@section('title', 'Dialer')

@section('content')
<div class="row">
    <div class="col-md-5">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <strong>VoIP Dialer</strong>
                <span id="device-status" class="badge bg-secondary">Connecting...</span>
            </div>
            <div class="card-body text-center">
                @if($session && $currentLead)
                <div class="alert alert-info mb-3" id="power-dialer-info">
                    <strong>Power Dialer Active</strong><br>
                    Lead {{ $session->current_index + 1 }} of {{ $session->total_leads }}:
                    <strong id="current-lead-name">{{ trim($currentLead->first_name . ' ' . $currentLead->last_name) }}</strong>
                    <br>
                    <span id="current-lead-phone">{{ $currentLead->phone }}</span>
                </div>
                @endif

                <div class="mb-3">
                    <input type="tel" id="dial-number" class="form-control form-control-lg text-center"
                        placeholder="+1 (555) 000-0000"
                        value="{{ $currentLead?->phone ?? '' }}">
                </div>

                {{-- Dial pad --}}
                <div class="d-grid gap-2" style="grid-template-columns: repeat(3, 1fr); display: grid;">
                    @foreach(['1','2','3','4','5','6','7','8','9','*','0','#'] as $key)
                    <button class="btn btn-outline-secondary dial-pad-btn" data-key="{{ $key }}">{{ $key }}</button>
                    @endforeach
                </div>

                <div class="mt-3 d-flex gap-2 justify-content-center">
                    <button id="call-btn" class="btn btn-success btn-lg px-4">
                        <i class="fa fa-phone"></i> Call
                    </button>
                    <button id="hangup-btn" class="btn btn-danger btn-lg px-4 d-none">
                        <i class="fa fa-phone-slash"></i> Hang Up
                    </button>
                </div>

                <div id="call-timer" class="text-muted mt-2 d-none">
                    <span id="call-duration">0:00</span>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-7">
        {{-- Disposition modal trigger area --}}
        <div id="disposition-area" class="card d-none">
            <div class="card-header"><strong>Call Disposition</strong></div>
            <div class="card-body">
                <p>How did the call end?</p>
                <div class="d-flex flex-wrap gap-2">
                    @foreach(['answered' => 'success', 'voicemail' => 'info', 'busy' => 'warning', 'no-answer' => 'secondary', 'wrong-number' => 'danger'] as $dispo => $color)
                    <button class="btn btn-{{ $color }} disposition-btn" data-dispo="{{ $dispo }}">
                        {{ ucwords(str_replace('-', ' ', $dispo)) }}
                    </button>
                    @endforeach
                </div>
            </div>
        </div>

        <div class="card mt-3">
            <div class="card-header"><strong>Recent Calls</strong></div>
            <div class="card-body p-0">
                <a href="{{ route('communications.call-history') }}" class="btn btn-sm btn-outline-secondary m-2">View Full History</a>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://sdk.twilio.com/js/client/releases/1.14.0/twilio.js"></script>
<script>
(function () {
    var device;
    var currentCallSid = null;
    var sessionId = {{ $session?->id ?? 'null' }};
    var timerInterval;
    var timerSeconds = 0;

    // Fetch token and setup device
    $.get('{{ route("communications.dialer.token") }}', function (res) {
        if (res.status === 1) {
            device = new Twilio.Device(res.data.token, { debug: false });

            device.on('ready', function () {
                $('#device-status').removeClass('bg-secondary').addClass('bg-success').text('Ready');
            });

            device.on('error', function (err) {
                $('#device-status').removeClass('bg-success bg-secondary').addClass('bg-danger').text('Error');
                console.error('Twilio Device Error:', err);
            });

            device.on('connect', function (conn) {
                currentCallSid = conn.parameters.CallSid;
                $('#call-btn').addClass('d-none');
                $('#hangup-btn').removeClass('d-none');
                startTimer();
            });

            device.on('disconnect', function () {
                $('#call-btn').removeClass('d-none');
                $('#hangup-btn').addClass('d-none');
                stopTimer();
                showDisposition();
            });
        }
    });

    // Dial pad
    $(document).on('click', '.dial-pad-btn', function () {
        $('#dial-number').val($('#dial-number').val() + $(this).data('key'));
    });

    // Call button
    $('#call-btn').on('click', function () {
        var number = $('#dial-number').val().trim();
        if (!number) return alert('Enter a phone number.');
        if (!device) return alert('Device not ready.');
        device.connect({ To: number });
    });

    // Hang up
    $('#hangup-btn').on('click', function () {
        if (device) device.disconnectAll();
    });

    // Disposition
    $(document).on('click', '.disposition-btn', function () {
        var dispo = $(this).data('dispo');
        $.post('{{ route("communications.dialer.token") }}'.replace('token', 'disposition') + '/' + (currentCallSid || ''), {
            _token: '{{ csrf_token() }}',
            disposition: dispo,
            session_id: sessionId
        }, function (res) {
            $('#disposition-area').addClass('d-none');
            if (res.data && res.data.next_lead) {
                $('#current-lead-name').text(res.data.next_lead.name);
                $('#current-lead-phone').text(res.data.next_lead.phone);
                $('#dial-number').val(res.data.next_lead.phone);
                currentCallSid = null;
            } else if (res.data && res.data.session_complete) {
                $('#power-dialer-info').html('<strong class="text-success">Power Dialer Complete!</strong>');
            }
        });
    });

    function showDisposition() {
        $('#disposition-area').removeClass('d-none');
    }

    function startTimer() {
        timerSeconds = 0;
        $('#call-timer').removeClass('d-none');
        timerInterval = setInterval(function () {
            timerSeconds++;
            var m = Math.floor(timerSeconds / 60);
            var s = timerSeconds % 60;
            $('#call-duration').text(m + ':' + (s < 10 ? '0' : '') + s);
        }, 1000);
    }

    function stopTimer() {
        clearInterval(timerInterval);
        $('#call-timer').addClass('d-none');
    }
})();
</script>
@endpush