@extends('layouts.app')

@section('title', 'Quotation List')

@section('content')
<style>       
    
</style>
<div class="page-wrapper">
    <div class="page-content">

        <div class="container-fluid px-4">

            <div class="d-flex justify-content-between mb-3">
                <h4>Quotation List</h4>
<!--                <button class="btn btn-primary" onclick="openCreateRFQModal()">-->
<!--    + Create Quotation-->
<!--</button>-->
            </div>

            <div class="card">
                <div class="card-body">

                  <table class="table table-bordered">
    <thead>
        <tr>
            <th>#</th>
            <th>RFQ Number</th>
            <th>PR Number</th>
            <th>Products</th>
            <th>Status</th>
            <th>Action</th>
        </tr>
    </thead>

    <tbody>

        @foreach($rfqs as $key => $rfq)

            @php
                $items = $rfqItems[$rfq->id] ?? collect();
            @endphp

            <tr>

                {{-- Serial Number --}}
                <td>
                    {{ $key + 1 }}
                </td>

                {{-- RFQ Number --}}
                <td>
                    {{ $rfq->rfq_number }}
                </td>

                {{-- PR Number --}}
                <td>
                    {{ $rfq->pr_number }}
                </td>

                {{-- Products --}}
               <td>

    @if($items->count() > 0)

        <table class="table table-bordered table-sm mb-0 rfq-product-table">

            <thead>
                <tr>
                    <th width="35">#</th>
                    <th>Product</th>
                    <th width="80">Qty</th>
                </tr>
            </thead>

            <tbody>

                @foreach($items as $itemKey => $item)

                    <tr>
                        <td>
                            {{ $itemKey + 1 }}
                        </td>

                        <td>
                            {{ $item->name }}
                        </td>

                        <td>
                            {{ $item->quantity }}
                        </td>
                    </tr>

                @endforeach

            </tbody>

        </table>

    @else

        <span class="text-muted small">
            No products found
        </span>

    @endif

</td>

                {{-- Status --}}
                <td>
                    <span class="badge bg-success">
                        {{ ucfirst($rfq->status) }}
                    </span>
                </td>

                {{-- Action --}}
                <td>

                    <button
                        class="btn btn-sm btn-info"
                        onclick="viewRFQ({{ $rfq->id }})">
                        View
                    </button>

                    <!--<button-->
                    <!--    class="btn btn-sm btn-warning"-->
                    <!--    onclick="openCSVModal({{ $rfq->id }})">-->
                    <!--    Import CSV-->
                    <!--</button>-->

                    <button
                        class="btn btn-sm btn-primary"
                        onclick="viewRates({{ $rfq->id }})">
                        View Rate
                    </button>

                </td>

            </tr>

        @endforeach

    </tbody>
</table>

                </div>
            </div>

        </div>
    </div>
