@csrf
<div class="mb-3">
    <label for="">廠商</label>
    <select class="form-control" name="company" id="">
        <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>
            <tr>
                <td>
                    <select name="name[]" class="form-control nameSelect" id="" >
                        @foreach ($option as $key => $val)
                            <option value="{{ $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" name="price[]" value="90"></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>
            <tr>
                <td>
                    <select name="name[]" class="form-control nameSelect" id="" >
                        @foreach ($option as $key => $val)
                            <option value="{{ $val }}" {{ $val == '母' ? 'selected' : '' }} >{{ $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" name="price[]"  value="90"></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>
            <tr>
                <td>
                    <select name="name[]" class="form-control nameSelect" id="" >
                        @foreach ($option as $key => $val)
                            <option value="{{ $val }}" {{ $val == '文昌' ? 'selected' : '' }}>{{ $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" name="price[]"  value="105"></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>
            <tr>
                <td>
                    <select name="name[]" class="form-control nameSelect" id="" >
                        @foreach ($option as $key => $val)
                            <option value="{{ $val }}" {{ $val == '雞腱' ? 'selected' : '' }}>{{ $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" name="price[]"  value="65"></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>
            <tr>
                <td>
                    <select name="name[]" class="form-control nameSelect" id="" >
                        @foreach ($option as $key => $val)
                            <option value="{{ $val }}" {{ $val == '雞心' ? 'selected' : '' }}>{{ $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" name="price[]"  value="65"></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>
            <tr>
                <td>
                    <select name="name[]" class="form-control nameSelect" id="" >
                        @foreach ($option as $key => $val)
                            <option value="{{ $val }}" {{ $val == '雞腰' ? 'selected' : '' }}>{{ $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" name="price[]"  value="450"></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>
    </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(){
        $('.plus-table').click(function(){
            let html = `<tr>
                            <td>
                                <select name="name[]" class="form-control nameSelect" id="">
                                    @foreach ($option as $key => $val)
                                        <option value="{{ $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" 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);
        });

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

    });

</script>