{% extends "customer_main.html" %}
{%load static%}

{% block content %}

<div class="w-full flex flex-col gap-3">
    <div class="w-full bg-white rounded-md h-fit shadow-md p-5">
        <h1 class="text-3xl text-secondosiblue text-center font-semibold">
            Create Ticket
        </h1>

        <form class="w-full flex flex-col gap-5 justify-center items-center mt-5" method="POST" action="{% url 'customeraddticket' %}" enctype="multipart/form-data">
            {% csrf_token %}
            <div class="w-full">
                <label class="text-gray-500">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>

            <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/Subscription</option>
                    <option value="Project">Project</option>
                </select>
            </div>

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

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

<!-- TO DISPLAY THE CHOSEN REGARDING OPTION SELECT TAG -->
<script type="text/javascript" src='{% static "js/tickets/regarding-ticket.js" %}'></script>


{% endblock %}