@extends('root')
@section('title', 'WA Clients')

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

    <!-- Summary Cards -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card bg-primary text-white summary-card" data-filter="all" style="cursor: pointer; transition: transform 0.2s;">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="round rounded-circle bg-white-subtle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
                            <i class="ti ti-users fs-4"></i>
                        </div>
                        <div>
                            <h3 class="mb-0 fw-bold" id="totalClients">-</h3>
                            <p class="mb-0 opacity-75">Total Client</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-success text-white summary-card" data-filter="selesai" style="cursor: pointer; transition: transform 0.2s;">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="round rounded-circle bg-white-subtle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
                            <i class="ti ti-check fs-4"></i>
                        </div>
                        <div>
                            <h3 class="mb-0 fw-bold" id="integrasiSelesai">-</h3>
                            <p class="mb-0 opacity-75">Integrasi Selesai</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-warning text-dark summary-card" data-filter="belum" style="cursor: pointer; transition: transform 0.2s;">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="round rounded-circle bg-white-subtle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
                            <i class="ti ti-clock fs-4"></i>
                        </div>
                        <div>
                            <h3 class="mb-0 fw-bold" id="integrasiBelum">-</h3>
                            <p class="mb-0 opacity-75">Belum Integrasi</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-info text-white summary-card" data-filter="all" style="cursor: pointer; transition: transform 0.2s;">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="round rounded-circle bg-white-subtle d-flex align-items-center justify-content-center me-3" style="width: 50px; height: 50px;">
                            <i class="ti ti-wallet fs-4"></i>
                        </div>
                        <div>
                            <h3 class="mb-0 fw-bold" id="totalBalance">-</h3>
                            <p class="mb-0 opacity-75">Total Saldo</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="widget-content searchable-container list">
        <div class="card card-body">
            <div class="row">
                <div class="col-md-4 col-xl-3">
                    <form class="position-relative">
                        <input type="text" class="form-control product-search ps-5" id="input-search" placeholder="Cari Client">
                        <i class="ti ti-search position-absolute top-50 start-0 translate-middle-y fs-6 text-dark ms-3"></i>
                    </form>
                </div>
                <div class="col-md-8 col-xl-9 text-end d-flex justify-content-md-end justify-content-center gap-2 mt-3 mt-md-0">
                    <a href="{{ route('admin.clients.message-report-cost') }}" class="btn btn-outline-primary d-flex align-items-center">
                        <i class="ti ti-report-analytics me-1 fs-5"></i> Message Report & Cost
                    </a>
                  
                    <a href="javascript:void(0)" id="btn-add-client" class="btn btn-primary d-flex align-items-center btn-create" data-url="{{ route('admin.clients.create') }}">
                        <i class="ti ti-plus text-white me-1 fs-5"></i> Tambah Client (API)
                    </a>
                </div>
            </div>
        </div>

        <div class="card card-body">
            <div class="table-responsive">
                <table class="table table-striped" id="datatable">
                    <thead>
                        <tr>
                            <th>Opsi</th>
                            <th>Nama</th>
                            <th>Account</th>
                            <th>Phone</th>
                            <th>Package</th>
                            <th>Status Integrasi</th>
                            <th>API Username</th>
                            <th>Reseller</th>
                            <th>Saldo</th>
                            <th>Rate Limit</th>
                            <th>Status</th>
                            
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Data by DataTables -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- Isolation Modal -->
    <div class="modal fade" id="isolationModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="isolationModalLabel">Isolasi Client</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="isolationForm">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" id="iso_client_id" name="client_id">
                        <div class="mb-3">
                            <label for="iso_reason" class="form-label">Alasan Isolasi</label>
                            <select class="form-select" id="iso_reason" name="reason_code" required>
                                <option value="JUDOL_INDICATION">Indikasi Judi Online</option>
                                <option value="SPAM_ACTIVITY">Aktivitas Spam</option>
                                <option value="HIGH_BLOCK_RATE">High Block Rate</option>
                                <option value="OTHER">Lainnya</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="iso_note" class="form-label">Catatan (Wajib)</label>
                            <textarea class="form-control" id="iso_note" name="note" rows="3" required minlength="10" placeholder="Jelaskan alasan isolasi..."></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-danger">Isolasi Client</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Un-Isolation Modal -->
    <div class="modal fade" id="unIsolationModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Buka Isolasi Client</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="unIsolationForm">
                    @csrf
                    <div class="modal-body">
                        <input type="hidden" id="uniso_client_id" name="client_id">
                        <p>Apakah Anda yakin ingin membuka isolasi client ini?</p>
                        <div class="mb-3">
                            <label for="uniso_note" class="form-label">Catatan (Wajib)</label>
                            <textarea class="form-control" id="uniso_note" name="note" rows="3" required placeholder="Alasan pembukaan isolasi..."></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                        <button type="submit" class="btn btn-success">Buka Isolasi</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="deactivateModal" tabindex="-1" aria-labelledby="deactivateModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <form id="deactivateForm" method="POST">
            @csrf
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deactivateModalLabel">Nonaktifkan Client</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p id="deactivateModalBody"></p>
                    <div class="mb-3">
                        <label for="reason" class="form-label">Alasan Penonaktifan <span class="text-danger">*</span></label>
                        <textarea class="form-control" id="reason" name="reason" rows="3" required placeholder="Jelaskan alasan kenapa client ini dinonaktifkan..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-danger">Nonaktifkan</button>
                </div>
            </div>
        </form>
    </div>
