@extends('layout.app')

@section('title', 'Integrasi Mikrotik - Sistem Manajemen ISP')

@section('content')
<x-material-page-header 
    title="Integrasi Mikrotik" 
    :breadcrumbs="[
        ['name' => 'Mikrotik']
    ]"
/>

<div class="container-fluid py-4">
    <!-- Status Cards -->
    <div class="row mb-4">
        <div class="col-xl-3 col-lg-6">
            <x-material-card-stat 
                title="Total Logs"
                :value="number_format($stats['total_logs'])"
                icon="archive"
                color="primary"
                description="Since last month"
            />
        </div>
        <div class="col-xl-3 col-lg-6">
            <x-material-card-stat 
                title="Active Users"
                :value="$stats['active_users']"
                icon="person"
                color="success"
            />
        </div>
        <div class="col-xl-3 col-lg-6">
            <x-material-card-stat 
                title="Total Download"
                :value="formatBytes($stats['total_download'])"
                icon="download"
                color="info"
            />
        </div>
        <div class="col-xl-3 col-lg-6">
            <x-material-card-stat 
                title="Total Upload"
                :value="formatBytes($stats['total_upload'])"
                icon="upload"
                color="warning"
            />
        </div>
    </div>

<div class="row">
    <!-- Configuration Status -->
    <div class="col-lg-6">
        <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
            <div class="card-header pb-3">
                <div class="d-flex justify-content-between align-items-center">
                    <h6 class="mb-0 font-weight-bold d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                        <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; color: #5e72e4;">settings</i> Status Konfigurasi
                    </h6>
                    <a href="{{ route('mikrotik.config') }}" class="btn btn-sm bg-gradient-primary mb-0">
                        <i class="material-symbols-rounded me-1" style="font-size: 16px; vertical-align: middle;">settings</i> Edit Konfigurasi
                    </a>
                </div>
            </div>
            <div class="card-body pt-3">
                @if($config)
                <div class="table-responsive">
                    <table class="table table-sm">
                        <tr>
                            <td><strong>Nama:</strong></td>
                            <td>{{ $config->nama ?? '-' }}</td>
                        </tr>
                        <tr>
                            <td><strong>Host/IP:</strong></td>
                            <td>{{ $config->ip_address ?? '-' }}</td>
                        </tr>
                        <tr>
                            <td><strong>Port:</strong></td>
                            <td>{{ $config->port ?? 8728 }}</td>
                        </tr>
                        <tr>
                            <td><strong>Username:</strong></td>
                            <td>{{ $config->username ?? '-' }}</td>
                        </tr>
                        <tr>
                            <td><strong>Status:</strong></td>
                            <td>
                                <span class="badge bg-{{ $config->is_active ? 'success' : 'danger' }}">
                                    {{ $config->is_active ? 'Aktif' : 'Nonaktif' }}
                                </span>
                            </td>
                        </tr>
                        @if($config->keterangan)
                        <tr>
                            <td><strong>Keterangan:</strong></td>
                            <td>{{ $config->keterangan }}</td>
                        </tr>
                        @endif
                    </table>
                </div>
                @else
                <div class="alert alert-warning text-white">
                    <i class="material-symbols-rounded me-2" style="font-size: 18px; vertical-align: middle;">warning</i>
                    Konfigurasi Mikrotik belum ada. <a href="{{ route('mikrotik.config') }}" class="text-white text-decoration-underline">Klik di sini</a> untuk mengatur konfigurasi.
                </div>
                @endif
            </div>
        </div>
    </div>

    <!-- System Information -->
    <div class="col-lg-6">
        <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
            <div class="card-header pb-3">
                <h6 class="mb-0 font-weight-bold d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                    <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; color: #5e72e4;">info</i> Informasi Sistem
                </h6>
            </div>
            <div class="card-body pt-3">
                <div id="system-info">
                    <div class="text-center">
                        <div class="spinner-border text-primary" role="status">
                            <span class="sr-only">Loading...</span>
                        </div>
                        <p class="mt-2">Memuat informasi sistem...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

    <!-- Recent Bandwidth Logs -->
    <div class="row">
        <div class="col-12">
            <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
                <div class="card-header pb-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <h6 class="mb-0 font-weight-bold d-flex align-items-center" style="font-size: 0.875rem; color: #344767;">
                            <i class="material-symbols-rounded me-2" style="font-size: 20px; line-height: 1; color: #5e72e4;">archive</i> Log Bandwidth Terbaru
                        </h6>
                        <div>
                            <a href="{{ route('mikrotik.bandwidth-logs') }}" class="btn btn-sm bg-gradient-primary mb-0 me-2">
                                <i class="material-symbols-rounded me-1" style="font-size: 16px; vertical-align: middle;">list</i> Lihat Semua
                            </a>
                            <button type="button" class="btn btn-sm bg-gradient-success mb-0" onclick="exportBandwidth()">
                                <i class="material-symbols-rounded me-1" style="font-size: 16px; vertical-align: middle;">download</i> Export
                            </button>
                        </div>
                    </div>
                </div>
                <div class="card-body pt-3">
                    <div class="table-responsive">
                        <table class="table table-hover align-items-center mb-0">
                            <thead>
                                <tr>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="width: 15%;">Tanggal</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="width: 15%;">Username</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="width: 18%;">Pelanggan</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="width: 12%;">Download</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="width: 12%;">Upload</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="width: 12%;">Download Rate</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="width: 12%;">Upload Rate</th>
                                    <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7" style="width: 4%;">IP Address</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($recentLogs as $log)
                                <tr>
                                    <td>
                                        <span class="text-xs font-weight-bold">{{ $log->created_at->format('d/m/Y') }}</span>
                                        <br>
                                        <small class="text-xs text-muted">{{ $log->created_at->format('H:i') }}</small>
                                    </td>
                                    <td>
                                        <code class="text-xs bg-light px-2 py-1 rounded">{{ $log->username }}</code>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="icon icon-shape bg-gradient-primary text-white rounded-circle shadow me-3" style="width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;">
                                                <i class="material-symbols-rounded opacity-10" style="font-size: 16px;">person</i>
                                            </div>
                                            <div>
                                                <span class="text-xs font-weight-bold">{{ $log->pelanggan->nama ?? '-' }}</span>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="text-xs font-weight-bold text-success">
                                            {{ formatBytes($log->download_bytes) }}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="text-xs font-weight-bold text-info">
                                            {{ formatBytes($log->upload_bytes) }}
                                        </span>
                                    </td>
                                    <td>
                                        <span class="badge badge-sm bg-gradient-success">
                                            {{ formatBytes($log->download_rate) }}/s
                                        </span>
                                    </td>
                                    <td>
                                        <span class="badge badge-sm bg-gradient-info">
                                            {{ formatBytes($log->upload_rate) }}/s
                                        </span>
                                    </td>
                                    <td>
                                        <code class="text-xs bg-light px-2 py-1 rounded">{{ $log->ip_address }}</code>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="8" class="text-center">
                                        <div class="py-5">
                                            <i class="material-symbols-rounded" style="font-size: 64px; color: #6c757d; margin-bottom: 1rem;">archive</i>
                                            <h4 class="text-muted">Belum ada data bandwidth</h4>
                                            <p class="text-muted mb-4">Log bandwidth akan muncul setelah data tersinkronisasi</p>
                                        </div>
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- CRUD Section -->
<div class="row">
    <div class="col-12">
        <div class="card mb-4" style="border: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);">
            <div class="card-header pb-3">
                <ul class="nav nav-tabs card-header-tabs" id="crudTabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="pppoe-tab" data-bs-toggle="tab" href="#pppoe" role="tab" aria-controls="pppoe" aria-selected="true">
                            <i class="material-symbols-rounded me-1" style="font-size: 18px; vertical-align: middle;">person</i> PPPoE Users
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="hotspot-tab" data-bs-toggle="tab" href="#hotspot" role="tab" aria-controls="hotspot" aria-selected="false">
                            <i class="material-symbols-rounded me-1" style="font-size: 18px; vertical-align: middle;">wifi</i> Hotspot Users
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="queues-tab" data-bs-toggle="tab" href="#queues" role="tab" aria-controls="queues" aria-selected="false">
                            <i class="material-symbols-rounded me-1" style="font-size: 18px; vertical-align: middle;">settings</i> Queues
                        </a>
                    </li>
                </ul>
            </div>
            <div class="card-body pt-3">
                <div class="tab-content" id="crudTabsContent">
                    <!-- PPPoE Users Tab -->
                    <div class="tab-pane fade show active" id="pppoe" role="tabpanel" aria-labelledby="pppoe-tab">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h6 class="mb-0 font-weight-bold" style="color: #344767;">PPPoE Users Management</h6>
                            <button type="button" class="btn btn-sm bg-gradient-primary mb-0" onclick="openPppoeModal()">
                                <i class="material-symbols-rounded me-1" style="font-size: 16px; vertical-align: middle;">add</i> Tambah User
                            </button>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-hover align-items-center mb-0" id="pppoeTable">
                                <thead>
                                    <tr>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Username</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Profile</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Service</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Status</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Comment</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-center">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($pppoeUsers ?? [] as $user)
                                    <tr>
                                        <td><code class="text-xs bg-light px-2 py-1 rounded">{{ $user['name'] ?? '-' }}</code></td>
                                        <td><span class="text-xs">{{ $user['profile'] ?? '-' }}</span></td>
                                        <td><span class="text-xs">{{ $user['service'] ?? '-' }}</span></td>
                                        <td>
                                            @php
                                                // Di MikroTik: jika disabled tidak ada atau kosong = enabled, jika disabled = 'yes' = disabled
                                                $isDisabled = isset($user['disabled']) && $user['disabled'] === 'yes';
                                            @endphp
                                            <span class="badge badge-sm bg-gradient-{{ !$isDisabled ? 'success' : 'danger' }}">
                                                {{ !$isDisabled ? 'Active' : 'Disabled' }}
                                            </span>
                                        </td>
                                        <td><span class="text-xs">{{ $user['comment'] ?? '-' }}</span></td>
                                        <td class="text-center">
                                            <button class="btn btn-sm bg-gradient-info mb-0 me-1" onclick="editPppoeUser('{{ addslashes($user['.id'] ?? '') }}', '{{ addslashes($user['name'] ?? '') }}', '{{ addslashes($user['profile'] ?? '') }}', '{{ addslashes($user['comment'] ?? '') }}', '{{ $isDisabled ? 'true' : 'false' }}')">
                                                <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">edit</i>
                                            </button>
                                            <button class="btn btn-sm bg-gradient-danger mb-0" onclick="deletePppoeUser('{{ addslashes($user['.id'] ?? '') }}', '{{ addslashes($user['name'] ?? '') }}')">
                                                <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">delete</i>
                                            </button>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="6" class="text-center py-4">
                                            <i class="material-symbols-rounded" style="font-size: 64px; color: #6c757d; margin-bottom: 1rem;">person</i>
                                            <p class="text-muted">Belum ada PPPoE users</p>
                                        </td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Hotspot Users Tab -->
                    <div class="tab-pane fade" id="hotspot" role="tabpanel" aria-labelledby="hotspot-tab">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h6 class="mb-0 font-weight-bold" style="color: #344767;">Hotspot Users Management</h6>
                            <button type="button" class="btn btn-sm bg-gradient-primary mb-0" onclick="openHotspotModal()">
                                <i class="material-symbols-rounded me-1" style="font-size: 16px; vertical-align: middle;">add</i> Tambah User
                            </button>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-hover align-items-center mb-0" id="hotspotTable">
                                <thead>
                                    <tr>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Username</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Profile</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Status</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Comment</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-center">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($hotspotUsers ?? [] as $user)
                                    <tr>
                                        <td><code class="text-xs bg-light px-2 py-1 rounded">{{ $user['name'] ?? '-' }}</code></td>
                                        <td><span class="text-xs">{{ $user['profile'] ?? '-' }}</span></td>
                                        <td>
                                            @php
                                                $isDisabled = isset($user['disabled']) && $user['disabled'] === 'yes';
                                            @endphp
                                            <span class="badge badge-sm bg-gradient-{{ !$isDisabled ? 'success' : 'danger' }}">
                                                {{ !$isDisabled ? 'Active' : 'Disabled' }}
                                            </span>
                                        </td>
                                        <td><span class="text-xs">{{ $user['comment'] ?? '-' }}</span></td>
                                        <td class="text-center">
                                            <button class="btn btn-sm bg-gradient-info mb-0 me-1" onclick="editHotspotUser('{{ addslashes($user['.id'] ?? '') }}', '{{ addslashes($user['name'] ?? '') }}', '{{ addslashes($user['profile'] ?? '') }}', '{{ addslashes($user['comment'] ?? '') }}', '{{ $isDisabled ? 'true' : 'false' }}')">
                                                <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">edit</i>
                                            </button>
                                            <button class="btn btn-sm bg-gradient-danger mb-0" onclick="deleteHotspotUser('{{ addslashes($user['.id'] ?? '') }}', '{{ addslashes($user['name'] ?? '') }}')">
                                                <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">delete</i>
                                            </button>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="5" class="text-center py-4">
                                            <i class="material-symbols-rounded" style="font-size: 64px; color: #6c757d; margin-bottom: 1rem;">wifi</i>
                                            <p class="text-muted">Belum ada Hotspot users</p>
                                        </td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- Queues Tab -->
                    <div class="tab-pane fade" id="queues" role="tabpanel" aria-labelledby="queues-tab">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h6 class="mb-0 font-weight-bold" style="color: #344767;">Queue Management</h6>
                            <button type="button" class="btn btn-sm bg-gradient-primary mb-0" onclick="openQueueModal()">
                                <i class="material-symbols-rounded me-1" style="font-size: 16px; vertical-align: middle;">add</i> Tambah Queue
                            </button>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-hover align-items-center mb-0" id="queueTable">
                                <thead>
                                    <tr>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Name</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Target</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Limit At</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Max Limit</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Status</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">Comment</th>
                                        <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-center">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($queues ?? [] as $queue)
                                    <tr>
                                        <td><code class="text-xs bg-light px-2 py-1 rounded">{{ $queue['name'] ?? '-' }}</code></td>
                                        <td><span class="text-xs">{{ $queue['target'] ?? '-' }}</span></td>
                                        <td><span class="text-xs">{{ $queue['limit-at'] ?? '-' }}</span></td>
                                        <td><span class="text-xs">{{ $queue['max-limit'] ?? '-' }}</span></td>
                                        <td>
                                            @php
                                                // Di MikroTik: jika disabled tidak ada atau kosong = enabled, jika disabled = 'yes' = disabled
                                                $isQueueDisabled = isset($queue['disabled']) && $queue['disabled'] === 'yes';
                                            @endphp
                                            <span class="badge badge-sm bg-gradient-{{ !$isQueueDisabled ? 'success' : 'danger' }}">
                                                {{ !$isQueueDisabled ? 'Active' : 'Disabled' }}
                                            </span>
                                        </td>
                                        <td><span class="text-xs">{{ $queue['comment'] ?? '-' }}</span></td>
                                        <td class="text-center">
                                            <button class="btn btn-sm bg-gradient-info mb-0 me-1" onclick="editQueue('{{ addslashes($queue['.id'] ?? '') }}', '{{ addslashes($queue['name'] ?? '') }}', '{{ addslashes($queue['target'] ?? '') }}', '{{ addslashes($queue['limit-at'] ?? '') }}', '{{ addslashes($queue['max-limit'] ?? '') }}', '{{ addslashes($queue['comment'] ?? '') }}', '{{ $isQueueDisabled ? 'true' : 'false' }}')">
                                                <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">edit</i>
                                            </button>
                                            <button class="btn btn-sm bg-gradient-danger mb-0" onclick="deleteQueue('{{ addslashes($queue['.id'] ?? '') }}', '{{ addslashes($queue['name'] ?? '') }}')">
                                                <i class="material-symbols-rounded" style="font-size: 16px; vertical-align: middle;">delete</i>
                                            </button>
                                        </td>
                                    </tr>
                                    @empty
                                    <tr>
                                        <td colspan="7" class="text-center py-4">
                                            <i class="material-symbols-rounded" style="font-size: 64px; color: #6c757d; margin-bottom: 1rem;">settings</i>
                                            <p class="text-muted">Belum ada Queue rules</p>
                                        </td>
                                    </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

