{% extends "admin_base.html" %}

{% block title %}Edit Plant{% endblock %}

{% block admin_content %}
    <div class="max-w-2xl mx-auto">
        <h1 class="text-3xl font-bold mb-6 text-center">Edit Plant</h1>
        <div class="bg-white shadow-lg rounded-xl p-8">
            <form method="POST" enctype="multipart/form-data" class="space-y-6">
                <div>
                    <label for="name" class="block text-sm font-semibold text-gray-700 mb-1">Name</label>
                    <input type="text" name="name" id="name" value="{{ plant.name }}" required
                        class="mt-1 block w-full rounded-lg border border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 px-3 py-2">
                </div>
                <div>
                    <label for="picture" class="block text-sm font-semibold text-gray-700 mb-1">Picture</label>
                    <input type="file" name="picture" id="picture" accept="image/*"
                        class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-[#6b8f71] file:text-white hover:file:bg-[#5a7b5f]">
                    {% if plant.picture %}
                        <img src="{{ url_for('static', filename='uploads/' ~ plant.picture) }}" alt="{{ plant.name }}" class="w-24 h-24 object-cover rounded mt-2">
                    {% endif %}
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <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 }}" {% if plant.climate_id == climate.id %}selected{% endif %}>{{ 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 }}" {% if plant.environment_id == environment.id %}selected{% endif %}>{{ environment.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div>
                        <label for="light_id" class="block text-sm font-medium text-gray-700">Light</label>
                        <select name="light_id" id="light_id" 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 requirement</option>
                            {% for light in lights %}
                            <option value="{{ light.id }}" {% if plant.light_id == light.id %}selected{% endif %}>{{ light.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div>
                        <label for="toxicity_id" class="block text-sm font-medium text-gray-700">Toxicity</label>
                        <select name="toxicity_id" id="toxicity_id" 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 level</option>
                            {% for toxicity in toxicities %}
                            <option value="{{ toxicity.id }}" {% if plant.toxicity_id == toxicity.id %}selected{% endif %}>{{ toxicity.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div>
                        <label for="size_id" class="block text-sm font-medium text-gray-700">Size</label>
                        <select name="size_id" id="size_id" 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 category</option>
                            {% for size in sizes %}
                            <option value="{{ size.id }}" {% if plant.size_id == size.id %}selected{% endif %}>{{ size.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div>
                        <label for="care_difficulty_id" class="block text-sm font-medium text-gray-700">Care Difficulty</label>
                        <select name="care_difficulty_id" id="care_difficulty_id" 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 level</option>
                            {% for difficulty in difficulties %}
                            <option value="{{ difficulty.id }}" {% if plant.care_difficulty_id == difficulty.id %}selected{% endif %}>{{ difficulty.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div>
                        <label for="growth_rate_id" class="block text-sm font-medium text-gray-700">Growth Rate</label>
                        <select name="growth_rate_id" id="growth_rate_id" 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>
                            {% for rate in growth_rates %}
                            <option value="{{ rate.id }}" {% if plant.growth_rate_id == rate.id %}selected{% endif %}>{{ rate.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </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 }}" {% if product.id|string in selected_products %}checked{% endif %} 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">{{ plant.description }}</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;">{{ plant.care_guide|safe }}</div>
                    <textarea name="care_guide" id="care_guide" style="display:none;">{{ plant.care_guide }}</textarea>
                </div>
                <button type="submit"
                    class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                    Save Changes
                </button>
            </form>
        </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>
      var quill = new Quill('#quill-care-guide', { theme: 'snow' });
      // Set initial content from textarea if not already set
      var careGuideTextarea = document.getElementById('care_guide');
      if (careGuideTextarea.value) {
        quill.root.innerHTML = careGuideTextarea.value;
      }
      document.querySelector('form').onsubmit = function() {
        careGuideTextarea.value = quill.root.innerHTML;
      };
    </script>
{% endblock %}