{% extends "layout/default.html" %}

{% load i18n %}

{% block title %}{% translate "Customer Notes " %}{% endblock %}

{% block breadcumbheading %}
{% translate "Manage Notifications " %}
{% endblock  %}
{% block breadcumbfirst %}

<a class="text-muted text-hover-primary" style="text-transform: capitalize;">Manage Notification List  </a>

{% endblock  %}
{% block breadcumbaddmore %}
	<!--begin::Item-->
		<li class="breadcrumb-item">
			<span class="bullet bg-gray-400 w-5px h-2px"></span>
		</li>
		<!--end::Item-->
		<!--begin::Item-->
		<li class="breadcrumb-item text-muted" style="text-transform: capitalize;">Note</li>
		<!--end::Item-->
{% endblock  %}

{% block content %}
<div class="custom mt-3">
    <div class="row g-5 g-xl-10 mb-5 mb-xl-10 cust-row">
        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12">
            <div class="card card-flush h-md-100 cust-card">
	    <div class="card-header pt-7">
		    <h3 class="card-title align-items-start flex-column">
			    <span class="card-label fw-bold text-gray-800">Note List</span>
		    </h3>
		         {% if messages %}
                {% for message in messages %}
                  <div class="alert alert-{% if message.tags == 'error' %}danger{% else %}success{% endif %}" role="alert">
                    {{ message }}
                    </div>  
                {% endfor %}
            {% endif %}
		    <div class="card-toolbar">
			    <div class="d-flex justify-content-end" data-kt-user-table-toolbar="base">
                </div>
	    	</div>
    	</div>
	    <div class="card-body pt-6">
	     {% if notes %}
	        
	    	<div class="table-responsive cust-table mt-2 prod-table">
	    	     
			    <table class="table table-row-dashed align-middle gs-0 gy-3 my-0">
                    <thead>
                        <tr class="fs-7 fw-bold text-gray-400 border-bottom-0">

                          <th class="pb-3 min-w-100px fw-bold text-start" colspan="1">Sr.No</th>
                           <th class="pb-3 min-w-100px fw-bold text-start" colspan="1" style="text-align: left !important;">Customer Name</th>
                          <th class="pb-3 min-w-200px fw-bold text-start" colspan="2" style="text-align: left !important;">Note</th>
                          
                                                 <th class="text-start pe-0" >Created By</th>
                        {% if 1 in user_roles %} 
                        <th class="pb-3 min-w-175px fw-bold text-start">Show To</th>
                        <th class="pb-3 min-w-200px fw-bold text-start">Is Read?</th>
                        {% endif %}
                        <th>Action</th>
                          <!--<th class="pb-3 min-w-175px fw-bold text-start">Reminder Date</th>-->
                          <!--<th class="pb-3 min-w-175px fw-bold text-start">Show To</th>-->
                          <!--<th class="pb-3 min-w-175px fw-bold text-start">Action</th>-->

                        </tr>
                      </thead>
			    	    <tbody>
			    	        
			    	        {% for note in notes %}
			    	      
			    		       <tr>
                                <td class="text-start pe-0" colspan="1">

                                    <span class="text-black-600 fw-bold fs-6" >{{ forloop.counter }}</span>
                                  </td>
                                   <td class="text-start pe-0" colspan="1" style="text-align: left !important;">
                                    <span class="text-black-600  fs-6">
                                       {% if note.customer.get_is_individual_display == 'Individual' %}{{ note.customer.first_name }} {{ note.customer.last_name }} {% else %} {{ note.customer.company_name }} {% endif %}
                                      </span>
                                  </td>
                                <td class="text-start pe-0"  colspan="2"  style="text-align: left !important;">
                                    <span class="text-black-600  fs-6">
                                       <b>{{note.note}}</b> 
                                      </span>
                                  </td>
                                  <td class="text-start pe-0" >{% if note.created_by.userinfo.first_name %}{{ note.created_by.userinfo.first_name }} {{ note.created_by.userinfo.last_name }}{%else%}-{%endif%}<br>{{note.created_at|date:'d-m-Y H:m:s'}}</td>
                            
                                  {% if 1 in user_roles %} 
                                   <td class="text-start pe-0">
                                    <span class="text-black-600 fw-bold fs-6">{% if note.assigned_to.userinfo.first_name %}{{ note.assigned_to.userinfo.first_name }} {{ note.assigned_to.userinfo.last_name }}{%else%}-{%endif%}</span>
                                  </td>
                                  <td class="text-start pe-0">
                                   <span class="text-black-600 fw-bold badge py-3 px-4 fs-7   status     {% if note.is_read == 1 %} accepted {% else %} rejected {% endif %}  ">{% if note.is_read == 1 %} Read {% else %} Not Read Yet  {% endif %}</span>
                                  
                                  </td>
                                   {% endif %}
                                   <td>
                                        <a href="#" class="btn btn-light btn-active-light-primary btn-flex btn-center btn-sm" data-kt-menu-trigger="click" data-kt-menu-placement="bottom-end">Select<i class="ki-duotone ki-down fs-5 ms-1"></i></a>
                                        <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-semibold fs-7 w-125px py-4" data-kt-menu="true" style="">
                                            {% if note.is_read == 0  %} 
                                            <div class="menu-item px-3">
                                                <a href="javascript:void(0);" class="menu-link px-3" data-bs-toggle="modal" data-bs-target="#noteModal-{{ note.id }}">Mark As Read</a>
                                            </div>
                                            {% endif %}
                                             <div class="menu-item px-3">
                                                <a href="javascript:void(0);" class="menu-link px-3"  data-bs-toggle="modal" data-bs-target="#viewHistory-{{ note.id }}">View History</a>
                                            </div>
                                        </div>
                                        
                                      
                                       
                                  {% comment %}  <div class="modal fade" id="noteModal-{{ note.id }}" tabindex="-1" aria-labelledby="modalLabel-{{ note.id }}" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="modalLabel-{{ note.id }}">Update Note for {% if note.assigned_to.userinfo.first_name %}{{ note.assigned_to.userinfo.first_name }} {{ note.assigned_to.userinfo.last_name }}{%else%}-{%endif%}</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <form method="POST" action="{% url 'customer:update_customer_note_add_updation' note.id %}">
                                    {% csrf_token %}
                                    <div class="mb-3 text-left mt-2">
                                        <label for="note-{{ note.id }}" class="form-label">Note</label>
                                        <textarea class="form-control" id="note-{{ note.id }}" name="note" rows="3" required></textarea>
                                        <input type="hidden" name="groupid" value="{{ note.groupid }}">
                                    </div>
                                    <div class="mb-3 text-left mt-2">
                                        <label for="reminder-{{ note.id }}" class="form-label">Reminder Date (optional)</label>
                                        <input type="date" class="form-control" id="reminder-{{ note.id }}" name="reminder_date" value="">
                                    </div>
                                     <div class="mb-3 text-left mt-2" {% if 1 in user_roles %} {% else %} hidden {% endif %}>
                                        <label for="userid-{{ note.id }}" class="form-label">Assign to Sales User</label>
                                        <select class="form-control" id="userid-{{ note.id }}" name="userid" >
                                            <option value="">Select Sales User (optional)</option>
                                            {% for user in users %}
                                            <option value="{{ user.id }}" {% if user.id == note.assigned_to_id %} selected {% endif %}>{% if user.userinfo.first_name %}{{ user.userinfo.first_name }} {{ user.userinfo.last_name }}{%else%}-{%endif%}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                    <button type="submit" class="btn btn-light btn-active-light-primary btn-flex btn-center btn-sm" style="float:right;">Update Note</button>
                                   
                                </form>
                            </div>
                        </div>
                    </div>
                </div>{% endcomment %}
                <div class="modal fade" id="viewHistory-{{ note.id }}" tabindex="-1" aria-labelledby="actionModalLabel" aria-hidden="true">
                    <div class="modal-dialog" style="max-width: 900px;">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="actionModalLabel">Note History</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body text-start">
                                
                                 <div class="table-responsive cust-table mt-2 prod-table">
                	    	     
                			    <table class="table table-row-dashed align-middle gs-0 gy-3 my-0 note-history-table">
                                         <thead>
                                             <tr>
                                                 <th class="text-start pe-0 note-history-th" >Note</th>
                                                 <th class="text-start pe-0 note-history-th" >Created By</th>
                                                 <th class="text-start pe-0 note-history-th" >Reminder Date</th>
                                                 <th class="text-start pe-0 note-history-th"  style="text-align:center !important;" >Sales User</th>
                                             </tr>
                                         </thead>
                                         <tbody>
                                              {% for history in note.note_history %}
                                             <tr>
                                                 <td class="text-start pe-0 note-history-td" >{{history.note}}</td>
                                                 <td class="text-start pe-0 note-history-td" >{% if history.created_by.userinfo.first_name %}{{ history.created_by.userinfo.first_name }} {{ history.created_by.userinfo.last_name }}{%else%}-{%endif%}<br>{{history.created_at|date:'d-m-Y H:m:s'}}</td>
                            
                                                 <td class="text-start pe-0 note-history-td" >{{history.reminder_date|date:'d-m-Y'}}</td>
                                                 <td class="text-start pe-0 note-history-td" style="text-align:center !important;">{% if history.assigned_to.userinfo.first_name %}{{ history.assigned_to.userinfo.first_name }} {{ history.assigned_to.userinfo.last_name }}{%else%}-{%endif%}</td>
                                             </tr>
                                             {% endfor %}
                                         </tbody>
                                     </table>
                                 
                                 </div>
                                 
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Bootstrap Modal -->
<div class="modal fade" id="noteModal-{{ note.id }}" tabindex="-1" aria-labelledby="actionModalLabel" aria-hidden="true">
    <div class="modal-dialog"  style="max-width: 600px;">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="actionModalLabel">Select Action</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="actionForm" method="POST" action="{% url 'customer:process_note_action' note.id %}">
                    {% csrf_token %}
                    <!-- Radio Buttons -->
                    <div class="mb-3" style="display: flex; justify-content: space-between;">
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="action_type" id="markRead" value="mark_read" checked>
                            <input type="hidden" name="groupid" value="{{ note.groupid }}">
                            <label class="form-check-label" for="markRead">Only Mark as Read</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="action_type" id="updateLog" value="update_log">
                            <label class="form-check-label" for="updateLog">Update New Log</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="action_type" id="reschedule" value="reschedule">
                            <label class="form-check-label" for="reschedule">Reschedule Date</label>
                        </div>
                    </div>

                    <!-- Hidden Input for Log Update -->
                    <div class="mb-3" id="logInput" style="display: none;">
                        <div class="mb-3 text-left mt-4">
                            <label for="logNote" class="form-label">New Log Note:</label>
                            <textarea class="form-control" id="logNote" name="log_note" rows="2"></textarea>
                        </div>
                         <div class="mb-3 text-left mt-4">
                            <label for="reminder-{{ note.id }}" class="form-label">Reminder Date (optional)</label>
                            <input type="date" class="form-control" id="reminder-{{ note.id }}" name="reminder_date" value="">
                        </div>
                    </div>

                    <!-- Hidden Input for Reschedule Date -->
                    <div class="mb-3 text-left mt-4" id="dateInput" style="display: none;">
                        <label for="rescheduleDate" class="form-label">Select New Date:</label>
                        <input type="date" class="form-control" id="rescheduleDate" name="reschedule_date">
                    </div>

                    <!-- Submit Button -->
                    <div class="modal-footer">
                        <button type="submit" class="btn btn-primary">Submit</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

                                   </td>
                                 <!--<td class="text-start pe-0">-->
                                 <!--  <span class="text-black-600 fw-bold fs-6">{{ note.reminder_date|date:'d-m-Y' }}</span>-->
                                 <!-- </td>-->
                                  <!-- <td class="text-start pe-0">-->
                                  <!--  <span class="text-black-600 fw-bold fs-6">{% if note.assigned_to.userinfo.first_name %}{{ note.assigned_to.userinfo.first_name }} {{ note.assigned_to.userinfo.last_name }}{%else%}-{%endif%}</span>-->
                                  <!--</td>-->
                             

			    		        </tr>
			    		      
			    		        {% endfor %}

			    	        </tbody>
	    		        </table>

	    		         {% else %}
	    		         No Record Found.
	    		        {% endif %}

                
         
	    	        </div>
	            </div>
            </div>
        </div>
    </div>