<!-- PPPoE User Modal -->
<div class="modal fade" id="pppoeModal" tabindex="-1" role="dialog" aria-labelledby="pppoeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="pppoeModalLabel">Tambah PPPoE User</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="pppoeForm">
                <div class="modal-body">
                    <input type="hidden" id="pppoeUserId" name="user_id">
                    <div class="form-group">
                        <label for="pppoeUsername">Username <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="pppoeUsername" name="username" required>
                    </div>
                    <div class="form-group">
                        <label for="pppoePassword">Password <span class="text-danger">*</span></label>
                        <input type="password" class="form-control" id="pppoePassword" name="password" required minlength="6">
                    </div>
                    <div class="form-group">
                        <label for="pppoeProfile">Profile <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="pppoeProfile" name="profile" required placeholder="default">
                    </div>
                    <div class="form-group">
                        <label for="pppoeComment">Comment</label>
                        <textarea class="form-control" id="pppoeComment" name="comment" rows="2"></textarea>
                    </div>
                    <div class="form-group" id="pppoeSaveToDatabaseGroup">
                        <div class="custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" id="pppoeSaveToDatabase" name="save_to_database" checked>
                            <label class="custom-control-label" for="pppoeSaveToDatabase">Simpan juga ke database pelanggan</label>
                        </div>
                        <small class="form-text text-muted">Jika dicentang, akan membuat record pelanggan baru di database</small>
                    </div>
                    <div class="form-group" id="pppoePelangganIdGroup" style="display: none;">
                        <label for="pppoePelangganId">Hubungkan dengan Pelanggan (Opsional)</label>
                        <select class="form-control" id="pppoePelangganId" name="pelanggan_id">
                            <option value="">-- Buat Pelanggan Baru --</option>
                        </select>
                        <small class="form-text text-muted">Pilih pelanggan yang sudah ada atau biarkan kosong untuk membuat baru</small>
                    </div>
                    <div class="form-group" id="pppoeDisabledGroup" style="display: none;">
                        <div class="custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" id="pppoeDisabled" name="disabled">
                            <label class="custom-control-label" for="pppoeDisabled">Disabled</label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn bg-gradient-secondary mb-0" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Hotspot User Modal -->
