@extends('layouts.app')


@section('content')
<!-- 自訂 navbar，若全域 layout 中沒有可覆寫 -->

<div class="container my-4">
    <h1 class="mb-4">VPN 帳號同步管理</h1>
    
    <!-- 上方卡片：本地資料庫 VPN 帳號 -->
    <div class="card custom-card mb-4">
        <div class="card-header">
            本地資料庫 VPN 帳號
        </div>
        <div class="card-body">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="card-title mb-0">管理資料</h5>
                <!-- 新增帳號按鈕 -->
                <a href="{{ route('vpn-accounts.create') }}" class="btn btn-primary">新增帳號</a>
            </div>
            
            @if($accounts->isEmpty())
                <p class="text-center">目前尚未建立任何帳號。</p>
            @else
                <table id="localAccountsTable" class="table table-striped table-bordered nowrap" style="width:100%">
                    <thead>
                        <tr>
                            <th>序號</th>
                            <th>帳號</th>
                            <th>建立時間</th>
                            <th>狀態</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($accounts as $account)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td>{{ $account->username }}</td>
                            <td>{{ $account->created_at->format('Y-m-d H:i:s') }}</td>
                            <td>{{ $account->status }}</td>
                            <td>
                                <a href="{{ route('vpn-accounts.edit', $account) }}" class="btn btn-sm btn-info">編輯</a>
                                @if($account->status === 'active')
                                <form action="{{ route('vpn-accounts.disable', $account) }}" method="POST" style="display:inline-block;">
                                    @csrf
                                    @method('PATCH')
                                    <button type="submit" class="btn btn-sm btn-warning" onclick="return confirm('確定停用嗎?')">停用</button>
                                </form>
                                @endif
                                <form action="{{ route('vpn-accounts.destroy', $account) }}" method="POST" style="display:inline-block;">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('確定刪除嗎?')">刪除</button>
                                </form>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            @endif

            <!-- 同步按鈕：同步本地資料到 FortiGate -->
            <div class="text-end mt-3">
                <a href="{{ route('vpn-accounts.sync') }}" class="btn btn-success">同步本地資料到 FortiGate</a>
            </div>
        </div>
    </div>
    
    <!-- 下方卡片：FortiGate 上的 VPN 帳號清單 -->
    <div class="card custom-card">
        <div class="card-header">
            FortiGate 上的 VPN 帳號清單
        </div>
        <div class="card-body">
            @if(is_string($fortigateUsers))
                <div class="alert alert-danger">
                    {{ $fortigateUsers }}
                </div>
            @else
                @php
                    // 如果 API 回傳資料包含 "results"，則取之；否則直接使用回傳的陣列
                    $fgUsers = isset($fortigateUsers['results']) ? $fortigateUsers['results'] : $fortigateUsers;
                @endphp
                @if(empty($fgUsers))
                    <p class="text-center">FortiGate 上目前沒有任何 VPN 帳號資料。</p>
                @else
                    <table id="fgAccountsTable" class="table table-striped table-bordered nowrap" style="width:100%">
                        <thead>
                            <tr>
                                <th>序號</th>
                                <th>帳號名稱</th>
                                <th>狀態</th>
                                <th>密碼時間</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($fgUsers as $index => $user)
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td>{{ $user['name'] ?? 'N/A' }}</td>
                                <td>{{ $user['status'] ?? 'N/A' }}</td>
                                <td>{{ $user['passwd-time'] ?? 'N/A' }}</td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                @endif
            @endif
        </div>
    </div>
</div>
@endsection

@section('scripts')
<!-- jQuery (若全域版型已引入可省略) -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<!-- DataTables JS 與 Bootstrap 5 整合 -->
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.4/js/dataTables.bootstrap5.min.js"></script>
<script>
$(document).ready(function() {
    $('#localAccountsTable').DataTable({
        responsive: true,
        language: {
            url: 'https://cdn.datatables.net/plug-ins/1.13.4/i18n/Chinese-traditional.json'
        }
    });
    $('#fgAccountsTable').DataTable({
        responsive: true,
        language: {
            url: 'https://cdn.datatables.net/plug-ins/1.13.4/i18n/Chinese-traditional.json'
        }
    });
});
</script>
@endsection