@extends('layouts.master')
@section('title', $title) 
@section('content')
<section class="content" style="padding: 0;">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12" style="padding: 0;">
                <div class="card">
                    
					 <div class="box">      
                        <div class="first-box">
                            <img src="{{ asset('images/settings.png') }}" />
                            <p>Listing</p>
                        </div>        
                    </div>
				
                    <div class="card-body">
                        @if ($error = Session::get('error'))
                        <div class="alert alert-danger">
                            <p>{{ $error }}</p>
                        </div>
                        @endif
                        @if ($success = Session::get('success'))
                        <div class="alert alert-success">
                            <p>{{ $success }}</p>
                        </div>
                        @endif

                        <table class="table table-bordered table-striped table-responsive" id="listTableOrder">
							<tfoot class="show-footer-above">
                                <tr>
                                    @foreach( $allColumns as $key => $value )
                                    <th >{{ $value }}</th>
                                    @endforeach
                                </tr>
                            </tfoot>
                            <thead>
                                <tr>
                                    @foreach( $allColumns as $key => $value )
                                    <th>{{ $value }}</th>
                                    @endforeach
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($saved_lists as $saved_list)
                                <tr>
                                    <td>{{ $saved_list->listItems($saved_list->data_item_type) ? count($saved_list->listItems($saved_list->data_item_type)) : 0 }}</td>
                                   <td><a href="{{ route('savedListItem', ['id' => $saved_list->list_id ]) }}">{{ $saved_list -> name }}</a></td>
                                    <td>{{ isset($dataTypes[$saved_list->data_item_type]) ? $dataTypes[$saved_list->data_item_type] : '' }}</td>
                                    <td>{{ $saved_list->ownerUser ? $saved_list->ownerUser->name : ''  }}</td>
                                    <td>{{ $saved_list->created_at }}</td>
                                    <td>{{ $saved_list->updated_at }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                        {{ $saved_lists->links() }}
                    </div>
                </div>
            </div>
        </div>
    </div>

</section>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<script type="text/javascript">
    var datatableUrl = "{{ route('lists.index') }}";
    $(document).ready(function() {
        $(document).on("click", ".deleteentry", function() {
            var itemId = $(this).attr("data-itemId");
            $('#itemId').val(itemId);
        });
    });

    $('.otherFilter').change(function() {
        $('#statusFilterForm').submit();
    });
</script>
<script>
$(document).ready(function () {
    // Setup - add a text input to each footer cell
    $('#listTableOrder tfoot th').each(function (i, el) {
		
			var title = $(this).text();
			$(this).html('<input type="text" class="vancy1"/>');
		
		
    });
 
    // DataTable
    var table = $('#listTableOrder').DataTable({
		"bInfo" : false,
        initComplete: function () {
            // Apply the search
            this.api()
                .columns()
                .every(function () {
                    var that = this;
 
                    $('input', this.footer()).on('keyup change clear', function () {
                        if (that.search() !== this.value) {
                            that.search(this.value).draw();
                        }
                    });
                });
        },
    });
	
});
</script>
<style>
.show-footer-above {
  display: table-row-group;
}
.vancy1 {
    display: flex;
    align-items: center;
    justify-content: space-between !important;
    border-radius: 20px; 
    font-size: 14px;
    font-family: sans-serif; 
    height: 32px;
    border-color: #becfda;
} 
.content-wrapper .content a{
    color: #050d9e;
}
</style>
@endsection

@section('pagejs')