@extends('root')
@section('title', 'WABA Pools')

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

    <div class="widget-content searchable-container list">
        <!-- Filters Card -->
        <div class="card card-body mb-3">
            <div class="row align-items-end g-3">
                <div class="col-md-3">
                    <label class="form-label mb-1 small text-muted">Cari Nomor</label>
                    <div class="position-relative">
                        <input type="text" class="form-control ps-5" id="input-search" placeholder="Cari nomor, akun...">
                        <i class="ti ti-search position-absolute top-50 start-0 translate-middle-y fs-6 text-dark ms-3"></i>
                    </div>
                </div>
                <div class="col-md-2">
                    <label class="form-label mb-1 small text-muted">Filter Type</label>
                    <select class="form-select" id="filter-type">
                        <option value="">Semua Type</option>
                        <option value="shared">Shared</option>
                        <option value="dedicated">Dedicated</option>
                        <option value="self_service">Self Service</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label mb-1 small text-muted">Filter Status</label>
                    <select class="form-select" id="filter-status">
                        <option value="">Semua Status</option>
                        <option value="active">Active</option>
                        <option value="disconnected">Disconnected</option>
                        <option value="blocked">Blocked</option>
                        <option value="error">Error</option>
                    </select>
                </div>
                <div class="col-md-5 text-end">
                    <a href="javascript:void(0)" class="btn btn-primary d-inline-flex align-items-center btn-create" data-url="{{ route('admin.waba-pools.create') }}">
                        <i class="ti ti-plus text-white me-1 fs-5"></i> Tambah WABA
                    </a>
                </div>
            </div>
        </div>

        <!-- Stats Cards -->
        <div class="row mb-3">
            <div class="col-md-3">
                <div class="card bg-primary text-white">
                    <div class="card-body py-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <p class="mb-0 opacity-75 small">Total Pools</p>
                                <h4 class="mb-0 fw-bold" id="stat-total">0</h4>
                            </div>
                            <i class="ti ti-phone fs-1 opacity-50"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-info text-white">
                    <div class="card-body py-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <p class="mb-0 opacity-75 small">Shared</p>
                                <h4 class="mb-0 fw-bold" id="stat-shared">0</h4>
                            </div>
                            <i class="ti ti-users fs-1 opacity-50"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-success text-white">
                    <div class="card-body py-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <p class="mb-0 opacity-75 small">Dedicated</p>
                                <h4 class="mb-0 fw-bold" id="stat-dedicated">0</h4>
                            </div>
                            <i class="ti ti-user-check fs-1 opacity-50"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card bg-warning text-dark">
                    <div class="card-body py-3">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <p class="mb-0 opacity-75 small">Active</p>
                                <h4 class="mb-0 fw-bold" id="stat-active">0</h4>
                            </div>
                            <i class="ti ti-check fs-1 opacity-50"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Table Card -->
        <div class="card card-body">
            <div class="table-responsive">
                <table class="table table-striped table-hover" id="datatable-waba">
                    <thead>
                        <tr>
                            <th>Nama Akun</th>
                            <th>WABA ID</th>
                            <th>Phone Number ID</th>
                            <th>Phone</th>
                            <th>Type</th>
                            <th>Status</th>
                            <th>Quota</th>
                            <th class="text-center">Opsi</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
