<%-include('navbar.ejs')%>

<div class="container-fluid px-3 px-lg-4 py-4">

    <!-- Page Heading -->
    <div class="page-heading">

        <div class="page-heading-copy">

            <span class="page-icon">
                <i class="bi bi-file-earmark-text"></i>
            </span>

            <div>

                <p class="eyebrow mb-1">
                    Background Verification
                </p>

                <h1 class="h3 mb-1">
                    Self Declaration (LOA)
                </h1>

                <p class="text-muted mb-0">
                    Review and submit your self declaration for the background verification process.
                </p>

            </div>

        </div>

    </div>


    <!-- Candidate Information -->
    <section class="panel mt-1">

        <div class="panel-header">

            <div>

                <h2 class="h5 mb-1 section-title">

                    <i class="bi bi-person-badge"></i>

                    <span>
                        Candidate Information
                    </span>

                </h2>

                <p class="text-muted mb-0">
                    Please verify your details before submitting the declaration.
                </p>

            </div>

        </div>


        <div class="p-3">

            <div class="row g-3">

                <div class="col-md-4">

                    <small class="text-muted d-block">
                        Candidate Name
                    </small>

                    <strong>
                        <%= user.first_name %>
                        <%= user.last_name %>
                    </strong>

                </div>


                <div class="col-md-4">

                    <small class="text-muted d-block">
                        Email Address
                    </small>

                    <strong>
                        <%= user.email %>
                    </strong>

                </div>


                <div class="col-md-4">

                    <small class="text-muted d-block">
                        Mobile Number
                    </small>

                    <strong>
                        <%= user.mobile %>
                    </strong>

                </div>

            </div>

        </div>

    </section>


    <!-- LOA Declaration -->
    <section class="panel mt-3">

        <div class="panel-header">

            <div>

                <h2 class="h5 mb-1 section-title">

                    <i class="bi bi-shield-check"></i>

                    <span>
                        Letter of Authorization & Self Declaration
                    </span>

                </h2>

                <p class="text-muted mb-0">
                    Please read the declaration carefully before submitting.
                </p>

            </div>

            <span class="badge text-bg-warning">
                Pending
            </span>

        </div>


        <div class="p-3">

            <div class="border rounded p-3 bg-light">

                <p>
                    I hereby authorize the concerned organization and its
                    authorized background verification service provider to
                    conduct background verification checks based on the
                    information and documents submitted by me.
                </p>

                <p>
                    I confirm that the information and documents provided by
                    me are true, complete and accurate to the best of my
                    knowledge.
                </p>

                <p>
                    I understand that the verification process may include
                    checks relating to my identity, address, education,
                    employment, criminal records and other relevant
                    information as required for the background verification
                    process.
                </p>

                <p class="mb-0">
                    I understand that providing false, incomplete or misleading
                    information may affect the outcome of my background
                    verification.
                </p>

            </div>


            <!-- Declaration Checkbox -->
            <div class="form-check mt-4">

                <input
                    class="form-check-input"
                    type="checkbox"
                    id="declarationCheck">

                <label
                    class="form-check-label"
                    for="declarationCheck">

                    I have read and understood the above declaration and
                    authorize the background verification process.

                </label>

            </div>


            <!-- Signature -->
            <div class="mt-4">

                <label
                    for="declarationName"
                    class="form-label fw-semibold">

                    Enter Your Full Name

                </label>

                <input
                    type="text"
                    class="form-control"
                    id="declarationName"
                    placeholder="Enter your full name"
                    value="<%= user.first_name %> <%= user.last_name %>">

                <small class="text-muted">
                    Your name will be treated as your electronic declaration.
                </small>

            </div>


            <!-- Submit -->
            <div class="mt-4">

                <button
                    type="button"
                    class="btn btn-primary"
                    onclick="submitDeclaration()">

                    <i class="bi bi-check-circle me-1"></i>
                    Accept & Submit Declaration

                </button>

            </div>

        </div>

    </section>


    <!-- Declaration Status -->
    <section class="panel mt-3">

        <div class="panel-header">

            <div>

                <h2 class="h5 mb-1 section-title">

                    <i class="bi bi-clock-history"></i>

                    <span>
                        Declaration Status
                    </span>

                </h2>

            </div>

        </div>


        <div class="p-3">

            <div class="d-flex align-items-center gap-3">

                <span class="status-dot"></span>

                <div>

                    <strong>
                        Declaration Pending
                    </strong>

                    <p class="text-muted mb-0 small">
                        Your self declaration has not been submitted yet.
                    </p>

                </div>

            </div>

        </div>

    </section>

</div>


<script>

async function submitDeclaration() {

    const checkbox =
        document.getElementById("declarationCheck");

    const name =
        document.getElementById("declarationName").value.trim();


    if (!checkbox.checked) {

        Swal.fire({

            icon: "warning",

            title: "Declaration Required",

            text: "Please read and accept the declaration before submitting.",

            confirmButtonColor: "#f97316"

        });

        return;

    }


    if (!name) {

        Swal.fire({

            icon: "warning",

            title: "Name Required",

            text: "Please enter your full name.",

            confirmButtonColor: "#f97316"

        });

        return;

    }


    try {

        const response = await fetch(
            "/candidate_admin/self-declaration",
            {
                method: "POST",

                headers: {
                    "Content-Type": "application/json"
                },

                body: JSON.stringify({
                    declarationName: name
                })
            }
        );


        const result = await response.json();


        if (result.status) {

            Swal.fire({

                icon: "success",

                title: "Declaration Submitted",

                text: result.message,

                confirmButtonColor: "#f97316"

            }).then(() => {

                location.reload();

            });

        } else {

            Swal.fire({

                icon: "error",

                title: "Unable to Submit",

                text: result.message,

                confirmButtonColor: "#f97316"

            });

        }


    } catch (error) {

        console.log("Self Declaration Error:", error);

        Swal.fire({

            icon: "error",

            title: "Something went wrong",

            text: "Please try again later.",

            confirmButtonColor: "#f97316"

        });

    }

}

</script>

<%-include('footer.ejs')%>