{% extends 'layout/master.html' %}
<title>Signature Form</title>
{% block addcss %}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<style>	

	.text-gray{
	/*color:rgb(173,185,202);*/
	color:#717171;
	}
	.text-blue{
	font-family:  Inter, Helvetica, "sans-serif";
	color: rgba(5, 5, 5, 0.692);
	font-weight: bold;
	/*font-size: 11.0000pt;*/
	font-size:20px;
	line-height:30px;
	}
	h6{
	font-family:  Inter, Helvetica, "sans-serif";
	font-weight:700;
	}
	h6..text-blue{
	font-family:  Inter, Helvetica, "sans-serif";
	font-weight:700;
	}
	p{
	font-family:  Inter, Helvetica, "sans-serif";
	}
	p{
	margin-bottom:7px;
	}
	h6{
	margin-bottom:13px;
	}
	

	@media  screen and (max-width:991px){
	.colwrap{
	padding:0;
	}
	.logorow img{
	max-width:200px;
	height:auto;
	}
	.headingrow h2 {
	font-size: 20px;
	padding: 10px !important;
	line-height: 30px;
	}


	}
	@media  screen and (max-width:991px) and (min-width:767px){
	.logorow > .col-md-5{
	width:50%;
	flex:unset;
	max-width:50%;
	}
	.logorow .col-md-1{
	width:0;
	flex:unset;
	max-width:0;
	padding:0;
	}
	.logorow > .col-md-5 > .row > .col-md-5{
	width:40%;
	flex:unset;
	max-width:40%;
	padding-right: 0;
	}
	.logorow > .col-md-5 > .row > .col-md-7{
	width:60%;
	flex:unset;
	max-width:60%;
	}
	}
	@media  screen and (max-width:600px){
	.headingrow h2 {
	font-size: 18px;
	padding: 10px !important;
	line-height: 30px;
	}
	.row.mb-4.pararow{
	width:100%;
	display:flex;
	align-items:center;
	}
	.logorow img {
	max-width: 200px;
	height: auto;
	display: block;
	margin: auto;
	}
	.row.mb-4.pararow .col-sm-4 {
	width: 45%;
	}
	.row.mb-4.pararow .col-sm-8{
	width:55%;
	}
	.row.mb-4.pararow .col-sm-8 p{
	margin:0;
	}
	.row.mb-4.mainformrow .text-gray {
	margin:0 0 10px;
	}
	.colwrap {
	padding: 0 15px;
	}
	.mainformrow .my-auto {
	margin: 35px 0 35px!important;
	text-align: center;
	}
	.row.mb-4.mainformrow ul {
	padding: 0 0 0 25px;
	}
	.logorow .col-md-1{
	margin:20px 0 0;
	}
	.logorow .col-md-5 .col-md-5 p{
	margin:0;
	}
	.logorow .col-md-5 .row .col-md-5{
	width: 38%;
	padding-right: 0;
	margin:0 0 10px;
	}
	.logorow .col-md-5 .row .col-md-7{
	width:62%;
	margin:0 0 10px;
	}
	}
	@page {
	size: letter portrait;
	@frame header_frame {           /* Static frame */
	-pdf-frame-content: header_content;
	left: 50pt; width: 512pt; top: 50pt; height: 40pt;
	}
	@frame content_frame {         
	left: 50pt; width: 512pt; top: 90pt; height: 632pt;
	}
	@frame footer_frame {          
	-pdf-frame-content: footer_content;
	left: 50pt; width: 512pt; top: 772pt; height: 20pt;
	}
	}
	
