@extends('layout.app')

@section('title', 'Kelola PPPoE Users - Sistem Manajemen ISP')
@section('breadcrumb', 'PPPoE Users')

@section('content')
<div class="row">
    <div class="col-12">
        <div class="card my-4">
            <div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
                <div class="bg-gradient-dark shadow-dark border-radius-lg pt-4 pb-3">
                    <h6 class="text-white text-capitalize ps-3">Kelola PPPoE Users</h6>
                </div>
            </div>
            <div class="card-body px-0 pb-2">
                <div class="px-3 mb-3">
                    <button type="button" class="btn btn-sm btn-info" onclick="refreshStats()">
                        <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">refresh</i> Refresh Stats
                    </button>
                    <button type="button" class="btn btn-sm btn-success" onclick="getActiveSessions()">
                        <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">people</i> Sesi Aktif
                    </button>
                </div>

<!-- Statistics Cards -->
<div class="row mb-4 px-3" id="stats-cards">
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card">
            <div class="card-header p-2 ps-3">
                <div class="d-flex justify-content-between">
                    <div>
                        <p class="text-sm mb-0 text-capitalize">Total PPPoE Users</p>
                        <h4 class="mb-0" id="total-users">
                            <div class="spinner-border spinner-border-sm" role="status"></div>
                        </h4>
                    </div>
                    <div class="icon icon-md icon-shape bg-gradient-primary shadow text-center border-radius-lg">
                        <i class="material-symbols-rounded opacity-10">people</i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card">
            <div class="card-header p-2 ps-3">
                <div class="d-flex justify-content-between">
                    <div>
                        <p class="text-sm mb-0 text-capitalize">Active Users</p>
                        <h4 class="mb-0" id="active-users">
                            <div class="spinner-border spinner-border-sm" role="status"></div>
                        </h4>
                    </div>
                    <div class="icon icon-md icon-shape bg-gradient-success shadow text-center border-radius-lg">
                        <i class="material-symbols-rounded opacity-10">check_circle</i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card">
            <div class="card-header p-2 ps-3">
                <div class="d-flex justify-content-between">
                    <div>
                        <p class="text-sm mb-0 text-capitalize">Inactive Users</p>
                        <h4 class="mb-0" id="inactive-users">
                            <div class="spinner-border spinner-border-sm" role="status"></div>
                        </h4>
                    </div>
                    <div class="icon icon-md icon-shape bg-gradient-warning shadow text-center border-radius-lg">
                        <i class="material-symbols-rounded opacity-10">cancel</i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card">
            <div class="card-header p-2 ps-3">
                <div class="d-flex justify-content-between">
                    <div>
                        <p class="text-sm mb-0 text-capitalize">Active Sessions</p>
                        <h4 class="mb-0" id="active-sessions">
                            <div class="spinner-border spinner-border-sm" role="status"></div>
                        </h4>
                    </div>
                    <div class="icon icon-md icon-shape bg-gradient-info shadow text-center border-radius-lg">
                        <i class="material-symbols-rounded opacity-10">wifi</i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- PPPoE Table Card -->
