@csrf
<div class="mb-3">
    <label for="">廠商</label>
    <select class="form-control" name="company" id="company">
        <option value="宜禽">宜禽</option>
        <option value="富美">富美</option>
        <option value="清豐">清豐</option>
    </select>
</div>
<div class="mb-3">
    <label for="">日期</label>
    <input class="form-control" type="date" name="ordered_at" value="{{ date('Y-m-d') }}">
</div>

<style>
    th,td{
        border: 1px solid rgb(222, 222, 222);
        padding: 4px 8px;
    }
    .plus-table{
        border: 1px solid rgb(222, 222, 222);
        padding: 0;
        font-size: 28px;
        font-weight: 900;
    }
    .plus-table:hover{
        background: rgb(222, 222, 222);
    }
    .nameSelect{
        min-width: 130px;
    }
    .delete-td-btn{
        min-width: 75px;
    }
</style>

<div class="mb-3">
    <table class="">
        <thead>
            <tr>
                <th>品項</th>
                <th>數量</th>
                <th>重量(KG)</th>
                <th>籃子</th>
                <th>單價</th>
                <th>總金額</th>
                <th>斤兩</th>
                <th>刪除</th>
            </tr>
        </thead>
        <tbody>
            @php
                $option = [];
                foreach($priceArray['宜禽'] as $name => $arr){
                    $option[] = $name;
                }
                // dd($priceArray);
                // $option = $priceArray['宜禽'];
            @endphp
            @foreach ($priceArray['宜禽'] as $name => $arr)
                @if ($arr['status'] == 0)
                <tr>
                    <td>
                        <select name="name[]" class="form-control nameSelect" id="" >
                            @foreach ($option as $key => $val)
                                <option value="{{ $val }}" @selected($name == $val)>{{ $val }}</option>
                            @endforeach
                        </select>
                    </td>
                    <td><input type="number" class="form-control"  name="amount[]"></td>
                    <td><input type="text" class="form-control" name="weight[]"></td>
                    <td><input type="number" class="form-control" name="basket[]"></td>
                    <td><input type="number" class="form-control price" name="price[]" value="{{ $arr['price'] }}"></td>
                    <td><input type="number" class="form-control" name="sumprice[]"></td>
                    <td>
                        <div class="d-flex">
                            <input type="number" class="form-control" name="jin[]">
                            斤
                            <input type="number" class="form-control" name="two[]">
                        </div>
                    </td>
                    <td><button class="btn btn-danger delete-td-btn" type="button">刪除</button></td>
                </tr>
                @endif

            @endforeach

        </tbody>
    </table>
    <button class="btn btn-block btn-large plus-table" type="button">+</button>
</div>
<div class="mb-3">
    <button type="submit" class="btn btn-dark">送出</button>
</div>

<script>
    $(document).ready(function(){
        var priceArray = {!! $priceJson !!};
        console.log(priceArray);


        $('body').delegate('.delete-td-btn','click',function(){
            $(this).parent().parent().remove();
        });

        $(document).ready(function(){
            // var getAllSelect = $('.nameSelect');
            var company = $('#company').val();


            $('.nameSelect').each(function (index) {
                let value = $(this).val();
                $('.price').eq(index).val(priceArray[company][value]['price']);
            });
            // setPrice(priceArray);
            $('body').delegate('.nameSelect','change',function(){
                let index = $('.nameSelect').index(this);
                $('.price').eq(index).val(priceArray[company][$(this).val()]['price']);
            });

            $('#company').change(function(){
                change_company();
            });

            $('.plus-table').click(function(){
                company = $('#company').val();
                var option_html = "";
                $.each(priceArray[company], function (index, val) {
                    option_html +='<option value="'+index+'">'+index+'</option>';
                    // $('.nameSelect').append();
                });
                let html = `<tr>
                                <td>
                                    <select name="name[]" class="form-control nameSelect" id="">
                                       `+option_html+`
                                    </select>
                                </td>
                                <td><input type="number" class="form-control"  name="amount[]"></td>
                                <td><input type="text" class="form-control" name="weight[]"></td>
                                <td><input type="number" class="form-control" name="basket[]"></td>
                                <td><input type="number" class="form-control price" name="price[]"></td>
                                <td><input type="number" class="form-control" name="sumprice[]"></td>
                                <td>
                                    <div class="d-flex">
                                        <input type="number" class="form-control" name="jin[]">
                                        斤
                                        <input type="number" class="form-control" name="two[]">
                                    </div>
                                </td>
                                <td><button class="btn btn-danger delete-td-btn" type="button">刪除</button></td>
                            </tr>`;

                $('tbody').append(html);



                $('.nameSelect').each(function (index) {
                    let value = $(this).val();
                    $('.price').eq(index).val(priceArray[company][value]['price']);
                });


            });
            change_company();



        });
        function change_company(){
            console.log('do');
            $('.delete-td-btn').click();
                var company = $('#company').val();
                let count = 0;
                var optionArr = [];
                $.each(priceArray[company], function (index, val) {
                    optionArr[index] = index;
                    // count++;
                });
                console.log(optionArr);

                $.each(priceArray[company], function (index, val) {
                    if(val['status'] == 0){
                        $('.plus-table').click();
                        // $('.nameSelect').eq(count).val(index);
                        // $('.price').eq(count).val(val['price']);
                        count++;
                    }
                });
                $('.nameSelect').empty();
                console.log('3.do');
                $.each(priceArray[company], function (index, val) {
                    $('.nameSelect').append('<option value="'+index+'">'+index+'</option>');
                });
                count = 0;
                $.each(priceArray[company], function (index, val) {
                    if(val['status'] == 0){
                        // $('.plus-table').click();
                        $('.nameSelect').eq(count).val(index);
                        $('.price').eq(count).val(val['price']);
                        count++;
                    }
                });
        }

    });

</script>