@php
    $scopeOfWorks = \App\Models\ScopeOfWork::select('id', 'name')->orderBy('name', 'asc')->get();
    $projectVendorLists = \App\Models\ProjectVendorList::with('vendorByScopeOfWorks')->where('project_id', request()->route('id'))->get();
    
    $pushToVendor = '';
    //dd($projectVendorLists);
    $startCount = 1;
    if ($projectVendorLists->count()>0){
        foreach ($projectVendorLists as $projectVendorList) {
            // dd($projectVendorList->vendors);
            $pushToVendorChild = '';

            if ($projectVendorList->vendorByScopeOfWorks->count() > 0) {
                if (!$projectVendorList->vendor_id) {
                    $pushToVendorChild .= '<option value="">-- Use Vendor Free Text --</option>';
                }

                foreach ($projectVendorList->vendorByScopeOfWorks as $vendorByScopeOfWork) {
                    $vendor = \App\Models\Vendor::find($vendorByScopeOfWork->vendor_id);
                    $pushToVendorChild .= '<option value="'.$vendor->id.'" '.($projectVendorList->vendor_id == $vendor->id ? 'selected' : '').'>'.$vendor->name.'</option>';
                }
            
            } else {
                $pushToVendorChild .= '<option value="">-- Use Vendor Free Text --</option>';
            }

            $pushToVendor.= '
            <section id="vendor-list" class="mb-3">
                    <input name="vendors[]" type="hidden" value="1"/>
                    <div class="row">
                        <div class="col-3 pr-0">
                            '.($startCount == 1 ? '<label class="form-label">Scope of Work</label>' : '').'
                            <select class="form-control" name="vendorScopeOfWorkIds[]" id="scope-of-work-id" required onchange="ajaxVendorByScope(this, '.$startCount.')">
                                <option hidden>-- Select Scope of Work --</option>
                                ${mapScopeOfWork(scopeOfWorkParse, '.$projectVendorList->sow_id.')}
                            </select>
                        </div>
                        <div class="col-4 pr-0">
                            '.($startCount == 1 ? '<label class="form-label">Vendor</label>' : '').'
                            <select class="form-control" name="vendorIds[]" id="vendor-id-'.$startCount.'">             
                                '.$pushToVendorChild.'
                            </select>
                        </div>
                        <div class="col-4 pr-0">
                            '.($startCount == 1 ? '<label class="form-label">Vendor (Free text)</label>' : '').'
                            <textarea class="form-control" name="vendorNames[]" rows="1">'.$projectVendorList->vendor_name.'</textarea>
                        </div>
                        <div class="col-1">
                            '.($startCount == 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>
            ';
            $startCount++;
        }
    }


@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 = {{$startCount}}+1;

    $(document).ready(function(){

        $('div#project-vendor').append(`{!! $pushToVendor !!}`);

        $(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, sow = false) {
        let dataOption = data.map(function (item) {
            return `<option value="${item.id}" ${sow ? (item.id == sow ? 'selected' : '' ) : ''}>${item.name}</option>`
        }).join(" ");

        return dataOption;
    }
</script>