<div class="row px-3">
    <div class="col-12">
        <div class="card">
            <div class="card-header pb-0">
                <ul class="nav nav-tabs" id="pppoeTabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="web-tab" data-bs-toggle="tab" href="#web" role="tab" aria-controls="web" aria-selected="true">
                            <i class="material-symbols-rounded" style="font-size: 18px; vertical-align: middle;">language</i> PPPoE dari Web
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="mikrotik-tab" data-bs-toggle="tab" href="#mikrotik" role="tab" aria-controls="mikrotik" aria-selected="false">
                            <i class="material-symbols-rounded" style="font-size: 18px; vertical-align: middle;">router</i> PPPoE dari MikroTik
                        </a>
                    </li>
                </ul>
            </div>
                
            <div class="card-body px-0 pt-0 pb-2">
                <div class="tab-content" id="pppoeTabsContent">
                    <!-- Web PPPoE Users Tab -->
                    <div class="tab-pane fade show active" id="web" role="tabpanel" aria-labelledby="web-tab">
                        <!-- Filter Section -->
                        <div class="border-bottom mb-3 pb-3 px-3">
                            <form method="GET" action="{{ route('pppoe.index') }}">
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="input-group input-group-outline mb-3">
                                            <label class="form-label">Cari PPPoE User</label>
                                            <input type="text" name="search" id="search" class="form-control" 
                                                   value="{{ request('search') }}" placeholder="Nama, username, atau email">
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="input-group input-group-outline mb-3">
                                            <label class="form-label">Status</label>
                                            <select name="status" id="status" class="form-control">
                                                <option value="">Semua Status</option>
                                                <option value="Aktif" {{ request('status') == 'Aktif' ? 'selected' : '' }}>Aktif</option>
                                                <option value="Nonaktif" {{ request('status') == 'Nonaktif' ? 'selected' : '' }}>Nonaktif</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="input-group input-group-outline mb-3">
                                            <label class="form-label">Paket Internet</label>
                                            <select name="paket_internet_id" id="paket_internet_id" class="form-control">
                                                <option value="">Semua Paket</option>
                                                @foreach($paketOptions as $paket)
                                                <option value="{{ $paket->id }}" {{ request('paket_internet_id') == $paket->id ? 'selected' : '' }}>
                                                    {{ $paket->nama_paket }}
                                                </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <button type="submit" class="btn bg-gradient-primary btn-sm mb-0" title="Filter">
                                            <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">search</i> Filter
                                        </button>
                                    </div>
                                </div>
                                @if(request()->anyFilled(['search', 'status', 'paket_internet_id']))
                                <div class="row mt-2">
                                    <div class="col-12">
                                        <a href="{{ route('pppoe.index') }}" class="btn btn-sm btn-outline-secondary">
                                            <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">refresh</i> Reset Filter
                                        </a>
                                    </div>
                                </div>
                                @endif
                            </form>
                        </div>

                        <!-- Table -->
                        <div class="table-responsive p-0">
                            <table class="table align-items-center mb-0">
                                <thead>
                                    <tr>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">No</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 ps-2">Customer</th>
                                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">PPPoE Username</th>
                                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Paket Internet</th>
                                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Status</th>
                                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Profile</th>
                                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Local Address</th>
                                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Remote Address</th>
                                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Terakhir Login</th>
                                        <th class="text-secondary opacity-7"></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($pelanggan as $index => $customer)
                                    @php
                                        $mikrotikUser = $mikrotikPppoeUsersMap[$customer->username_pppoe] ?? null;
                                        $defaultLocal = $config->pppoe_local_address ?? '-';
                                        $localAddress = $mikrotikUser['local-address'] ?? $defaultLocal;
                                        $remoteAddress = $mikrotikUser['remote-address'] ?? $customer->ip_address ?? '-';
                                    @endphp
                                    <tr>
                                        <td>
                                            <div class="d-flex px-2 py-1">
                                                <div class="d-flex flex-column justify-content-center">
                                                    <h6 class="mb-0 text-sm">{{ $pelanggan->firstItem() + $index }}</h6>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <div class="d-flex px-2 py-1">
                                                <div class="d-flex flex-column justify-content-center">
                                                    <h6 class="mb-0 text-sm">{{ $customer->nama }}</h6>
                                                    <p class="text-xs text-secondary mb-0">{{ $customer->email }}</p>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="align-middle text-center text-sm">
                                            <code class="text-xs">{{ $customer->username_pppoe }}</code>
                                        </td>
                                        <td class="align-middle text-center text-sm">
                                            @if($customer->paket)
                                                <span class="text-xs font-weight-bold">{{ $customer->paket->nama_paket }}</span>
                                            @else
                                                <span class="text-xs text-secondary">-</span>
                                            @endif
                                        </td>
                                        <td class="align-middle text-center text-sm">
                                            @if($customer->status_layanan == 'Aktif')
                                                <span class="badge badge-sm bg-gradient-success">Aktif</span>
                                            @elseif($customer->status_layanan == 'Suspend')
                                                <span class="badge badge-sm bg-gradient-warning">Suspend</span>
                                            @else
                                                <span class="badge badge-sm bg-gradient-secondary">Nonaktif</span>
                                            @endif
                                        </td>
                                        <td class="align-middle text-center text-sm">
                                            @if($customer->profile_pppoe)
                                                <span class="badge badge-sm bg-gradient-info">{{ $customer->profile_pppoe }}</span>
                                            @else
                                                <span class="text-xs text-secondary">-</span>
                                            @endif
                                        </td>
                                        <td class="align-middle text-center text-sm">
                                            <span class="text-xs">{{ $localAddress }}</span>
                                        </td>
                                        <td class="align-middle text-center text-sm">
                                            <span class="text-xs">{{ $remoteAddress }}</span>
                                        </td>
                                        <td class="align-middle text-center">
                                            @if($customer->last_login_at)
                                                <span class="text-xs font-weight-bold">{{ $customer->last_login_at->format('d/m/Y') }}</span>
                                                <p class="text-xs text-secondary mb-0">{{ $customer->last_login_at->format('H:i') }}</p>
                                            @else
                                                <span class="text-xs text-secondary">Belum pernah</span>
                                            @endif
                                        </td>
                                        <td class="align-middle text-end">
                                            <div class="dropdown">
                                                <a class="btn btn-sm btn-icon-only text-primary" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="Menu Aksi" style="width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;">
                                                    <i class="material-symbols-rounded" style="font-size: 20px; line-height: 1;">more_vert</i>
                                                </a>
                                                <ul class="dropdown-menu dropdown-menu-end shadow-sm">
                                                    <li>
                                                        <a class="dropdown-item d-flex align-items-center" href="{{ route('pppoe.show', $customer) }}">
                                                            <i class="material-symbols-rounded me-2" style="font-size: 18px; line-height: 1;">visibility</i> Detail
                                                        </a>
                                                    </li>
                                                    @if($customer->status_layanan == 'Aktif')
                                                    <li>
                                                        <a class="dropdown-item d-flex align-items-center" href="#" onclick="disableUser('{{ route('pppoe.disable', $customer) }}', '{{ $customer->username_pppoe }}')">
                                                            <i class="material-symbols-rounded me-2" style="font-size: 18px; line-height: 1;">pause</i> Disable
                                                        </a>
                                                    </li>
                                                    @else
                                                    <li>
                                                        <a class="dropdown-item d-flex align-items-center" href="#" onclick="enableUser('{{ route('pppoe.enable', $customer) }}', '{{ $customer->username_pppoe }}')">
                                                            <i class="material-symbols-rounded me-2" style="font-size: 18px; line-height: 1;">play_arrow</i> Enable
                                                        </a>
                                                    </li>
                                                    @endif
                                                    <li><hr class="dropdown-divider"></li>
                                                    <li>
                                                        <a class="dropdown-item text-danger d-flex align-items-center" href="#" onclick="deleteUser('{{ route('pppoe.delete', $customer) }}', '{{ $customer->username_pppoe }}')">
                                                            <i class="material-symbols-rounded me-2" style="font-size: 18px; line-height: 1;">delete</i> Hapus
                                                        </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="10" class="text-center py-5">
                                            <i class="material-symbols-rounded" style="font-size: 48px; opacity: 0.3;">language</i>
                                            <h6 class="text-muted mt-3">Belum ada PPPoE users</h6>
                                            <p class="text-xs text-secondary mb-0">Belum ada pelanggan yang memiliki akun PPPoE</p>
                                        </td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                        
                        @if($pelanggan->hasPages())
                        <div class="card-footer py-4">
                            <nav aria-label="...">
                                {{ $pelanggan->links() }}
                            </nav>
                        </div>
                        @endif
                    </div>
                    
                    <!-- MikroTik PPPoE Users Tab -->
                    <div class="tab-pane fade" id="mikrotik" role="tabpanel" aria-labelledby="mikrotik-tab">
                        @if(!$config)
                        <div class="alert alert-warning mx-3">
                            <i class="material-symbols-rounded" style="font-size: 20px; vertical-align: middle;">warning</i>
                            Konfigurasi Mikrotik belum ada. <a href="{{ route('mikrotik.config') }}">Klik di sini</a> untuk mengatur konfigurasi.
                        </div>
                        @elseif($mikrotikError)
                        <div class="alert alert-danger mx-3">
                            <i class="material-symbols-rounded" style="font-size: 20px; vertical-align: middle;">error</i>
                            Error mengambil data dari MikroTik: {{ $mikrotikError }}
                        </div>
                        @else
                        <div class="table-responsive p-0">
                            <table class="table align-items-center mb-0">
                                <thead>
                                    <tr>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Username</th>
                                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Profile</th>
                                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Service</th>
                                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Local Address</th>
                                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Remote Address</th>
                                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Status</th>
                                        <th class="text-center text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Comment</th>
                                        <th class="text-secondary opacity-7"></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($mikrotikPppoeUsers ?? [] as $user)
                                    <tr>
                                        <td>
                                            <div class="d-flex px-2 py-1">
                                                <div class="d-flex flex-column justify-content-center">
                                                    <code class="text-xs">{{ $user['name'] ?? '-' }}</code>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="align-middle text-center text-sm">
                                            <span class="text-xs">{{ $user['profile'] ?? '-' }}</span>
                                        </td>
                                        <td class="align-middle text-center text-sm">
                                            <span class="text-xs">{{ $user['service'] ?? '-' }}</span>
                                        </td>
                                        <td class="align-middle text-center text-sm">
                                            <span class="text-xs">{{ $user['local-address'] ?? '-' }}</span>
                                        </td>
                                        <td class="align-middle text-center text-sm">
                                            <span class="text-xs">{{ $user['remote-address'] ?? '-' }}</span>
                                        </td>
                                        <td class="align-middle text-center text-sm">
                                            @php
                                                $isDisabled = isset($user['disabled']) && $user['disabled'] === 'yes';
                                            @endphp
                                            <span class="badge badge-sm {{ !$isDisabled ? 'bg-gradient-success' : 'bg-gradient-secondary' }}">
                                                {{ !$isDisabled ? 'Active' : 'Disabled' }}
                                            </span>
                                        </td>
                                        <td class="align-middle text-center text-sm">
                                            <span class="text-xs">{{ $user['comment'] ?? '-' }}</span>
                                        </td>
                                        <td class="align-middle">
                                            @php
                                                $pelanggan = \App\Models\Pelanggan::where('username_pppoe', $user['name'] ?? '')->first();
                                            @endphp
                                            @if($pelanggan)
                                                <a href="{{ route('pppoe.show', $pelanggan) }}" class="btn btn-sm bg-gradient-info mb-0">
                                                    <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">visibility</i> Detail
                                                </a>
                                            @else
                                                <button type="button" class="btn btn-sm bg-gradient-primary mb-0" onclick="openLinkModal('{{ $user['name'] ?? '' }}', '{{ $user['profile'] ?? '' }}')">
                                                    <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">link</i> Hubungkan
                                                </button>
                                            @endif
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="8" class="text-center py-5">
                                            <i class="material-symbols-rounded" style="font-size: 48px; opacity: 0.3;">router</i>
                                            <h6 class="text-muted mt-3">Belum ada PPPoE users di MikroTik</h6>
                                        </td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Link Pelanggan Modal -->
