@include('layouts.header')

<div class="container-fluid">
    <div class="col-12">
        <a href="{{ url('upload') }}" class="cancel">Back</a>
    </div>

    <h6>View Acknowledgement</h6>

    <div id="ack-section">
        <b for="cid">Select Employee:</b>
        <select id="acid-dropdown" class="custom-select">
            <option value="">--Select ID--</option>
            @foreach ($acknowledge as $ack)
                <option value="{{ $ack->EmployeeCode }}">{{ $ack->EmployeeCode }}</option>
            @endforeach
        </select>

        <button id="generate-btn" class="btn btn-info">Generate</button>
        <button onclick="AckPDF()" class="btn btn-info">Print</button>
                
        <div id="ack"></div> <!-- Fixed closing tag for div -->
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function () {
        // Define the fetchAck function
        function fetchAck(id) {
            if (id) {
                $.ajax({
                    url: '{{ url('fetch_ack') }}',
                    method: 'POST',
                    data: {
                        id: id,
                        _token: '{{ csrf_token() }}'
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (response.title && response.employeeName) {
                            var title = response.title;
                            var ename = response.employeeName;
                          
                            // After loading the content, set the acknowledgement letter to the div
                            // Generate the acknowledgement content
                    var ackcontent = `Dear ` + title + " " + ename + ` </br>
                                     <p> We are happy that you have been selected to join our progressive team.
                                     You were selected because we believe that you can contribute to the growth of Allzone towards the achievement
                                     We are not just providing you an employment, but a career that you aspire for. Our encouragement and support will be there to you always.</p>`;

                                    // Set the generated content to the div to show it
                                    $('#ack').html(ackcontent); // Display the fetched content in the div
                                }
                         },
                            error: function(xhr, status, error) {
                                        console.error("Error fetching data: ", error);
                                    }
                                });
                    } else {
                        alert('Please select an employee.');
                    }
                 }

        // Button to manually trigger the function (if desired)
        $('#generate-btn').click(function () {
            const id = $('#acid-dropdown').val();
            fetchAck(id); // Fetch and display data when the "Generate" button is clicked
        });
    });

    function AckPDF(){
    
        const letterContent = document.querySelector('#ack').innerHTML;

    if (letterContent) {
                const form = document.createElement('form');
                form.method = 'POST';
                form.action = '{{ url('PDFack') }}';

                form.target = '_blank';
                const contentInput = document.createElement('input');
                    contentInput.type = 'hidden';
                    contentInput.name = 'ack';
                    contentInput.value = letterContent;
                    form.appendChild(contentInput);

    // Add CSRF token to the form
    const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    const csrfInput = document.createElement('input');
    csrfInput.type = 'hidden';
    csrfInput.name = '_token';
    csrfInput.value = csrfToken;
    form.appendChild(csrfInput);
    
     // Append the form to the body and submit it
    document.body.appendChild(form);
    form.submit();
} else {
    alert('Please generate the acknowledge copy first.');
    }
}
</script>
  @include('layouts.footer')