@extends('layouts.jform')
@section('content')
    <?php Fun::lang() ?>
    <form action="{{route('production-request-add-more')}}" method="POST" class="jform">
        @csrf
        <div class="row">
            <div class="col-md-4 col-lg-4 form-group">
                <label class="required">{{__('administrator.invoice_number')}}</label>
                {!! Form::text('invoice_number',null, ['placeholder'=>__('administrator.invoice_number'),'class' => 'form-control']) !!}
            </div>
            <div class="col-md-4 col-lg-4 form-group">
                <label class="required">{{__('administrator.tailor')}}</label>
                {!! Form::select('tailor_id',getTailor()->pluck('name','id'),null,array('placeholder'=>__('administrator.please_select'),'class'=>' form-control')) !!}
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <table class="table table-bordered table-hover">
                    <thead>
                    <th>{{__('administrator.item_name')}}</th>
                    <th>{{__('administrator.size')}}</th>
                    <th>{{__('administrator.color')}}</th>
                    <th>{{__('administrator.qty')}}</th>
                    <th>{{__('administrator.sewing_price')}}</th>
                    <th>
                        <button type="button" onclick="add_row()" class="button_success fa fa-plus"></button>
                    </th>
                    </thead>
                    <tbody class="tbody">

                    </tbody>
                </table>
            </div>
        </div>
        {!! Form::submit('Submit', ['class' => 'hidden']) !!}
    </form>
@endsection
@section('jq')
    <script>
        var tb = $('.tbody');

        $(document).ready(function () {
            add_row()
            tb.on('change','.color_code,.size_code',function () {
                let row = $(this).closest('tr');
                let size_code = row.find('.size_code').val();
                let color_code = row.find('.color_code').val();
                let product_id = row.find('.search_product').val();

                $.ajax({
                    url:'{{route('production-request-add-more')}}',
                    dataType:'json',
                    method:'get',
                    data:{
                        product_id,size_code,color_code,getSewingPrice:1
                    },
                    success:function (data) {
                        let p =  row.find('.sewing_price')
                        let c =  row.find('.input-group-addon')
                        let t =  row.find('.template_id')
                        let cur =  row.find('.currency_id')

                        p.val(0)
                        c.text('')
                        t.val(0)
                        cur.val(0)

                        if(data.id){
                            p.val(data.sewing_price)
                            c.text(data.cur)
                            t.val(data.id)
                            cur.val(data.currency_id)
                        }
                    }
                })
            })
            tb.on('change','.search_product',function () {
                let row = $(this).closest('tr');
                let size = row.find('.size_code');
                let color = row.find('.color_code');
                size.html('')
                color.html('')
                let product_id = row.find('.search_product').val();
                $.ajax({
                    url:'{{route('product-return.create')}}',
                    dataType:'json',
                    method:'get',
                    data:{
                        product_id
                    },
                    success:function (data) {
                        let option_color = `<option value="">{{__('administrator.please_select')}}</option>`;
                        let option_size = option_color
                        $.each(data.size,function (i,v) {
                            option_size+=`<option value="${i}">${v}</option>`
                        })
                        size.html(option_size)

                        $.each(data.color,function (i,v) {
                            option_color+=`<option value="${i}">${v}</option>`
                        })
                        color.html(option_color)
                    },
                    error(xhr){
                        alertErrorFormController(xhr);
                    }
                });
            })
        });
        function add_row() {
            tb.append(`
                <tr>
                    <td>{!! Form::select('product_id[]',[],null,['placeholder'=>__('administrator.please_select'),'class'=>'form-control search_product']); !!}</td>
                    <td>{!! Form::select('size_code[]',[],null,['placeholder'=>__('administrator.please_select'),'class'=>'form-control size_code']); !!}</td>
                    <td>{!! Form::select('color_code[]',[],null,['placeholder'=>__('administrator.please_select'),'class'=>'form-control color_code']); !!}</td>
                    <td>{!! Form::text('qty[]',1,['placeholder'=>__('administrator.qty'),'class'=>'form-control number-only qty']); !!}</td>
                    <td>
                        <div class="input-group">
                            <input name="cutting_price[]" type="hidden" value="1100" autocomplete="off">
                            {!! Form::number('sewing_price[]',0, ['placeholder'=>__('administrator.sewing_price'),'class' => 'form-control sewing_price','step'=>'0.001']) !!}
                            {!! Form::hidden('template_id[]',null,['class'=>'template_id']) !!}
                            {!! Form::hidden('currency_id[]',null,['class'=>'currency_id']) !!}
                            <span class="input-group-addon"></span>
                        </div>
                    </td>
                    <td><button class="button_danger fa fa-times" onclick="$(this).closest('tr').remove()"></button></td>
                <tr>
            `);
                search_something('product','.search_product:last');
        }
    </script>
@endsection