<div class="modal fade" id="linkModal" tabindex="-1" role="dialog" aria-labelledby="linkModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="linkModalLabel">Hubungkan PPPoE User ke Pelanggan</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="linkForm" action="{{ route('pppoe.link') }}" method="POST" onsubmit="return validateLinkForm()">
                @csrf
                <div class="modal-body">
                    <input type="hidden" id="linkUsername" name="username_pppoe">
                    <div class="input-group input-group-outline mb-3">
                        <label class="form-label">Username PPPoE</label>
                        <input type="text" class="form-control" id="linkUsernameDisplay" readonly>
                    </div>
                    <div class="input-group input-group-outline mb-3">
                        <label class="form-label">Profile</label>
                        <input type="text" class="form-control" id="linkProfileDisplay" readonly>
                    </div>
                    <div class="input-group input-group-outline mb-3">
                        <label class="form-label">Cari Pelanggan <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="linkSearchPelanggan" placeholder="Masukkan nama, nomor pelanggan, atau telepon..." autocomplete="off">
                        <button type="button" class="btn bg-gradient-primary mb-0" onclick="searchPelanggan()">
                            <i class="material-symbols-rounded" style="font-size: 18px; vertical-align: middle;">search</i>
                        </button>
                    </div>
                    <small class="form-text text-muted">Minimal 2 karakter untuk pencarian</small>
                    <div id="linkSearchResults" class="mt-3"></div>
                    <input type="hidden" id="linkPelangganId" name="pelanggan_id">
                    <div id="linkPelangganError" class="text-danger small mt-1" style="display: none;"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn bg-gradient-primary">
                        <i class="material-symbols-rounded" style="font-size: 18px; vertical-align: middle;">link</i> Hubungkan
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Active Sessions Modal -->
<div class="modal fade" id="activeSessionsModal" tabindex="-1" role="dialog" aria-labelledby="activeSessionsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="activeSessionsModalLabel">Sesi PPPoE Aktif</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="active-sessions-content">
                    <div class="text-center">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <p class="mt-2">Memuat sesi aktif...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