</div>
<div class="modal fade" id="createRFQModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <h5>Create Quotation</h5>
                <button class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">

                <!-- PR Dropdown -->
                <div class="mb-3">
                    <label>Select PR</label>
                    <select id="pr_id" class="form-control">
                        <option value="">Select PR</option>
                        @foreach($prs as $pr)
                            <option value="{{ $pr->id }}">
                                {{ $pr->pr_number }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <!-- Vendor Dropdown -->
                <div class="mb-3">
                    <label>Select Vendor</label>
                    <select id="vendor_id" class="form-control select2" multiple>
                        @foreach($vendors as $vendor)
                            <option value="{{ $vendor->id }}">
                                {{ $vendor->first_name }} {{ $vendor->last_name }}
                            </option>
                        @endforeach
                    </select>
                </div>

                <!-- Items Table -->
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Product</th>
                            <th>Qty</th>
                            <th>Unit</th>
                            <th>Remark</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody id="createItems"></tbody>
                </table>

                <button class="btn btn-success" id="rfqSubmitBtn" onclick="submitCreateRFQ()">
    <span class="btn-text">Submit</span>
    <span class="spinner-border spinner-border-sm d-none" 
          id="rfqLoader" role="status"></span>
</button>

            </div>

        </div>
    </div>
</div>
<div class="modal fade" id="viewRFQModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <h5>RFQ Details</h5>
                <button class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">

                <p><strong>RFQ Number:</strong> <span id="rfq_number"></span></p>
                <p><strong>PR Number:</strong> <span id="pr_number"></span></p>

                <hr>

                <h6>Vendors</h6>
                <ul id="vendor_list"></ul>

                <hr>

                <h6>Products</h6>
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Product</th>
                            <th>Qty</th>
                            <th>Unit</th>
                            <th>Remark</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody id="product_list"></tbody>
                </table>

            </div>

        </div>
    </div>
</div>
<div class="modal fade" id="csvModal">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <h5>Import Quotation CSV</h5>
                <button class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">

                <input type="hidden" id="csv_rfq_id">

                <a id="downloadSample" class="btn btn-success mb-3">
                    Download Sample CSV
                </a>

                <input type="file" id="csv_file" class="form-control mb-3">

                <button class="btn btn-primary" onclick="uploadCSV()">
                    Submit
                </button>

            </div>

        </div>
    </div>
</div>
<div class="modal fade" id="rateModal" tabindex="-1">

    <div class="modal-dialog modal-xl modal-dialog-scrollable">

        <div class="modal-content">

            <!-- ========================================================= -->
            <!-- HEADER -->
            <!-- ========================================================= -->

            <div class="modal-header">

                <h5 class="modal-title">
                    Vendor Rates
                </h5>

                <button
                    type="button"
                    class="btn-close"
                    data-bs-dismiss="modal">
                </button>

            </div>


            <!-- ========================================================= -->
            <!-- BODY -->
            <!-- ========================================================= -->

            <div class="modal-body">

                <div style="overflow-x:auto;">

                    <table
                        class="table table-bordered table-striped table-hover"
                        id="rateTable"
                        style="width:100%;"
                    ></table>

                </div>

            </div>


            <!-- ========================================================= -->
            <!-- FOOTER -->
            <!-- ========================================================= -->

            <div class="modal-footer">
            <button
        type="button"
        class="btn btn-success"
        id="exportRatesExcelBtn"
    >
        <i class="fa fa-file-excel"></i>
        Export Excel
    </button>
    <button
        type="button"
        class="btn btn-danger"
        id="exportRatesPdfBtn"
    >
        <i class="fa fa-file-pdf"></i>
        Export PDF
    </button>
                <button
                    type="button"
                    class="btn btn-secondary"
                    data-bs-dismiss="modal"
                >
                    Close
                </button>

                <button
                    type="button"
                    class="btn btn-primary"
                    id="saveVendorNarrationBtn"
                >
                    Save Narration
                </button>

            </div>

        </div>

    </div>

</div>
@endsection
@section('js')

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
  console.log("JS LOADED");
function openCreateRFQModal()
{
    let modal = new bootstrap.Modal(document.getElementById('createRFQModal'));
    modal.show();
}
function viewRates(id)
{
    /*
    |--------------------------------------------------------------------------
    | Load Vendor Rates
    |--------------------------------------------------------------------------
    */

    fetch("{{ url('rfq/view-rates') }}/" + id)

        .then(function(res) {

            if (!res.ok) {
                throw new Error(
                    'HTTP error: ' + res.status
                );
            }

            return res.json();
        })

        .then(function(data) {


            /*
            |--------------------------------------------------------------------------
            | Error from Controller
            |--------------------------------------------------------------------------
            */

            if (data.error) {

                console.error(data.error);

                alert(data.error);

                return;
            }


            /*
            |--------------------------------------------------------------------------
            | Variables
            |--------------------------------------------------------------------------
            */

            let html = '';


            /*
            |--------------------------------------------------------------------------
            | HEADER
            |--------------------------------------------------------------------------
            */

            html += '<thead>';

            html += '<tr>';


            data.headers.forEach(
                function(header, index) {


                    /*
                    |--------------------------------------------------------------------------
                    | Best Rate / Best Vendor
                    |--------------------------------------------------------------------------
                    */

                    if (
                        header === 'Best Rate' ||
                        header === 'Best Vendor'
                    ) {

                        html += `
                            <th
                                style="
                                    background:#d4edda;
                                    color:#155724;
                                    font-weight:bold;
                                    white-space:nowrap;
                                    text-align:center;
                                "
                            >
                                ${escapeHtml(header)}
                            </th>
                        `;

                    } else {

                        html += `
                            <th
                                style="
                                    white-space:nowrap;
                                    text-align:center;
                                "
                            >
                                ${escapeHtml(header)}
                            </th>
                        `;
                    }

                }
            );


            html += '</tr>';

            html += '</thead>';


            /*
            |--------------------------------------------------------------------------
            | BODY
            |--------------------------------------------------------------------------
            */

            html += '<tbody>';


            /*
            |--------------------------------------------------------------------------
            | Loop Rows
            |--------------------------------------------------------------------------
            */

            data.rows.forEach(
                function(row, rowIndex) {


                    /*
                    |--------------------------------------------------------------------------
                    | Last two rows are special
                    |--------------------------------------------------------------------------
                    |
                    | Second last = Terms & Conditions
                    | Last       = Narration
                    |
                    */

                    let isTermsRow =
                        rowIndex ===
                        data.rows.length - 2;


                    let isNarrationRow =
                        rowIndex ===
                        data.rows.length - 1;


                    html += '<tr>';


                    /*
                    |--------------------------------------------------------------------------
                    | TERMS & CONDITIONS ROW
                    |--------------------------------------------------------------------------
                    */

                    if (isTermsRow) {


                        /*
                        |--------------------------------------------------------------------------
                        | Label
                        |--------------------------------------------------------------------------
                        */

                        html += `
                            <td
                                colspan="4"
                                style="
                                    background:#fff3cd;
                                    color:#856404;
                                    font-weight:bold;
                                    vertical-align:top;
                                "
                            >
                                Terms & Conditions
                            </td>
                        `;


                        /*
                        |--------------------------------------------------------------------------
                        | Vendor Terms
                        |--------------------------------------------------------------------------
                        */

                        for (
                            let index = 4;
                            index < row.length;
                            index++
                        ) {

                            let value =
                                row[index] ?? '';


                            let header =
                                data.headers[index];


                            /*
                            |--------------------------------------------------------------------------
                            | Best Rate / Best Vendor
                            |--------------------------------------------------------------------------
                            */

                            if (
                                header === 'Best Rate' ||
                                header === 'Best Vendor'
                            ) {

                                html += `
                                    <td
                                        style="
                                            background:#f8f9fa;
                                        "
                                    >
                                    </td>
                                `;

                            } else {

                                /*
                                |--------------------------------------------------------------------------
                                | Vendor Terms
                                |--------------------------------------------------------------------------
                                */

                                html += `
                                    <td
                                        style="
                                            background:#fff3cd;
                                            color:#856404;
                                            vertical-align:top;
                                            white-space:pre-line;
                                            min-width:250px;
                                            max-width:350px;
                                            word-break:break-word;
                                        "
                                    >
                                        ${escapeHtml(value)}
                                    </td>
                                `;
                            }

                        }


                    }


                    /*
                    |--------------------------------------------------------------------------
                    | NARRATION ROW
                    |--------------------------------------------------------------------------
                    */

                    else if (isNarrationRow) {


                        /*
                        |--------------------------------------------------------------------------
                        | Label
                        |--------------------------------------------------------------------------
                        */

                        html += `
                            <td
                                colspan="4"
                                style="
                                    background:#e2e3e5;
                                    font-weight:bold;
                                    vertical-align:top;
                                "
                            >
                                Narration
                            </td>
                        `;


                        /*
                        |--------------------------------------------------------------------------
                        | Vendor Narration Fields
                        |--------------------------------------------------------------------------
                        */

                        for (
                            let index = 4;
                            index < row.length;
                            index++
                        ) {

                            let header =
                                data.headers[index];


                            /*
                            |--------------------------------------------------------------------------
                            | Best Rate / Best Vendor
                            |--------------------------------------------------------------------------
                            */

                            if (
                                header === 'Best Rate' ||
                                header === 'Best Vendor'
                            ) {

                                html += `
                                    <td
                                        style="
                                            background:#f8f9fa;
                                        "
                                    >
                                    </td>
                                `;

                            } else {


                                /*
                                |--------------------------------------------------------------------------
                                | Vendor Index
                                |--------------------------------------------------------------------------
                                */

                                let vendorIndex =
                                    index - 4;


                                /*
                                |--------------------------------------------------------------------------
                                | Get exact vendor quotation ID
                                |--------------------------------------------------------------------------
                                */

                                let vendorQuotationId =
                                    data.vendor_quotation_ids[
                                        vendorIndex
                                    ] ?? '';


                                /*
                                |--------------------------------------------------------------------------
                                | Existing Narration
                                |--------------------------------------------------------------------------
                                */

                                let narration =
                                    row[index] ?? '';


                                /*
                                |--------------------------------------------------------------------------
                                | Textarea
                                |--------------------------------------------------------------------------
                                */

                                html += `
                                    <td
                                        style="
                                            background:#f8f9fa;
                                            vertical-align:top;
                                            min-width:250px;
                                        "
                                    >

                                        <textarea
                                            class="form-control vendor-narration"
                                            data-vendor-quotation-id="${vendorQuotationId}"
                                            rows="3"
                                            placeholder="Enter narration..."
                                            style="
                                                resize:vertical;
                                                min-width:220px;
                                            "
                                        >${escapeHtml(narration)}</textarea>

                                    </td>
                                `;
                            }

                        }

                    }


                    /*
                    |--------------------------------------------------------------------------
                    | NORMAL PRODUCT ROW
                    |--------------------------------------------------------------------------
                    */

                    else {


                        row.forEach(
                            function(col, index) {

                                let header =
                                    data.headers[index];


                                /*
                                |--------------------------------------------------------------------------
                                | Best Rate
                                |--------------------------------------------------------------------------
                                */

                                if (
                                    header === 'Best Rate'
                                ) {

                                    html += `
                                        <td
                                            style="
                                                background:#d4edda;
                                                color:#155724;
                                                font-weight:bold;
                                                text-align:center;
                                                white-space:nowrap;
                                            "
                                        >
                                            ${escapeHtml(col ?? '')}
                                        </td>
                                    `;

                                }


                                /*
                                |--------------------------------------------------------------------------
                                | Best Vendor
                                |--------------------------------------------------------------------------
                                */

                                else if (
                                    header === 'Best Vendor'
                                ) {

                                    html += `
                                        <td
                                            style="
                                                background:#d4edda;
                                                color:#155724;
                                                font-weight:bold;
                                                white-space:nowrap;
                                            "
                                        >
                                            ${escapeHtml(col ?? '')}
                                        </td>
                                    `;

                                }


                                /*
                                |--------------------------------------------------------------------------
                                | Normal Columns
                                |--------------------------------------------------------------------------
                                */

                                else {

                                    html += `
                                        <td>
                                            ${escapeHtml(
                                                col ?? ''
                                            )}
                                        </td>
                                    `;
                                }

                            }
                        );
                    }


                    html += '</tr>';

                }
            );


            html += '</tbody>';


            /*
            |--------------------------------------------------------------------------
            | Put HTML into Table
            |--------------------------------------------------------------------------
            */

            document.getElementById(
                'rateTable'
            ).innerHTML = html;


            /*
            |--------------------------------------------------------------------------
            | Open Modal
            |--------------------------------------------------------------------------
            */

            let modalElement =
                document.getElementById(
                    'rateModal'
                );


            let modal =
                bootstrap.Modal.getOrCreateInstance(
                    modalElement
                );


            modal.show();

        })


        /*
        |--------------------------------------------------------------------------
        | Error
        |--------------------------------------------------------------------------
        */

        .catch(function(error) {

            console.error(error);

            alert(
                'Unable to load vendor rates.'
            );
        });
}


/*
|--------------------------------------------------------------------------
| ESCAPE HTML
|--------------------------------------------------------------------------
*/

function escapeHtml(text)
{
    if (
        text === null ||
        text === undefined
    ) {
        return '';
    }


    return String(text)

        .replace(
            /&/g,
            '&amp;'
        )

        .replace(
            /</g,
            '&lt;'
        )

        .replace(
            />/g,
            '&gt;'
        )

        .replace(
            /"/g,
            '&quot;'
        )

        .replace(
            /'/g,
            '&#039;'
        );
}


/*
|--------------------------------------------------------------------------
| SAVE VENDOR NARRATION
|--------------------------------------------------------------------------
*/

$(document).on(
    'click',
    '#saveVendorNarrationBtn',
    function () {

        let narrations = {};

        /*
        |--------------------------------------------------------------------------
        | Get all vendor narration fields
        |--------------------------------------------------------------------------
        */

        $('.vendor-narration').each(function () {

            let vendorQuotationId =
                $(this).attr('data-vendor-quotation-id');

            let narration =
                $(this).val();

            if (vendorQuotationId) {

                narrations[vendorQuotationId] =
                    narration;
            }
        });


        /*
        |--------------------------------------------------------------------------
        | Button
        |--------------------------------------------------------------------------
        */

        let button =
            $('#saveVendorNarrationBtn');


        /*
        |--------------------------------------------------------------------------
        | Disable button
        |--------------------------------------------------------------------------
        */

        button
            .prop('disabled', true)
            .html(
                '<span class="spinner-border spinner-border-sm me-1"></span> Saving...'
            );


        /*
        |--------------------------------------------------------------------------
        | AJAX
        |--------------------------------------------------------------------------
        */

        $.ajax({

            url: "{{ route('rfq.save-vendor-narration') }}",

            type: "POST",

            data: {

                _token: "{{ csrf_token() }}",

                narrations: narrations
            },


            /*
            |--------------------------------------------------------------------------
            | SUCCESS
            |--------------------------------------------------------------------------
            */

            success: function (response) {

                if (response.success) {

                    /*
                    |--------------------------------------------------------------------------
                    | Show success message
                    |--------------------------------------------------------------------------
                    */

                    alert(response.message);


                    /*
                    |--------------------------------------------------------------------------
                    | Close Bootstrap Modal
                    |--------------------------------------------------------------------------
                    */

                    let modalElement =
                        document.getElementById('rateModal');


                    let modal =
                        bootstrap.Modal.getInstance(
                            modalElement
                        );


                    /*
                    |--------------------------------------------------------------------------
                    | If modal instance exists, hide it
                    |--------------------------------------------------------------------------
                    */

                    if (modal) {

                        modal.hide();

                    } else {

                        /*
                        |--------------------------------------------------------------------------
                        | Create instance and hide
                        |--------------------------------------------------------------------------
                        */

                        modal =
                            new bootstrap.Modal(
                                modalElement
                            );

                        modal.hide();
                    }


                    /*
                    |--------------------------------------------------------------------------
                    | Safety cleanup
                    |--------------------------------------------------------------------------
                    */

                    setTimeout(function () {

                        /*
                        | Remove modal-open from body
                        */

                        document.body.classList.remove(
                            'modal-open'
                        );


                        /*
                        | Remove Bootstrap backdrop
                        */

                        $('.modal-backdrop').remove();


                        /*
                        | Reset body style
                        */

                        document.body.style.removeProperty(
                            'padding-right'
                        );

                        document.body.style.removeProperty(
                            'overflow'
                        );

                    }, 300);


                } else {

                    alert(
                        response.message ||
                        'Unable to save narration.'
                    );
                }
            },


            /*
            |--------------------------------------------------------------------------
            | ERROR
            |--------------------------------------------------------------------------
            */

            error: function (xhr) {

                console.error(
                    xhr.responseText
                );


                let message =
                    'Unable to save narration.';


                if (
                    xhr.responseJSON &&
                    xhr.responseJSON.message
                ) {

                    message =
                        xhr.responseJSON.message;
                }


                alert(message);
            },


            /*
            |--------------------------------------------------------------------------
            | COMPLETE
            |--------------------------------------------------------------------------
            */

            complete: function () {

                button
                    .prop('disabled', false)
                    .html(
                        'Save Narration'
                    );
            }

        });

    }
);
function openCSVModal(id)
{
    document.getElementById('csv_rfq_id').value = id;

   
    document.getElementById('downloadSample').href =
        "{{ url('rfq/sample-csv') }}/" + id;

    new bootstrap.Modal(document.getElementById('csvModal')).show();
}

function uploadCSV()
{
    let file = document.getElementById('csv_file').files[0];
    let id = document.getElementById('csv_rfq_id').value;

    let formData = new FormData();
    formData.append('file', file);

    fetch("{{ url('rfq/upload-csv') }}/" + id, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: formData
    })
    .then(res => res.json())
    .then(data => {
        alert(data.message);
        location.reload();
    });
}
function sendRFQMail(id)
{
    fetch("{{ url('rfq/send-mail') }}/" + id)
    .then(res => res.json())
    .then(data => {

        alert(
            "Mail Sent: " + data.success + "\n" +
            "Failed: " + data.failed
        );

    })
    .catch(err => {
        console.error(err);
        alert("Error sending mail");
    });
}
function viewRFQ(id)
{
    fetch("{{ url('rfq/details') }}/" + id)
    .then(res => res.json())
    .then(data => {

       
        document.getElementById('rfq_number').innerText = data.rfq.rfq_number;
        document.getElementById('pr_number').innerText = data.rfq.pr_number;

      
        let vendors = '';
        data.vendors.forEach(v => {
            vendors += `<li>${v.name}</li>`;
        });
        document.getElementById('vendor_list').innerHTML = vendors;

       
        let products = '';
        data.items.forEach(item => {
            products += `
                <tr>
                    <td>${item.name}</td>
                    <td>${item.quantity}</td>
                    <td>${item.unit_name}</td>
                    <td>${item.reason}</td>
                    <td>${item.description}</td>
                </tr>
            `;
        });
        document.getElementById('product_list').innerHTML = products;

      
        let modal = new bootstrap.Modal(document.getElementById('viewRFQModal'));
        modal.show();
    });
}

