@include('layouts.header')

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

        <h6>Generate Memo</h6>

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

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

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

    <div id="memoContent"> </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
            $('#memo-id-dropdown').html(response.ecode);

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

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

        if (id && option) {
            $.ajax({
                url: '{{ url('fetchMemo') }}',
                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 memo = response.memo;
                        
                        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>
                            <h1 class="text-center">Sub : Memo Order</h1>
                            <i>${employee.title} ${employee.EmployeeName}</i></br>
                            <p>${memo}</p>
                        `;

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

    function generateMemoPDF() {
         const letterPadContent = document.querySelector('#memoContent').innerHTML;

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

                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 = $('#memo-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 memo content first.');
    }
}

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