</style>
<style>
    body {
        margin: 0;
        font-family: Arial, sans-serif;
        background: #f5f5f5;
    }

    .header {
        background: #000;
        color: #fff;
        padding: 16px;
        text-align: center;
        font-size: 20px;
        font-weight: bold;
    }

    .container {
        padding: 16px;
        max-width: 960px;
        margin: auto;
        min-height: 100vh;
        padding-bottom:50px;
    }

    h3 {
        margin: 20px 0 8px;
        font-size: 16px;
    }

    .radio-group {
        display: flex;
        gap: 30px;
        margin-bottom: 15px;
    }

    input[type="text"] {
        width: 100%;
        padding: 14px;
        border-radius: 10px;
        border: 1px solid #ccc;
        font-size: 15px;
        margin-bottom: 15px;
    }

    .signature-box {
        border: 2px solid #ccc;
        border-radius: 15px;
        height: 200px;
        position: relative;
        overflow: hidden;
        margin-bottom: 20px;
    }

    canvas {
        width: 100%;
        height: 100%;
    }

    .clear-btn {
        position: absolute;
        right: 10px;
        top: 10px;
        border: 2px solid #000;
        border-radius: 50%;
        width: 32px;
        height: 32px;
        text-align: center;
        line-height: 28px;
        font-size: 18px;
        cursor: pointer;
        background: #fff;
    }

    .submit-btn {
        width: 100%;
        padding: 16px;
        background: #62b55f;
        color: #fff;
        border: none;
        border-radius: 30px;
        font-size: 18px;
        font-weight: bold;
        cursor: pointer;
    }

    .error {
        color: red;
        font-size: 14px;
        margin-bottom: 10px;
        display: none;
    }
    .head-row{
	        background: #000;
    padding: 0px 20px;
    margin-top: 30px;
    margin-bottom: 20px;
	}
	.head-row .main-logo-im{
	        background: #fff;
    padding-left: 10px;
    padding-right: 10px;
	}
	.cust-det{
	    font-size:16px;
	}
	.cust-det .cust-label{
	    font-weight:bold;
	}