// Load stats on page load
document.addEventListener('DOMContentLoaded', function() {
    refreshStats();
});

function refreshStats() {
    fetch('{{ route("pppoe.stats") }}')
    .then(response => response.json())
    .then(data => {
        document.getElementById('total-users').textContent = data.total_pppoe_users;
        document.getElementById('active-users').textContent = data.active_pppoe_users;
        document.getElementById('inactive-users').textContent = data.inactive_pppoe_users;
    })
    .catch(error => {
        console.error('Error loading stats:', error);
    });
    
    getActiveSessionsCount();
}

function getActiveSessionsCount() {
    fetch('{{ route("pppoe.active-sessions") }}')
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            document.getElementById('active-sessions').textContent = data.data.length;
        } else {
            document.getElementById('active-sessions').textContent = 'Error';
        }
    })
    .catch(error => {
        document.getElementById('active-sessions').textContent = 'Error';
    });
}

function getActiveSessions() {
    var modal = new bootstrap.Modal(document.getElementById('activeSessionsModal'));
    modal.show();
    
    fetch('{{ route("pppoe.active-sessions") }}')
    .then(response => response.json())
    .then(data => {
        let html = '';
        if (data.success && data.data.length > 0) {
            html = '<div class="table-responsive"><table class="table table-bordered"><thead><tr><th>Username</th><th>Address</th><th>Uptime</th><th>Bytes In</th><th>Bytes Out</th><th>Service</th></tr></thead><tbody>';
            data.data.forEach(session => {
                html += `<tr>
                    <td>${session.name || '-'}</td>
                    <td>${session.address || '-'}</td>
                    <td>${session.uptime || '-'}</td>
                    <td>${formatBytes(session['bytes-in'] || 0)}</td>
                    <td>${formatBytes(session['bytes-out'] || 0)}</td>
                    <td>${session.service || '-'}</td>
                </tr>`;
            });
            html += '</tbody></table></div>';
        } else {
            html = '<div class="alert alert-info">Tidak ada sesi aktif</div>';
        }
        document.getElementById('active-sessions-content').innerHTML = html;
    })
    .catch(error => {
        document.getElementById('active-sessions-content').innerHTML = 
            '<div class="alert alert-danger">Error loading active sessions</div>';
    });
}

