<?php
/***
Auth: Roshni Gupta
Date: 02 Aug 2025
Description: To Create and Update Province 
*/
$msg = '';
$id=$_GET['id'];



//function defined in web_admin_function.php 
$cityData = getCityData($link, $id);
$city = isset($cityData['city']) ? $cityData['city'] : '';

$result = tbl_mailformats();
  while ($row_doc = mysqli_fetch_assoc($result)){
$mailsign = $row_doc['MailSignature'];    $signatureImg = $row_doc['MailSignImage'];
  }
?>
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>

<script>
document.addEventListener("DOMContentLoaded", function () {

    // ✅ Initialize first
    window.quill = new Quill('#editor', {
        theme: 'snow',
        placeholder: 'Write your signature...',
        modules: {
            toolbar: [
                ['bold', 'italic', 'underline'],
                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                ['link', 'image']
            ]
        }
    });

    // ✅ Then set existing content
    quill.root.innerHTML = `<?= addslashes($mailsign) ?>`;

   

});
</script>
<div id="success"><?php echo $msg; ?></div>
<form id="mastersrcat" method="post" action="">
    <input name="id" id="id" type="hidden" value="<?php echo $id ?>">
    <span class="breadcrumb_head" style="height:37px;padding:9px 16px"><?php echo(!empty($id) ? "Edit" : "New") ?> Signature</span>

<div class="style2-table">
        <div class="table">
            <table class="tableview tableview-2 main-form">
                <tbody>

                    <?php if ($msg != '') { ?>
                        <tr>
                            <td colspan="2" style="color:#ffffff; background:#00CC66; padding:5px; border:1px solid #02944b; text-align:center;">
                                <?php echo $msg; ?>
                            </td>
                        </tr>
                    <?php } ?>

                    <tr>
                        <td colspan="15" class="left">
                            <label for="sign">Signature <em>*</em></label>
                            <div class="log-case">
                                <div id="editor" style="height:200px; width:500px;"></div>
<input type="hidden"  name="signature_text" id="sign">
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <td colspan="15" class="left">
                            <label for="signature_image">Signature Image</label>
                            <input 
                                type="file" 
                                name="signature_image" 
                                id="signature_image"
                                accept=".jpg,.jpeg,.png"
                                   onchange="validateAndPreviewSignature(this)">

                            <!-- Preview Area -->
                            <div style="margin-top:10px;">
                                <img 
                                    id="signaturePreview" 
                                    src="<?php echo !empty($signatureImg) ? $signatureImg : ''; ?>" 
                                    style="max-width:200px; display:<?php echo !empty($signatureImg) ? 'block' : 'none'; ?>; border:1px solid #ccc; padding:5px;"
                                >
                            </div>
                        </td>
                    </tr>


                    <tr>
                        <td colspan="15" align="center">
                            <input 
                                name="Update" 
                                type="submit" 
                                value="Update" 
                                class="button-orange1"
                                id="submitclksign"
                            />
                        </td>
                    </tr>

                </tbody>
            </table>        
        </div>
    </div>
</form>
<script>
function validateAndPreviewSignature(input) {

    if (!input.files || !input.files[0]) {
        return;
    }

    const file = input.files[0];
    const allowedTypes = ['image/jpeg', 'image/png'];

    if (!allowedTypes.includes(file.type)) {
        alert('Only JPG, JPEG, and PNG files are allowed');
        input.value = '';                 // reset file input
        document.getElementById('signaturePreview').style.display = 'none';
        return;
    }

    // --- Preview ---
    const reader = new FileReader();
    reader.onload = function (e) {
        const preview = document.getElementById('signaturePreview');
        preview.src = e.target.result;
        preview.style.display = 'block';
    };
    reader.readAsDataURL(file);
}
</script>