<div class="modal fade" id="hotspotModal" tabindex="-1" role="dialog" aria-labelledby="hotspotModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="hotspotModalLabel">Tambah Hotspot User</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="hotspotForm">
                <div class="modal-body">
                    <input type="hidden" id="hotspotUserId" name="user_id">
                    <div class="form-group">
                        <label for="hotspotUsername">Username <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="hotspotUsername" name="username" required>
                    </div>
                    <div class="form-group">
                        <label for="hotspotPassword">Password <span class="text-danger">*</span></label>
                        <input type="password" class="form-control" id="hotspotPassword" name="password" required minlength="6">
                    </div>
                    <div class="form-group">
                        <label for="hotspotProfile">Profile <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="hotspotProfile" name="profile" required placeholder="default">
                    </div>
                    <div class="form-group">
                        <label for="hotspotComment">Comment</label>
                        <textarea class="form-control" id="hotspotComment" name="comment" rows="2"></textarea>
                    </div>
                    <div class="form-group" id="hotspotDisabledGroup" style="display: none;">
                        <div class="custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" id="hotspotDisabled" name="disabled">
                            <label class="custom-control-label" for="hotspotDisabled">Disabled</label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn bg-gradient-secondary mb-0" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Queue Modal -->
<div class="modal fade" id="queueModal" tabindex="-1" role="dialog" aria-labelledby="queueModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="queueModalLabel">Tambah Queue</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="queueForm">
                <div class="modal-body">
                    <input type="hidden" id="queueId" name="queue_id">
                    <div class="form-group">
                        <label for="queueName">Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="queueName" name="name" required>
                    </div>
                    <div class="form-group">
                        <label for="queueTarget">Target <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="queueTarget" name="target" required placeholder="192.168.1.1">
                    </div>
                    <div class="form-group">
                        <label for="queueLimitAt">Limit At</label>
                        <input type="text" class="form-control" id="queueLimitAt" name="limit_at" placeholder="10M/10M">
                    </div>
                    <div class="form-group">
                        <label for="queueMaxLimit">Max Limit</label>
                        <input type="text" class="form-control" id="queueMaxLimit" name="max_limit" placeholder="20M/20M">
                    </div>
                    <div class="form-group">
                        <label for="queueComment">Comment</label>
                        <textarea class="form-control" id="queueComment" name="comment" rows="2"></textarea>
                    </div>
                    <div class="form-group" id="queueDisabledGroup" style="display: none;">
                        <div class="custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input" id="queueDisabled" name="disabled">
                            <label class="custom-control-label" for="queueDisabled">Disabled</label>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn bg-gradient-secondary mb-0" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary">Simpan</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
