@extends('layouts.app')

@section('content')


    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading"> Setup Trims/Accessories  
                <a href="{{ url('/products') }}" class="pull-right"> Back to Style List </a>
            </div>

            <div class="panel-body">

                @if(count($errors)>0)
                    @foreach($errors->all() as $error)
                        {{$error}}
                    @endforeach
                @endif

                    <div class="form-group">
                        <label for="name" class="col-md-5 control-label primary"> 
                            Select Trims/Accessories for 
                            <span>"{{$product_info[0]->style_name}} - {{$product_info[0]->order_number}}"</span> 
                            production 
                        </label>
                        <div class="col-md-3">
                            <select name="material" id="material" class="form-control selectpicker" data-live-search="true" >
                                <option value=""> Select </option>
                                @if(isset($materials))
                                    @foreach($materials as $val)
                                        <option value="{{ $val->id.'='.$val->name }}"  @if(isset($item->designation) && $item->designation == $val->name) selected="selected" @endif >{{ $val->name }} - {{$val->style_name}}</option>
                                    @endforeach
                                @endif
                            </select>
                        </div>
                        <label for="name" class="col-md-1 control-label"> Quantity </label>
                        <div class="col-md-2">
                            <input id="quantity" type="text" class="form-control" name="quantity" value="@yield('quantity')" required autofocus>
                        </div>
                        <div class="col-md-1">
							<input type="button" onclick="add_requisition();" class="btn btn-primary pull-left" value="Add" />                           
                        </div>
                    </div>



                    <div class="form-group">
                    <form action="{{ url('/metrialSetup') }}" method="POST">

                    @if(isset($metrial_items))
                        <table id="myTable" class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th> Name </th>
                                    <th> Quantity </th>
                                    <th> Action </th>
                                </tr>
                            </thead>
                            <tbody id="RequisitionDiv">
                                @php $i=1; @endphp

                                @foreach($metrial_items as $row)
                                    <tr id="tr_{{$i}}">
                                        <td>{{$row->name}} - {{$row->style_name}}<input type="hidden" name="material[]" value="{{$row->material_id}}" > </td>
                                        <td>{{$row->quantity}} <input type="hidden" name="quantity[]" value="{{$row->quantity}}" > </td>
                                        <td><a href="javascript:remove_requisition('{{$i}}');"  class="btn btn-warning pull-left">Remove</a> </td>
                                    </tr>
                                    @php $i++; @endphp
                                @endforeach
                            </tbody>
                        </table>
                    @endif
                    <button type="submit" class="btn btn-success">Submit</button>
                    <input type="hidden" name="_token" value="{{ csrf_token() }}"/>
                    @if(isset($product_id)) <input type="hidden" name="product_id" value="{{ $product_id }}"/>  @endif
                </form>
                </div>

            </div>
        </div>
    </div>

<script type="text/javascript">
    var i={{$i}};
    function add_requisition()
    {
        var name = $( "#material" ).val();
        var qty = $( "#quantity" ).val();
        var id_name = name.split("=");

        offi_html ='<tr id="tr_'+i+'">';
        offi_html +='<td>'+id_name[1]+' <input type="hidden" name="material[]" value="'+id_name[0]+'" > </td>';
        offi_html +='<td>'+qty+' <input type="hidden" name="quantity[]" value="'+qty+'" > </td>';
        offi_html +='<td><a href="javascript:remove_requisition('+i+');"  class="btn btn-warning pull-left">Remove</a> </td>';
        offi_html +='</tr>';
        $("#RequisitionDiv").prepend(offi_html);

        $( "#material" ).val('');
        $( "#quantity" ).val('');
    }

    function remove_requisition(tr_id)
    {
        var cnf = confirm('Are you sure you want to delete?');
        if(cnf==true)
        {
            $( "#tr_"+tr_id ).remove();
        }
    }

</script>

@endsection