{% extends 'layout/default.html' %}
{% load custom_filters %}
{% block addcss %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css">
<style>

.chat-modal{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.5);
}

.chat-modal-content{
    background:#f5f5f5;
    width:50%;
    height:600px;
    margin:50px auto;
    padding:20px;
    overflow-y:auto;
}

.chat-row{
    margin-bottom:15px;
    display:flex;
}

.chat-row.left{
    justify-content:flex-start;
}

.chat-row.right{
    justify-content:flex-end;
}

.chat-bubble{
    background:#fff;
    padding:10px 14px;
    border-radius:12px;
    max-width:70%;
}

.chat-row.right .chat-bubble{
    background:#c7f2c3;
}

.chat-time{
    font-size:12px;
    color:#777;
}


.timeline {
    border-left: 1px dashed #000000;
    margin-top: 20px;
    padding-left: 20px;
    z-index: 0;
    margin-left: 12px;
}

.timeline-item {
    position: relative;
    margin-bottom: 25px;
}

.timeline-dot {
    position: absolute;
    left: -30px;
    top: 30%;
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-radius: 50%;
    z-index: 0;
    border: 5px solid #f77001;
}
.timeline-lines {
    position: absolute;
    left: -20px;
    top: 40%;
    width: 20px;
    height: 1px;
    background: #000000;
    border-radius: 0;
}
.chat-dot {
    background: #ffffff;
    border: 5px solid #28a745;
}

.timeline-content {
    background: #f8f9fa;
    padding: 12px;
    border-radius: 6px;
    min-height: 63px;
    display: flex;
    align-items: start;
    flex-direction: column;
    justify-content: center;
}
button.chat-open-btn {
    background: none;
    border: none;
    font-weight: bold;
    font-size: 15px;
}
.timeline-content .msg-cont{
        display: flex;
    justify-content: center;
    align-items: center;
    cursor:pointer;
}
.timeline-content .msg-cont .ki-duotone.ki-messages{
        font-size: 1.5rem;
    color: #000000;
}
 .timeline-item.chat  .timeline-content {
    color: var(--bs-success) !important;
    background-color: #50cd8930 !important;
   }
.chat-box {
    background: #eef6ff;
    padding: 12px;
    border-radius: 8px;
}

.chat-header {
    font-size: 13px;
    color: #555;
    margin-bottom: 5px;
}
#chatModal .close-chat{
        float: right;
    background: #a9a9a9;
    color: #000000;
    padding: 0px 6px;
    border-radius: 50%;
    position: absolute;
    right: 4px;
    top: 10px;
    font-weight: 600;
    cursor:pointer;
}
#chatModal .chat-modal-content{
    position:relative;
}
.chat-message {
    font-size: 15px;
    margin-bottom: 5px;
}

.chat-images img {
    margin-top: 6px;
    border-radius: 4px;
}

.chat-date {
    font-size: 12px;
    color: #888;
}


</style>
{% endblock addcss %}

{% load i18n %}

{% block title %}{% translate "Machines" %}{% endblock %}


{% block breadcumbheading %}
{{ product_name }} {% if sku %} ({{ sku }}) {% endif %}
{% endblock  %}
{% block breadcumbfirst %}
<a href="/machines/" class="text-muted text-hover-primary" style="text-transform: capitalize;">Machines</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;">List</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 un-head">
            <h3 class="card-title align-items-start flex-column tech-title">
				<span class="card-label fw-bold text-gray-800">Machine Details</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">
	    	<div class="table-responsive cust-table mt-2 prod-table">
                <div class="containers">
                
                    <div class="machine-card">
                        <p><strong>Machine:</strong> {{ product_name }} {% if sku %} ({{ sku }}) {% endif %}</p>
                        <!--<p><strong>Order ID:</strong> {{ order.id }}</p>-->
                        <p><strong>Serial Number:</strong> {{ serial_number }}</p>
                        <p><strong>Warranty End:</strong> {{ order.warranty_end_date }}</p>
                        <!--<p><strong>Quantity:</strong> {{ order.qty }}</p>-->
                    </div>
                
                    <hr>
                
                    <h3>Activity Log</h3>
                    <div class="timeline">