function formatBytes(bytes) {
    if (bytes === 0) return '0 Bytes';
    const k = 1024;
    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
}

function disableUser(url, username) {
    if (confirm('Apakah Anda yakin ingin menonaktifkan user "' + username + '"?')) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = url;
        
        const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        const csrfInput = document.createElement('input');
        csrfInput.type = 'hidden';
        csrfInput.name = '_token';
        csrfInput.value = csrfToken;
        
        form.appendChild(csrfInput);
        document.body.appendChild(form);
        form.submit();
    }
}

function enableUser(url, username) {
    if (confirm('Apakah Anda yakin ingin mengaktifkan user "' + username + '"?')) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = url;
        
        const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        const csrfInput = document.createElement('input');
        csrfInput.type = 'hidden';
        csrfInput.name = '_token';
        csrfInput.value = csrfToken;
        
        form.appendChild(csrfInput);
        document.body.appendChild(form);
        form.submit();
    }
}

function deleteUser(url, username) {
    if (confirm('Apakah Anda yakin ingin menghapus user "' + username + '"?')) {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = url;
        
        const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
        const csrfInput = document.createElement('input');
        csrfInput.type = 'hidden';
        csrfInput.name = '_token';
        csrfInput.value = csrfToken;
        
        const methodInput = document.createElement('input');
        methodInput.type = 'hidden';
        methodInput.name = '_method';
        methodInput.value = 'DELETE';
        
        form.appendChild(csrfInput);
        form.appendChild(methodInput);
        document.body.appendChild(form);
        form.submit();
    }
}

