@include('layouts.header')

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

        <h6>Generate Warning</h6>

        <div id="warn-section">
        <b for="warn-id">Select</b>
        <select id="warn-id-dropdown" class="custom-control">
            <option value="">--Select ID--</option>
        </select>

        <b for="optionSelect">Select Choice:</b>
        <select id="warn-option-dropdown" class="custom-control">
            <option value="">--Select Option--</option>
        </select>

        <button onclick="fetchwarn()" class="btn btn-info">Generate</button>
        <button onclick="generateWarnPDF()" class="btn btn-info">Print</button>
    </div>

    <div id="warnContent"> </div>
    </div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function () {
        $.ajax({
        url: '{{ url('load_data') }}',
        type: 'GET',
        dataType: 'json',
        success: function (response) {
            // Populate the employee code dropdown
            $('#warn-id-dropdown').html(response.ecode);

            // Populate the warn options dropdown
            $('#warn-option-dropdown').html(response.warnOptions);
        },
        error: function (xhr, status, error) {
            console.error('Error fetching data: ' + error);
        }
    });
});

    function fetchwarn() {
       
        const id = $('#warn-id-dropdown').val();
        const option = $('#warn-option-dropdown').val();

        if (id && option) {
            $.ajax({
                url: '{{ url('fetchwarn') }}',
                method: 'GET',
                data: { id: id, option: option },
                dataType: 'json',
                success: function (response) {
                    if (response.error) {
                        alert('Error: ' + response.error);
                    } else {
                        const employee = response.employee;
                        const warn = response.warn;
                        
            const contentHTML = `<div>
            <strong>${employee.title} ${employee.EmployeeName}</strong></br>
             <i><strong>Emp No:</strong> ${employee.EmployeeCode}</i></br>
             <i>${employee.designation}</i></br>
            <i>${employee.department.dept_name}</i></br>
                            </div>
                            <h4 class="text-center">Sub : Warning Order</h4>
                            <i>${employee.title} ${employee.EmployeeName}</i>
                            <p>${warn}</p>`;

                        $('#warnContent').html(contentHTML);
                    }
                },
                error: function (xhr, status, error) {
                    console.error('Error fetching data: ', error);
                }
            });
        } else {
            alert('Please select both ID and Option.');
        }
    }
     

    function generateWarnPDF() {
         const letterPadContent = document.querySelector('#warnContent').innerHTML;

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

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

                const empNoInput = document.createElement('input');
                empNoInput.type = 'hidden';
                empNoInput.name = 'empNo';
                empNoInput.value = $('#warn-id-dropdown').val();
                form.appendChild(empNoInput);

                // 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 form to the document body before submitting
                document.body.appendChild(form);

                // Submit the form
                form.submit();
    } else {
        alert('Please generate the warning content first.');
    }
}

</script>
  @include('layouts.footer')