@extends('layouts.app')
@section('title', 'Daftar Font Awesome')
@section('page_title', 'Tabel Icon')

@section('content')
<div class="container py-6">
    <h2 class="text-2xl font-bold mb-4">Daftar Icon Font Awesome</h2>

    <input type="text" id="search" placeholder="Cari icon..." 
           class="form-control mb-4" onkeyup="filterIcons()">

    <table class="table table-bordered text-center" id="iconTable">
        <thead>
            <tr>
                <th>Preview</th>
                <th>Class</th>
                <th>Copy</th>
            </tr>
        </thead>
        <tbody>
            @php
                $icons = [
                    // Navigasi
                    'fa-solid fa-arrow-left',   // kembali
                    'fa-solid fa-arrow-right',  // next
                    'fa-solid fa-arrow-up',
                    'fa-solid fa-arrow-down',
                    'fa-solid fa-rotate-left',  // undo
                    'fa-solid fa-rotate-right', // redo

                    // Menu utama
                    'fa-solid fa-gauge',        // dashboard
                    'fa-solid fa-home',         // home
                    'fa-solid fa-table',        // table
                    'fa-solid fa-chart-line',   // laporan
                    'fa-solid fa-cog',          // setting
                    'fa-solid fa-gear',         // gear alt
                    'fa-solid fa-database',     // database
                    'fa-solid fa-box',          // produk/kemasan

                    // Aksi umum
                    'fa-solid fa-plus',         // tambah
                    'fa-solid fa-pen',          // edit
                    'fa-solid fa-trash',        // hapus
                    'fa-solid fa-eye',          // lihat
                    'fa-solid fa-download',     // download
                    'fa-solid fa-upload',       // upload
                    'fa-solid fa-print',        // cetak
                    'fa-solid fa-search',       // cari
                    'fa-solid fa-filter',       // filter
                    'fa-solid fa-save',         // simpan

                    // User
                    'fa-solid fa-user',
                    'fa-solid fa-users',
                    'fa-solid fa-user-plus',
                    'fa-solid fa-user-gear',
                    'fa-solid fa-user-lock',

                    // Session
                    'fa-solid fa-right-to-bracket', // login
                    'fa-solid fa-right-from-bracket', // logout
                    'fa-solid fa-key',               // password
                    'fa-solid fa-lock',
                    'fa-solid fa-unlock',

                    // Pesan & notifikasi
                    'fa-solid fa-envelope',
                    'fa-solid fa-bell',
                    'fa-solid fa-comment',
                    'fa-solid fa-message',

                    // Dokumen
                    'fa-solid fa-file',
                    'fa-solid fa-file-alt',
                    'fa-solid fa-file-pdf',
                    'fa-solid fa-file-excel',
                    'fa-solid fa-file-word',
                ];
            @endphp

            @foreach($icons as $icon)
            <tr>
                <td><i class="{{ $icon }} text-xl"></i></td>
                <td><code>{{ $icon }}</code></td>
                <td>
                    <button class="btn btn-sm btn-primary" onclick="copyToClipboard('{{ $icon }}')">
                        Salin
                    </button>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>

<script>
function copyToClipboard(text) {
    navigator.clipboard.writeText(text);
    alert('Class "' + text + '" berhasil disalin!');
}

function filterIcons() {
    let input = document.getElementById("search").value.toLowerCase();
    let rows = document.querySelectorAll("#iconTable tbody tr");
    rows.forEach(row => {
        let text = row.innerText.toLowerCase();
        row.style.display = text.includes(input) ? "" : "none";
    });
}
</script>
@endsection