{% extends "base.html" %}

{% block title %}
{{ project.name }} - Informationen
{% endblock %}

{% block header_title %}
Projektinformationen
{% endblock %}

{% block header_description %}
Standorte & Ansprechpartner
{% endblock %}

{% block content %}
<div class="mb-8">
    <div class="p-6 rounded-xl shadow bg-white dark:bg-slate-800 text-slate-900 dark:text-white transition-colors">
        <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4">
            <div>
                <h2 class="text-lg font-bold">Aktionen</h2>
                <p class="text-slate-400 text-sm mt-1">Standorte und Ansprechpartner hinzufügen</p>
            </div>

            <div class="flex flex-col sm:flex-row gap-2">
                <a href="{% url 'projects:location_add' project.id %}" class="btn btn-add">+ Standort</a>
                <a href="{% url 'projects:contact_add' project.id %}" class="btn btn-add">+ Ansprechpartner</a>
                <a href="{% url 'projects:worker_add' project.id %}" class="btn btn-add">+ Mitarbeiter</a>
            </div>
            
        </div>
    </div>
</div>



<div class="mb-8">
    <div class="p-6 rounded-xl shadow bg-white dark:bg-slate-800 text-slate-900 dark:text-white transition-colors">

        <h2 class="text-lg font-bold mb-2">Allgemein</h2>

        <form method="post" enctype="multipart/form-data" action="{% url 'projects:edit' project.id %}">
            {% csrf_token %}
            <input type="hidden" name="action" value="update_project">

            <div class="grid md:grid-cols-2 gap-4">

                {% for field in form %}
                <div>
                    <label class="block text-sm font-medium mb-1">
                        {{ field.label }}
                    </label>

                    {{ field }}

                    {% if field.errors %}
                    <div class="text-red-600 text-sm mt-1">
                        {{ field.errors }}
                    </div>
                    {% endif %}
                </div>
                {% endfor %}

            </div>

            <button type="submit"
                    class="btn mt-4 btn-save">
                Speichern
            </button>

        </form>

    </div>
</div>


<div class="grid grid-cols-1 gap-5 mb-8">

    <!-- Mitarbeiter -->
    <div class="p-6 rounded-xl shadow bg-white dark:bg-slate-800 text-slate-900 dark:text-white transition-colors">

        <h2 class="text-lg font-bold mb-2">
            Mitarbeiter
        </h2>

        {% for worker in workers %}

        <div class="bg-slate-100 dark:bg-slate-700 rounded-xl p-3 mb-2 flex justify-between">

            <div>
                <div class="font-medium">{{ worker.user.get_full_name|default:worker.user.username }}</div>
                <div class="text-slate-400 text-sm">{{ worker.user.email }}</div>
                <div class="text-slate-400 text-sm">Rolle: {{ worker.get_role_display }}</div>
            </div>

            {% if worker.role != "owner" %}
            <form method="post" action="{% url 'projects:worker_delete' project.id worker.id %}">
                {% csrf_token %}
                <input type="hidden" name="action" value="delete_worker">
                <input type="hidden" name="worker_id" value="{{ worker.id }}">
                <button
                    type="submit"
                    class="btn btn-delete">
                    Löschen
                </button>
            </form>
            {% endif %}
        </div>

        {% empty %}
            <div class="bg-yellow-100 border border-yellow-300 rounded-xl p-6">
                Keine Mitarbeiter vorhanden
            </div>
        {% endfor %}
    </div>
</div>




<div class="grid grid-cols-1 lg:grid-cols-2 gap-5">

    <!-- Standorte -->
    <div class="p-6 rounded-xl shadow bg-white dark:bg-slate-800 text-slate-900 dark:text-white transition-colors">

        <h2 class="text-lg font-bold mb-2">
            Standorte
        </h2>

            {% for location in locations %}

            <div class="bg-slate-100 dark:bg-slate-700 rounded-xl p-3 mb-2 flex justify-between">
                <div>
                    <div class="font-medium">
                        {{ location.location.name }}
                    </div>

                    <div class="text-slate-400 text-sm">
                        {{ location.location.street }}
                    </div>

                    <div class="text-slate-400 text-sm">
                        {{ location.location.zip_code }} {{ location.location.city }}
                    </div>

                    <div class="text-slate-400 text-sm">
                        {{ location.location.country }}
                    </div>
                </div>

                <form method="post" action="{% url 'projects:location_delete' project.id location.id %}">
                    {% csrf_token %}

                    <input
                        type="hidden"
                        name="action"
                        value="delete_location">

                    <input
                        type="hidden"
                        name="location_id"
                        value="{{ location.id }}">

                    <button
                        type="submit"
                        class="btn btn-delete">
                        Löschen
                    </button>
                </form>
            </div>

        {% empty %}

            <div class="bg-white dark:bg-slate-800 border border-orange-500 rounded-xl p-6 text-orange-500">
                Keine Standorte vorhanden
            </div>

        {% endfor %}

    </div>

    <!-- Ansprechpartner -->
    <div class="p-6 rounded-xl shadow bg-white dark:bg-slate-800 text-slate-900 dark:text-white transition-colors">

        <h2 class="text-lg font-bold mb-2">
            Ansprechpartner
        </h2>

        {% for contact in contacts %}

            <div class="bg-slate-100 dark:bg-slate-700 rounded-xl p-3 mb-2 flex justify-between">
                <div>
                    <div class="font-medium">
                        {{ contact.contact.first_name }} {{ contact.contact.last_name }}
                    </div>

                    {% if contact.contact.company %}
                    <div class="text-slate-400 text-sm">
                        {{ contact.contact.company }}
                    </div>
                    {% endif %}

                    {% if contact.contact.phone %}
                    <div class="text-slate-400 text-sm">
                        {{ contact.contact.phone }}
                    </div>
                    {% endif %}

                    {% if contact.contact.email %}
                    <div class="text-slate-400 text-sm">
                        {{ contact.contact.email }}
                    </div>
                    {% endif %}
                </div>
                
                <form method="post" action="{% url 'projects:contact_delete' project.id contact.id %}">
                    {% csrf_token %}

                    <input
                        type="hidden"
                        name="action"
                        value="delete_contact">

                    <input
                        type="hidden"
                        name="contact_id"
                        value="{{ contact.id }}">

                    <button
                        type="submit"
                        class="btn btn-delete">
                        Löschen
                    </button>
                </form>

            </div>

        {% empty %}

            <div class="bg-white dark:bg-slate-800 border border-orange-500 rounded-xl p-6 text-orange-500">
                Keine Ansprechpartner vorhanden
            </div>

        {% endfor %}

    </div>

</div>

{% endblock %}