</div>
<div class="d-flex mb-7 mt-12 just-cont-space">
	<div class="form-check form-check-custom form-check-solid"></div>
  
		<div class="menu-item px-3">
		<a href="{% url 'customer:list'  %}" id="kt_ecommerce_edit_order_cancel" class="btn btn-primary me-5">
  
		Back
		</a>	
  
		</div>
  
  </div>

{% block script %}
<script>
// document.addEventListener("DOMContentLoaded", function() {
//     setTimeout(function() {
//         fetch("{% url 'customer:mark-notes-read' %}", {
//             method: "POST",
//             headers: {
//                 "X-CSRFToken": "{{ csrf_token }}",
//                 "Content-Type": "application/json"
//             },
//         })
//         .then(response => response.json())
//         .then(data => {
//             if (data.status === "success") {
//                 console.log("Notes marked as read");
//             } else {
//                 console.error("Error marking notes:", data.message);
//             }
//         })
//         .catch(error => console.error("Fetch error:", error));
//     }, 2000); // Run after 2 seconds
// });
</script>
<script>
document.addEventListener("DOMContentLoaded", function () {
    let markRead = document.getElementById("markRead");
    let updateLog = document.getElementById("updateLog");
    let reschedule = document.getElementById("reschedule");

    let logInput = document.getElementById("logInput");
    let dateInput = document.getElementById("dateInput");

    function toggleFields() {
        logInput.style.display = updateLog.checked ? "block" : "none";
        dateInput.style.display = reschedule.checked ? "block" : "none";
    }

    markRead.addEventListener("change", toggleFields);
    updateLog.addEventListener("change", toggleFields);
    reschedule.addEventListener("change", toggleFields);
});
</script>

{% endblock script %}
{% endblock content %}