function testConnection() {
    const btn = event.target;
    const originalText = btn.innerHTML;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Testing...';
    btn.disabled = true;
    
    fetch('{{ route("mikrotik.test-connection") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json',
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert('success', data.message);
        } else {
            showAlert('danger', data.message);
        }
    })
    .catch(error => {
        showAlert('danger', 'Error: ' + error.message);
    })
    .finally(() => {
        btn.innerHTML = originalText;
        btn.disabled = false;
    });
}

function syncBandwidth() {
    const btn = event.target;
    const originalText = btn.innerHTML;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Syncing...';
    btn.disabled = true;
    
    fetch('{{ route("mikrotik.sync-bandwidth") }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json',
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert('success', data.message + ' (' + data.count + ' records)');
            setTimeout(() => location.reload(), 2000);
        } else {
            showAlert('danger', data.message);
        }
    })
    .catch(error => {
        showAlert('danger', 'Error: ' + error.message);
    })
    .finally(() => {
        btn.innerHTML = originalText;
        btn.disabled = false;
    });
}

function exportBandwidth() {
    window.open('{{ route("mikrotik.export-bandwidth") }}', '_blank');
}

function loadSystemInfo() {
    fetch('{{ route("mikrotik.system-info") }}')
    .then(response => response.json())
    .then(data => {
        if (data.error) {
            document.getElementById('system-info').innerHTML = 
                '<div class="alert alert-danger">' + data.error + '</div>';
        } else {
            let html = '<div class="table-responsive"><table class="table table-sm">';
            html += '<tr><td><strong>Hostname:</strong></td><td>' + data.hostname + '</td></tr>';
            html += '<tr><td><strong>Version:</strong></td><td>' + data.version + '</td></tr>';
            html += '<tr><td><strong>Uptime:</strong></td><td>' + data.uptime + '</td></tr>';
            html += '<tr><td><strong>CPU Usage:</strong></td><td>' + data.cpu_usage + '</td></tr>';
            html += '<tr><td><strong>Memory Usage:</strong></td><td>' + data.memory_usage + '</td></tr>';
            html += '<tr><td><strong>Board:</strong></td><td>' + data.board_name + '</td></tr>';
            html += '</table></div>';
            document.getElementById('system-info').innerHTML = html;
        }
    })
    .catch(error => {
        document.getElementById('system-info').innerHTML = 
            '<div class="alert alert-danger">Error loading system info</div>';
    });
}

