@php
    $scopeOfWorks = \App\Models\ScopeOfWork::select('id', 'name')->orderBy('name', 'asc')->get();
@endphp

<div class="card">
    <div class="card-header">
        <h5 class="float-left mt-2 mb-0">Vendors</h5>
    </div>
    <div class="card-body pb-2">
        <div id="project-vendor">
            <section>

            </section>
        </div>
    </div>
    <div class="card-footer">
        <button class="btn btn-primary btn-sm" id="add-vendor" type="button">Add New Vendor</button>
    </div>
</div>

<script>
    var scopeOfWorkData = `{{ json_encode($scopeOfWorks) }}`;
    var scopeOfWorkParse = JSON.parse(scopeOfWorkData.replace(/&quot;/g, '"'));
    var pushToVendor = '';
    var startFrom = 1;

    $(document).ready(function() {

        $(document).on('click', '#add-vendor', function() {
            pushToVendor += `
                <section id="vendor-list" class="mb-3">
                    <input name="vendors[]" type="hidden" value="1"/>
                    <div class="row">
                        <div class="col-3 pr-0">
                            ${startFrom==1 ? '<label class="form-label">Scope of Work</label>': ''}
                            <select class="form-control" name="vendorScopeOfWorkIds[]" id="scope-of-work-id" required onchange="ajaxVendorByScope(this, ${startFrom})">
                                <option hidden>-- Select Scope of Work --</option>
                                ${mapScopeOfWork(scopeOfWorkParse)}
                            </select>
                        </div>
                        <div class="col-4 pr-0">
                            ${startFrom==1 ? '<label class="form-label">Vendor</label>': ''}
                            <select class="form-control" name="vendorIds[]" id="vendor-id-${startFrom}">
                                <option hidden>-- Select Scope of Work first --</option>
                            </select>
                        </div>
                        <div class="col-4 pr-0">
                            ${startFrom==1 ? '<label class="form-label">Vendor (Free text)</label>': ''}
                            <textarea class="form-control" name="vendorNames[]" rows="1"></textarea>
                        </div>
                        <div class="col-1">
                            ${startFrom==1 ? '<label class="form-label text-white">.</label>': ''}
                            <button class="btn btn-danger btn-sm w-100 mt-1" type="button" id="remove-vendor">X</button>
                        </div>
                    </div>
                </section>
            `;
            $("div#project-vendor section:last").after(`${pushToVendor}`);
            pushToVendor = '';
            startFrom++;
        });

        $(document).on('click', '#remove-vendor', function() {
            var confirmDialog = confirm("Are you sure?");
            if (confirmDialog == true) {
                $(this).closest('section#vendor-list').remove();
            }
        });
    });

    function ajaxVendorByScope(scope, tagId) {
        let vendorByScope = `{{ route('ajax.vendor.scope-of-work.index') }}`;
        $.ajax({
            url: vendorByScope,
            type: 'GET',
            data: {
                id: scope.value
            },
            success: function(res) {
                console.log(res.length);
                $("#vendor-id-" + tagId).find('option').remove();
                if (res.length > 0) {
                    $("#vendor-id-" + tagId).append('<option value="">-- Use Vendor Free Text --</option>');
                    $.each(res, function(key, item) {
                        $("#vendor-id-" + tagId).append('<option value=' + item.id + '>' + item
                            .name + '</option>');
                    });
                } else {
                    $("#vendor-id-" + tagId).append(
                        '<option value="">-- Vendor Not Found, Please Use Free Text --</option>');
                }
            }
        });
    }

    function mapScopeOfWork(data) {
        let dataOption = data.map(function(item) {
            return `<option value="${item.id}">${item.name}</option>`
        }).join(" ");

        return dataOption;
    }
</script>