@extends('layout.master')
@section('title', 'List Field')
@section('add-fields', 'active')
@section('newCase', 'active')
@section('levelCSS')
    <link rel="stylesheet" href="{{asset('vendors/select2/select2.min.css')}}">
    <link rel="stylesheet" href="{{asset('vendors/select2-bootstrap-theme/select2-bootstrap.min.css')}}">
@endsection

@section('body')

    <div class="col-md-12">
        <div class="tab-content tab-transparent-content pb-0">
            <div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">

                <div class="content-wrapper">
          <div class="card">
            <div class="card-body">
              <h4 class="card-title">Data table</h4>
              <div class="row">
                <div class="col-12">
                  <div class="table-responsive">
                    <table id="order-listing" class="table">
                      <thead>
                        <tr>
                            <th>#</th>
                            <th>Description</th>
                            <th>Label</th>
                            <th>Label Description</th>
                            <th>Type</th>
                            <th>Value</th>
                            <th>Children</th>
                            <th>Actions</th>
                        </tr>
                      </thead>
                      <tbody>
                        @foreach($info as $inf)
                        <tr id="item{{$inf->id}}">
                            <td>{{$inf->sn}}</td>
                            <td>{{$inf->description}}</td>
                            <td>{{$inf->label}}</td>
                            <td>{{$inf->label_description}}</td>
                            <td>{{$inf->type}}</td>
                            <td>{{$inf->value}}</td>
                            <td>@foreach ($inf->children as $children)
                                    @foreach ($children as $key => $child)
                                        {{$key}} : {{$child}} <br>
                                    @endforeach
                                @endforeach
                            </td>
                            <td>
                              <a href="{{url('field/edit/'.$inf->id)}}" class="btn btn-xs btn-outline-primary">Edit</a>
                              <a href="{{route('/field/delete_field')}}" data-id="{{$inf->id}}" data-msg="DELETE THIS RECORD?" data-callback="" class="btn deleteItem btn-xs btn-outline-danger">Delete</a>
                            </td>
                        </tr>
                        @endforeach
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
            </div>
        </div>
    </div>
      

@endsection

@section('levelJS')
    <script src="{{asset('vendors/select2/select2.min.js')}}"></script>
    <script !src="">

        //<!--
        $('#fieldForm').submit(function (e) {
            e.preventDefault();

            $('#fieldBtn').prop('disabled', true).html("Saving <i class='fa fa-spin fa-spinner'></i>");

            var formData = $(this).serialize();
            var url = $(this).attr('action');

            axios({
                method: 'post',
                url: url,
                data: formData
            })
                .then(function (response) {
                    $('#fieldBtn').prop('disabled', false).html('SAVE INFORMATION');
                    if(response.statusText==='OK')
                    {
                        $.toast({text: response.data.done, icon: 'success', position: 'top-right'});
                        location.reload();
                    } else{
                        $.toast({text: response.data.error, icon: 'error', position: 'top-right'});
                    }
                })
                .catch(function (data) {
                    console.log('Oops!: '+data.error);
                    $('#fieldBtn').prop('disabled', false).html('SAVE INFORMATION');
                });
        });
        function add_children() {
            currentCount = parseInt($("#children_counter").val(), 10) + 1;
            var template = $("#children > span").data("template");
            template = template.replace(/__index__/g, currentCount);
            $("#children > table > tbody tr#addcurrbutton").before(template);
            $("#children_counter").val(currentCount);
            return false;
        }
        //-->
    </script>


@endsection