<!DOCTYPE html>
<html>
<head>
    <title>Request On Reject</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
</head>
<body style="font-family: Arial, sans-serif; background-color: #f4f4f4; margin:0; padding:0;">
    <table width="100%" cellpadding="0" cellspacing="0" style="padding: 20px 0;">
        <tr>
            <td align="center">
                <!-- Card container -->
                <table width="600" cellpadding="0" cellspacing="0" style="background-color: #ffffff; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); border: 1px solid #e0e0e0;">
                    <tr>
                        <td style="padding: 30px; text-align: center;">
                            <!-- Header -->
                            <div style="font-size: 35px;"></div>
                            <h2 style="color: #FF0000; margin: 10px 0 20px; font-size: 24px;">❌ Request On Reject</h2>

                            <!-- Message -->
                            {{-- <p style="font-size: 16px; color: #555555; line-height: 1.5;">
                                Your request has been put on reject.
                            </p> --}}

                            <!-- Remark Textbox -->
                            <div style="margin-top: 20px; text-align: left;">
                                <label for="remark" style="font-size: 14px; color: #333;">Remark <span style="color:red;">*</span></label>
                                <textarea id="remark" maxlength="60" style="width:100%; height:100px; padding:10px; margin-top:5px; border:1px solid #ddd; border-radius:5px;"></textarea>
                                <div id="remarkError" style="color:red; font-size:12px; display:none; margin-top:5px;">
                                    Remark is mandatory.
                                </div>
                            </div>

                            <!-- Buttons -->
                            <div style="margin-top: 20px;">
                                {{-- <button onclick="holdRequest()" style="padding: 10px 20px; margin-right: 10px; background-color:#FF8800; color:#fff; border:none; border-radius:5px; cursor:pointer;">
                                    Hold
                                </button> --}}
                                <input type="hidden" id="requestId" value="{{ request()->query('id') }}">
                                <input type="hidden" id="level" value="{{ request()->query('level') }}">

                                <button onclick="saveRemark()" style="padding: 10px 20px; background-color:#4CAF50; color:#fff; border:none; border-radius:5px; cursor:pointer;">
                                    Save Remark
                                </button>
                            </div>
                        </td>
                    </tr>

                    <!-- Footer -->
                    <tr>
                        <td style="padding: 15px; text-align: center; font-size: 12px; color: #999999;">
                            CRI Digital Manufacturing Solutions<br>
                            &copy; 2026 All Rights Reserved
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

    <script>

        function saveRemark() {
            const remark = document.getElementById("remark").value.trim();
            const id = document.getElementById("requestId").value;
            const level = document.getElementById("level").value;
            // const errorDiv = document.getElementById("remarkError");

            // if (remark == "") {
            //     errorDiv.innerText = "Remark is mandatory.";
            //     errorDiv.style.display = "block";
            //     return;
            // }

            // if (remark.length > 60) {
            //     errorDiv.innerText = "Remark must be within 60 characters.";
            //     errorDiv.style.display = "block";
            //     return;
            // }

            fetch('/characteristic/reject-save', {
                method: 'POST',
                credentials: 'same-origin',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
                },
                body: JSON.stringify({
                    id: id,
                    level: level,
                    remark: remark
                })
            })
            .then(res => {
                if (!res.ok) {
                    throw new Error("HTTP error " + res.status);
                }
                return res.json();
            })
            .then(data => {
                alert('Reject saved successfully!');
                window.location.href = "/approval/reject-success";
            })
            .catch(err => {
                console.error(err);
                alert('Error saving reject!');
            });
        }
    </script>
</body>
</html>
