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

{% load i18n %}

{% block title %}{% translate "Lead 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;">Lead 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">Lead 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;">Lead Name</th>
                                  <th class="pb-3 min-w-200px fw-bold text-start lead-notcol" colspan="2" style="text-align: left !important;">Note</th>
                                  <th class="text-start pe-0" >Reminder Date/Time</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">
                                               {{note.lead.first_name}} {{note.lead.first_name}} {% if note.lead.company_name %}  ({{note.lead.company_name}}) {% endif %}
                                              </span>
                                          </td>
                                        <td class="text-start pe-0 lead-notcol"  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" >
                                          {{note.reminder_date|date:'d-m-Y'}}<br>{{ note.meeting_time|time:"g:i A" }}
                                          </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 'leads: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 %}
                      
        
                                           </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>
                    </div>
                 {% else %}
                        No Record Found.
                 {% endif %}
        	    </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 'leads:list'  %}" id="kt_ecommerce_edit_order_cancel" class="btn btn-primary me-5">Back </a>	
		</div>
</div>
{% block script %}
{% for note in notes %}
  <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 for {{note.lead.first_name}} {{note.lead.first_name}} {% if note.lead.company_name %}  ({{note.lead.company_name}}) {% endif %}</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 modal-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'}}<br>{{ history.meeting_time|time:"g:i A" }}</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">
                        <div class="note-block">
                        <form id="actionForm" method="POST" action="{% url 'leads: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 markRead" type="radio" name="action_type" id="markRead{{note.id}}" value="mark_read" checked>
                                    <input type="hidden" name="groupid" value="{{ note.groupid }}">
                                    <label class="form-check-label" for="markRead{{note.id}}">Only Mark as Read</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input updateLog" type="radio" name="action_type" id="updateLog{{note.id}}" value="update_log">
                                    <label class="form-check-label" for="updateLog{{note.id}}">Update New Log</label>
                                </div>
                                <div class="form-check">
                                    <input class="form-check-input reschedule" type="radio" name="action_type" id="reschedule{{note.id}}" value="reschedule">
                                    <label class="form-check-label" for="reschedule{{note.id}}">Reschedule Date</label>
                                </div>
                            </div>
        
                            <!-- Hidden Input for Log Update -->
                            <div class="mb-3 logInput" id="logInput{{note.id}}" 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 class="mb-3 text-left mt-2" id="meet_time_{{ customer.id }}" >
                                        <label for="meeting_time">Reminder Time (Optional):</label>
                                        <input type="time" id="meeting_time" name="meeting_time" class="form-control">
                                    </div>
                                     <div class="mb-3 text-left mt-2">
                                                <label for="userid-{{ customer.id }}" class="form-label ">Assign to Sales User (optional):</label>
                                                <select class="form-control" id="userid-{{ customer.id }}" name="useridlog" >
                                                    <option value="">Select Sales User</option>
                                                    {% for user in users %}
                                                    <option value="{{ user.id }}">{% if user.userinfo.first_name %}{{ user.userinfo.first_name }} {{ user.userinfo.last_name }}{%else%}-{%endif%}</option>
                                                    {% endfor %}
                                                </select>
                                            </div>
                            </div>
        
                            <!-- Hidden Input for Reschedule Date -->
                            <div class="mb-3 dateInput"  id="dateInput{{note.id}}" style="display: none;">
                            <div class="mb-3 text-left mt-4">
                                <label for="rescheduleDate" class="form-label">Select Reschedule Date:</label>
                                <input type="date" class="form-control" id="rescheduleDate" name="reschedule_date">
                            </div>
                          <div class="mb-3 text-left mt-2" id="meet_time_{{ customer.id }}" >
                            <label for="meeting_time">Reschedule Time (Optional):</label>
                            <input type="time" id="meeting_time" name="reschedule_meeting_time" class="form-control">
                        </div>
                         <div class="mb-3 text-left mt-2">
                                                <label for="userid-{{ customer.id }}" class="form-label ">Assign to Sales User (optional):</label>
                                                <select class="form-control" id="userid-{{ customer.id }}" name="userid" >
                                                    <option value="">Select Sales User</option>
                                                    {% for user in users %}
                                                    <option value="{{ user.id }}">{% if user.userinfo.first_name %}{{ user.userinfo.first_name }} {{ user.userinfo.last_name }}{%else%}-{%endif%}</option>
                                                    {% endfor %}
                                                </select>
                                            </div>
                        </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>
        </div>

{% endfor %}

<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 () {
    document.querySelectorAll('.note-block').forEach(function (block) {
        const markRead = block.querySelector(".markRead");
        const updateLog = block.querySelector(".updateLog");
        const reschedule = block.querySelector(".reschedule");

        const logInput = block.querySelector(".logInput");
        const dateInput = block.querySelector(".dateInput");

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

        [markRead, updateLog, reschedule].forEach(input => {
            input.addEventListener("change", toggleFields);
        });

        // Initialize based on default checked value
        toggleFields();
    });
});
$('form').on('submit', function () {
    $('.btn[type="submit"]').prop('disabled', true);
});
// 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 %}