{% extends "admin_base.html" %}

{% block title %}Plants{% endblock %}

{% block admin_content %}
<div class="bg-white rounded-lg shadow p-6">
    <div class="flex justify-between items-center mb-6">
        <h2 class="text-2xl font-bold">All Plants</h2>
        <button id="show-add-plant" class="btn-main px-6 py-2 font-semibold">Add Plant</button>
    </div>
    <div id="add-plant-form-card" class="hidden mb-8">
        <div class="bg-gray-50 rounded-lg shadow p-6 max-w-2xl mx-auto">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-xl font-bold">Add New Plant</h3>
                <button type="button" id="close-add-plant" class="text-gray-500 hover:text-red-500 text-2xl font-bold leading-none">&times;</button>
            </div>
            <form id="add-plant-form" method="POST" enctype="multipart/form-data" class="space-y-4">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label for="name" class="block text-sm font-medium text-gray-700">Name</label>
                        <input type="text" name="name" id="name" required
                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                    </div>
                    <div>
                        <label for="picture" class="block text-sm font-medium text-gray-700">Picture</label>
                        <input type="file" name="picture" id="picture"
                            class="mt-1 block w-full text-sm text-gray-700">
                    </div>
                    <div>
                        <label for="climate_id" class="block text-sm font-medium text-gray-700">Climate</label>
                        <select name="climate_id" id="climate_id" required
                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                            <option value="">Select a climate</option>
                            {% for climate in climates %}
                            <option value="{{ climate.id }}">{{ climate.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div>
                        <label for="environment_id" class="block text-sm font-medium text-gray-700">Environment</label>
                        <select name="environment_id" id="environment_id" required
                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                            <option value="">Select an environment</option>
                            {% for environment in environments %}
                            <option value="{{ environment.id }}">{{ environment.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div>
                        <label for="light" class="block text-sm font-medium text-gray-700">Light</label>
                        <select name="light" id="light" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                            <option value="">Select light</option>
                            <option value="Full Sun">Full Sun</option>
                            <option value="Partial Shade">Partial Shade</option>
                            <option value="Low Light">Low Light</option>
                        </select>
                    </div>
                    <div>
                        <label for="toxicity" class="block text-sm font-medium text-gray-700">Toxicity</label>
                        <select name="toxicity" id="toxicity" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                            <option value="">Select toxicity</option>
                            <option value="Pet Safe">Pet Safe</option>
                            <option value="Toxic to Pets">Toxic to Pets</option>
                            <option value="Unknown">Unknown</option>
                        </select>
                    </div>
                    <div>
                        <label for="size" class="block text-sm font-medium text-gray-700">Size</label>
                        <select name="size" id="size" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                            <option value="">Select size</option>
                            <option value="Small">Small</option>
                            <option value="Medium">Medium</option>
                            <option value="Large">Large</option>
                        </select>
                    </div>
                    <div>
                        <label for="care_difficulty" class="block text-sm font-medium text-gray-700">Care Difficulty</label>
                        <select name="care_difficulty" id="care_difficulty" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                            <option value="">Select difficulty</option>
                            <option value="Easy">Easy</option>
                            <option value="Moderate">Moderate</option>
                            <option value="Hard">Hard</option>
                        </select>
                    </div>
                    <div>
                        <label for="growth_rate" class="block text-sm font-medium text-gray-700">Growth Rate</label>
                        <select name="growth_rate" id="growth_rate" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                            <option value="">Select growth rate</option>
                            <option value="Fast">Fast</option>
                            <option value="Moderate">Moderate</option>
                            <option value="Slow">Slow</option>
                        </select>
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Products</label>
                        <div class="flex flex-wrap gap-4">
                            {% for product in products %}
                            <label class="inline-flex items-center">
                                <input type="checkbox" name="product_ids" value="{{ product.id }}" class="form-checkbox rounded text-[#6b8f71] focus:ring-[#6b8f71]">
                                <span class="ml-2">{{ product.name }}</span>
                            </label>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="md:col-span-2">
                        <label for="description" class="block text-sm font-medium text-gray-700">Description</label>
                        <textarea name="description" id="description" rows="6" required
                            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"></textarea>
                    </div>
                    <div class="md:col-span-2">
                        <label for="care_guide" class="block text-sm font-medium text-gray-700">Care Guide</label>
                        <div id="quill-care-guide" class="bg-white rounded border border-gray-300" style="min-height: 120px;"></div>
                        <textarea name="care_guide" id="care_guide" style="display:none;"></textarea>
                    </div>
                </div>
                <button type="submit" class="w-full btn-main text-lg font-semibold">Add Plant</button>
            </form>
        </div>
    </div>
    <div class="overflow-x-auto">
        <table class="min-w-full text-left text-sm">
            <thead>
                <tr class="border-b">
                    <th class="py-2 px-3">Name</th>
                    <th class="py-2 px-3">Climate</th>
                    <th class="py-2 px-3">Environment</th>
                    <th class="py-2 px-3">Added</th>
                    <th class="py-2 px-3">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for plant in plants %}
                <tr class="border-b hover:bg-[#f5f7f2]">
                    <td class="py-2 px-3 font-semibold">{{ plant.name }}</td>
                    <td class="py-2 px-3">{{ climates[plant.climate_id] if plant.climate_id in climates else '' }}</td>
                    <td class="py-2 px-3">{{ environments[plant.environment_id] if plant.environment_id in environments else '' }}</td>
                    <td class="py-2 px-3"><span class="local-date" data-date="{{ plant.date_added.isoformat() }}"></span></td>
                    <td class="py-2 px-3">
                        <a href="{{ url_for('edit_plant', plant_id=plant.id) }}" class="btn-edit">Edit</a>
                        <form id="delete-plant-{{ plant.id }}" method="POST" action="{{ url_for('delete_plant', plant_id=plant.id) }}" style="display:inline;">
                            <button type="button" onclick="showDeleteModal('delete-plant-{{ plant.id }}', 'Are you sure you want to delete {{ plant.name }}?')" class="btn-delete ml-2">Delete</button>
                        </form>
                    </td>
                </tr>
                {% else %}
                <tr><td colspan="5" class="py-4 text-center text-gray-500">No plants found.</td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script>
document.getElementById('show-add-plant').onclick = function() {
    var card = document.getElementById('add-plant-form-card');
    card.classList.toggle('hidden');
    if (!card.classList.contains('hidden')) {
        card.scrollIntoView({behavior: 'smooth'});
    }
};
document.getElementById('close-add-plant').onclick = function() {
    document.getElementById('add-plant-form-card').classList.add('hidden');
};
var quill = new Quill('#quill-care-guide', { theme: 'snow' });
document.getElementById('add-plant-form').onsubmit = function() {
    document.getElementById('care_guide').value = quill.root.innerHTML;
};
</script>
{% endblock %}