function showAlert(type, message) {
    const alertDiv = document.createElement('div');
    alertDiv.className = 'alert alert-' + type + ' alert-dismissible fade show';
    alertDiv.innerHTML = message;
    
    const container = document.querySelector('.container-fluid');
    container.insertBefore(alertDiv, container.firstChild);
    
    setTimeout(() => {
        alertDiv.remove();
    }, 5000);
}

// Load system info on page load
document.addEventListener('DOMContentLoaded', function() {
    loadSystemInfo();
    
    // PPPoE Form Handler
    document.getElementById('pppoeForm').addEventListener('submit', function(e) {
        e.preventDefault();
        submitPppoeForm();
    });
    
    // Hotspot Form Handler
    document.getElementById('hotspotForm').addEventListener('submit', function(e) {
        e.preventDefault();
        submitHotspotForm();
    });
    
    // Queue Form Handler
    document.getElementById('queueForm').addEventListener('submit', function(e) {
        e.preventDefault();
        submitQueueForm();
    });
});

// ============================================
// PPPoE Users CRUD Functions
// ============================================

function openPppoeModal() {
    document.getElementById('pppoeModalLabel').textContent = 'Tambah PPPoE User';
    document.getElementById('pppoeForm').reset();
    document.getElementById('pppoeUserId').value = '';
    document.getElementById('pppoeUsername').readOnly = false;
    document.getElementById('pppoePassword').required = true;
    document.getElementById('pppoePassword').placeholder = '';
    document.getElementById('pppoeDisabledGroup').style.display = 'none';
    document.getElementById('pppoeSaveToDatabaseGroup').style.display = 'block';
    const saveToDbCheckbox = document.getElementById('pppoeSaveToDatabase');
    if (saveToDbCheckbox) {
        saveToDbCheckbox.checked = true;
        // Trigger change event to show pelanggan dropdown
        saveToDbCheckbox.dispatchEvent(new Event('change'));
    }
    $('#pppoeModal').modal('show');
}