</div>

@endsection

@push('scripts')
<script>
$(document).ready(function () {
    // Function to update summary cards
    function updateSummaryCards(data) {
        var totalClients = data.length;
        var integrasiSelesai = 0;
        var integrasiBelum = 0;
        var totalBalance = 0;

        data.forEach(function(client) {
            // Count integration status
            var status = client.status_integrasi || 'Belum';
            if (status === 'Selesai') {
                integrasiSelesai++;
            } else {
                integrasiBelum++; // Includes 'Belum' and 'Dalam Proses'
            }
            
            // Sum balance
            totalBalance += parseFloat(client.balance) || 0;
        });

        // Update UI
        $('#totalClients').text(totalClients);
        $('#integrasiSelesai').text(integrasiSelesai);
        $('#integrasiBelum').text(integrasiBelum);
        $('#totalBalance').text('Rp ' + totalBalance.toLocaleString('id-ID'));
    }

    var datatable = $('#datatable').DataTable({
        processing: true,
        serverSide: false,
        autoWidth: false,
        ajax: {
            url: '{{ route('admin.clients.data') }}',
            dataSrc: function(json) {
                // Update summary cards when data is loaded
                updateSummaryCards(json.data);
                return json.data;
            }
        },
        columns: [
              {
                data: null,
                name: 'action',
                orderable: false,
                searchable: false,
                className: 'text-center fit-column',
                render: function (data, type, row) {
                    var editUrl = '{{ route('admin.clients.edit', ':id') }}'.replace(':id', row.id);
                    var deleteUrl = '{{ route('admin.clients.destroy', ':id') }}'.replace(':id', row.id);
                    var impersonateUrl = '{{ route('admin.clients.impersonate', ':id') }}'.replace(':id', row.id);
                    var deactivateUrl = '{{ route('admin.clients.deactivate', ':id') }}'.replace(':id', row.id);
                    var activateUrl = '{{ route('admin.clients.activate', ':id') }}'.replace(':id', row.id);
                    
                    var impersonateBtn = row.user_id && row.isolation_status !== 'isolated'
                        ? `<button class="btn btn-info btn-sm btn-impersonate" data-url="${impersonateUrl}" data-name="${row.name}" title="Login sebagai Client">
                            <i class="ti ti-user-check"></i>
                          </button>`
                        : '';

                    var statusBtn = '';
                    if (row.is_active) {
                        statusBtn = `<button class="btn btn-danger btn-sm btn-deactivate" data-url="${deactivateUrl}" data-name="${row.name}" title="Nonaktifkan Client">
                                        <i class="ti ti-ban"></i>
                                     </button>`;
                    } else {
                        statusBtn = `<button class="btn btn-success btn-sm btn-activate" data-url="${activateUrl}" data-name="${row.name}" title="Aktifkan Kembali">
                                        <i class="ti ti-check"></i>
                                     </button>`;
                    }

                    return `
                        ${impersonateBtn}
                        ${statusBtn}
                        <button class="btn btn-warning btn-sm btn-create" data-url="${editUrl}" title="Edit Client">
                            <i class="ti ti-pencil"></i>
                        </button>
                        <button class="btn btn-danger btn-sm btn-delete" data-url="${deleteUrl}" title="Hapus Client">
                            <i class="ti ti-trash"></i>
                        </button>
                    `;
                }
            },
            { data: 'name', name: 'name' },
            { data: 'account_name', name: 'account_name', defaultContent: '-' },
            { data: 'phone', name: 'phone', defaultContent: '-' },
            {
                data: null,
                name: 'package',
                render: function (data, type, row) {
                    var pkg = row.reseller_client ? row.reseller_client.package : null;
                    if (!pkg) return '<span class="badge bg-secondary">-</span>';
                    var cls = pkg === 'dedicated' ? 'bg-primary' : 'bg-info';
                    return '<span class="badge ' + cls + '">' + pkg.charAt(0).toUpperCase() + pkg.slice(1) + '</span>';
                }
            },
            {
                data: 'status_integrasi',
                name: 'status_integrasi',
                render: function (data) {
                    if (!data) data = 'Belum';
                    var cls = 'bg-secondary';
                    if (data === 'Selesai') cls = 'bg-success';
                    else if (data === 'Dalam Proses') cls = 'bg-warning text-dark';
                    else if (data === 'Belum') cls = 'bg-secondary';
                    return '<span class="badge ' + cls + '">' + data + '</span>';
                }
            },
            { data: 'email', name: 'email' },
            { data: 'reseller.name', name: 'reseller.name', defaultContent: '-' },
            {
                data: 'balance',
                name: 'balance',
                render: function (data) {
                    return 'Rp ' + parseFloat(data).toLocaleString('id-ID');
                }
            },
            { data: 'rate_limit_per_minute', name: 'rate_limit_per_minute' },
            {
                data: 'is_active',
                name: 'is_active',
                render: function (data, type, row) {
                    if (row.isolation_status === 'isolated') {
                        return '<span class="badge bg-danger">ISOLATED</span>';
                    }
                    return data
                        ? '<span class="badge bg-success">Aktif</span>'
                        : '<span class="badge bg-secondary">Nonaktif</span>';
                }
            },
          
        ]
    });

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

    // Current filter state
    var currentFilter = 'all';

    // Summary card click handler for filtering
    $('.summary-card').on('click', function () {
        var filter = $(this).data('filter');
        currentFilter = filter;
        
        // Update active state visual
        $('.summary-card').css('transform', 'scale(1)').css('box-shadow', '');
        $(this).css('transform', 'scale(1.03)').css('box-shadow', '0 4px 15px rgba(0,0,0,0.2)');
        
        // Apply custom filter
        datatable.draw();
    });

    // Hover effect for summary cards
    $('.summary-card').hover(
        function() { $(this).css('transform', 'scale(1.02)'); },
        function() { 
            if ($(this).data('filter') !== currentFilter) {
                $(this).css('transform', 'scale(1)'); 
            }
        }
    );

    // Custom search function for status_integrasi filtering
    $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
        if (currentFilter === 'all') {
            return true;
        }
        
        // Get the raw data from the row
        var rowData = datatable.row(dataIndex).data();
        var status = rowData.status_integrasi || 'Belum';
        
        if (currentFilter === 'selesai') {
            return status === 'Selesai';
        } else if (currentFilter === 'belum') {
            return status !== 'Selesai'; // Includes 'Belum' and 'Dalam Proses'
        }
        
        return true;
    });

    // Isolation Button Click
    $('#datatable').on('click', '.btn-isolate', function() {
        var id = $(this).data('id');
        $('#iso_client_id').val(id);
        $('#isolationForm')[0].reset();
        $('#isolationModal').modal('show');
    });

    // Un-Isolation Button Click
    $('#datatable').on('click', '.btn-unisolate', function() {
        var id = $(this).data('id');
        $('#uniso_client_id').val(id);
        $('#unIsolationForm')[0].reset();
        $('#unIsolationModal').modal('show');
    });

    // Handle Isolation Submit
    $('#isolationForm').on('submit', function(e) {
        e.preventDefault();
        var id = $('#iso_client_id').val();
        var url = '{{ route("admin.clients.isolate", ":id") }}'.replace(':id', id);
        
        $.ajax({
            url: url,
            method: 'POST',
            data: $(this).serialize(),
            success: function(response) {
                $('#isolationModal').modal('hide');
                datatable.ajax.reload();
                alert('Client berhasil diisolasi');
            },
            error: function(xhr) {
                alert('Error: ' + (xhr.responseJSON.message || 'Terjadi kesalahan'));
            }
        });
    });

    // Handle Un-Isolation Submit
    $('#unIsolationForm').on('submit', function(e) {
        e.preventDefault();
        var id = $('#uniso_client_id').val();
        var url = '{{ route("admin.clients.un-isolate", ":id") }}'.replace(':id', id);
        
        $.ajax({
            url: url,
            method: 'POST',
            data: $(this).serialize(),
            success: function(response) {
                $('#unIsolationModal').modal('hide');
                datatable.ajax.reload();
                alert('Isolasi client berhasil dibuka');
            },
            error: function(xhr) {
                alert('Error: ' + (xhr.responseJSON.message || 'Terjadi kesalahan'));
            }
        });
    });

    // Impersonate button handler
    $('#datatable').on('click', '.btn-impersonate', function (e) {
        e.preventDefault();
        var url = $(this).data('url');
        var name = $(this).data('name');
        
        if (confirm('Anda akan login sebagai client "' + name + '".\n\nAnda bisa kembali ke admin dari menu header.\n\nLanjutkan?')) {
            // Create and submit form with CSRF token
            var form = $('<form>', {
                'method': 'POST',
                'action': url
            });
            form.append($('<input>', {
                'type': 'hidden',
                'name': '_token',
                'value': '{{ csrf_token() }}'
            }));
            $('body').append(form);
            form.submit();
        }
    });

    // Deactivate button handler - Open Modal
    $('#datatable').on('click', '.btn-deactivate', function() {
        var url = $(this).data('url');
        var name = $(this).data('name');
        $('#deactivateForm').attr('data-url', url); // Store URL in data attribute
        $('#deactivateModalBody').text('Apakah Anda yakin ingin menonaktifkan client "' + name + '"?');
        $('#reason').val('Akun Anda terindikasi terkait aktivitas perjudian online. Dalam Syarat & Ketentuan kami telah dijelaskan bahwa penggunaan layanan untuk aktivitas tersebut tidak diperkenankan.\nApabila Anda merasa ini merupakan kesalahan dan bukan terkait aktivitas perjudian online, Anda dapat mengajukan banding melalui fitur yang telah kami sediakan.'); // Clear textarea
        $('#deactivateModal').modal('show');
    });

    // Handle Deactivate Form Submission via AJAX
    $('#deactivateForm').on('submit', function(e) {
        e.preventDefault();
        var url = $(this).attr('data-url');
        var formData = $(this).serialize();

        $.ajax({
            url: url,
            type: 'POST',
            data: formData,
            success: function(response) {
                $('#deactivateModal').modal('hide');
                datatable.ajax.reload();
                alert(response.meta.message); // Simple alert for now, can be upgraded to Toast
            },
            error: function(xhr) {
                var msg = 'Terjadi kesalahan.';
                if (xhr.responseJSON && xhr.responseJSON.message) {
                    msg = xhr.responseJSON.message;
                }
                alert(msg);
            }
        });
    });

    // Activate button handler via AJAX
    $('#datatable').on('click', '.btn-activate', function() {
        var url = $(this).data('url');
        var name = $(this).data('name');
        
        if(confirm('Apakah Anda yakin ingin mengaktifkan kembali client "' + name + '"?')) {
            $.ajax({
                url: url,
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function(response) {
                    datatable.ajax.reload();
                    alert(response.meta.message);
                },
                error: function(xhr) {
                    var msg = 'Terjadi kesalahan.';
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        msg = xhr.responseJSON.message;
                    }
                    alert(msg);
                }
            });
        }
    });
});
</script>
@endpush

<!-- Deactivation Modal -->