{% extends "base.html" %}
{% block content %}

<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.5/dist/cdn.min.js" defer></script>

<div class="m-5 p-5 flex justify-center w-auto">
    <!-- Main Card Container -->
    <div x-data="{ tab: 'Posts'}" class="inline-block rounded-xl md:rounded-2xl shadow-xl bg-white/80 dark:bg-gray-800/80">

        <!-- Main Tabs -->
        <div x-cloak
            class="flex overflow-x-auto border-b border-gray-200 dark:border-gray-700 justify-center items-center whitespace-nowrap">

            {% for itab in tabs %}
            <button @click="tab = '{{ itab }}'"
                :class="tab === '{{ itab }}' ? 'border-b-2 border-blue-600 text-blue-600 dark:text-blue-400' : 'text-gray-600 dark:text-gray-300'"
                class="px-4 py-2 text-sm font-medium">
                {{ itab }}
            </button>
            {% endfor %}
        </div>

        <div x-show="tab === 'Posts'" class="space-y-2 md:p-4">
            <div class="overflow-x-auto rounded shadow">
                <table
                    class="min-w-full bg-white dark:bg-gray-700 text-sm text-left text-gray-700 dark:text-white rounded-lg">
                    <thead class="bg-gray-100 dark:bg-gray-900">
                        <tr>
                            <th scope="col" class="px-4 py-3 text-sm font-semibold">Title</th>
                            <th scope="col" class="px-4 py-3 text-sm font-semibold">Date</th>
                            <th scope="col" class="px-4 py-3 text-sm font-semibold">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for p in posts %}
                        <tr class="hover:bg-gray-200 dark:hover:bg-gray-400">
                            <td class="px-4 py-2 font-medium text-gray-800 dark:text-gray-200">{{ p['title'] }}</td>
                            <td class="px-4 py-2 text-gray-600 dark:text-gray-300">
                                {{ p['created_at'].strftime('%Y-%m-%d') }}
                            </td>
                            <td class="px-4 py-2 space-x-2">
                                <a href="{{ url_for('blog.edit_image', image_id=p['id']) }}"
                                    class="inline-block px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded hover:bg-blue-700">
                                    Edit
                                </a>
                                <a href="{{ url_for('blog.delete_image', image_id=p['id']) }}"
                                    class="inline-block px-4 py-2 text-sm font-medium text-white bg-red-600 rounded hover:bg-red-700"
                                    onclick="return confirm('Delete?');">
                                    Delete
                                </a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>

<div
x-data='{
    inventory: {{ inventory | tojson }},
    dataType: {{ data_type | tojson }},
    selectedType: "",
    selectedName: "",
    currentNames: [],
    currentValues: {},

    updateNames() {
        const namesObj = this.inventory[this.selectedType] || {};
        this.currentNames = Object.keys(namesObj);
        this.selectedName = this.currentNames[0] || "";
        this.updateValues();
    },

    updateValues() {
        this.currentValues = this.inventory[this.selectedType]?.[this.selectedName] || {};
    },

    inputTypeFor(key) {
        const dtype = this.dataType[key];
        if (key === "id") return "hidden";
        if (!dtype) return "text";
        if (["integer", "numeric", "float", "double"].includes(dtype)) return "number";
        if (["boolean", "bool"].includes(dtype)) return "checkbox";
        if (["text", "varchar", "string"].includes(dtype)) return "text";
        if (["date", "datetime", "timestamp"].includes(dtype)) return "date";
        return "text";
    },

    async saveInventory() {
        const payload = {
            type: this.selectedType,
            name: this.selectedName,
            values: this.currentValues
        };

        try {
            const response = await fetch("/private/update_inventory", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json"
                },
                body: JSON.stringify(payload)
            });

            if (response.ok) {
                alert("Inventory saved successfully!");
            } else {
                alert("Failed to save inventory.");
            }
        } catch (error) {
            console.error(error);
            alert("An error occurred while saving.");
        }
    }
}' 
x-init="
    selectedType = Object.keys(inventory)[0];
    updateNames();
"
x-show="tab === 'Inventory'" class="space-y-2 p-4  text-gray-700 dark:text-white">

    <div class="grid grid-cols-2 gap-4 md:grid-cols-4">
        <!-- Inventory Type Dropdown -->
        <label for="inventoryType" class="flex items-center">
            Select Inventory Type
        </label>

        <select id="inventoryType" x-model="selectedType" @change="updateNames()"
            class="p-2 block w-full border-gray-300 rounded-md shadow-sm bg-gray-100 dark:bg-gray-700">
            {% for item in inventory %}
            <option value="{{ item }}">{{ item | capitalize }}</option>
            {% endfor %}
        </select>

        <!-- Item Name Dropdown -->
        <label for="itemName" class="flex items-center">
            Add/Edit Inventory
        </label>

        <select id="itemName" x-model="selectedName" @change="updateValues()"
            class="p-2 block w-full border-gray-300 rounded-md shadow-sm bg-gray-100 dark:bg-gray-700">
            <template x-for="name in currentNames" :key="name">
                <option :value="name" x-text="name"></option>
            </template>
        </select>
    </div>

    <!-- Inventory Details Display -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-2 p-2 bg-gray-50 dark:bg-gray-800 mt-4 rounded-lg">
        <template x-for="[key, value] in Object.entries(currentValues)" :key="key">
            <template x-if="inputTypeFor(key) !== 'hidden'">
                <div class="flex items-center justify-between not-[]:gap-2">
                    <label x-text="key"></label>
                    <template x-if="inputTypeFor(key) === 'checkbox'">
                        <input type="checkbox"
                            class="w-5 h-5"
                            x-model="currentValues[key]"
                            :checked="currentValues[key]" />
                    </template>
                    <template x-if="inputTypeFor(key) !== 'checkbox'">
                        <input :type="inputTypeFor(key)"
                            class="p-2 text-left rounded-md bg-gray-100 dark:bg-gray-700"
                            x-model="currentValues[key]" />
                    </template>
                </div>
            </template>
        </template>
    </div>

    <!-- Add/Edit Button -->
    <div class="mt-4 flex justify-end">
        <button 
            @click="saveInventory"
            class="px-4 py-2 bg-blue-600 text-white rounded-md shadow hover:bg-blue-700">
            Add/Edit Inventory
        </button>
    </div>
</div>

        <div x-show="tab === 'Settings'" class="space-y-2 md:p-4">
            <p class="text-gray-600 dark:text-gray-300">Your account settings will be displayed here.</p>
            <!-- Settings content goes here -->
        </div>
    </div>
</div>

{%endblock%}