{% extends 'navbar/navbar.html' %}
{% load static %}
{% block profile %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="{% static 'profile/css/profile.css' %}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    

    <title>x-sys</title>
   
</head>

<body>
    <div class="gridBoxSection">
        <h5 class="userProfileTitle">User Profile</h5>
    </div>
    <div class="userProfileMainSection">
        <div class="userProfile">
            <div class="userImageProfile">
                 <img src="{% static 'assets/userProfile.png'%}">
                 <span class="editProfileIcon">
                    <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 462 461.19">
                        <path d="M0,91.15c2.97-8.04,4.86-16.72,9.13-24,12.02-20.54,30.61-31.46,54.38-31.62,56.66-.4,113.32-.17,169.98-.1,13.17,.02,22.66,9.34,22.5,21.67-.16,12.1-9.62,21.02-22.61,21.03-55.49,.04-110.99,.02-166.48,.02-15.76,0-24.13,8.25-24.13,23.93-.02,97.83-.02,195.66,0,293.49,0,15.51,8.24,23.84,23.68,23.85,97.99,.03,195.97,.03,293.96,0,15.25,0,23.59-8.57,23.6-24.01,0-55.66-.03-111.33,.03-166.99,.02-15.61,13.97-25.94,28.22-21.12,8.97,3.04,14.43,11.05,14.48,21.71,.08,19.17,.03,38.33,.03,57.5,0,35.5,0,71,0,106.5,0,35.09-16.36,57.23-49.94,67.62-.3,.09-.54,.37-.81,.57H50c-1.18-.49-2.34-1.1-3.56-1.47-16.89-5.11-30.05-15.16-38.25-30.74C4.46,421.91,2.67,413.82,0,406.19c0-105.01,0-210.02,0-315.03Z"/>
                        <path d="M462,60.15c-2.75,17.07-12.96,29.46-25.2,40.72-6.73,6.18-12.95,12.91-18.94,18.93-25.14-25.14-50.05-50.05-75.39-75.4,.54-.56,1.84-1.98,3.2-3.34,8.12-8.14,16.19-16.32,24.39-24.37,15.32-15.02,33.56-20.38,54.09-14.09,20.48,6.28,32.8,20.69,37.01,41.84,.12,.6,.55,1.15,.84,1.72v14Z"/>
                        <path d="M318.36,68.57c25.17,25.18,50.11,50.13,75.23,75.25-.82,.87-1.91,2.09-3.06,3.24-54.08,54.1-108.13,108.23-162.37,162.17-3.09,3.08-7.62,5.56-11.87,6.48-23.26,5.03-46.63,9.49-69.98,14.11-9.64,1.91-15.93-4.08-14.06-13.58,4.81-24.33,9.69-48.64,14.75-72.91,.54-2.61,1.98-5.43,3.85-7.31,55.53-55.71,111.18-111.31,166.8-166.93,.23-.23,.53-.4,.7-.53Z"/>
                    </svg>
                </span>
                 <p class="userName">User Name</p>
            </div>
            <div>
                <a class="menuListProfile menuListActiveProfile" id="MenuProfileSetting">
                    <span class="menuListProfileIcon">
                        <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 409.01 408.86">
                            <path d="M216.43,408.86h-23.96c-5.39-.64-10.8-1.19-16.18-1.95-40.31-5.69-75.96-21.79-106.47-48.73C33.89,326.45,11.41,286.97,3.14,239.62,1.8,231.94,1.03,224.16,0,216.43c0-7.99,0-15.97,0-23.96,.24-1.28,.61-2.54,.7-3.83,1.23-18.42,5.09-36.31,11.37-53.63C47.82,36.53,151.67-18.96,253.51,5.92c105.06,25.67,172.4,130.76,151.8,236.86-7.9,40.69-26.34,75.88-55.48,105.29-30.55,30.84-67.26,50.25-110.14,57.64-7.7,1.33-15.5,2.11-23.26,3.15Zm124.36-86.97c56.84-62.95,64.99-175.49-13.57-249.61C252.39,1.69,130.92,9.56,65.36,89.62-.53,170.08,21.35,272.2,68.2,321.59c13.24-46.74,42.68-78.92,87.72-97.19-47.36-34.03-46.27-94.99-15.52-128.61,31.9-34.87,85.66-38.44,120.3-7.62,18.76,16.69,29.13,37.57,29.62,62.66,.6,30.73-12.51,55.04-37.34,73.48,45.28,18.36,74.37,50.71,87.82,97.59Zm-133.05,63.03c4.31-.36,12.03-.73,19.67-1.68,30.72-3.81,58.55-15.03,83.46-33.35,10.09-7.42,9.95-7.61,6.94-20.1-14.51-60.29-71.97-98.33-133.05-88.08-49.56,8.32-88.96,49.02-95.55,98.86-.16,1.2,.71,3.03,1.7,3.82,33.11,26.63,70.99,39.96,116.83,40.52Zm-3.32-169.76c34.08,.04,61.89-27.6,62.16-61.79,.27-34-27.92-62.28-62.1-62.3-34.17-.02-62.36,28.21-62.16,62.25,.2,34.15,27.98,61.81,62.1,61.85Z"/>
                        </svg>
                    </span>
                    <span class="menuListProfileText">Profile Setting</span>
                </a>
                <a class="menuListProfile" id="MenuPassword">
                    <span class="menuListProfileIcon">
                        <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 270.72 360.76">
                            <path d="M33.9,146.16c0-1.42,0-2.89,0-4.35,.09-15.46-.38-30.96,.37-46.39C36.53,49.45,69.63,11.37,114.76,2.13c56.89-11.65,111.45,25.74,120.7,82.89,1.01,6.24,1.22,12.66,1.32,19,.2,12.72,.06,25.44,.06,38.17,0,1.34,0,2.68,0,3.75,4.44,1.03,8.55,1.56,12.35,2.94,13.51,4.9,21.42,17.05,21.49,32.73,.08,16.84,.02,33.68,.02,50.52,0,31.06,.03,62.12-.01,93.17-.02,14.43-5.72,25.79-19.13,32.02-4.49,2.08-9.82,3.27-14.78,3.28-67.6,.21-135.21,.21-202.81,.1-19.73-.03-33.75-14.48-33.89-34.65-.14-19.71-.03-39.41-.03-59.12,0-28.44-.05-56.88,.02-85.32,.05-16.81,9.21-29.45,24.32-33.69,2.85-.8,5.85-1.09,9.52-1.76Zm101.46,22.95c-32.93,0-65.86,0-98.78,0-10.39,0-13.97,3.53-13.97,13.89-.01,47.15-.01,94.29,0,141.44,0,10.07,3.74,13.77,13.79,13.77,65.98,0,131.96,0,197.94,0,10.05,0,13.79-3.71,13.79-13.77,.02-47.27,.02-94.54,0-141.81,0-9.87-3.72-13.51-13.61-13.51-33.05,0-66.1,0-99.16,0Zm78.75-22.71c0-16.52,.45-32.61-.08-48.67-1.62-48.68-47.8-84.08-95.37-73.43-37.16,8.32-61.75,38.96-62.12,77.56-.13,13.6-.03,27.19-.02,40.79,0,1.2,.14,2.4,.22,3.75H214.11Z"/>
                            <path d="M124.12,282.05c0-.62-.07-1.26,0-1.87,1-7.31-.52-12.17-8.12-16.37-13.38-7.4-17.8-24.93-12.07-39.85,5.44-14.16,20.61-23,35.65-20.78,16.09,2.38,27.21,13.36,29.32,28.96,2.05,15.14-5.64,28.55-20.07,35.4-1.06,.5-2.09,2.31-2.12,3.53-.2,7.1-.05,14.21-.11,21.32-.06,7.54-4.4,12.05-11.36,11.97-6.84-.08-11.01-4.51-11.12-11.84-.05-3.49,0-6.98-.01-10.47Zm11.03-34.16c6.82,.08,11.36-4.26,11.45-10.96,.09-6.71-4.36-11.36-11.02-11.49-6.66-.13-11.35,4.39-11.44,11.05-.1,6.78,4.28,11.32,11.01,11.4Z"/>
                        </svg>
                    </span>
                    <span class="menuListProfileText">Password</span>
                </a>
                <a class="menuListProfile" id="AddUserSection">
                    <span class="menuListProfileIcon">
                       <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 311.48 359.9">
                            <path d="M103.39,177.35c-5.98-5.35-12.46-10.12-17.69-16-25.13-28.25-32.66-60.93-20.3-96.63C77.76,29.03,103.73,7.42,141.06,1.3c53.77-8.82,102.94,28.34,110.38,82.36,6.96,50.6-29.04,99.31-79.4,107.01-9.21,1.41-18.67,1.07-27.93,2.18-55.14,6.61-92.67,36.07-112.69,87.75-5.13,13.24-7.19,27.19-7.43,41.38-.15,9.11,4.59,13.94,13.64,13.94,38.55,.01,77.11,0,115.66,.01,1.49,0,3.02-.08,4.48,.17,5.87,1,10.15,6.35,9.93,12.26-.22,5.91-4.91,10.86-10.85,11.46-.62,.06-1.25,.05-1.87,.05-39.68,0-79.35,.1-119.03-.04C15.68,359.75,.08,343.81,0,323.53c-.25-63.52,40.85-122.87,100.31-144.9,1.14-.42,2.25-.93,3.08-1.28ZM155.51,24.49c-39.26-.1-71.44,32.11-71.64,71.71-.2,39.3,32.07,71.87,71.36,72.01,39.61,.14,72.19-31.81,72.39-70.97,.2-40.41-31.74-72.64-72.1-72.74Z"/>
                            <path d="M233.63,258.05c0-14.39-.08-28.22,.03-42.06,.05-6.3,4.79-11.26,10.84-11.8,5.91-.53,11.4,3.4,12.74,9.29,.35,1.55,.32,3.22,.33,4.83,.02,13.08,.01,26.16,.01,39.74,1.53,0,2.85,0,4.17,0,12.1,0,24.2-.01,36.29,0,7.95,.01,13.4,4.86,13.44,11.91,.03,7.07-5.41,12.02-13.32,12.03-13.34,.02-26.67,0-40.58,0,0,1.46,0,2.77,0,4.08,0,12.59,.06,25.19-.04,37.78-.05,6.33-4.66,11.33-10.68,11.98-5.85,.63-11.44-3.27-12.87-9.11-.35-1.43-.36-2.96-.36-4.45-.03-12.1-.02-24.19-.02-36.29,0-1.21,0-2.42,0-3.99-4.32,0-8.27,0-12.23,0-9.73,0-19.46,.05-29.19-.02-7.22-.05-12.56-5.31-12.48-12.11,.08-6.68,5.32-11.77,12.39-11.81,12.35-.07,24.7-.02,37.04-.02,1.35,0,2.69,0,4.48,0Z"/>
                        </svg>
                    </span>
                    <span class="menuListProfileText">Add User</span>
                </a>
                <a class="menuListProfile" id="helpdesk-section">
                    <span class="menuListProfileIcon">
                      <img src="/static/assets/icons8-customer-support-50.png" alt="Ticket Icon" style="width: 22px; height: 22px;">
                    </span>
                    <span class="menuListProfileText">Ticket system</span>
                </a>
                
                
                
                
            </div>
        </div>
        <div class="userDetailsProfile">
            <div class="profile-section">
                <h5 class="userDetailsProfileTitle">Profile Setting</h5>
                <form method="post">
                    <div class="user-details">
                        <div class="input-box">
                        <div>
                            <span class="details">>.  Email</span>
                            <span class="details">...</span>
                        </div>
                        <input type="email" name="email" maxlength="254" id="id_email"  />
                        </div>
                        <div class="input-box">
                        <div>
                            <span class="details">>.  Phone Number</span>
                            <span class="details">...</span>
                        </div>
                        <input type="text" name="phone_number" maxlength="15"  id="id_phone_number"/>
                        </div>
                        <div class="input-box">
                        <div>
                            <span class="details">>.  Li-phy card identifier</span>
                            <span class="details">...</span>
                        </div>
                        <input type="text" name="li_phy_card_identifier" maxlength="20"  id="id_li_phy_card_identifier"/>
                        </div>   
                        <div class="input-box">
                        <div>
                            <span class="details">>.  Company name</span>
                            <span class="details">...</span>
                        </div>
                        <input type="text" name="company_name" maxlength="20"  id="id_company_name"/>
                        </div>   
                        <div class="input-box">
                        <div>
                            <span class="details">>.  Country</span>
                            <span class="details">...</span>
                        </div>
                        <input type="text" name="country" maxlength="50"  id="id_country"/>
                        </div>
                        <div class="input-box">
                        <div>
                            <span class="details">>.  State</span>
                            <span class="details">...</span>
                        </div>
                        <input type="text" name="state" maxlength="50"  id="id_state"/>
                        </div>
                        <div class="input-box">
                        <div>
                            <span class="details">>.  Postal Code</span>
                            <span class="details">...</span>
                        </div>
                        <input type="text" name="postal_code" maxlength="10"  id="id_postal_code"/>
                        </div>
                        <div class="input-box" style="width: 738px;">
                        <div>
                            <span class="details">>.  Full Address</span>
                            <span class="details">...</span>
                        </div>
                        <input name="full_address" cols="40" rows="10"  id="id_full_address"/>
                        </div>
                    </div>
                    <div class="button">
                        <input type="submit" id="registerButton" value="Update">
                    </div>
                </form>
            </div>
            <div class="password-section">
                <h5 class="userDetailsProfileTitle">Change Password</h5>
                <form method="post">
                    <div class="user-details">
                        <div class="input-box">
                            <div>
                                <span class="details">>.  Password</span>
                                <span class="details">...</span>
                            </div>
                            <input type="password" name="password" id="id_password"  />
                        </div>
                        <div class="input-box">
                            <div>
                                <span class="details">>.  Confirm Password</span>
                                <span class="details">...</span>
                            </div>
                            <input type="password" name="password" id="id_password"  />
                        </div>                        
                    </div>
                    <div class="button">
                        <input type="submit" id="registerButton" value="Change Password">
                    </div>
                </form>
            </div>
            <div class="add-user-section">
                <h5 class="userDetailsProfileTitle">Add User</h5>
                <form method="post">
                    <div class="user-details">
                        <div class="input-box">
                            <div>
                                <span class="details">>.  First Name</span>
                                <span class="details">...</span>
                            </div>
                            <input type="FirstName" name="FirstName" maxlength="254" id="id_FirstName"  />
                        </div>
                        <div class="input-box">
                            <div>
                                <span class="details">>.  Last Name</span>
                                <span class="details">...</span>
                            </div>
                            <input type="text" name="last_name" maxlength="15"  id="id_last_name"/>
                        </div>
                        <div class="input-box">
                            <div>
                                <span class="details">>.  Email</span>
                                <span class="details">...</span>
                            </div>
                            <input type="email" name="email" maxlength="254" id="id_email"  />
                        </div>
                        <div class="input-box">
                            <div>
                                <span class="details">>.  Access Level</span>
                                <span class="details">...</span>
                            </div>
                            <select>
                                <option disabled selected></option>
                                <option>Admin</option>
                                <option>Regulator</option>
                                <option>Manager</option>
                            </select>
                        </div>                    
                    </div>
                    <div class="button">
                        <input type="submit" id="TicketButton" value="Add User">
                    </div>
                </form>
            </div>
            <!-- <div class="submission-list" style="display: none;" >
                <h6>My Submissions lists</h6>
                <ul id="submission-list"></ul>
                <p id="no-submissions" style="display: none;">No submissions found.</p>
            </div> -->
            
            <div class="helpdesk-section" style="display: none;"> <!-- Initially hidden -->
                <h5 class="userDetailsProfileTitle">Ticket System</h5>
                
                <!-- Tab Navigation -->
                <div class="tab-navigation" style="display: flex; margin-bottom: 10px;">
                    <button class="tab-button" 
                            style="height: 45px; margin-top: 1rem; padding: 0 25px; 
                                   background: transparent; border: 1px solid #3a81a5; color: #3a81a5; 
                                   font-size: 15px; font-weight: 300; letter-spacing: 1px; 
                                   cursor: pointer; transition: all 0.3s ease; border-radius: 5px;"
                            onmouseover="this.style.background='linear-gradient(-135deg, #0e2a39, #0a181e)'; this.style.color='white';" 
                            onmouseout="this.style.background='transparent'; this.style.color='#3a81a5';" 
                            onclick="showTab('show-tickets')">Show Tickets</button>
                    <!-- <button class="tab-button" 
                            style="height: 45px; margin-top: 1rem; padding: 0 25px; 
                                   background: transparent; border: 1px solid #3a81a5; color: #3a81a5; 
                                   font-size: 15px; font-weight: 300; letter-spacing: 1px; 
                                   cursor: pointer; transition: all 0.3s ease; border-radius: 5px;"
                            onmouseover="this.style.background='linear-gradient(-135deg, #0e2a39, #0a181e)'; this.style.color='white';" 
                            onmouseout="this.style.background='transparent'; this.style.color='#3a81a5';" 
                            onclick="showTab('my-tickets')">My Tickets</button> -->
                    <button class="tab-button" 
                            style="height: 45px; margin-top: 1rem; padding: 0 25px; 
                                   background: transparent; border: 1px solid #3a81a5; color: #3a81a5; 
                                   font-size: 15px; font-weight: 300; letter-spacing: 1px; 
                                   cursor: pointer; transition: all 0.3s ease; border-radius: 5px;"
                            onmouseover="this.style.background='linear-gradient(-135deg, #0e2a39, #0a181e)'; this.style.color='white';" 
                            onmouseout="this.style.background='transparent'; this.style.color='#3a81a5';" 
                            onclick="showTab('add-ticket')">Add Ticket</button>
                </div>
                
                
            
                <!-- Show Tickets Tab -->
                <div id="show-tickets" class="tab-content" style="display: block; height: 100%; padding: 0 20px; color: #3a81a5; font-size: 15px; font-weight: 300; letter-spacing: 1px; cursor: pointer; transition: all 0.3s ease; background: transparent; border: 1px solid #153549; border-radius: 0px 10px;">
                    <!-- <h6>All Tickets</h6> -->
                    <table id="submission-table" class="submission-table" style="width: 100%; border-collapse: collapse;">
                        <thead>
                            <tr>
                                <th style="padding: 10px; text-align: left; border: 1px solid #ddd;">Title</th>
                                <th style="padding: 10px; text-align: left; border: 1px solid #ddd;">Description</th>
                                <th style="padding: 10px; text-align: left; border: 1px solid #ddd;">Image</th>
                                <th style="padding: 10px; text-align: left; border: 1px solid #ddd;">Status</th>
                            </tr>
                        </thead>
                        <tbody id="submission-list"></tbody>
                    </table>
                    <p id="no-submissions" style="display: none; text-align: center; font-size: 1.2em; padding: 20px;">No submissions found.</p>
                </div>
            
                <!-- My Tickets Tab -->
                <!-- <div id="my-tickets" class="tab-content" style="display: none;">
                    <h6>My Tickets</h6>
                    <table id="my-submission-table" class="submission-table">
                        <thead>
                            <tr>
                                <th>Title</th>
                                <th>Description</th>
                                <th>Image</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody id="my-submission-list"></tbody>
                    </table>
                    <p id="no-my-submissions" style="display: none;">No submissions found.</p>
                </div> -->
            
                <!-- Add Ticket Tab -->
                <div id="add-ticket" class="tab-content" style="display: none;">
                    <form id="helpdesk-form" method="post" enctype="multipart/form-data" action="{% url 'helpdesk_submission_create' %}">
                        {% csrf_token %}
                        <div class="user-details">
                            <div class="input-box">
                                <div>
                                    <span class="details">>. Title</span>
                                </div>
                                <input type="text" name="title" maxlength="100" id="title" required />
                            </div>
                            <div class="input-box">
                                <div>
                                    <span class="details">>. Description</span>
                                </div>
                                <textarea name="description" id="description" required style="color: white; background-color: transparent; border: none; width: 100%; height: 150px;"></textarea>


                            </div>
                            <div class="input-box">
                                <div>
                                    <span class="details">>. Image</span>
                                </div>
                                <input type="file" name="image" id="image" accept="image/*" />
                            </div>
                            <div class="button">
                                <input type="submit" id="submitButton" value="Submit">
                            </div>
                    </div>
                </form>
            </div>
        </div>

    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>  
    <script src="{% static 'profile/js/profile.js' %}"></script>



    <script>
        $(document).ready(function () {
            // Click events for different sections
            $("#MenuProfileSetting").click(function () {
                console.log(" profile section clicked");
                hideAllSections();
                $(".profile-section").show();
                $("#MenuProfileSetting").addClass('menuListActiveProfile');
            });

            $("#MenuPassword").click(function () {
                hideAllSections();
                console.log("Password section clicked");
                $(".password-section").show();
                $("#MenuPassword").addClass('menuListActiveProfile');
            });

            $("#AddUserSection").click(function () {
                console.log("Adduser section clicked");
                hideAllSections();
                $(".add-user-section").show();
                $("#AddUserSection").addClass('menuListActiveProfile');
            });

            // Add click event for helpdesk section
            $("#helpdesk-section").click(function () {
                console.log("Helpdesk section clicked");
                hideAllSections();
                $(".helpdesk-section").show(); // Show helpdesk section
                $("#helpdesk-section").addClass('menuListActiveProfile'); // Add active class
            });
        });

        function hideAllSections() {
            $(".password-section").hide();
            $("#MenuPassword").removeClass('menuListActiveProfile');

            $(".profile-section").hide();
            $("#MenuProfileSetting").removeClass('menuListActiveProfile');

            $(".add-user-section").hide();
            $("#AddUserSection").removeClass('menuListActiveProfile');

            $(".helpdesk-section").hide(); // Hide helpdesk section
            $("#helpdesk-section").removeClass('menuListActiveProfile'); // Remove active class
        }
    </script>


    <script>
        function showTab(tabName) {
            // Hide all tab contents
            const tabContents = document.querySelectorAll('.tab-content');
            tabContents.forEach(tab => {
                tab.style.display = 'none';
            });
    
            // Show the selected tab
            document.getElementById(tabName).style.display = 'block';
        }
    </script>
    
    <!-- <script>
        // Form submission handler
        document.getElementById('helpdesk-form').addEventListener('submit', function(event) {
            event.preventDefault();  // Prevent default form submission behavior
        
            const formData = new FormData(this); 
            
            const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;  // CSRF token
            console.log('CSRF Token:', csrfToken);
            

                // Add status value to form data
            formData.append('status', 1);  // Set the status value as 1
            // Make a POST request to the Django API
            fetch('http://127.0.0.1:8000/helpdesk/submit/', {
                method: 'POST',
                headers: {
                    'X-CSRFToken': csrfToken  // Attach CSRF token to headers
                },
                body: formData  // Send form data
            })
            .then(response => response.json())  // Parse JSON response
            .then(data => {
                if (data.success) {
                    alert('Submission created successfully!');
                    loadSubmissions();  // Reload submissions after successful creation
                } else {
                    alert('Error creating submission. Please try again.');
                    console.error('Form errors:', data.errors);  // Debug form errors
                }
            })
            .catch(error => {
                console.error('Error:', error);  // Handle network errors
            });
        });
    
        // Function to load submissions
        function loadSubmissions() {
            console.log('Loading submissions...');  // Log when loading starts
            fetch('http://127.0.0.1:8000/helpdesk/submissions/', {
                method: 'GET',
                headers: {
                    'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
                }
            })
            .then(response => {
                console.log('Response status:', response.status);  // Log response status
                if (!response.ok) {
                    throw new Error('Network response was not ok: ' + response.statusText);
                }
                return response.json();
            })
            .then(data => {
                console.log('Fetched data:', data);  // Log the fetched data
                const submissionList = document.getElementById('submission-list');
                const noSubmissionsMessage = document.getElementById('no-submissions');
                

                if (data.submissions && data.submissions.length > 0) {
                    data.submissions.forEach(submission => {
                        console.log('Submission:', submission); 
                        const listItem = document.createElement('tr');

                        // Title
                        const title = document.createElement('td');
                        title.textContent = submission.title;
                        listItem.appendChild(title);

                        // Description
                        const description = document.createElement('td');
                        description.textContent = submission.description;
                        listItem.appendChild(description);


                         

                        // Image
                        if (submission.image) {
                            const img = document.createElement('img');
                            img.src = submission.image;
                            img.alt = 'Image';
                            img.style.width = '100px';
                            img.style.height = 'auto';
                            listItem.appendChild(img);


                        
                        }
                         // status
                        const status = document.createElement('td');
                        status.textContent = submission.status;
                        listItem.appendChild(status);

                        submissionList.appendChild(listItem);
                    });
                    noSubmissionsMessage.style.display = 'none';  // Hide no submissions message
                } else {
                    noSubmissionsMessage.style.display = 'block';  // Show no submissions message
                }
            })
            .catch(error => {
                console.error('Error fetching submissions:', error);
            });
        }
        // Load submissions on page load
        document.addEventListener('DOMContentLoaded', loadSubmissions);
    </script>   -->

    <script>
        // Function to submit the form
        document.getElementById('helpdesk-form').addEventListener('submit', function(event) {
            event.preventDefault();  // Prevent default form submission behavior
        
            const formData = new FormData(this); 
            const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;  // CSRF token
            formData.append('status', 1);  // Set the status value as 1
            
            // POST request to the helpdesk submit API
            fetch('http://127.0.0.1:8000/helpdesk/submit/', {
                method: 'POST',
                headers: {
                    'X-CSRFToken': csrfToken  // Attach CSRF token
                },
                body: formData  // Send form data
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('Submission created successfully!');
                    loadAllSubmissions();  // Reload all submissions
                } else {
                    alert('Error creating submission. Please try again.');
                    console.error('Form errors:', data.errors);
                }
            })
            .catch(error => {
                console.error('Error:', error);
            });
        });
        
        // Function to load all submissions (for "All Tickets")
        function loadAllSubmissions() {
            console.log('Loading all submissions...');
            fetch('http://127.0.0.1:8000/helpdesk/submissions/', {
                method: 'GET',
                headers: {
                    'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
                }
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok: ' + response.statusText);
                }
                return response.json();
            })
            .then(data => {
                const submissionList = document.getElementById('submission-list');
                const noSubmissionsMessage = document.getElementById('no-submissions');
                submissionList.innerHTML = '';  // Clear the previous list
                
                if (data.submissions && data.submissions.length > 0) {
                    data.submissions.forEach(submission => {
                        const listItem = document.createElement('tr');
                        
                        // Title
                        const title = document.createElement('td');
                        title.textContent = submission.title;
                        listItem.appendChild(title);
    
                        // Description
                        const description = document.createElement('td');
                        description.textContent = submission.description;
                        listItem.appendChild(description);
    
                        // Image
                        if (submission.image) {
                            const img = document.createElement('img');
                            img.src = submission.image;
                            img.alt = 'Image';
                            img.style.width = '100px';
                            img.style.height = 'auto';
                            listItem.appendChild(img);
                        }
    
                        // Status
                        const status = document.createElement('td');
                        status.textContent = submission.status === 1 ? 'Submit' : submission.status; // Show 'Submit' if status is 1
                        listItem.appendChild(status);

                        submissionList.appendChild(listItem);
                    });
                    noSubmissionsMessage.style.display = 'none';
                } else {
                    noSubmissionsMessage.style.display = 'block';
                }
            })
            .catch(error => {
                console.error('Error fetching submissions:', error);
            });
        }
    
        // Function to load "My Tickets" (for "My Tickets" tab)
        function loadMySubmissions() {
            console.log('Loading my submissions...');
            fetch('http://127.0.0.1:8000/helpdesk/submissions/', {
                method: 'GET',
                headers: {
                    'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
                }
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok: ' + response.statusText);
                }
                return response.json();
            })
            .then(data => {
                const mySubmissionList = document.getElementById('my-submission-list');
                const noMySubmissionsMessage = document.getElementById('no-my-submissions');
                mySubmissionList.innerHTML = '';  // Clear the previous list
                
                if (data.submissions && data.submissions.length > 0) {
                    data.submissions.forEach(submission => {
                        const listItem = document.createElement('tr');
                        
                        // Title
                        const title = document.createElement('td');
                        title.textContent = submission.title;
                        listItem.appendChild(title);
    
                        // Description
                        const description = document.createElement('td');
                        description.textContent = submission.description;
                        listItem.appendChild(description);
    
                        // Image
                        if (submission.image) {
                            const img = document.createElement('img');
                            img.src = submission.image;
                            img.alt = 'Image';
                            img.style.width = '100px';
                            img.style.height = 'auto';
                            listItem.appendChild(img);
                        }
    
                        // Status
                        const status = document.createElement('td');
                        status.textContent = submission.status;
                        listItem.appendChild(status);
    
                        mySubmissionList.appendChild(listItem);
                    });
                    noMySubmissionsMessage.style.display = 'none';
                } else {
                    noMySubmissionsMessage.style.display = 'block';
                }
            })
            .catch(error => {
                console.error('Error fetching my submissions:', error);
            });
        }
    
        // Load submissions when the page loads
        document.addEventListener('DOMContentLoaded', function() {
            loadAllSubmissions();  // Load "All Tickets"
        });
    
        // Switch between "All Tickets" and "My Tickets"
        document.getElementById('all-tickets-tab').addEventListener('click', function() {
            document.getElementById('show-tickets').style.display = 'block';
            document.getElementById('my-tickets').style.display = 'none';
            loadAllSubmissions();  // Load "All Tickets"
        });
    
        document.getElementById('my-tickets-tab').addEventListener('click', function() {
            document.getElementById('show-tickets').style.display = 'none';
            document.getElementById('my-tickets').style.display = 'block';
            loadMySubmissions();  // Load "My Tickets"
        });
    </script>
    <style>
       .submission-table {
        width: 100%;
        border: 1px solid #3a81a5; /* Table border */
        border-collapse: collapse; /* Ensure borders collapse */
        }

        .submission-table th, .submission-table td {
            border: 1px solid#3a81a5; /* Cell border */
            padding: 10px;
            text-align: left;
        }

    
        /* Media Query for screens wider than 768px */
        @media (min-width: 768px) {
            .submission-table th, .submission-table td {
                padding: 15px;
                padding-right: 378px;
            }
    
            .submission-list {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
            }
    
            .submission-table {
                width: 100%;
            }
        }
    
        /* Media Query for screens smaller than 768px */
        @media (max-width: 767px) {
            .submission-table, .submission-table thead, .submission-table tbody, .submission-table th, .submission-table td, .submission-table tr {
                display: block;
                width: 100%;
            }
    
            .submission-table th {
                background-color: #f5f5f5;
                text-align: left;
            }
    
            .submission-table td {
                position: relative;
                padding-left: 50%;
            }
    
            .submission-table td:before {
                content: attr(data-label);
                position: absolute;
                left: 10px;
                width: 45%;
                padding-right: 10px;
                white-space: nowrap;
                font-weight: bold;
            }
    
            .submission-table td[data-label="Image"] img {
                max-width: 100%;
                height: auto;
            }
    
            .tab-navigation {
                display: flex;
                margin-bottom: 10px;
            }
    
            .tab-button {
                height: 45px;
                margin-top: 1rem;
                padding: 0 25px;
            }
    
            .tab-button:hover {
                background: linear-gradient(-135deg, #0e2a39, #0a181e); /* Darker shade on hover */
            }
        }
    </style>

</body>
{% endblock %}
</html>