@include('layouts.header')

<div class="container-fluid">
        <div class="col-12">
            <a href="{{ url('upload') }}" class="cancel">Back</a>
        </div>
        <h6>View Confirmation</h6>
        
        <div id="confirm-section">
            <b for="cid">Select Employee:</b>
            <select id="empcode" class="custom-control">
                <option value="">--Select ID--</option>
                @foreach ($employees as $emp)
                    <option value="{{ $emp->Empcode }}">{{ $emp->Empcode }}</option>
                @endforeach
            </select>
            <button onclick="fetchconfirm()" class="btn btn-info">Generate</button>
            <button onclick="printconfirm()" class="btn btn-info">Print</button>
     </div>

        <div id="confirm"></div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        function fetchconfirm() {
            var ecode = $('#empcode').val();
           // alert(ecode);
            if (ecode) {
                 $.ajax({
                     type:'POST',
                        url:'{{ url('/fetchconfirm') }}',
                        data: {
                            id: ecode,
                            _token: '{{ csrf_token() }}'
                        },
                        dataType: 'json',
     success: function(response) {
        var ename = response.employeeName;
         var title = response.title;
         var empNo = response.employeeCode;
         var desg = response.Designation;
          var date = new Date().toLocaleString('en-us',{month:'long',day:'numeric', year:'numeric'});
        var confirmHTML =   '<span>'+title +' ' +ename + '</span></br>' +
                            '<span> '+ empNo + '</span></br>' +
                            '<span>' + desg + '</span></br>' +
                            `<p>We are happy to inform you that your services in our Organization are hereby confirmed with  effect from ` 
                                + date +` on successful completion of your probation period.All the terms of your employment with the Company shall remain unchanged unless specifically communicated to you in writing.</p>
                               <p>Congratulations and wishing you an excellent and fruitful career with our Organization.</p>`
                          $('#confirm').html(confirmHTML); // Display the fetched content in the div

                        // After loading the content, set the confirmation letter content to the hidden input
                          $('#confirmationContent').val($('#confirm').html());
                      },  error: function(xhr, status, error) {
                        console.error("Error fetching data: ", error);
                    }
                });
              }
        }
        
    function printconfirm(){
         const letterContent = document.querySelector('#confirm').innerHTML;

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

                form.target = '_blank';
                
                const contentInput = document.createElement('input');
                    contentInput.type = 'hidden';
                    contentInput.name = 'confirm';
                    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 confirmation copy first.');
            }
            }
 </script>
  @include('layouts.footer')