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

{% block addcss %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css">
<style>
/*====== Image Video PopUp CSS Starts =====*/

.imageblock {
    width:100%;
    padding:20px;
    background:#fff2e3;
    border-radius:8px;
}

.videoblock {
    width:100%;
    padding:20px;
    background:#f3f8f3;
    border-radius:8px;
}

.imagewrapper,
.videowrapper{
    margin:0 0 0;
    border-radius: 0.475rem;
}

.imagewrapper img{
    width:200px !important;
    border-radius: 0.475rem;
    width:200px;
    background:#f6c000;
    padding:5px;
    margin:0 10px 0 0;
}


.videowrapper video{
    width:150px !important;
    border-radius: 0.475rem;
    margin:0 10px 0 0;
}
/*.preview-container {*/
/*    display: inline-block;*/
/*    position: relative;*/
/*}*/

/*.zoom-btn {*/
/*    position: absolute;*/
    top: 10px;           /* adjust vertical position */
/*    background-color: rgba(0,0,0,0.5);*/
/*    color: white;*/
/*    border: none;*/
/*    padding: 5px 10px;*/
/*    border-radius: 5px;*/
/*    cursor: pointer;*/
/*    font-size: 18px;*/
/*}*/

/*.zoom-in {*/
    right: 50px;  /* position right */
/*}*/

/*.zoom-out {*/
    right: 10px;  /* position right */
/*}*/

/*====== Image Video PopUp CSS Starts =====*/
</style>
{% endblock addcss %}

{% load i18n %}

{% block title %}{% translate "List Jobs" %}{% endblock %}


{% block breadcumbheading %}
{% translate "Manage Jobs" %}
{% endblock  %}
{% block breadcumbfirst %}
<a href="/technician/assigned/job/list/" class="text-muted text-hover-primary" style="text-transform: capitalize;">Manage Jobs </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">Jobs Chat</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="chat-container" style="max-width: 800px; margin:auto;">

    

    <div class="chat-box" style="height: 600px; overflow-y: scroll; padding: 10px; background: #f7f7f7; border-radius:10px;">

        {% for c in chat %}
        
            {% if c.sender_id == request.user.id %}
                <!-- Sender message (RIGHT) -->
                <div style="text-align:right; margin-bottom: 12px;">
                    <div style="display:inline-block; background:#d1ffd1; padding:10px 15px; border-radius:10px;">
                        <b>You</b><br>
                        {{ c.content }}{{c.get_images.count}}
                         {% if c.get_images %}
                {% for img_url in c.get_images %}
                    <a href="{{ img_url }}" target="_blank">
                        <img src="{{ img_url }}" width="120" style="margin-top:8px;" />
                    </a>
                {% endfor %}
            {% endif %}
                    </div>
                    <div style="font-size:12px; color:#888;">{{ c.timestamp|date:"d M Y, h:i A" }}</div>
                </div>

            {% else %}
                <!-- Receiver message (LEFT) -->
                <div style="text-align:left; margin-bottom: 12px;">
                    <div style="display:inline-block; background:white; padding:10px 15px; border-radius:10px;">
                        <b>{{ c.get_sender }}</b><br>
                        {{ c.content }}
                         {% if c.get_images %}
                {% for img_url in c.get_images %}
                    <a href="{{ img_url }}" target="_blank">
                        <img src="{{ img_url }}" width="120" style="margin-top:8px;" />
                    </a>
                {% endfor %}
            {% endif %}
                    </div>
                    <div style="font-size:12px; color:#888;">{{ c.timestamp|date:"d M Y, h:i A" }}</div>
                </div>
            {% endif %}

        {% empty %}
            <p>No chat messages yet.</p>
        {% endfor %}
    </div>

    <!-- Send New Message -->
    <form method="POST" class="mt-4" action="{% url 'quotation:show_job_chat' job_id %}" enctype="multipart/form-data" >
        {% csrf_token %}
        <textarea name="message" class="form-control" placeholder="Type your message..." required></textarea>
        <input type="file" name="chat_images" class="form-control mt-2" multiple accept="image/*">
        <button class="btn btn-primary mt-2">
            Send Message
        </button>
    </form>

</div>

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








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


<script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script> 
<script>
    setTimeout(function () {
        fetch("{% url 'quotation:mark_job_chat_as_read' job_id %}", {
            method: "GET",
            headers: {
                "X-Requested-With": "XMLHttpRequest"
            }
        });
    }, 2000); 
</script>


{% endblock script %}