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

<style>
    #myProgress {
    width: 100%;
}
#uploaded_files {
    margin-top: 25px;
    display: flex;
}
label {
    font-weight: bold;
}
.file-icon i {
    font-size: 60px;
    color: rgb(0, 0, 0);
}
.file-details {
    margin-top: -2px;
    padding-left: 10px;
    width: 100%;
}
.file-details p {
    margin-bottom: -7px;
}
small {
    margin-top: 0;
    color: black;
}
</style>

<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 for {{customer.user.first_name}} {{customer.user.last_name}}
        </h1>

        <form class="w-full flex flex-col gap-5 justify-center items-center mt-5" method="POST"
            action="{% url 'addticket' customer.id %}" 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>

            <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">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"
                    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>

            <!-- 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"
                    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>

            <select id="filePathInput" name="filePath" multiple></select>


            

            <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 class="w-full flex flex-col">
            <div class="w-full border border-gray-300 rounded-md px-3 py-5 flex justify-between items-center gap-3">
                <label>Upload File</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="files" 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 id="uploaded_files" class="w-full flex flex-col gap-3 top-0 right-0 inset-0"></div>
        </div>
    </div>
</div>



<!-------------- JS SCRIPTS --------------->
<script type="text/javascript" src='{% static "js/upload-input-tag.js" %}'></script>

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


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

{% endblock %}