function submitCreateRFQ()
{
    $('#rfqSubmitBtn').prop('disabled', true);

    $('#rfqLoader').removeClass('d-none');

    $('#rfqSubmitBtn .btn-text').text('Submitting...');
    let vendorIds = Array.from(document.getElementById('vendor_id').selectedOptions)
                        .map(opt => opt.value);

    if (vendorIds.length === 0) {
        alert('Select vendor');
        return;
    }

    let items = [];

    document.querySelectorAll('#createItems tr').forEach(row => {
        items.push({
            product_id: row.querySelector('.product_id').value,
            quantity: row.querySelector('.qty').value
        });
    });

    fetch("{{ route('rfq.store') }}", {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            pr_id: document.getElementById('pr_id').value,
            vendor_ids: vendorIds,
            items: items
        })
    })
    .then(res => res.json())
    .then(data => {

        alert(data.message);

        let modal = bootstrap.Modal.getInstance(document.getElementById('createRFQModal'));
        modal.hide();

       
        location.reload();
    });
}

console.log("JS LOADED");

$(document).ready(function() {

    $('#createRFQModal').on('shown.bs.modal', function () {

        console.log("MODAL OPEN");

       
        $('#vendor_id').select2({
            dropdownParent: $('#createRFQModal'),
            placeholder: "Select Vendors"
        });

     

     
        $('#pr_id').off('change').on('change', function () {

            let prId = $(this).val();

            console.log("PR Selected:", prId);

            if (!prId) {
                $('#createItems').html('');
                return;
            }

            let url = "{{ url('get-pr-items') }}/" + prId;

            console.log("URL:", url);

            fetch(url)
            .then(res => res.json())
            .then(data => {

                console.log("DATA:", data);

                let rows = '';

                if (data.length === 0) {
                    rows = `<tr><td colspan="2">No Items Found</td></tr>`;
                }

                data.forEach(item => {
                    rows += `
                        <tr>
                            <td>
                                ${item.name}
                                <input type="hidden" class="product_id" value="${item.pr_item_id}">
                            </td>
                            <td>
                                <input type="number" value="${item.quantity}" class="form-control qty">
                            </td>
                             <td>
                                <input type="text" value="${item.unit_name}" class="form-control unit">
                            </td>
                             <td>
                                <input type="text" value="${item.reason}" class="form-control reason">
                            </td>
                             <td>
                                <input type="text" value="${item.description}" class="form-control description">
                            </td>
                            
                        </tr>
                    `;
                });

                $('#createItems').html(rows);
            })
            .catch(err => {
                console.error("ERROR:", err);
            });

        });

    });


    
    $('#createRFQModal').on('hidden.bs.modal', function () {
        $('#pr_id').val('');
        $('#vendor_id').val(null).trigger('change');
        $('#createItems').html('');
    });
});