{% for item in timeline %}

    {% if item.type == "status" %}
        <div class="timeline-item status">
            <div class="timeline-lines"></div>
            <div class="timeline-dot"></div>

            <div class="timeline-content">
                <strong>{{ item.label }}</strong>
                <div class="timeline-date">{{ item.date }}</div>
            </div>
        </div>
    {% endif %}

    {% if item.type == "chat_group" %}
        <div class="timeline-item chat">
 <div class="timeline-lines"></div>
            <div class="timeline-dot chat-dot"></div>

            <div class="timeline-content">
                <div class="msg-cont">
                    <i class="ki-duotone ki-messages">
                     <span class="path1"></span>
                     <span class="path2"></span>
                     <span class="path3"></span>
                     <span class="path4"></span>
                     <span class="path5"></span>
                    </i>
                <button class="chat-open-btn"
                
                        data-chats='{{  item.chats }}'>

                  {{ item.count }} Chats 
{% with chats=item.chats|from_json %}
    {% with last_chat=chats|last %}
        {{ last_chat.timestamp_formatted|format_date }}
    {% endwith %}
{% endwith %}

                </button>
            </div>
            </div>

        </div>
    {% endif %}

{% endfor %}

</div>
                    <!--<div class="timeline">-->
                
                    <!--    {% for item in timeline %}-->
                
                    <!--        {% if item.type == "status" %}-->
                    <!--            <div class="timeline-item status">-->
                    <!--                <div class="timeline-dot"></div>-->
                    <!--                <div class="timeline-content">-->
                    <!--                    <strong>{{ item.label }}</strong>-->
                    <!--                    <div class="timeline-date">{{ item.date }}</div>-->
                    <!--                </div>-->
                    <!--            </div>-->
                    <!--        {% endif %}-->
                
                    <!--        {% if item.type == "chat" and item.is_visible %}-->
                    <!--            <div class="timeline-item chat">-->
                
                    <!--                <div class="timeline-dot chat-dot"></div>-->
                
                    <!--                <div class="chat-box">-->
                
                    <!--                    <div class="chat-header">-->
                    <!--                        <strong>{{ item.sender }}</strong>-->
                    <!--                        → {{ item.recipient }}-->
                    <!--                    </div>-->
                
                    <!--                    <div class="chat-message">-->
                    <!--                        {{ item.message }}-->
                    <!--                    </div>-->
                
                    <!--                    {% if item.images %}-->
                    <!--                        <div class="chat-images">-->
                    <!--                            {% for img in item.images %}-->
                    <!--                                <img src="{{ img.chat_image }}" width="120">-->
                    <!--                            {% endfor %}-->
                    <!--                        </div>-->
                    <!--                    {% endif %}-->
                
                    <!--                    <div class="chat-date">-->
                    <!--                        {{ item.date }}-->
                    <!--                    </div>-->
                
                    <!--                </div>-->
                
                    <!--            </div>-->
                    <!--        {% endif %}-->
                
                    <!--    {% endfor %}-->
                
                    <!--</div>-->
                
                </div>
            </div>   		      
        </div>
        </div>
      </div>
    </div>
</div>
<input type="hidden" id="loggedUser" value="{{ logged_user }}">
<div id="chatModal" class="chat-modal">

<div class="chat-modal-content">

<span class="close-chat">&times;</span>

<div id="chatMessages"></div>

</div>

</div>
<script>
$(document).on("click",".chat-open-btn",function(){

    let chats = JSON.parse($(this).attr("data-chats"));

    let loggedUser = $("#loggedUser").val();

    let html = "";

    chats.forEach(function(chat){

        let align = "left";

        if(chat.sender.toLowerCase() === loggedUser.toLowerCase()){
            align = "right";
        }

        html += `
        <div class="chat-row ${align}">
            <div class="chat-bubble">
                <strong>${chat.sender}</strong>
                <div>${chat.content}</div>
                <div class="chat-time">${chat.date}</div>
            </div>
        </div>
        `;
    });

    $("#chatMessages").html(html);
    $("#chatModal").show();

});

$(".close-chat").click(function(){
    $("#chatModal").hide();
});
</script>
{% endblock content %}
{% block script %}
{% endblock script %}