@include('whatsappcenter::admin.partials.styles')

<div class="container-fluid">

    <div class="wac-page-header">
        <div>
            <h4 class="wac-title">Handovers</h4>
            <p class="wac-subtitle">Conversations escalated to human agents</p>
        </div>
    </div>

    <script>
    window.dtRenders = window.dtRenders || {};

    window.dtRenders.wacHoContact = function(val, row) {
        var initial = (row.contact_name || '?').charAt(0).toUpperCase();
        var avClass = row.status === 'pending' ? 'wac-av-orange' : 'wac-av-green';
        return '<div class="d-flex align-items-center gap-2">'
            + '<div class="wac-av ' + avClass + '">' + initial + '</div>'
            + '<div>'
            +   '<div class="fw-semibold" style="font-size:.875rem">' + (row.contact_name || 'Unknown') + '</div>'
            +   '<div class="text-muted" style="font-size:.72rem">' + row.phone + '</div>'
            + '</div>'
            + '</div>';
    };

    window.dtRenders.wacHoStatus = function(val) {
        var map = { pending: 'wac-badge-red', assigned: 'wac-badge-orange', resolved: 'wac-badge-green' };
        return '<span class="wac-badge ' + (map[val] || 'wac-badge-grey') + '">' + val + '</span>';
    };

    window.dtRenders.wacHoActions = function(val, row) {
        var chat = row._show_url
            ? '<a href="' + row._show_url + '" class="wac-btn-view">Open Chat</a>'
            : '';
        var resolve = (row.status !== 'resolved')
            ? '<button class="wac-btn-success" onclick="wacResolve(' + row.id + ')">Resolve</button>'
            : '';
        return '<div class="wac-actions-cell">' + chat + resolve + '</div>';
    };
    </script>

    <table class="dt-table dt-search dt-export dt-perpage dt-checkbox"
           id="handoversTable"
           data-route="{{ route('admin.whatsappcenter.handovers.data') }}"
           data-bulk-route="{{ route('admin.whatsappcenter.handovers.bulk-action') }}">
        <thead>
            <tr>
                <th data-col="contact_name" class="dt-sort" data-render="wacHoContact">Contact</th>
                <th data-col="status"       class="dt-sort" data-render="wacHoStatus" style="width:130px">Status</th>
                <th data-col="created_at"   class="dt-sort" style="width:180px">Received</th>
                <th data-col="resolved_at"  style="width:180px">Resolved</th>
                <th data-col="id"           style="width:170px" data-render="wacHoActions">Actions</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

    @include('components.datatable')

</div>

<script>
function wacResolve(id) {
    if (!confirm('Resolve this handover? Bot will resume for this customer.')) return;
    fetch('/admin/whatsappcenter/handovers/' + id + '/resolve', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json'
        },
        body: '{}'
    })
    .then(function(r) { return r.json(); })
    .then(function(d) {
        if (d.success) {
            if (window.dtRefresh) window.dtRefresh();
            else location.reload();
        }
    });
}
</script>