</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.8.2/jspdf.plugin.autotable.min.js"></script>
<script>
    $(document).on(
    'click',
    '#exportRatesExcelBtn',
    function () {

        /*
        |--------------------------------------------------------------------------
        | Get table
        |--------------------------------------------------------------------------
        */

        let table =
            document.getElementById('rateTable');


        if (!table) {

            alert('Rate table not found.');

            return;
        }


        /*
        |--------------------------------------------------------------------------
        | Create a temporary table
        |--------------------------------------------------------------------------
        |
        | We don't export the textarea HTML.
        | Instead we export the actual narration text.
        |
        */

        let tempTable =
            table.cloneNode(true);


        /*
        |--------------------------------------------------------------------------
        | Replace narration textarea with its value
        |--------------------------------------------------------------------------
        */

        $(tempTable)
            .find('textarea.vendor-narration')
            .each(function () {

                let value =
                    $(this).val() || '';

                /*
                | Create normal Excel cell text
                */

                $(this).replaceWith(
                    document.createTextNode(value)
                );
            });


        /*
        |--------------------------------------------------------------------------
        | Create worksheet
        |--------------------------------------------------------------------------
        */

        let workbook =
            XLSX.utils.book_new();


        let worksheet =
            XLSX.utils.table_to_sheet(
                tempTable
            );


        /*
        |--------------------------------------------------------------------------
        | Column widths
        |--------------------------------------------------------------------------
        */

        let columnCount =
            table.rows[0]
                ? table.rows[0].cells.length
                : 0;


        let widths = [];


        for (
            let i = 0;
            i < columnCount;
            i++
        ) {

            widths.push({
                wch: 20
            });
        }


        /*
        |--------------------------------------------------------------------------
        | Product column
        |--------------------------------------------------------------------------
        */

        if (widths.length > 0) {

            widths[0] = {
                wch: 30
            };
        }


        /*
        |--------------------------------------------------------------------------
        | Reason column
        |--------------------------------------------------------------------------
        */

        if (widths.length > 3) {

            widths[3] = {
                wch: 30
            };
        }


        /*
        |--------------------------------------------------------------------------
        | Vendor columns
        |--------------------------------------------------------------------------
        */

        for (
            let i = 4;
            i < widths.length;
            i++
        ) {

            widths[i] = {
                wch: 25
            };
        }


        worksheet['!cols'] =
            widths;


        /*
        |--------------------------------------------------------------------------
        | Add worksheet
        |--------------------------------------------------------------------------
        */

        XLSX.utils.book_append_sheet(
            workbook,
            worksheet,
            'Vendor Rates'
        );


        /*
        |--------------------------------------------------------------------------
        | Generate filename
        |--------------------------------------------------------------------------
        */

        let filename =
            'Vendor_Rates_' +
            new Date()
                .toISOString()
                .slice(0, 10) +
            '.xlsx';


        /*
        |--------------------------------------------------------------------------
        | Download Excel
        |--------------------------------------------------------------------------
        */

        XLSX.writeFile(
            workbook,
            filename
        );

    }
);
$(document).on(
    'click',
    '#exportRatesPdfBtn',
    function () {

        /*
        |--------------------------------------------------------------------------
        | Check table
        |--------------------------------------------------------------------------
        */

        let table =
            document.getElementById('rateTable');


        if (!table) {

            alert('Rate table not found.');

            return;
        }


        /*
        |--------------------------------------------------------------------------
        | Get headers
        |--------------------------------------------------------------------------
        */

        let headers = [];

        $(table)
            .find('thead tr th')
            .each(function () {

                headers.push(
                    $(this).text().trim()
                );

            });


        if (headers.length === 0) {

            alert('No data available for PDF.');

            return;
        }


        /*
        |--------------------------------------------------------------------------
        | Get body rows
        |--------------------------------------------------------------------------
        */

        let body = [];

        let totalRows =
            table.tBodies[0]
                ? table.tBodies[0].rows.length
                : 0;


        $(table)
            .find('tbody tr')
            .each(function (rowIndex) {

                let rowData = [];


                /*
                |--------------------------------------------------------------------------
                | Check special rows
                |--------------------------------------------------------------------------
                */

                let isTermsRow =
                    rowIndex === totalRows - 2;


                let isNarrationRow =
                    rowIndex === totalRows - 1;


                /*
                |--------------------------------------------------------------------------
                | Terms / Narration
                |--------------------------------------------------------------------------
                */

                if (
                    isTermsRow ||
                    isNarrationRow
                ) {

                    let cells =
                        $(this).find('td');


                    let originalData = [];


                    cells.each(function () {

                        /*
                        |--------------------------------------------------------------------------
                        | Narration textarea
                        |--------------------------------------------------------------------------
                        */

                        let textarea =
                            $(this).find(
                                'textarea.vendor-narration'
                            );


                        if (
                            textarea.length > 0
                        ) {

                            originalData.push(
                                textarea.val() || ''
                            );

                        } else {

                            originalData.push(
                                $(this)
                                    .text()
                                    .trim()
                            );
                        }

                    });


                    /*
                    |--------------------------------------------------------------------------
                    | First cell is colspan="4"
                    |--------------------------------------------------------------------------
                    */

                    if (originalData.length > 0) {

                        rowData.push(
                            originalData[0]
                        );

                        rowData.push('');
                        rowData.push('');
                        rowData.push('');


                        /*
                        |--------------------------------------------------------------------------
                        | Vendor values
                        |--------------------------------------------------------------------------
                        */

                        for (
                            let i = 1;
                            i < originalData.length;
                            i++
                        ) {

                            rowData.push(
                                originalData[i]
                            );
                        }
                    }


                } else {


                    /*
                    |--------------------------------------------------------------------------
                    | Normal product row
                    |--------------------------------------------------------------------------
                    */

                    $(this)
                        .find('td')
                        .each(function () {

                            rowData.push(
                                $(this)
                                    .text()
                                    .trim()
                            );

                        });
                }


                /*
                |--------------------------------------------------------------------------
                | Make sure row has same number of columns
                |--------------------------------------------------------------------------
                */

                while (
                    rowData.length < headers.length
                ) {

                    rowData.push('');
                }


                /*
                |--------------------------------------------------------------------------
                | Remove extra columns
                |--------------------------------------------------------------------------
                */

                if (
                    rowData.length > headers.length
                ) {

                    rowData =
                        rowData.slice(
                            0,
                            headers.length
                        );
                }


                body.push(rowData);

            });


        /*
        |--------------------------------------------------------------------------
        | Create PDF
        |--------------------------------------------------------------------------
        */

        const {
            jsPDF
        } = window.jspdf;


        const doc =
            new jsPDF({

                orientation: 'landscape',

                unit: 'mm',

                format: 'a4'
            });


        /*
        |--------------------------------------------------------------------------
        | A4 Landscape dimensions
        |--------------------------------------------------------------------------
        */

        const pageWidth =
            doc.internal.pageSize.getWidth();


        const pageHeight =
            doc.internal.pageSize.getHeight();


        /*
        |--------------------------------------------------------------------------
        | Margins
        |--------------------------------------------------------------------------
        */

        const leftMargin = 5;

        const rightMargin = 5;

        const topMargin = 20;

        const bottomMargin = 10;


        /*
        |--------------------------------------------------------------------------
        | FULL AVAILABLE WIDTH
        |--------------------------------------------------------------------------
        */

        const availableWidth =
            pageWidth -
            leftMargin -
            rightMargin;


        /*
        |--------------------------------------------------------------------------
        | Title
        |--------------------------------------------------------------------------
        */

        doc.setFontSize(16);

        doc.setFont(undefined, 'bold');

        doc.text(
            'Vendor Rates',
            pageWidth / 2,
            10,
            {
                align: 'center'
            }
        );


        /*
        |--------------------------------------------------------------------------
        | Date
        |--------------------------------------------------------------------------
        */

        doc.setFontSize(8);

        doc.setFont(undefined, 'normal');

        let currentDate =
            new Date().toLocaleDateString(
                'en-GB'
            );


        doc.text(
            'Date: ' + currentDate,
            pageWidth - rightMargin,
            10,
            {
                align: 'right'
            }
        );


        /*
        |--------------------------------------------------------------------------
        | Dynamic column widths
        |--------------------------------------------------------------------------
        |
        | These are WEIGHTS, not fixed widths.
        | The final widths are automatically expanded
        | to fill the complete A4 landscape width.
        |
        */

        let weights = [];


        for (
            let i = 0;
            i < headers.length;
            i++
        ) {

            let header =
                headers[i];


            /*
            |--------------------------------------------------------------------------
            | Product
            |--------------------------------------------------------------------------
            */

            if (i === 0) {

                weights.push(1.7);

            }


            /*
            |--------------------------------------------------------------------------
            | Quantity
            |--------------------------------------------------------------------------
            */

            else if (i === 1) {

                weights.push(0.65);

            }


            /*
            |--------------------------------------------------------------------------
            | Unit
            |--------------------------------------------------------------------------
            */

            else if (i === 2) {

                weights.push(0.65);

            }


            /*
            |--------------------------------------------------------------------------
            | Reason
            |--------------------------------------------------------------------------
            */

            else if (i === 3) {

                weights.push(1.3);

            }


            /*
            |--------------------------------------------------------------------------
            | Best Rate
            |--------------------------------------------------------------------------
            */

            else if (
                header === 'Best Rate'
            ) {

                weights.push(1.0);

            }


            /*
            |--------------------------------------------------------------------------
            | Best Vendor
            |--------------------------------------------------------------------------
            */

            else if (
                header === 'Best Vendor'
            ) {

                weights.push(1.2);

            }


            /*
            |--------------------------------------------------------------------------
            | Vendor Rate
            |--------------------------------------------------------------------------
            */

            else {

                weights.push(1.0);

            }
        }


        /*
        |--------------------------------------------------------------------------
        | Calculate total weight
        |--------------------------------------------------------------------------
        */

        let totalWeight =
            weights.reduce(
                function (sum, value) {

                    return sum + value;

                },
                0
            );


        /*
        |--------------------------------------------------------------------------
        | Convert weights into actual mm
        |--------------------------------------------------------------------------
        */

        let columnStyles = {};


        weights.forEach(
            function (weight, index) {

                columnStyles[index] = {

                    cellWidth:
                        (
                            availableWidth *
                            weight
                        ) /
                        totalWeight
                };

            }
        );


        /*
        |--------------------------------------------------------------------------
        | AutoTable
        |--------------------------------------------------------------------------
        */

        doc.autoTable({

            head: [
                headers
            ],

            body: body,


            /*
            |--------------------------------------------------------------------------
            | Start position
            |--------------------------------------------------------------------------
            */

            startY: topMargin,


            /*
            |--------------------------------------------------------------------------
            | FULL WIDTH
            |--------------------------------------------------------------------------
            */

            tableWidth:
                availableWidth,


            /*
            |--------------------------------------------------------------------------
            | Theme
            |--------------------------------------------------------------------------
            */

            theme: 'grid',


            /*
            |--------------------------------------------------------------------------
            | General styles
            |--------------------------------------------------------------------------
            */

            styles: {

                fontSize: 7,

                cellPadding: 2,

                overflow: 'linebreak',

                valign: 'middle',

                lineColor:
                    [150, 150, 150],

                lineWidth: 0.2,

                cellWidth: 'auto'
            },


            /*
            |--------------------------------------------------------------------------
            | Header styles
            |--------------------------------------------------------------------------
            */

            headStyles: {

                fontSize: 7,

                fontStyle: 'bold',

                halign: 'center',

                valign: 'middle',

                fillColor:
                    [52, 58, 64],

                textColor:
                    [255, 255, 255],

                cellPadding: 2
            },


            /*
            |--------------------------------------------------------------------------
            | Column widths
            |--------------------------------------------------------------------------
            */

            columnStyles:
                columnStyles,


            /*
            |--------------------------------------------------------------------------
            | Margins
            |--------------------------------------------------------------------------
            */

            margin: {

                left:
                    leftMargin,

                right:
                    rightMargin,

                top:
                    topMargin,

                bottom:
                    bottomMargin
            },


            /*
            |--------------------------------------------------------------------------
            | Cell styling
            |--------------------------------------------------------------------------
            */

            didParseCell:
                function (data) {


                    /*
                    |--------------------------------------------------------------------------
                    | Terms & Conditions row
                    |--------------------------------------------------------------------------
                    */

                    if (
                        data.row.index ===
                        body.length - 2
                    ) {

                        data.cell.styles.fillColor =
                            [255, 243, 205];

                        data.cell.styles.textColor =
                            [133, 100, 4];

                        data.cell.styles.fontStyle =
                            'bold';

                        data.cell.styles.valign =
                            'top';
                    }


                    /*
                    |--------------------------------------------------------------------------
                    | Narration row
                    |--------------------------------------------------------------------------
                    */

                    if (
                        data.row.index ===
                        body.length - 1
                    ) {

                        data.cell.styles.fillColor =
                            [242, 242, 242];

                        data.cell.styles.textColor =
                            [50, 50, 50];

                        data.cell.styles.fontStyle =
                            'normal';

                        data.cell.styles.valign =
                            'top';
                    }


                    /*
                    |--------------------------------------------------------------------------
                    | Best Rate
                    |--------------------------------------------------------------------------
                    */

                    if (
                        headers[
                            data.column.index
                        ] === 'Best Rate'
                    ) {

                        data.cell.styles.fillColor =
                            [212, 237, 218];

                        data.cell.styles.textColor =
                            [21, 87, 36];

                        data.cell.styles.fontStyle =
                            'bold';

                        data.cell.styles.halign =
                            'center';
                    }


                    /*
                    |--------------------------------------------------------------------------
                    | Best Vendor
                    |--------------------------------------------------------------------------
                    */

                    if (
                        headers[
                            data.column.index
                        ] === 'Best Vendor'
                    ) {

                        data.cell.styles.fillColor =
                            [212, 237, 218];

                        data.cell.styles.textColor =
                            [21, 87, 36];

                        data.cell.styles.fontStyle =
                            'bold';

                        data.cell.styles.halign =
                            'center';
                    }


                    /*
                    |--------------------------------------------------------------------------
                    | Quantity
                    |--------------------------------------------------------------------------
                    */

                    if (
                        data.column.index === 1
                    ) {

                        data.cell.styles.halign =
                            'center';
                    }


                    /*
                    |--------------------------------------------------------------------------
                    | Unit
                    |--------------------------------------------------------------------------
                    */

                    if (
                        data.column.index === 2
                    ) {

                        data.cell.styles.halign =
                            'center';
                    }


                    /*
                    |--------------------------------------------------------------------------
                    | Vendor rate columns
                    |--------------------------------------------------------------------------
                    */

                    if (
                        data.column.index >= 4
                    ) {

                        data.cell.styles.halign =
                            'center';
                    }

                },


            /*
            |--------------------------------------------------------------------------
            | Page footer
            |--------------------------------------------------------------------------
            */

            didDrawPage:
                function () {

                    let pageNumber =
                        doc.internal
                            .getNumberOfPages();


                    doc.setFontSize(7);

                    doc.setFont(
                        undefined,
                        'normal'
                    );


                    doc.text(
                        'Page ' +
                        pageNumber,
                        pageWidth / 2,
                        pageHeight - 5,
                        {
                            align: 'center'
                        }
                    );
                }

        });


        /*
        |--------------------------------------------------------------------------
        | File name
        |--------------------------------------------------------------------------
        */

        let fileName =
            'Vendor_Rates_' +
            new Date()
                .toISOString()
                .slice(0, 10) +
            '.pdf';


        /*
        |--------------------------------------------------------------------------
        | Save PDF
        |--------------------------------------------------------------------------
        */

        doc.save(
            fileName
        );

    }
);
</script>