@extends('layouts.admin.app')

@section('content')
<link  href="{{url('css/jquery.dataTables.min.css')}}" rel="stylesheet">
  <div class="center-container">
        <div class="admin-box full-width">
            <div class="container">
            @if(session('flash_success'))
                <div class="alert alert-success" role="alert">
                  <button type="button" class="close" data-dismiss="alert">×</button>
                    {{ session('flash_success') }}
                </div>
            @endif
                <div class="admin-title">
                    <h2>{{trans('child_list.child_list')}}</h2>
                    <div class="title-name-logo">
                        VADSØ KOMMUNE <img src="{{asset('images/vads-logo.png')}}">
                    </div>  
                </div>
                <div class="full-width">
                    <table class="table data-table action-col tableDesign" id="childTable">
                    <thead>
                        <tr>
                        <th>id</th>
                        <th>{{trans('child_list.name')}}</th>
                        <th class="text-center">{{trans('child_list.birth_year')}}</th>
                        <th>{{trans('child_list.activity_provider')}}</th>
                        <th>{{trans('child_list.activity')}}</th>
                        <th class="text-center">{{trans('child_list.action')}}</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
             </div>
            </div>
        </div>
        
@endsection
@section('script')
<script src="{{ url('js/datatables.min.js')}}"></script>

<script type="text/javascript">
$(document).ready(function() {
    // alert();
    var url = "{{ route('child_list_datatable') }}";
    var user_table = '';
    initializeDatatable(url);    
});
function gottoLink(id) {
    window.location.href="{{url('admin/child-detail')}}/"+id;
}

function showmore(id,event) {
    // $(document).off('click', 'tr');
    event.preventDefault();
    // var id=$(this).data('id');
    console.log(id,$(".show-toggle-"+id).closest('tr'));

    if($(".show-toggle-"+id).html()=='+'){
        $(".show-toggle-"+id).closest('tr').addClass('solid-td');
        $(".show-toggle-"+id).html('-');
        if($('tr[status="hide-'+id+'"]').length==0){
            $.ajax({
                url: "{{url('admin/childlist_other_data')}}/"+id,
                success: function (data) {
                    // console.log(data);
                    $(".show-toggle-"+id).closest('tr').after(data);
                },
            });
            // var html=$(".show-toggle-"+id).closest('tr').html();
            // $(".show-toggle-"+id).closest('tr').after('<tr>'+html+'</tr>');
        }else{
            $('tr[status="hide-'+id+'"]').show();
        }

    }else{
        $(".show-toggle-"+id).closest('tr').removeClass('solid-td');
        $(".show-toggle-"+id).html('+');
        $('tr[status="hide-'+id+'"]').hide();
    }
}

function initializeDatatable(URL) {
    var link="";
    user_table = $('#childTable').DataTable({
        processing: true,
        serverSide: true,
        ajax: URL,
        type: "GET",
        language: { search: '', searchPlaceholder: "Søk",emptyTable: "Ingen data tilgjengelig i tabellen",zeroRecords: "Fant ingen samsvarende poster",
            "processing":"<p class='dt-loading'>Laster inn..</p>"},
        "columnDefs": [
            // {"orderable": false, "targets": 3},
            // {"searchable": false, "targets": 3},
        ],
        columns: [
            {data: 'id', name: 'id', 'visible': false, render:function(data, type, row){
                link="{{url('admin/child-detail')}}/"+row.user_id;
                return '<a href="'+link+'">' + row.id + '</a>'
            }},
            {data: 'name', name: 'name', render:function(data, type, row){
                link="{{url('admin/child-detail')}}/"+row.user_id;
                return '<a href="'+link+'">' + row.name + '</a>'
            }},
            {data: 'birth_year', name: 'birth_year', render:function(data, type, row){
                link="{{url('admin/child-detail')}}/"+row.user_id;
                return '<a href="'+link+'">' + row.birth_year + '</a>'
            }},
            {data: 'activity_provider', name: 'activity_provider', render:function(data, type, row){  
                link="{{url('admin/child-detail')}}/"+row.user_id;
                return '<a href="'+link+'">' + row.activity_provider + '</a>'
            }},
            {data: 'activity', name: 'activity', render:function(data, type, row){  
                return '<a href="'+link+'">' + row.activity + '</a>'
            }},
            {data: 'action', name: 'action'}
        ],
        drawCallback: function() {
        },

    });
}
</script>
@endsection