// Load pelanggan options for linking
function loadPelangganOptions() {
    const select = document.getElementById('pppoePelangganId');
    if (!select) return;
    
    // Clear existing options except first
    while (select.options.length > 1) {
        select.remove(1);
    }
    
    // Fetch pelanggan list (get first 50 without PPPoE)
    fetch('{{ url("api/pelanggan/search") }}?q=', {
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Accept': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success && data.data && data.data.length > 0) {
            data.data.forEach(pelanggan => {
                // Only show pelanggan that don't have PPPoE yet
                if (!pelanggan.username_pppoe) {
                    const option = document.createElement('option');
                    option.value = pelanggan.id;
                    option.textContent = pelanggan.nama + ' (' + (pelanggan.nomor_pelanggan || 'No ID') + ')';
                    select.appendChild(option);
                }
            });
        }
    })
    .catch(error => {
        console.error('Error loading pelanggan:', error);
    });
}

// Toggle pelanggan select based on save_to_database checkbox
document.addEventListener('DOMContentLoaded', function() {
    const saveToDbCheckbox = document.getElementById('pppoeSaveToDatabase');
    const pelangganIdGroup = document.getElementById('pppoePelangganIdGroup');
    
    if (saveToDbCheckbox && pelangganIdGroup) {
        // Set initial state
        if (saveToDbCheckbox.checked) {
            pelangganIdGroup.style.display = 'block';
            loadPelangganOptions();
        } else {
            pelangganIdGroup.style.display = 'none';
        }
        
        // Listen for changes
        saveToDbCheckbox.addEventListener('change', function() {
            if (this.checked) {
                pelangganIdGroup.style.display = 'block';
                loadPelangganOptions();
            } else {
                pelangganIdGroup.style.display = 'none';
            }
        });
    }
});

