    <div class="row">
        <div class="col-12">
            <pre class="with-hljs"><code class="lang-php">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Tools Editor&lt;/title&gt;
    &lt;?php include &quot;data/styles.php&quot;?&gt;
    &lt;style&gt;
        @keyframes fade-in {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .animate-fade-in { animation: fade-in 0.6s ease-out both; }

        input, select, textarea, .tool-item, .advanced-fields, button {
            transition: all 0.15s ease;
        }
        .toggle-advanced:hover, .tool-delete:hover {
            background-color: #e5e7eb;
        }
        @media (max-width: 640px) {
            .category-item .delete-container {
                position: absolute;
                top: 0;
                right: 0;
            }
            .advanced-fields textarea {
                width: 100%;
                margin-top: 0.5rem;
            }
            .advanced-fields {
                flex-direction: column;
            }
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body class=&quot;bg-gray-100 min-h-screen&quot;&gt;
    &lt;div class=&quot;max-w-4xl mx-auto p-6&quot;&gt;
        &lt;div class=&quot;bg-white rounded-2xl shadow-lg p-6 animate-fade-in&quot;&gt;

            &lt;div class=&quot;flex items-center justify-between mb-3&quot;&gt;
                &lt;div class=&quot;flex items-center gap-2&quot;&gt;
                    &lt;i data-lucide=&quot;box&quot; class=&quot;w-6 h-6 text-indigo-600&quot;&gt;&lt;/i&gt;
                    &lt;h1 class=&quot;text-2xl font-semibold text-gray-800&quot;&gt;Tools List Editor&lt;/h1&gt;
                &lt;/div&gt;
                &lt;label class=&quot;inline-flex items-center cursor-pointer&quot;&gt;
                    &lt;input type=&quot;checkbox&quot; id=&quot;toggle-all-advanced&quot; class=&quot;sr-only peer&quot;&gt;
                    &lt;div class=&quot;relative w-9 h-4 bg-gray-200 rounded-full peer peer-checked:bg-indigo-600 peer-checked:after:translate-x-[20px] after:content-[&#039;&#039;] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-3 after:w-3 after:transition-all&quot;&gt;&lt;/div&gt;
                    &lt;span class=&quot;ml-2 text-sm font-medium text-gray-600&quot;&gt;More&lt;/span&gt;
                &lt;/label&gt;
            &lt;/div&gt;

            &lt;?php
            require_once &#039;../config.php&#039;;
            
            // Load tools data with a fallback
            $tools_data = [&#039;categories&#039; =&gt; [[&#039;name&#039; =&gt; &#039;None&#039;, &#039;desc&#039; =&gt; &#039;&#039;]], &#039;tools&#039; =&gt; []];
            if (file_exists(&#039;../inc/data.tools.php&#039;)) {
                $tools_data = include &#039;../inc/data.tools.php&#039;;
            }
            
            // Ensure categories is an array of arrays with name and desc
            if (!is_array($tools_data[&#039;categories&#039;]) || empty($tools_data[&#039;categories&#039;])) {
                $tools_data[&#039;categories&#039;] = [[&#039;name&#039; =&gt; &#039;None&#039;, &#039;desc&#039; =&gt; &#039;&#039;]];
            }
            
            // Scan tools directory
            $tools_dir = __DIR__ . &#039;/../tools/&#039;;
            $tool_files = glob($tools_dir . &#039;*.php&#039;);
            $tool_files = array_map(&#039;basename&#039;, $tool_files);
            
            $success = false;
            $error = &#039;&#039;;
            
            // Handle ?update query parameter
            if (isset($_GET[&#039;update&#039;])) {
                $existing_files = array_column($tools_data[&#039;tools&#039;], &#039;file&#039;);
                $new_tools = $tools_data[&#039;tools&#039;];
                $added_tools = [];
                
                foreach ($tool_files as $file) {
                    if (!in_array($file, $existing_files)) {
                        $tool_name = str_replace(&#039;.php&#039;, &#039;&#039;, $file);
                        $tool_name = str_replace(&#039;-&#039;, &#039; &#039;, ucwords($tool_name));
                        $new_tools[] = [
                            &#039;name&#039; =&gt; $tool_name,
                            &#039;desc&#039; =&gt; &#039;Boost productivity instantly with powerful &#039; . $tool_name,
                            &#039;icon&#039; =&gt; &#039;tool&#039;,
                            &#039;badge&#039; =&gt; &#039;New&#039;,
                            &#039;category&#039; =&gt; &#039;None&#039;,
                            &#039;file&#039; =&gt; $file,
                            &#039;custom_url&#039; =&gt; &#039;&#039;
                        ];
                        $added_tools[] = $tool_name;
                    }
                }
                
                if (!empty($added_tools)) {
                    // Update data.tools.php
                    $content = &quot;&lt;?php\nreturn [\n&quot;;
                    $content .= &quot;    &#039;categories&#039; =&gt; [\n&quot;;
                    foreach ($tools_data[&#039;categories&#039;] as $category) {
                        $content .= &quot;        [\n&quot;;
                        $content .= &quot;            &#039;name&#039; =&gt; &#039;&quot; . addslashes($category[&#039;name&#039;]) . &quot;&#039;,\n&quot;;
                        $content .= &quot;            &#039;desc&#039; =&gt; &#039;&quot; . addslashes($category[&#039;desc&#039;]) . &quot;&#039;,\n&quot;;
                        $content .= &quot;        ],\n&quot;;
                    }
                    $content .= &quot;    ],\n&quot;;
                    $content .= &quot;    &#039;tools&#039; =&gt; [\n&quot;;
                    foreach ($new_tools as $tool) {
                        $content .= &quot;        [\n&quot;;
                        $content .= &quot;            &#039;name&#039; =&gt; &#039;&quot; . addslashes($tool[&#039;name&#039;]) . &quot;&#039;,\n&quot;;
                        $content .= &quot;            &#039;desc&#039; =&gt; &#039;&quot; . addslashes($tool[&#039;desc&#039;]) . &quot;&#039;,\n&quot;;
                        $content .= &quot;            &#039;icon&#039; =&gt; &#039;&quot; . addslashes($tool[&#039;icon&#039;]) . &quot;&#039;,\n&quot;;
                        $content .= &quot;            &#039;badge&#039; =&gt; &#039;&quot; . addslashes($tool[&#039;badge&#039;]) . &quot;&#039;,\n&quot;;
                        $content .= &quot;            &#039;category&#039; =&gt; &#039;&quot; . addslashes($tool[&#039;category&#039;]) . &quot;&#039;,\n&quot;;
                        $content .= &quot;            &#039;file&#039; =&gt; &#039;&quot; . addslashes($tool[&#039;file&#039;]) . &quot;&#039;,\n&quot;;
                        $content .= &quot;            &#039;custom_url&#039; =&gt; &#039;&quot; . addslashes($tool[&#039;custom_url&#039;]) . &quot;&#039;,\n&quot;;
                        $content .= &quot;        ],\n&quot;;
                    }
                    $content .= &quot;    ],\n&quot;;
                    $content .= &quot;];\n&quot;;
                    
                    if (file_put_contents(&#039;../inc/data.tools.php&#039;, $content)) {
                        $success = true;
                        $tools_data[&#039;tools&#039;] = $new_tools;
                        $success_message = &#039;New tools added: &#039; . implode(&#039;, &#039;, $added_tools);
                    } else {
                        $error = &#039;Failed to update tools data. Check file permissions.&#039;;
                    }
                } else {
                    $success = true;
                    $success_message = &#039;No new tools found to add.&#039;;
                }
            }
            
            // Handle POST request
            if ($_SERVER[&#039;REQUEST_METHOD&#039;] === &#039;POST&#039;) {
                $posted_categories = $_POST[&#039;categories&#039;] ?? [];
                $new_categories = [];
                foreach ($posted_categories as $cat) {
                    if (!empty($cat[&#039;name&#039;]) || $cat[&#039;name&#039;] === &#039;None&#039;) {
                        $new_categories[] = [
                            &#039;name&#039; =&gt; $cat[&#039;name&#039;] ?? &#039;None&#039;,
                            &#039;desc&#039; =&gt; $cat[&#039;desc&#039;] ?? &#039;&#039;
                        ];
                    }
                }
                if (empty($new_categories)) {
                    $new_categories = [[&#039;name&#039; =&gt; &#039;None&#039;, &#039;desc&#039; =&gt; &#039;&#039;]];
                }
                
                $posted_tools = $_POST[&#039;tools&#039;] ?? [];
                $new_tools = [];
                $valid_category_names = array_column($new_categories, &#039;name&#039;);
                $skipped_tools = [];
                
                foreach ($posted_tools as $index =&gt; $tool) {
                    if (!empty($tool[&#039;name&#039;]) &amp;&amp; !empty($tool[&#039;desc&#039;])) {
                        $new_tools[] = [
                            &#039;name&#039; =&gt; $tool[&#039;name&#039;],
                            &#039;desc&#039; =&gt; $tool[&#039;desc&#039;],
                            &#039;icon&#039; =&gt; $tool[&#039;icon&#039;] ?? &#039;tool&#039;,
                            &#039;badge&#039; =&gt; $tool[&#039;badge&#039;] ?? &#039;&#039;,
                            &#039;category&#039; =&gt; in_array($tool[&#039;category&#039;] ?? &#039;None&#039;, $valid_category_names) ? $tool[&#039;category&#039;] : &#039;None&#039;,
                            &#039;file&#039; =&gt; $tool[&#039;link_type&#039;] === &#039;file&#039; ? ($tool[&#039;file&#039;] ?? &#039;&#039;) : &#039;&#039;,
                            &#039;custom_url&#039; =&gt; $tool[&#039;link_type&#039;] === &#039;custom&#039; ? ($tool[&#039;custom_url&#039;] ?? &#039;&#039;) : &#039;&#039;
                        ];
                    } else {
                        $skipped_tools[] = &quot;Tool at index $index (Name: &quot; . ($tool[&#039;name&#039;] ?? &#039;empty&#039;) . &quot;, Desc: &quot; . ($tool[&#039;desc&#039;] ?? &#039;empty&#039;) . &quot;)&quot;;
                    }
                }
                
                // Beautify the array output
                $content = &quot;&lt;?php\nreturn [\n&quot;;
                $content .= &quot;    &#039;categories&#039; =&gt; [\n&quot;;
                foreach ($new_categories as $category) {
                    $content .= &quot;        [\n&quot;;
                    $content .= &quot;            &#039;name&#039; =&gt; &#039;&quot; . addslashes($category[&#039;name&#039;]) . &quot;&#039;,\n&quot;;
                    $content .= &quot;            &#039;desc&#039; =&gt; &#039;&quot; . addslashes($category[&#039;desc&#039;]) . &quot;&#039;,\n&quot;;
                    $content .= &quot;        ],\n&quot;;
                }
                $content .= &quot;    ],\n&quot;;
                $content .= &quot;    &#039;tools&#039; =&gt; [\n&quot;;
                foreach ($new_tools as $tool) {
                    $content .= &quot;        [\n&quot;;
                    $content .= &quot;            &#039;name&#039; =&gt; &#039;&quot; . addslashes($tool[&#039;name&#039;]) . &quot;&#039;,\n&quot;;
                    $content .= &quot;            &#039;desc&#039; =&gt; &#039;&quot; . addslashes($tool[&#039;desc&#039;]) . &quot;&#039;,\n&quot;;
                    $content .= &quot;            &#039;icon&#039; =&gt; &#039;&quot; . addslashes($tool[&#039;icon&#039;]) . &quot;&#039;,\n&quot;;
                    $content .= &quot;            &#039;badge&#039; =&gt; &#039;&quot; . addslashes($tool[&#039;badge&#039;]) . &quot;&#039;,\n&quot;;
                    $content .= &quot;            &#039;category&#039; =&gt; &#039;&quot; . addslashes($tool[&#039;category&#039;]) . &quot;&#039;,\n&quot;;
                    $content .= &quot;            &#039;file&#039; =&gt; &#039;&quot; . addslashes($tool[&#039;file&#039;]) . &quot;&#039;,\n&quot;;
                    $content .= &quot;            &#039;custom_url&#039; =&gt; &#039;&quot; . addslashes($tool[&#039;custom_url&#039;]) . &quot;&#039;,\n&quot;;
                    $content .= &quot;        ],\n&quot;;
                }
                $content .= &quot;    ],\n&quot;;
                $content .= &quot;];\n&quot;;
                
                if (file_put_contents(&#039;../inc/data.tools.php&#039;, $content)) {
                    $success = true;
                    $tools_data = [&#039;categories&#039; =&gt; $new_categories, &#039;tools&#039; =&gt; $new_tools];
                    $success_message = &#039;Tools saved successfully!&#039;;
                    if (!empty($skipped_tools)) {
                        $error = &#039;Some tools were not saved due to missing name or description: &#039; . implode(&#039;; &#039;, $skipped_tools);
                    }
                } else {
                    $error = &#039;Failed to save tools data. Check file permissions.&#039;;
                }
            }
            ?&gt;

            &lt;?php if ($success): ?&gt;
                &lt;div class=&quot;mb-4 p-3 bg-emerald-100 text-emerald-700 rounded-md flex items-center gap-2 text-sm&quot;&gt;
                    &lt;i data-lucide=&quot;check-circle&quot; class=&quot;w-4 h-4&quot;&gt;&lt;/i&gt;
                    &lt;?php echo htmlspecialchars($success_message ?? &#039;Tools saved successfully!&#039;); ?&gt;
                &lt;/div&gt;
            &lt;?php endif; ?&gt;

            &lt;?php if ($error): ?&gt;
                &lt;div class=&quot;mb-4 p-3 bg-red-100 text-red-700 rounded-md flex items-center gap-2 text-sm&quot;&gt;
                    &lt;i data-lucide=&quot;alert-circle&quot; class=&quot;w-4 h-4&quot;&gt;&lt;/i&gt;
                    &lt;?php echo htmlspecialchars($error); ?&gt;
                &lt;/div&gt;
            &lt;?php endif; ?&gt;

            &lt;form method=&quot;POST&quot; class=&quot;space-y-4&quot; onsubmit=&quot;return validateForm()&quot;&gt;
                &lt;!-- Tools Section --&gt;
                &lt;div class=&quot;pt-4&quot;&gt;
                    &lt;div id=&quot;categories-container&quot; class=&quot;space-y-4&quot;&gt;
                        &lt;?php foreach ($tools_data[&#039;categories&#039;] as $cat_index =&gt; $category): ?&gt;
                            &lt;div class=&quot;category-item border-gray-200 pt-5 pb-10 relative&quot; data-category-name=&quot;&lt;?php echo htmlspecialchars($category[&#039;name&#039;]); ?&gt;&quot;&gt;
                                &lt;div class=&quot;flex flex-col sm:flex-row gap-2 mb-8 max-w-3xl m-auto&quot;&gt;
                                    &lt;label class=&quot;block text-sm mt-1 font-medium text-gray-400&quot;&gt;Category:&lt;/label&gt;
                                    &lt;div class=&quot;flex-2&quot;&gt;
                                        &lt;label class=&quot;block text-sm mb-2 font-medium text-gray-400 sr-only&quot;&gt;Category Name&lt;/label&gt;
                                        &lt;input type=&quot;text&quot; name=&quot;categories[&lt;?php echo $cat_index; ?&gt;][name]&quot; value=&quot;&lt;?php echo htmlspecialchars($category[&#039;name&#039;]); ?&gt;&quot; placeholder=&quot;Category Name&quot; class=&quot;w-full p-1.5 bg-blue-50 text-blue-600 rounded-md focus:ring-1 focus:ring-indigo-500 text-sm font-semibold&quot;&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;flex-1&quot;&gt;
                                        &lt;label class=&quot;block text-sm mb-2 font-medium text-gray-400 sr-only&quot;&gt;Category Description&lt;/label&gt;
                                        &lt;input type=&quot;text&quot; name=&quot;categories[&lt;?php echo $cat_index; ?&gt;][desc]&quot; value=&quot;&lt;?php echo htmlspecialchars($category[&#039;desc&#039;]); ?&gt;&quot; placeholder=&quot;Category Description&quot; class=&quot;w-full p-1.5 border border-gray-200 rounded-lg focus:shadow-sm text-sm font-medium text-gray-600&quot;&gt;
                                    &lt;/div&gt;
                                    &lt;div class=&quot;delete-container flex items-end sm:items-center&quot;&gt;
                                        &lt;button type=&quot;button&quot; onclick=&quot;this.closest(&#039;.category-item&#039;).remove(); updateCategoryOptions();&quot; class=&quot;p-2 text-red-600 hover:text-red-800&quot;&gt;
                                            &lt;i data-lucide=&quot;trash-2&quot; class=&quot;w-5 h-5&quot;&gt;&lt;/i&gt;
                                        &lt;/button&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                                &lt;div class=&quot;tools-items space-y-3 pl-3&quot;&gt;
                                    &lt;?php foreach ($tools_data[&#039;tools&#039;] as $tool_index =&gt; $tool): ?&gt;
                                        &lt;?php if ($tool[&#039;category&#039;] === $category[&#039;name&#039;]): ?&gt;
                                            &lt;div class=&quot;tool-item relative p-3 rounded-md transition-all&quot;&gt;
                                                &lt;div class=&quot;absolute top-4 -left-5 sm:left-4 flex flex-col gap-1&quot;&gt;
                                                    &lt;span class=&quot;w-6 h-6 bg-red-600 text-white rounded-full shadow flex items-center justify-center text-sm font-semibold&quot;&gt;&lt;?php echo $tool_index + 1; ?&gt;&lt;/span&gt;
                                                    &lt;button type=&quot;button&quot; class=&quot;tool-delete bg-gray-100 rounded-full p-1 text-gray-600 hover:text-gray-800 hidden&quot; onclick=&quot;this.closest(&#039;.tool-item&#039;).remove()&quot;&gt;
                                                        &lt;i data-lucide=&quot;trash-2&quot; class=&quot;w-4 h-4&quot;&gt;&lt;/i&gt;
                                                    &lt;/button&gt;
                                                    &lt;button type=&quot;button&quot; class=&quot;toggle-advanced bg-gray-100 rounded-full p-1 text-gray-600 hover:text-gray-800&quot; data-tool-index=&quot;&lt;?php echo $tool_index; ?&gt;&quot;&gt;
                                                        &lt;i data-lucide=&quot;chevron-down&quot; class=&quot;w-4 h-4&quot;&gt;&lt;/i&gt;
                                                    &lt;/button&gt;
                                                &lt;/div&gt;
                                                &lt;div class=&quot;flex flex-col gap-2 max-w-2xl m-auto&quot;&gt;
                                                    &lt;!-- Name, Category, and Badge --&gt;
                                                    &lt;div class=&quot;flex flex-col sm:flex-row gap-2&quot;&gt;
                                                        &lt;div class=&quot;flex-1&quot;&gt;
                                                            &lt;label class=&quot;block text-xs mb-1 font-medium text-gray-400 sr-onlyx&quot;&gt;Tool Name&lt;/label&gt;
                                                            &lt;input type=&quot;text&quot; name=&quot;tools[&lt;?php echo $tool_index; ?&gt;][name]&quot; value=&quot;&lt;?php echo htmlspecialchars($tool[&#039;name&#039;] ?? &#039;&#039;); ?&gt;&quot; placeholder=&quot;Tool Name&quot; class=&quot;w-full p-1.5 border border-gray-200 rounded-lg focus:shadow-sm text-sm&quot;&gt;
                                                        &lt;/div&gt;
                                                        &lt;div class=&quot;flex flex-row gap-2 sm:flex-row&quot;&gt;
                                                            &lt;div class=&quot;w-1/2 sm:w-1/2&quot;&gt;
                                                                &lt;label class=&quot;block text-xs mb-1 font-medium text-gray-400 sr-onlyx&quot;&gt;Category&lt;/label&gt;
                                                                &lt;select name=&quot;tools[&lt;?php echo $tool_index; ?&gt;][category]&quot; class=&quot;w-full p-2 bg-gray-50 rounded-lg text-gray-700 cursor-pointer rounded-md hover:bg-gray-100 text-sm&quot;&gt;
                                                                    &lt;?php foreach ($tools_data[&#039;categories&#039;] as $cat): ?&gt;
                                                                        &lt;option value=&quot;&lt;?php echo htmlspecialchars($cat[&#039;name&#039;]); ?&gt;&quot; &lt;?php echo $tool[&#039;category&#039;] === $cat[&#039;name&#039;] ? &#039;selected&#039; : &#039;&#039;; ?&gt;&gt;&lt;?php echo htmlspecialchars($cat[&#039;name&#039;]); ?&gt;&lt;/option&gt;
                                                                    &lt;?php endforeach; ?&gt;
                                                                &lt;/select&gt;
                                                            &lt;/div&gt;
                                                            &lt;div class=&quot;w-1/2 sm:w-1/2&quot;&gt;
                                                                &lt;label class=&quot;block text-xs mb-1 font-medium text-gray-400 sr-onlyx&quot;&gt;Badge&lt;/label&gt;
                                                                &lt;select name=&quot;tools[&lt;?php echo $tool_index; ?&gt;][badge]&quot; class=&quot;w-full p-2 bg-gray-50 rounded-lg text-gray-700 cursor-pointer rounded-md hover:bg-gray-100 text-sm&quot;&gt;
                                                                    &lt;option value=&quot;&quot; &lt;?php echo $tool[&#039;badge&#039;] === &#039;&#039; ? &#039;selected&#039; : &#039;&#039;; ?&gt;&gt;None&lt;/option&gt;
                                                                    &lt;option value=&quot;New&quot; &lt;?php echo $tool[&#039;badge&#039;] === &#039;New&#039; ? &#039;selected&#039; : &#039;&#039;; ?&gt;&gt;New&lt;/option&gt;
                                                                    &lt;option value=&quot;Pro&quot; &lt;?php echo $tool[&#039;badge&#039;] === &#039;Pro&#039; ? &#039;selected&#039; : &#039;&#039;; ?&gt;&gt;Pro&lt;/option&gt;
                                                                    &lt;option value=&quot;Free&quot; &lt;?php echo $tool[&#039;badge&#039;] === &#039;Free&#039; ? &#039;selected&#039; : &#039;&#039;; ?&gt;&gt;Free&lt;/option&gt;
                                                                &lt;/select&gt;
                                                            &lt;/div&gt;
                                                        &lt;/div&gt;
                                                    &lt;/div&gt;
                                                    &lt;!-- Advanced: Icon, Link --&gt;
                                                    &lt;div class=&quot;advanced-fields hidden&quot;&gt;
                                                        &lt;div class=&quot;sm:flex sm:flex-row sm:gap-2&quot;&gt;
                                                            &lt;label class=&quot;block text-sm mb-2 font-medium text-gray-400 sr-only&quot;&gt;Description&lt;/label&gt;
                                                            &lt;textarea name=&quot;tools[&lt;?php echo $tool_index; ?&gt;][desc]&quot; placeholder=&quot;Tool Description&quot; class=&quot;w-full p-1.5 border border-gray-200 rounded-lg shadow-sm focus:ring-1 focus:ring-indigo-500 h-14 text-sm resize-y&quot;&gt;&lt;?php echo htmlspecialchars($tool[&#039;desc&#039;] ?? &#039;&#039;); ?&gt;&lt;/textarea&gt;
                                                            &lt;div class=&quot;flex flex-row gap-2&quot;&gt;
                                                                &lt;div class=&quot;w-24 sm:w-24&quot;&gt;
                                                                    &lt;label class=&quot;block text-sm mb-1 font-medium text-gray-400&quot;&gt;Icon&lt;/label&gt;
                                                                    &lt;input type=&quot;text&quot; name=&quot;tools[&lt;?php echo $tool_index; ?&gt;][icon]&quot; value=&quot;&lt;?php echo htmlspecialchars($tool[&#039;icon&#039;] ?? &#039;tool&#039;); ?&gt;&quot; placeholder=&quot;Icon Name&quot; class=&quot;w-24 p-1.5 border border-gray-200 rounded-lg shadow-sm focus:ring-1 focus:ring-indigo-500 text-sm&quot;&gt;
                                                                &lt;/div&gt;
                                                                &lt;div class=&quot;flex-1&quot;&gt;
                                                                    &lt;label class=&quot;block text-sm mb-1 font-medium text-gray-400&quot;&gt;Link&lt;/label&gt;
                                                                    &lt;div class=&quot;flex items-center gap-2&quot;&gt;
                                                                        &lt;select name=&quot;tools[&lt;?php echo $tool_index; ?&gt;][link_type]&quot; class=&quot;w-26 p-2 bg-gray-50 rounded-lg text-gray-700 cursor-pointer rounded-md hover:bg-gray-100 text-sm link-type&quot;&gt;
                                                                            &lt;option value=&quot;file&quot; &lt;?php echo $tool[&#039;custom_url&#039;] === &#039;&#039; ? &#039;selected&#039; : &#039;&#039;; ?&gt;&gt;Tool File&lt;/option&gt;
                                                                            &lt;option value=&quot;custom&quot; &lt;?php echo $tool[&#039;custom_url&#039;] !== &#039;&#039; ? &#039;selected&#039; : &#039;&#039;; ?&gt;&gt;Custom URL&lt;/option&gt;
                                                                        &lt;/select&gt;
                                                                        &lt;select name=&quot;tools[&lt;?php echo $tool_index; ?&gt;][file]&quot; class=&quot;flex-2 p-2 bg-gray-50 rounded-lg text-gray-700 cursor-pointer rounded-md hover:bg-gray-100 text-sm link-field file-field&quot; &lt;?php echo $tool[&#039;custom_url&#039;] !== &#039;&#039; ? &#039;style=&quot;display:none;&quot;&#039; : &#039;&#039;; ?&gt;&gt;
                                                                            &lt;?php foreach ($tool_files as $file): ?&gt;
                                                                                &lt;option value=&quot;&lt;?php echo htmlspecialchars($file); ?&gt;&quot; &lt;?php echo $tool[&#039;file&#039;] === $file ? &#039;selected&#039; : &#039;&#039;; ?&gt;&gt;&lt;?php echo htmlspecialchars($file); ?&gt;&lt;/option&gt;
                                                                            &lt;?php endforeach; ?&gt;
                                                                        &lt;/select&gt;
                                                                        &lt;input type=&quot;text&quot; name=&quot;tools[&lt;?php echo $tool_index; ?&gt;][custom_url]&quot; value=&quot;&lt;?php echo htmlspecialchars($tool[&#039;custom_url&#039;] ?? &#039;&#039;); ?&gt;&quot; placeholder=&quot;Custom URL or Text&quot; class=&quot;flex-2 p-1.5 border border-gray-200 rounded-md shadow-sm focus:ring-1 focus:ring-indigo-500 text-sm link-field custom-field&quot; &lt;?php echo $tool[&#039;custom_url&#039;] === &#039;&#039; ? &#039;style=&quot;display:none;&quot;&#039; : &#039;&#039;; ?&gt;&gt;
                                                                    &lt;/div&gt;
                                                                &lt;/div&gt;
                                                            &lt;/div&gt;
                                                        &lt;/div&gt;
                                                    &lt;/div&gt;
                                                &lt;/div&gt;
                                            &lt;/div&gt;
                                        &lt;?php endif; ?&gt;
                                    &lt;?php endforeach; ?&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;?php endforeach; ?&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;flex gap-3 mt-3&quot;&gt;
                        &lt;button type=&quot;button&quot; onclick=&quot;addToolItem()&quot; class=&quot;mt-4 inline-flex items-center gap-2 px-4 py-2 text-sm bg-blue-100 text-blue-700 rounded-md hover:bg-blue-200&quot;&gt;
                            &lt;i data-lucide=&quot;plus&quot; class=&quot;w-4 h-4&quot;&gt;&lt;/i&gt; Add Tool
                        &lt;/button&gt;
                        &lt;button type=&quot;button&quot; onclick=&quot;addCategory()&quot; class=&quot;mt-4 inline-flex items-center gap-2 px-4 py-2 text-sm bg-red-100 text-red-700 rounded-md hover:bg-red-200&quot;&gt;
                            &lt;i data-lucide=&quot;plus&quot; class=&quot;w-4 h-4&quot;&gt;&lt;/i&gt; New Category
                        &lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;flex justify-end&quot;&gt;
                    &lt;button type=&quot;submit&quot; class=&quot;bg-blue-600 text-white px-6 py-2 shadow rounded-xl hover:bg-blue-700 flex items-center justify-center gap-2 transition-transform w-full sm:w-auto&quot;&gt;
                        &lt;i data-lucide=&quot;save&quot; class=&quot;w-4 h-4&quot;&gt;&lt;/i&gt; Save Tools
                    &lt;/button&gt;
                &lt;/div&gt;
            &lt;/form&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;script&gt;
        let toolIndex = &lt;?php echo count($tools_data[&#039;tools&#039;]); ?&gt;;
        let categoryIndex = &lt;?php echo count($tools_data[&#039;categories&#039;]); ?&gt;;
        
        function addToolItem() {
            // Default to &#039;None&#039; category if no categories exist
            let selectedCategory = &#039;None&#039;;
            const categorySelects = document.querySelectorAll(&#039;select[name$=&quot;[category]&quot;]&#039;);
            if (categorySelects.length &gt; 0) {
                selectedCategory = categorySelects[categorySelects.length - 1].value || &#039;None&#039;;
            }
            
            // Find the category container matching the selected category
            let container = document.querySelector(`.category-item[data-category-name=&quot;${selectedCategory}&quot;] .tools-items`);
            if (!container) {
                // Fallback to first category if selected category not found
                container = document.querySelector(&#039;#categories-container .category-item .tools-items&#039;);
            }
            
            const index = toolIndex++;
            
            const div = document.createElement(&#039;div&#039;);
            div.className = &#039;tool-item relative p-3 rounded-md transition-all&#039;;
            div.innerHTML = `
                &lt;div class=&quot;absolute top-4 -left-5 sm:left-4 flex flex-col gap-1&quot;&gt;
                    &lt;span class=&quot;w-6 h-6 bg-red-600 text-white rounded-full shadow flex items-center justify-center text-sm font-semibold&quot;&gt;${index + 1}&lt;/span&gt;
                    &lt;button type=&quot;button&quot; class=&quot;tool-delete bg-gray-100 rounded-full p-1 text-gray-600 hover:text-gray-800 hidden&quot; onclick=&quot;this.closest(&#039;.tool-item&#039;).remove()&quot;&gt;
                        &lt;i data-lucide=&quot;trash-2&quot; class=&quot;w-4 h-4&quot;&gt;&lt;/i&gt;
                    &lt;/button&gt;
                    &lt;button type=&quot;button&quot; class=&quot;toggle-advanced bg-gray-100 rounded-full p-1 text-gray-600 hover:text-gray-800&quot; data-tool-index=&quot;${index}&quot;&gt;
                        &lt;i data-lucide=&quot;chevron-down&quot; class=&quot;w-4 h-4&quot;&gt;&lt;/i&gt;
                    &lt;/button&gt;
                &lt;/div&gt;
                &lt;div class=&quot;flex flex-col gap-2 max-w-2xl m-auto&quot;&gt;
                    &lt;!-- Name, Category, and Badge --&gt;
                    &lt;div class=&quot;flex flex-col sm:flex-row gap-2&quot;&gt;
                        &lt;div class=&quot;flex-1&quot;&gt;
                            &lt;label class=&quot;block text-xs mb-1 font-medium text-gray-400 sr-onlyx&quot;&gt;Tool Name&lt;/label&gt;
                            &lt;input type=&quot;text&quot; name=&quot;tools[${index}][name]&quot; placeholder=&quot;Tool Name&quot; class=&quot;w-full p-1.5 border border-gray-200 rounded-lg focus:shadow-sm text-sm&quot;&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;flex flex-row gap-2 sm:flex-row&quot;&gt;
                            &lt;div class=&quot;w-1/2 sm:w-1/2&quot;&gt;
                                &lt;label class=&quot;block text-xs mb-1 font-medium text-gray-400 sr-onlyx&quot;&gt;Category&lt;/label&gt;
                                &lt;select name=&quot;tools[${index}][category]&quot; class=&quot;w-full p-2 bg-gray-50 rounded-lg text-gray-700 cursor-pointer rounded-md hover:bg-gray-100 text-sm&quot;&gt;
                                    &lt;?php foreach ($tools_data[&#039;categories&#039;] as $cat): ?&gt;
                                        &lt;option value=&quot;&lt;?php echo htmlspecialchars($cat[&#039;name&#039;]); ?&gt;&quot; &lt;?php echo $cat[&#039;name&#039;] === &#039;None&#039; ? &#039;selected&#039; : &#039;&#039;; ?&gt;&gt;&lt;?php echo htmlspecialchars($cat[&#039;name&#039;]); ?&gt;&lt;/option&gt;
                                    &lt;?php endforeach; ?&gt;
                                &lt;/select&gt;
                            &lt;/div&gt;
                            &lt;div class=&quot;w-1/2 sm:w-1/2&quot;&gt;
                                &lt;label class=&quot;block text-xs mb-1 font-medium text-gray-400 sr-onlyx&quot;&gt;Badge&lt;/label&gt;
                                &lt;select name=&quot;tools[${index}][badge]&quot; class=&quot;w-full p-2 bg-gray-50 rounded-lg text-gray-700 cursor-pointer rounded-md hover:bg-gray-100 text-sm&quot;&gt;
                                    &lt;option value=&quot;&quot;&gt;None&lt;/option&gt;
                                    &lt;option value=&quot;New&quot;&gt;New&lt;/option&gt;
                                    &lt;option value=&quot;Pro&quot;&gt;Pro&lt;/option&gt;
                                    &lt;option value=&quot;Free&quot;&gt;Free&lt;/option&gt;
                                &lt;/select&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;!-- Advanced: Icon, Link --&gt;
                    &lt;div class=&quot;advanced-fields hidden&quot;&gt;
                        &lt;div class=&quot;sm:flex sm:flex-row sm:gap-2&quot;&gt;
                            &lt;label class=&quot;block text-sm mb-2 font-medium text-gray-400 sr-only&quot;&gt;Description&lt;/label&gt;
                            &lt;textarea name=&quot;tools[${index}][desc]&quot; placeholder=&quot;Tool Description&quot; class=&quot;w-full p-1.5 border border-gray-200 rounded-lg shadow-sm focus:ring-1 focus:ring-indigo-500 h-14 text-sm resize-y&quot;&gt;&lt;/textarea&gt;
                            &lt;div class=&quot;flex flex-row gap-2&quot;&gt;
                                &lt;div class=&quot;w-24 sm:w-24&quot;&gt;
                                    &lt;label class=&quot;block text-sm mb-1 font-medium text-gray-400&quot;&gt;Icon&lt;/label&gt;
                                    &lt;input type=&quot;text&quot; name=&quot;tools[${index}][icon]&quot; placeholder=&quot;Icon Name&quot; value=&quot;box&quot; class=&quot;w-24 p-1.5 border border-gray-200 rounded-lg shadow-sm focus:ring-1 focus:ring-indigo-500 text-sm&quot;&gt;
                                &lt;/div&gt;
                                &lt;div class=&quot;flex-1&quot;&gt;
                                    &lt;label class=&quot;block text-sm mb-1 font-medium text-gray-400&quot;&gt;Link&lt;/label&gt;
                                    &lt;div class=&quot;flex items-center gap-2&quot;&gt;
                                        &lt;select name=&quot;tools[${index}][link_type]&quot; class=&quot;w-26 p-2 bg-gray-50 rounded-lg text-gray-700 cursor-pointer rounded-md hover:bg-gray-100 text-sm link-type&quot;&gt;
                                            &lt;option value=&quot;file&quot;&gt;Tool File&lt;/option&gt;
                                            &lt;option value=&quot;custom&quot;&gt;Custom URL&lt;/option&gt;
                                        &lt;/select&gt;
                                        &lt;select name=&quot;tools[${index}][file]&quot; class=&quot;flex-2 p-2 bg-gray-50 rounded-lg text-gray-700 cursor-pointer rounded-md hover:bg-gray-100 text-sm link-field file-field&quot;&gt;
                                            &lt;?php foreach ($tool_files as $file): ?&gt;
                                                &lt;option value=&quot;&lt;?php echo htmlspecialchars($file); ?&gt;&quot;&gt;&lt;?php echo htmlspecialchars($file); ?&gt;&lt;/option&gt;
                                            &lt;?php endforeach; ?&gt;
                                        &lt;/select&gt;
                                        &lt;input type=&quot;text&quot; name=&quot;tools[${index}][custom_url]&quot; placeholder=&quot;Custom URL or Text&quot; class=&quot;flex-2 p-1.5 border border-gray-200 rounded-md shadow-sm focus:ring-1 focus:ring-indigo-500 text-sm link-field custom-field&quot; style=&quot;display:none;&quot;&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            `;
            container.appendChild(div);
            lucide.createIcons();
            setupToggleAdvanced(div);
            updateLinkFields(div);
        }

        function addCategory() {
            const container = document.getElementById(&#039;categories-container&#039;);
            const index = categoryIndex++;
            
            const div = document.createElement(&#039;div&#039;);
            div.className = &#039;category-item border-gray-200 pt-5 pb-10 relative&#039;;
            div.setAttribute(&#039;data-category-name&#039;, &#039;&#039;);
            div.innerHTML = `
                &lt;div class=&quot;flex flex-col sm:flex-row gap-2 mb-8 max-w-3xl m-auto&quot;&gt;
                    &lt;label class=&quot;block text-sm mt-1 font-medium text-gray-400&quot;&gt;Category:&lt;/label&gt;
                    &lt;div class=&quot;flex-2&quot;&gt;
                        &lt;label class=&quot;block text-sm mb-2 font-medium text-gray-400 sr-only&quot;&gt;Category Name&lt;/label&gt;
                        &lt;input type=&quot;text&quot; name=&quot;categories[${index}][name]&quot; placeholder=&quot;Category Name&quot; class=&quot;w-full p-1.5 bg-blue-50 text-blue-600 rounded-md focus:ring-1 focus:ring-indigo-500 text-sm font-semibold&quot; oninput=&quot;this.closest(&#039;.category-item&#039;).setAttribute(&#039;data-category-name&#039;, this.value)&quot;&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;flex-1&quot;&gt;
                        &lt;label class=&quot;block text-sm mb-2 font-medium text-gray-400 sr-only&quot;&gt;Category Description&lt;/label&gt;
                        &lt;input type=&quot;text&quot; name=&quot;categories[${index}][desc]&quot; placeholder=&quot;Category Description&quot; class=&quot;w-full p-1.5 border border-gray-200 rounded-lg focus:shadow-sm text-sm font-medium text-gray-600&quot;&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;delete-container flex items-end sm:items-center&quot;&gt;
                        &lt;button type=&quot;button&quot; onclick=&quot;this.closest(&#039;.category-item&#039;).remove(); updateCategoryOptions();&quot; class=&quot;p-2 text-red-600 hover:text-red-800&quot;&gt;
                            &lt;i data-lucide=&quot;trash-2&quot; class=&quot;w-5 h-5&quot;&gt;&lt;/i&gt;
                        &lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;tools-items space-y-3 pl-3&quot;&gt;&lt;/div&gt;
            `;
            container.appendChild(div);
            lucide.createIcons();
            updateCategoryOptions();
        }

        function updateCategoryOptions() {
            const categories = Array.from(document.querySelectorAll(&#039;input[name$=&quot;[name]&quot;]&#039;)).map(input =&gt; input.value || &#039;None&#039;);
            const selects = document.querySelectorAll(&#039;select[name$=&quot;[category]&quot;]&#039;);
            selects.forEach(select =&gt; {
                const currentValue = select.value;
                select.innerHTML = categories.map(cat =&gt; `&lt;option value=&quot;${cat}&quot; ${cat === currentValue ? &#039;selected&#039; : &#039;&#039;}&gt;${cat}&lt;/option&gt;`).join(&#039;&#039;);
            });
        }

        function updateLinkFields(container) {
            const linkTypes = container.querySelectorAll(&#039;.link-type&#039;);
            linkTypes.forEach(select =&gt; {
                select.addEventListener(&#039;change&#039;, () =&gt; {
                    const parent = select.closest(&#039;.tool-item&#039;);
                    const fileField = parent.querySelector(&#039;.file-field&#039;);
                    const customField = parent.querySelector(&#039;.custom-field&#039;);
                    if (select.value === &#039;file&#039;) {
                        fileField.style.display = &#039;block&#039;;
                        customField.style.display = &#039;none&#039;;
                    } else {
                        fileField.style.display = &#039;none&#039;;
                        customField.style.display = &#039;block&#039;;
                    }
                });
            });
        }

        function setupToggleAdvanced(container) {
            const toggleButtons = container.querySelectorAll(&#039;.toggle-advanced&#039;);
            toggleButtons.forEach(button =&gt; {
                button.addEventListener(&#039;click&#039;, () =&gt; {
                    const toolIndex = button.getAttribute(&#039;data-tool-index&#039;);
                    const advancedFields = button.closest(&#039;.tool-item&#039;).querySelector(&#039;.advanced-fields&#039;);
                    const deleteButton = button.closest(&#039;.tool-item&#039;).querySelector(&#039;.tool-delete&#039;);
                    const icon = button.querySelector(&#039;i&#039;);
                    advancedFields.classList.toggle(&#039;hidden&#039;);
                    deleteButton.classList.toggle(&#039;hidden&#039;, advancedFields.classList.contains(&#039;hidden&#039;));
                    icon.setAttribute(&#039;data-lucide&#039;, advancedFields.classList.contains(&#039;hidden&#039;) ? &#039;chevron-down&#039; : &#039;chevron-up&#039;);
                    lucide.createIcons();
                });
            });
        }

        function validateForm() {
            const tools = document.querySelectorAll(&#039;.tool-item&#039;);
            for (let tool of tools) {
                const name = tool.querySelector(&#039;input[name$=&quot;[name]&quot;]&#039;).value.trim();
                const desc = tool.querySelector(&#039;textarea[name$=&quot;[desc]&quot;]&#039;).value.trim();
            }
            return true;
        }

        document.getElementById(&#039;toggle-all-advanced&#039;).addEventListener(&#039;change&#039;, (e) =&gt; {
            const advancedFields = document.querySelectorAll(&#039;.advanced-fields&#039;);
            const deleteButtons = document.querySelectorAll(&#039;.tool-delete&#039;);
            const toggleButtons = document.querySelectorAll(&#039;.toggle-advanced i&#039;);
            advancedFields.forEach(field =&gt; {
                field.classList.toggle(&#039;hidden&#039;, !e.target.checked);
            });
            deleteButtons.forEach(button =&gt; {
                button.classList.toggle(&#039;hidden&#039;, !e.target.checked);
            });
            toggleButtons.forEach(icon =&gt; {
                icon.setAttribute(&#039;data-lucide&#039;, e.target.checked ? &#039;chevron-up&#039; : &#039;chevron-down&#039;);
            });
            lucide.createIcons();
        });

        document.querySelectorAll(&#039;.tool-item&#039;).forEach(setupToggleAdvanced);
        document.querySelectorAll(&#039;.tool-item&#039;).forEach(updateLinkFields);
        lucide.createIcons();
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>        </div>
    </div>