</style>
{% endblock addcss %}
{% block layout %}
<div class="d-flex flex-column flex-root" id="kt_app_root">
	<div class="d-flex flex-column flex-lg-row flex-column-fluid">
		<div class="d-flex flex-column flex-lg-row-fluid w-lg-50 p-10 order-2 order-lg-1">
			<div class="d-flex  flex-column flex-lg-row-fluid" style="align-items: center;">
				<div class="w-lg-1000px ">
					<div class="auth-page p-0">
						{% comment %} 
						<div class="alert alert-{{class}}">
						</div>
						{% endcomment %}
						{% 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="head-row">	<img alt="Logo" src="/assets/media/logos/EXCITECH-AUS-50.png" class="h-50px app-sidebar-logo-default main-logo-im"></div>
						<div class="container">
						    <p class="cust-det mt-2"><span class="cust-label">{% if technician_assigned_job.order_item.order.invoice.customer.first_name %}
                            Name:
                    {% else %}
                            Company Name:
                    {% endif %} :</span> {% if technician_assigned_job.order_item.order.invoice.customer.first_name %}
                            {{technician_assigned_job.order_item.order.invoice.customer.first_name}} {{technician_assigned_job.order_item.order.invoice.customer.last_name}}
                    {% else %}
                            {{technician_assigned_job.order_item.order.invoice.customer.company_name}}
                    {% endif %} 
                    
                    </p>  
						  <p class="cust-det mt-2"><span class="cust-label">Job ID:</span> {{technician_assigned_job.order_item.id}}</p>  
						   <p class="cust-det mt-2"><span class="cust-label">Product:</span> {{technician_assigned_job.order_item.product}}({{technician_assigned_job.order_item.serial_number}})</p>  
    <!--<div class="header">Signature</div>-->
    <!-- Questions (Dynamic count supported) -->
    <form method="POST" action="/job-signature/{{token}}/">
    {% csrf_token %}

    <!-- Questions -->
{% if question_data %}
    {% for q in question_data %}
        <div class="question" data-question-id="{{ q.question_id }}">
            <h3>{{ forloop.counter }}. {{ q.question }}</h3>

            <label>
                <input type="radio" name="q{{ q.question_id }}" value="yes">
                Yes
            </label>

            <label style="margin-left:6px;">
                <input type="radio" name="q{{ q.question_id }}" value="no">
                No
            </label>
        </div>
    {% endfor %}
{% endif %}
    <h3 class="mt-5">Enter Your Name</h3>
    <input type="text" name="name" id="name" placeholder="Enter Your Name ">
    
    <h3 class="mt-2">Sign Here</h3>
    <input type="hidden" name="signature" id="signatureInput">

    <div class="signature-box">
        <canvas id="signature"></canvas>
        <div class="clear-btn" onclick="clearSignature()">×</div>
    </div>

    <div class="error" id="errorMsg"></div>

    <button type="submit" class="submit-btn" onclick="return beforeSubmit();">
        Sign & Mark as Completed
    </button>
</form>

</div>

<script>
    const canvas = document.getElementById("signature");
    const ctx = canvas.getContext("2d");

    function resizeCanvas() {
        canvas.width = canvas.offsetWidth;
        canvas.height = canvas.offsetHeight;
    }
    resizeCanvas();
    window.addEventListener("resize", resizeCanvas);

    let drawing = false;

    canvas.addEventListener("mousedown", () => drawing = true);
    canvas.addEventListener("mouseup", () => drawing = false);
    canvas.addEventListener("mouseleave", () => drawing = false);
    canvas.addEventListener("mousemove", draw);

    canvas.addEventListener("touchstart", () => drawing = true);
    canvas.addEventListener("touchend", () => drawing = false);
    canvas.addEventListener("touchmove", drawTouch);

    function draw(e) {
        if (!drawing) return;
        ctx.lineWidth = 2;
        ctx.lineCap = "round";
        ctx.strokeStyle = "#000";
        ctx.lineTo(e.offsetX, e.offsetY);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(e.offsetX, e.offsetY);
    }

    function drawTouch(e) {
        e.preventDefault();
        if (!drawing) return;
        const rect = canvas.getBoundingClientRect();
        const touch = e.touches[0];
        const x = touch.clientX - rect.left;
        const y = touch.clientY - rect.top;
        ctx.lineWidth = 2;
        ctx.lineCap = "round";
        ctx.strokeStyle = "#000";
        ctx.lineTo(x, y);
        ctx.stroke();
        ctx.beginPath();
        ctx.moveTo(x, y);
    }

   function clearSignature() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();   // ✅ reset path so it won't connect to old stroke
}


    function isCanvasBlank() {
        const blank = document.createElement("canvas");
        blank.width = canvas.width;
        blank.height = canvas.height;
        return canvas.toDataURL() === blank.toDataURL();
    }


    // function submitForm() {
    //     const questions = document.querySelectorAll(".question");
    //     const name = document.getElementById("name").value.trim();
    //     const error = document.getElementById("errorMsg");

    //     for (let q of questions) {
    //         const radios = q.querySelectorAll("input[type=radio]");
    //         const checked = q.querySelector("input[type=radio]:checked");

    //         if (!checked) {
    //             error.style.display = "block";
    //             error.innerText = "Please answer all questions.";
    //             return;
    //         }

    //         if (checked.value !== "yes") {
    //             error.style.display = "block";
    //             error.innerText = "All answers must be YES to continue.";
    //             return;
    //         }
    //     }

    //     if (name === "") {
    //         error.style.display = "block";
    //         error.innerText = "Please enter your name.";
    //         return;
    //     }

    //     if (isCanvasBlank()) {
    //         error.style.display = "block";
    //         error.innerText = "Please provide your signature.";
    //         return;
    //     }

    //     error.style.display = "none";
    //     alert("Form submitted successfully!");
    // }
</script>
<script>
function beforeSubmit() {
    const questions = document.querySelectorAll(".question");
    const name = document.getElementById("name").value.trim();
    const error = document.getElementById("errorMsg");

    for (let q of questions) {
        const checked = q.querySelector("input[type=radio]:checked");
        if (!checked) {
            error.innerText = "Please answer all questions.";
            error.style.display = "block";
            return false;
        }
        if (checked.value !== "yes") {
            error.innerText = "All answers must be YES.";
            error.style.display = "block";
            return false;
        }
    }

    if (name === "") {
        error.innerText = "Please enter your name.";
        error.style.display = "block";
        return false;
    }

    if (isCanvasBlank()) {
        error.innerText = "Please provide your signature.";
        error.style.display = "block";
        return false;
    }

    // Convert canvas to base64 and set hidden input
    document.getElementById("signatureInput").value = canvas.toDataURL("image/png");

    return true; // allow form submit
}
</script>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

{% endblock layout %}