function openLinkModal(username, profile) {
    document.getElementById('linkUsername').value = username;
    document.getElementById('linkUsernameDisplay').value = username;
    document.getElementById('linkProfileDisplay').value = profile;
    document.getElementById('linkPelangganId').value = '';
    document.getElementById('linkSearchPelanggan').value = '';
    document.getElementById('linkSearchResults').innerHTML = '<div class="alert alert-info"><i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">info</i> Silakan cari pelanggan untuk menghubungkan</div>';
    var modal = new bootstrap.Modal(document.getElementById('linkModal'));
    modal.show();
    
    // Focus on search input
    setTimeout(function() {
        document.getElementById('linkSearchPelanggan').focus();
    }, 500);
}

function searchPelanggan() {
    const search = document.getElementById('linkSearchPelanggan').value.trim();
    if (search.length < 2) {
        document.getElementById('linkSearchResults').innerHTML = '<div class="alert alert-warning"><i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">warning</i> Minimal 2 karakter untuk pencarian</div>';
        return;
    }
    
    const resultsDiv = document.getElementById('linkSearchResults');
    resultsDiv.innerHTML = '<div class="text-center py-3"><div class="spinner-border spinner-border-sm text-primary" role="status"></div><p class="mt-2 mb-0">Mencari pelanggan...</p></div>';
    
    fetch(`{{ url('api/pelanggan/search') }}?q=${encodeURIComponent(search)}`, {
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json'
        }
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        if (data.success && data.data && data.data.length > 0) {
            let html = '<div class="list-group" style="max-height: 400px; overflow-y: auto;">';
            data.data.forEach(pelanggan => {
                const nama = escapeHtml(pelanggan.nama || 'Tidak ada nama');
                const nomor = escapeHtml(pelanggan.nomor_pelanggan || 'Tidak ada nomor');
                const telepon = escapeHtml(pelanggan.nomor_telepon || 'Tidak ada telepon');
                const email = escapeHtml(pelanggan.email || 'Tidak ada email');
                const usernamePppoe = pelanggan.username_pppoe ? '<span class="badge badge-warning">Sudah punya PPPoE: ' + escapeHtml(pelanggan.username_pppoe) + '</span>' : '';
                
                html += `<a href="javascript:void(0)" class="list-group-item list-group-item-action ${pelanggan.username_pppoe ? 'list-group-item-warning' : ''}" onclick="selectPelanggan(${pelanggan.id}, '${nama}', '${nomor}')">
                    <div class="d-flex w-100 justify-content-between align-items-start">
                        <div class="flex-grow-1">
                            <h6 class="mb-1">${nama}</h6>
                            <p class="mb-1 text-muted small">
                                <i class="material-symbols-rounded me-1" style="font-size: 14px; vertical-align: middle;">badge</i> ${nomor} | 
                                <i class="material-symbols-rounded me-1" style="font-size: 14px; vertical-align: middle;">phone</i> ${telepon}
                            </p>
                            <p class="mb-0 text-muted small">
                                <i class="material-symbols-rounded me-1" style="font-size: 14px; vertical-align: middle;">email</i> ${email}
                            </p>
                            ${usernamePppoe}
                        </div>
                        <i class="material-symbols-rounded text-muted ms-2" style="font-size: 18px; vertical-align: middle;">chevron_right</i>
                    </div>
                </a>`;
            });
            html += '</div>';
            resultsDiv.innerHTML = html;
        } else {
            resultsDiv.innerHTML = '<div class="alert alert-info"><i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">info</i> Tidak ada pelanggan ditemukan. Coba dengan kata kunci lain.</div>';
        }
    })
    .catch(error => {
        console.error('Error:', error);
        resultsDiv.innerHTML = '<div class="alert alert-danger"><i class="material-symbols-rounded me-2" style="font-size: 20px; vertical-align: middle;">error</i> Error mencari pelanggan. Silakan coba lagi.</div>';
    });
}

