EVOLUTION-NINJA

Edit File: experience-letter-female.php

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Experience Certificate</title>

}
  
    .a4-page {
      background: white;
      width: 210mm;
      min-height: 297mm;
      padding: 20mm;
      margin: 20px auto;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      position: relative;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
     
    }
    .content-wrapper {
      width: 160mm; /* Reduced width for better readability */
      text-align: justify;
      margin-bottom: 200px;
      /* Moves content down by 100px */
    }
    .date-section {
      text-align: left;
      margin-bottom: 20px;
    }
    .center-text {
      text-align: center;
      font-size: 22px;
      font-weight: bold;
      margin: 20px 0;
    }
    .certificate-text {
      font-size: 22px;
      line-height: 1.6;
    }
    /* Editable spans */
    .editable {
      padding: 0 3px;
      font-size: 22px;
      outline: none;
    }
    .editable:focus {
      background-color: #eef;
    }
    .signature-section {
      text-align: left;
      margin-top: 50px;
      font-size: 22px;
      font-weight: bold;
    }
    button#printBtn {
      display: block;
      margin: 20px auto;
      padding: 10px 20px;
      font-size: 16px;
      cursor: pointer;
    }

/* -------------------------
       Screen-specific Styles
    ------------------------- */
    @media screen {
      body {
        background: #f5f5f5;
        padding: 20px;
      }
      .a4-page {
        max-width: 95%;
        width: auto;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
      }
    }

/* -------------------------
       Print-specific Styles (Full Sheet A4)
    ------------------------- */
    @media print {
      @page {
        size: A4;
        margin: 0;
      }
      body {
        background: none;
      }
      .a4-page {
        margin: 0;
        padding: 0;
        width: 210mm;
        height: 297mm;
        box-shadow: none;
        page-break-after: avoid;
        page-break-before: avoid;
        page-break-inside: avoid;
      }
      .content-wrapper {
        width: 160mm;
        margin: auto;
        padding-bottom: -50px; /* Ensures 100px space in print as well */
      }
      button#printBtn {
        display: none;
      }
    }
  </style>
</head>
<body>
  <div class="a4-page">
    <div class="content-wrapper">
      
      <div class="date-section">
        <strong style="font-weight: bold; font-size: 24px;">Date:</strong>
        <span class="editable" contenteditable="true"></span>
      </div>

<h2 class="center-text" style="font-size: 29px;"><u>To Whom So Ever It May Concern</u></h2>

<p class="certificate-text" style="line-height: 1.6; font-size: 25px; font-weight: 600;">
        This is to certify that Ms
        <span class="editable" contenteditable="true" style="font-weight:900 !important;"><b><?php echo htmlspecialchars($data->first_name . ' ' . $data->last_name); ?></b></span>
        has worked with us from 
        <span class="editable" contenteditable="true"><?php echo $data->date_of_joining ?></span>
        to 
        <span class="editable" contenteditable="true" style=" font-weight: 900;">[End Date]</span>
        and at the time of leaving our organization, she was designated as 
        <span class="editable" contenteditable="true" style=" font-weight: 900;"><?php echo $data->source_of_hire ?></span>.
        and Last Salary Drawn Rs 
        <span class="editable" contenteditable="true" style=" font-weight: 900;">[Enter Salary]</span>.
      </p>
      <p class="certificate-text" style="line-height: 1.6; font-size: 25px; font-weight: 600;">
          During her above tenure, we found her to be regular, honest, and diligent in her duties and responsibilities.
      </p>
      <p class="certificate-text" style="line-height: 1.6; font-size: 25px; font-weight: 600;">
          We wish him all success in her future endeavors.
      </p>
<span class="editable" contenteditable="true" style=" font-weight: 900;display:none"><?php echo $data->employee_id ?></span>
      
      <div class="signature-section" style="font-size: 25px; margin-top: 120px;" >
        <p>Ajay Kumar HS</p>
        <p>CEO</p>
        <p>Jay Blues Technologies</p>
      </div>
    </div>
  </div>

<button id="printBtn">Print</button>
  
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
    $("#printBtn").click(function(){
        var date = $(".editable:eq(0)").text().trim();
        var first_name= $(".editable:eq(1)").text().trim();
        var date_of_joining = $(".editable:eq(2)").text().trim();
        var end_date = $(".editable:eq(3)").text().trim();
        var designation = $(".editable:eq(4)").text().trim();
        var salary = $(".editable:eq(5)").text().trim();
        var employee_id = $(".editable:eq(6)").text().trim();

$.ajax({
            url: "<?php echo base_url('save_certificate'); ?>",
            type: "POST",
            data: {
                date:date,
                first_name: first_name,
                date_of_joining: date_of_joining,
                end_date: end_date,
                designation: designation,
                salary: salary,
                employee_id:employee_id
            },
            dataType: "json",
            success: function(response) {
                if (response.status === "success") {
                    alert(response.message);
                    window.print(); // Print after saving
                } else {
                    alert(response.message);
                }
            },
            error: function() {
                alert("An error occurred while saving the certificate.");
            }
        });
    });
});
</script>

</body>
</html>