$(document).ready(function () {
    var datatable = $('#datatable-waba').DataTable({
        processing: true,
        serverSide: false,
        autoWidth: false,
        ajax: {
            url: '{{ route('admin.waba-pools.data') }}',
            dataSrc: function(json) {
                // Update stats
                var data = json.data || [];
                var shared = data.filter(d => d.type === 'shared').length;
                var dedicated = data.filter(d => d.type === 'dedicated').length;
                var active = data.filter(d => d.status === 'active').length;
                
                $('#stat-total').text(data.length);
                $('#stat-shared').text(shared);
                $('#stat-dedicated').text(dedicated);
                $('#stat-active').text(active);
                
                return data;
            }
        },
        columns: [
            { 
                data: 'account_name', 
                name: 'account_name', 
                defaultContent: '-',
                render: function(data, type, row) {
                    return `<span class="fw-medium">${data || '-'}</span>`;
                }
            },
            { data: 'waba_id', name: 'waba_id', defaultContent: '-' },
            { data: 'phone_number_id', name: 'phone_number_id', defaultContent: '-' },
            { 
                data: 'phone_number', 
                name: 'phone_number',
                render: function(data) {
                    return `<span class="fw-medium">${data || '-'}</span>`;
                }
            },
            { 
                data: 'type', 
                name: 'type',
                render: function (data) {
                    if (data === 'dedicated') {
                        return '<span class="badge bg-success"><i class="ti ti-user-check me-1"></i>Dedicated</span>';
                    }
                    if (data === 'self_service') {
                        return '<span class="badge bg-primary" style="background-color: #6f42c1 !important;"><i class="ti ti-user-plus me-1"></i>Self Service</span>';
                    }
                    return '<span class="badge bg-info"><i class="ti ti-users me-1"></i>Shared</span>';
                }
            },
            {
                data: 'status',
                name: 'status',
                render: function (data) {
                    var statusMap = {
                        'active': { class: 'bg-success', icon: 'ti-check' },
                        'disconnected': { class: 'bg-secondary', icon: 'ti-plug-off' },
                        'blocked': { class: 'bg-danger', icon: 'ti-ban' },
                        'error': { class: 'bg-warning text-dark', icon: 'ti-alert-circle' }
                    };
                    var s = statusMap[data] || { class: 'bg-secondary', icon: 'ti-help' };
                    return `<span class="badge ${s.class}"><i class="ti ${s.icon} me-1"></i>${data}</span>`;
                }
            },
            {
                data: null,
                name: 'quota',
                render: function(data, type, row) {
                    var used = row.used_today || 0;
                    var max = row.limit_max || 1000;
                    var percent = Math.round((used / max) * 100);
                    var barClass = percent > 80 ? 'bg-danger' : (percent > 50 ? 'bg-warning' : 'bg-success');
                    
                    return `
                        <div style="min-width: 100px;">
                            <small class="text-muted">${used} / ${max}</small>
                            <div class="progress" style="height: 5px;">
                                <div class="progress-bar ${barClass}" style="width: ${percent}%"></div>
                            </div>
                        </div>
                    `;
                }
            },
            {
                data: null,
                name: 'action',
                orderable: false,
                searchable: false,
                className: 'text-center fit-column',
                render: function (data, type, row) {
                    var detailUrl = '{{ route('admin.waba-pools.show', ':id') }}'.replace(':id', row.id);
                    var editUrl = '{{ url('admin/waba-pools') }}/' + row.id + '/edit';
                    var deleteUrl = '{{ route('admin.waba-pools.destroy', ':id') }}'.replace(':id', row.id);

                    return `
                        <div class="btn-group btn-group-sm">
                            <a href="${detailUrl}" class="btn btn-info" title="Detail">
                                <i class="ti ti-eye"></i>
                            </a>
                            <button class="btn btn-warning btn-create" data-url="${editUrl}" title="Edit">
                                <i class="ti ti-pencil"></i>
                            </button>
                            <button class="btn btn-danger btn-delete" data-url="${deleteUrl}" title="Hapus">
                                <i class="ti ti-trash"></i>
                            </button>
                        </div>
                    `;
                }
            },
        ],
        order: [[4, 'asc'], [5, 'asc']]
    });

    // Search
    $('#input-search').on('keyup', function () {
        datatable.search(this.value).draw();
    });

    // Filter by Type
    $('#filter-type').on('change', function() {
        var val = $(this).val();
        datatable.column(4).search(val).draw();
    });

    // Filter by Status
    $('#filter-status').on('change', function() {
        var val = $(this).val();
        datatable.column(5).search(val).draw();
    });
});
</script>
@endpush