@extends('root')
@section('title', 'Client Integration Status')

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => 'Client Integration',
        'links' => [['url' => route('reseller.dashboard'), 'label' => 'Dashboard']],
        'current' => 'Integration Status'
    ])

    <div class="card">
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0"><i class="ti ti-plug-connected me-2"></i>Client Integration Status</h5>
            </div>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-striped" id="datatable">
                    <thead>
                        <tr>
                            <th>Client</th>
                            <th>Email</th>
                            <th>Package</th>
                            <th>Integration</th>
                            <th>WABA Status</th>
                            <th>WABA Count</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function() {
    $('#datatable').DataTable({
        processing: true,
        serverSide: false,
        ajax: '{{ route('reseller.waba-integration.data') }}',
        columns: [
            { data: 'name' },
            { data: 'email' },
            { 
                data: 'package_type_label',
                render: function(data, type, row) {
                    var colors = {
                        'Shared': 'blue',
                        'Dedicated': 'green',
                        'Self Service': 'purple'
                    };
                    return '<span class="badge bg-' + (colors[data] || 'secondary') + '">' + data + '</span>';
                }
            },
            { 
                data: 'integration_mode',
                render: function(data) {
                    return '<span class="badge bg-secondary">' + data + '</span>';
                }
            },
            { 
                data: 'waba_status',
                render: function(data) {
                    return data === 'connected'
                        ? '<span class="badge bg-success"><i class="ti ti-check"></i> Connected</span>'
                        : '<span class="badge bg-warning"><i class="ti ti-alert-triangle"></i> Not Connected</span>';
                }
            },
            { data: 'waba_count' },
            { 
                data: null,
                orderable: false,
                render: function(data) {
                    var url = '{{ route('reseller.waba-integration.show', ':id') }}'.replace(':id', data.id);
                    return '<a href="'+url+'" class="btn btn-sm btn-primary"><i class="ti ti-eye"></i></a>';
                }
            }
        ]
    });
});
</script>
@endpush