{% extends "add-edit-main.html" %}
{%load static%}
{% block content %}

<div class="w-full px-5 s:px-9 mb-5">
    <div class="w-full h-full shadow-md rounded-md py-5 px-3 bg-white">
        <h1 class="text-3xl text-secondosiblue text-center font-semibold">
            Add Ticket {% if customer %}for {{customer.user.first_name}} {{customer.user.last_name}}{% endif %}
            {% if project %}<br><span class="text-fifthosiblue"> {{project.name}}</span>  {% endif %}
        </h1>

        <form class="w-full flex flex-col gap-5 justify-center items-center mt-5" method="POST"
            {% if customer %}
            action="{% url 'addcustomerticket' customer.id %}"
            {% elif project %}
            action="{% url 'addprojectticket' project.id %}"
            {% else %}
            action="{% url 'addticket' %}"
            {% endif %}
            enctype="multipart/form-data">
            {% csrf_token %}

            <div class="w-full">
                <label class="text-gray-500">Ticket Title:</label>
                <input required name="title" type="text"
                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-1">
            </div>

            {% if not customer %}
            <div class="w-full">
                <label class="text-gray-500">Customer</label>
                <select name="customer" id="customer-select"
                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-1">
                    <option selected disabled>Select a Customer</option>
                    {% for customer in customers %}
                    <option value="{{customer.id}}">{{customer.user.first_name}} {{customer.user.last_name}}</option>
                    {% endfor %}
                </select>
            </div>
            {% endif %}


            {% if not project %}
            <div class="w-full">
                <label class="text-gray-500">What is this regarding?</label>
                <select name="regarding"
                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-1"
                    id="regardingSelectTag">
                    <option value="General/Account/Billing">General/Account/Billing</option>
                    <option value="Product">Product</option>
                    <option value="Project" {% if project %} selected {% endif %}>Project</option>
                </select>
            </div>

            
            <!-- Projects Select Tag -->
            <div class="w-full hidden" id="projectsSelectTag">
                <label class="text-gray-500">Choose one of {{customer.user.first_name}}'s projects:</label>
                <select name="project" id="project-select"
                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-1">
                    <option value="" selected disabled>Select Project</option>
                    {% for customer_project in customer_projects %}
                    <option value="{{customer_project.id}}">{{customer_project.name}}</option>
                    {% endfor %}
                </select>
            </div>
            {% endif %}

            <!-- Products Select Tag -->
            <div class="w-full hidden" id="productsSelectTag">
                <label class="text-gray-500">Choose one of {{customer.user.first_name}}'s
                    products/subscriptions:</label>
                <select name="product" id="product-select"
                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-1">
                    <option value="" selected disabled>Select Product</option>
                    {% for customer_product in customer_products %}
                    <option value="{{customer_product.item.id}}">{{customer_product.item.title}}</option>
                    {% endfor %}
                </select>
            </div>

            <div class="w-full">
                <label class="text-gray-500">Department:</label>
                <select name="department"
                    class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-1">
                    <option value="" selected disabled>Select Department</option>
                    {% for department in all_departments %}
                    <option value="{{department.id}}">{{department.name}}</option>
                    {% endfor %}
                </select>
            </div>

            <div class="w-full">
                <label class="text-gray-500">Description:</label>
                <textarea required name="description"
                    class="w-full py-1 px-3 border border-gray-300 outline-none rounded-md mt-1 resize-none"
                    rows="8"></textarea>
            </div>

            <div class="w-full flex flex-col gap-3">
                <div>
                    <label class="text-gray-500">Attach File:</label>
                    <div
                        class="w-full border border-gray-300 rounded-md px-3 py-4 flex justify-between items-center gap-3 mt-1">
                        <label>Upload File(s)</label>

                        <div class="cursor-pointer relative w-fit h-fit">
                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                                class="w-7 h-7 cursor-pointer text-secondosiblue" fill="none">
                                <path
                                    d="M7 6.5H16.75C18.8567 6.5 19.91 6.5 20.6667 7.00559C20.9943 7.22447 21.2755 7.50572 21.4944 7.83329C21.9579 8.52694 21.9965 9.25981 21.9997 11M12 6.5L11.3666 5.23313C10.8418 4.18358 10.3622 3.12712 9.19926 2.69101C8.6899 2.5 8.10802 2.5 6.94427 2.5C5.1278 2.5 4.21956 2.5 3.53806 2.88032C3.05227 3.15142 2.65142 3.55227 2.38032 4.03806C2 4.71956 2 5.6278 2 7.44427V10.5C2 15.214 2 17.5711 3.46447 19.0355C4.8215 20.3926 6.94493 20.4921 11 20.4994H13"
                                    stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
                                <path
                                    d="M18.5 13.5L18.5 21.5M18.5 13.5C17.7998 13.5 16.4915 15.4943 16 16M18.5 13.5C19.2002 13.5 20.5085 15.4943 21 16"
                                    stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                                    stroke-linejoin="round" />
                            </svg>

                            <input type="file" id="fileupload" name="" placeholder="Select file" multiple
                                class="opacity-0 absolute top-1/2 left-1/2 w-[25px] -translate-x-1/2 -translate-y-1/2 z-10">
                        </div>
                    </div>
                </div>

                <div id="uploaded_files" class="w-full flex flex-col gap-3"></div>
                <select id="filePathInput" name="filePath" multiple hidden></select>
            </div>



            <div class="w-full flex justify-center items-center mt-3">
                <button type="submit"
                    class="w-fit py-1 px-5 bg-osiblue rounded-md outline-none text-white border border-osiblue text-xl cursor-pointer hover:bg-white hover:text-osiblue duration-300">Save</button>
            </div>
        </form>
    </div>
</div>



<!-------------- JS SCRIPTS --------------->
<script type="text/javascript" src='{% static "js/tickets/add-ticket.js" %}'></script>

{% if not customer %}
<script type="text/javascript" src='{% static "js/tickets/add-ticket-no-customer.js" %}'></script>
{% endif %}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src='{% static "js/inputs/file-uploader.js" %}'></script>

{% endblock %}