function editPppoeUser(userId, username, profile, comment, disabled) {
    document.getElementById('pppoeModalLabel').textContent = 'Edit PPPoE User';
    document.getElementById('pppoeUserId').value = userId;
    document.getElementById('pppoeUsername').value = username;
    document.getElementById('pppoeUsername').readOnly = true;
    document.getElementById('pppoePassword').value = '';
    document.getElementById('pppoePassword').required = false;
    document.getElementById('pppoePassword').placeholder = 'Kosongkan jika tidak ingin mengubah';
    document.getElementById('pppoeProfile').value = profile;
    document.getElementById('pppoeComment').value = comment || '';
    document.getElementById('pppoeDisabled').checked = disabled === 'true';
    document.getElementById('pppoeDisabledGroup').style.display = 'block';
    document.getElementById('pppoeSaveToDatabaseGroup').style.display = 'none';
    document.getElementById('pppoePelangganIdGroup').style.display = 'none';
    $('#pppoeModal').modal('show');
}

function submitPppoeForm() {
    const formData = new FormData(document.getElementById('pppoeForm'));
    const userId = formData.get('user_id');
    const data = {
        username: formData.get('username'),
        password: formData.get('password'),
        profile: formData.get('profile'),
        comment: formData.get('comment')
    };
    
    if (userId) {
        // Update
        if (!data.password) {
            delete data.password;
        }
        data.disabled = document.getElementById('pppoeDisabled').checked;
        
        fetch(`{{ url('mikrotik/pppoe-user') }}/${userId}`, {
            method: 'PUT',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert('success', data.message);
                $('#pppoeModal').modal('hide');
                setTimeout(() => location.reload(), 1500);
            } else {
                showAlert('danger', data.message);
            }
        })
        .catch(error => {
            showAlert('danger', 'Error: ' + error.message);
        });
    } else {
        // Create - Add save_to_database and pelanggan_id
        const saveToDb = document.getElementById('pppoeSaveToDatabase');
        if (saveToDb && saveToDb.checked) {
            data.save_to_database = true;
            const pelangganId = document.getElementById('pppoePelangganId').value;
            if (pelangganId) {
                data.pelanggan_id = pelangganId;
            }
        } else {
            data.save_to_database = false;
        }
        
        fetch('{{ url("mikrotik/pppoe-user") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(data)
        })
        .then(response => {
            console.log('Response status:', response.status);
            if (!response.ok) {
                return response.json().then(err => {
                    console.error('Server error response:', err);
                    throw new Error(err.message || 'Server error');
                });
            }
            return response.json();
        })
        .then(data => {
            console.log('Server response data:', data);
            if (data.success) {
                showAlert('success', data.message);
                $('#pppoeModal').modal('hide');
                // Wait a bit longer to ensure MikroTik has processed the user
                console.log('Reloading page in 2 seconds...');
                setTimeout(() => {
                    console.log('Reloading page now...');
                    location.reload();
                }, 2000);
            } else {
                console.error('Server returned success=false:', data);
                showAlert('danger', data.message || 'Gagal membuat user');
            }
        })
        .catch(error => {
            console.error('Error creating PPPoE user:', error);
            showAlert('danger', 'Error: ' + error.message);
        });
    }
}

function deletePppoeUser(userId, username) {
    if (!confirm(`Apakah Anda yakin ingin menghapus user "${username}"?`)) {
        return;
    }
    
    fetch(`{{ url('mikrotik/pppoe-user') }}/${userId}`, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json',
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert('success', data.message);
            setTimeout(() => location.reload(), 1500);
        } else {
            showAlert('danger', data.message);
        }
    })
    .catch(error => {
        showAlert('danger', 'Error: ' + error.message);
    });
}

// ============================================
// Hotspot Users CRUD Functions
// ============================================

function openHotspotModal() {
    document.getElementById('hotspotModalLabel').textContent = 'Tambah Hotspot User';
    document.getElementById('hotspotForm').reset();
    document.getElementById('hotspotUserId').value = '';
    document.getElementById('hotspotUsername').readOnly = false;
    document.getElementById('hotspotPassword').required = true;
    document.getElementById('hotspotPassword').placeholder = '';
    document.getElementById('hotspotDisabledGroup').style.display = 'none';
    $('#hotspotModal').modal('show');
}

function editHotspotUser(userId, username, profile, comment, disabled) {
    document.getElementById('hotspotModalLabel').textContent = 'Edit Hotspot User';
    document.getElementById('hotspotUserId').value = userId;
    document.getElementById('hotspotUsername').value = username;
    document.getElementById('hotspotUsername').readOnly = true;
    document.getElementById('hotspotPassword').value = '';
    document.getElementById('hotspotPassword').required = false;
    document.getElementById('hotspotPassword').placeholder = 'Kosongkan jika tidak ingin mengubah';
    document.getElementById('hotspotProfile').value = profile;
    document.getElementById('hotspotComment').value = comment || '';
    document.getElementById('hotspotDisabled').checked = disabled === 'true';
    document.getElementById('hotspotDisabledGroup').style.display = 'block';
    $('#hotspotModal').modal('show');
}

