<?php include 'header.php'; ?>

<!-- Quill Editor CSS -->
<link rel="stylesheet" href="https://cdn.quilljs.com/1.3.7/quill.snow.css">

<style>
.ql-toolbar.ql-snow {
    border: 1px solid #d1d5db !important;
    border-bottom: none !important;
    border-radius: 0.75rem 0.75rem 0 0;
    background: #f9fafb;
}
.ql-container.ql-snow {
    border: 1px solid #d1d5db !important;
    border-radius: 0 0 0.75rem 0.75rem;
    min-height: 250px;
    font-size: 14px;
}
.ql-editor { min-height: 250px; }
.ql-editor.ql-blank::before { font-style: normal !important; color: #9ca3af !important; }
</style>

<div class="px-0 py-3 md:p-2 lg:p-6">

    <!-- Page Header -->
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-2xl font-bold text-gray-900">Add Replacement Policy</h1>
        <a href="lockora_replacement_policy.php"
            class="inline-flex items-center gap-2 bg-white px-4 py-2.5 rounded-xl border border-gray-200 shadow-sm hover:shadow-md transition-all duration-300">
            <i class="ri-arrow-left-line"></i> Back
        </a>
    </div>

    <!-- Form Card -->
    <div class="bg-white rounded-3xl border border-gray-200 shadow-sm p-8">
        <h2 class="text-2xl font-bold text-gray-900 mb-8">Replacement Policy Details</h2>

        <form id="policyForm" method="POST">

            <!-- Policy Title -->
            <div class="relative">
                <input type="text" id="policyTitle" placeholder=" "
                    class="peer w-full h-12 px-4 rounded-xl border border-gray-300 focus:outline-none focus:border-indigo-500">
                <label for="policyTitle"
                    class="absolute left-3 -top-2 bg-white px-1 text-xs text-gray-500
                           peer-placeholder-shown:text-sm peer-placeholder-shown:text-gray-400 peer-placeholder-shown:top-3
                           peer-focus:-top-2 peer-focus:text-xs peer-focus:text-indigo-600">
                    Policy Title <span class="text-red-500">*</span>
                </label>
            </div>

            <!-- Description (Quill Editor) -->
            <div class="mt-6">
                <label class="block text-sm text-gray-500 mb-2">
                    Policy Description <span class="text-red-500">*</span>
                </label>
                <div id="description"></div>
            </div>

            <!-- Buttons -->
            <div class="flex justify-end gap-4 mt-10">
                <a href="replacement_policy.php"
                    class="px-8 py-3 rounded-xl border border-gray-300 text-gray-700 hover:bg-gray-50 transition">
                    Cancel
                </a>
                <button type="button" onclick="validateForm()"
                    class="px-8 py-3 rounded-xl bg-gradient-to-r from-blue-500 to-indigo-600 text-white shadow-md hover:shadow-lg transition">
                    Save <i class="ri-check-line ml-1"></i>
                </button>
            </div>

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

<!-- Quill JS -->
<script src="https://cdn.quilljs.com/1.3.7/quill.min.js"></script>
<script>
const quill = new Quill('#description', {
    theme: 'snow',
    placeholder: 'Write policy description here...',
    modules: {
        toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            [{ 'header': [1, 2, 3, false] }],
            ['link'],
            ['clean']
        ]
    }
});

function validateForm() {
    const title = document.getElementById("policyTitle").value.trim();
    const description = quill.getText().trim();

    if (title === "") {
        Swal.fire({ icon: "warning", title: "Policy Title Required", text: "Please enter policy title",
            confirmButtonText: "OK", width: "350px", padding: "15px",
            customClass: { popup: 'rounded-2xl', title: 'text-sm font-semibold', htmlContainer: 'text-sm', confirmButton: 'px-4 py-2 text-sm' },
            confirmButtonColor: "#2563eb" });
        return;
    }

    if (description === "") {
        Swal.fire({ icon: "warning", title: "Policy Description Required", text: "Please enter policy description",
            confirmButtonText: "OK", width: "350px", padding: "15px",
            customClass: { popup: 'rounded-2xl', title: 'text-sm font-semibold', htmlContainer: 'text-sm', confirmButton: 'px-4 py-2 text-sm' },
            confirmButtonColor: "#2563eb" });
        return;
    }

    // Save HTML content to hidden input before submit
    document.getElementById('policyDescription').value = quill.root.innerHTML;

    Swal.fire({ icon: "success", title: "Policy Saved Successfully", text: "Replacement policy has been saved",
        confirmButtonText: "OK", width: "350px", padding: "15px",
        customClass: { popup: 'rounded-2xl', title: 'text-sm font-semibold', htmlContainer: 'text-sm', confirmButton: 'px-4 py-2 text-sm' },
        confirmButtonColor: "#2563eb"
    }).then(() => {
        document.getElementById("policyForm").submit();
    });
}
</script>

<!-- Hidden input to POST Quill content -->
<input type="hidden" name="description" id="policyDescription">

<?php include 'footer.php'; ?>