function escapeHtml(text) {
    const map = {
        '&': '&amp;',
        '<': '&lt;',
        '>': '&gt;',
        '"': '&quot;',
        "'": '&#039;'
    };
    return String(text).replace(/[&<>"']/g, m => map[m]);
}

function selectPelanggan(id, nama, nomor) {
    document.getElementById('linkPelangganId').value = id;
    document.getElementById('linkPelangganError').style.display = 'none';
    
    // Highlight selected item
    const resultsDiv = document.getElementById('linkSearchResults');
    const listItems = resultsDiv.querySelectorAll('.list-group-item');
    listItems.forEach(item => {
        item.classList.remove('active', 'bg-primary', 'text-white');
    });
    
    // Find and highlight the selected item
    listItems.forEach(item => {
        if (item.onclick && item.onclick.toString().includes(id)) {
            item.classList.add('active', 'bg-primary', 'text-white');
        }
    });
    
    // Show confirmation
    const originalHtml = resultsDiv.innerHTML;
    resultsDiv.innerHTML = `<div class="alert alert-success">
        <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">check_circle</i> <strong>Dipilih:</strong> ${escapeHtml(nama)} (${escapeHtml(nomor)})
        <button type="button" class="btn btn-sm btn-outline-light float-end" onclick="document.getElementById('linkSearchResults').innerHTML = \`${originalHtml.replace(/`/g, '\\`').replace(/\$/g, '\\$')}\`; selectPelanggan(${id}, '${escapeHtml(nama)}', '${escapeHtml(nomor)}');">
            <i class="material-symbols-rounded me-1" style="font-size: 16px; vertical-align: middle;">edit</i> Ubah
        </button>
    </div>`;
}

function validateLinkForm() {
    const pelangganId = document.getElementById('linkPelangganId').value;
    const errorDiv = document.getElementById('linkPelangganError');
    
    if (!pelangganId || pelangganId === '') {
        errorDiv.textContent = 'Silakan pilih pelanggan terlebih dahulu';
        errorDiv.style.display = 'block';
        document.getElementById('linkSearchResults').scrollIntoView({ behavior: 'smooth', block: 'nearest' });
        return false;
    }
    
    return true;
}

// Allow Enter key to search
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('linkSearchPelanggan');
    if (searchInput) {
        searchInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                searchPelanggan();
            }
        });
    }
});
</script>
@endsection