function submitHotspotForm() {
    const formData = new FormData(document.getElementById('hotspotForm'));
    const userId = formData.get('user_id');
    const data = {
        username: formData.get('username'),
        password: formData.get('password'),
        profile: formData.get('profile'),
        comment: formData.get('comment')
    };
    
    if (userId) {
        // Update
        if (!data.password) {
            delete data.password;
        }
        data.disabled = document.getElementById('hotspotDisabled').checked;
        
        fetch(`{{ url('mikrotik/hotspot-user') }}/${userId}`, {
            method: 'PUT',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert('success', data.message);
                $('#hotspotModal').modal('hide');
                setTimeout(() => location.reload(), 1500);
            } else {
                showAlert('danger', data.message);
            }
        })
        .catch(error => {
            showAlert('danger', 'Error: ' + error.message);
        });
    } else {
        // Create
        fetch('{{ url("mikrotik/hotspot-user") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert('success', data.message);
                $('#hotspotModal').modal('hide');
                setTimeout(() => location.reload(), 1500);
            } else {
                showAlert('danger', data.message);
            }
        })
        .catch(error => {
            showAlert('danger', 'Error: ' + error.message);
        });
    }
}

function deleteHotspotUser(userId, username) {
    if (!confirm(`Apakah Anda yakin ingin menghapus user "${username}"?`)) {
        return;
    }
    
    fetch(`{{ url('mikrotik/hotspot-user') }}/${userId}`, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json',
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert('success', data.message);
            setTimeout(() => location.reload(), 1500);
        } else {
            showAlert('danger', data.message);
        }
    })
    .catch(error => {
        showAlert('danger', 'Error: ' + error.message);
    });
}

// ============================================
// Queue CRUD Functions
// ============================================

function openQueueModal() {
    document.getElementById('queueModalLabel').textContent = 'Tambah Queue';
    document.getElementById('queueForm').reset();
    document.getElementById('queueId').value = '';
    document.getElementById('queueDisabledGroup').style.display = 'none';
    $('#queueModal').modal('show');
}

function editQueue(queueId, name, target, limitAt, maxLimit, comment, disabled) {
    document.getElementById('queueModalLabel').textContent = 'Edit Queue';
    document.getElementById('queueId').value = queueId;
    document.getElementById('queueName').value = name;
    document.getElementById('queueTarget').value = target;
    document.getElementById('queueLimitAt').value = limitAt || '';
    document.getElementById('queueMaxLimit').value = maxLimit || '';
    document.getElementById('queueComment').value = comment || '';
    document.getElementById('queueDisabled').checked = disabled === 'true';
    document.getElementById('queueDisabledGroup').style.display = 'block';
    $('#queueModal').modal('show');
}

function submitQueueForm() {
    const formData = new FormData(document.getElementById('queueForm'));
    const queueId = formData.get('queue_id');
    const data = {
        name: formData.get('name'),
        target: formData.get('target'),
        limit_at: formData.get('limit_at') || null,
        max_limit: formData.get('max_limit') || null,
        comment: formData.get('comment') || null
    };
    
    if (queueId) {
        // Update
        data.disabled = document.getElementById('queueDisabled').checked;
        
        fetch(`{{ url('mikrotik/queue') }}/${queueId}`, {
            method: 'PUT',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert('success', data.message);
                $('#queueModal').modal('hide');
                setTimeout(() => location.reload(), 1500);
            } else {
                showAlert('danger', data.message);
            }
        })
        .catch(error => {
            showAlert('danger', 'Error: ' + error.message);
        });
    } else {
        // Create
        fetch('{{ url("mikrotik/queue") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert('success', data.message);
                $('#queueModal').modal('hide');
                setTimeout(() => location.reload(), 1500);
            } else {
                showAlert('danger', data.message);
            }
        })
        .catch(error => {
            showAlert('danger', 'Error: ' + error.message);
        });
    }
}

function deleteQueue(queueId, name) {
    if (!confirm(`Apakah Anda yakin ingin menghapus queue "${name}"?`)) {
        return;
    }
    
    fetch(`{{ url('mikrotik/queue') }}/${queueId}`, {
        method: 'DELETE',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
            'Content-Type': 'application/json',
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert('success', data.message);
            setTimeout(() => location.reload(), 1500);
        } else {
            showAlert('danger', data.message);
        }
    })
    .catch(error => {
        showAlert('danger', 'Error: ' + error.message);
    });
}
</script>
@endsection