@extends('layouts.default')

@include('plugins.datatables.default')
@include('plugins.datatables.buttons')

@include('plugins.parsley')
@include('plugins.notifyjs')

@include('plugins.moment')

@if( isset($page['list_custom_js']) )
    @push("include-js")
        <script src="/js/{{$page['list_custom_js']}}.init.js?{{uniqid()}}" ></script>
    @endpush
@endif

@section('content')
    <div class="row">
        <div class="col-md-12">

            <!-- Resultado da Pesquisa -->
            <div class="portlet">
                <div class="portlet-heading bg-inverse">
                    <h3 class="portlet-title">
                        {{$page['title']}}
                    </h3>
                    
                        <div class="portlet-widgets">

                            @stack('top_buttons')

                            @if( isset( $page['addButton'] ) )
                            <a href="{{route($page['addButton']['url'])}}" id="add"
                               class="btn btn-outline-success btn-rounded waves-effect waves-light">
                                <i class="ion-plus"></i>
                                {{$page['addButton']['title']}}
                            </a>
                            @endif
                            
                            @isset( $page['dataTable']['filter'] )
                                <a href="#" id="btn-filter"
                                   class="btn btn-danger btn-rounded waves-effect waves-light">
                                    <i class="fas fa-filter"></i>
                                    Filtro
                                </a>
                            @endisset

                        </div>
                    
                    <div class="clearfix"></div>
                </div>
                <div id="bg-inverse" class="panel-collapse collapse show">
                    <div class="portlet-body">

                        @isset( $page['dataTable']['filter'] )
                        <form id="formFilter" method="post" action="/{{$page['dataTable']['ajax']}}" style="display: none">
                            <div class="row pl-4" id="filters">
                                @csrf
                                <div class="col-10" >
                                    <div class="row">
                                        @foreach( $page['dataTable']['filter'] as $input=>$data )
                                        <div class="col-{{$data['col']}}">
                                            @if( isset($data['options']) && count($data['options']) )
                                                
                                                <div class="card mb-2">
                                                    <div class="card-header">
                                                        {{$data['label']}} 
                                                        <div class="form-group form-check float-right">
                                                            <input type="checkbox" class="checkall" >  
                                                            <label class="form-check-label" for="checkall"> Seleciona Todos</label>
                                                        </div>
                                                        
                                                    </div>
                                                    <div class="card-body">
                                                        <div class="row">
                                                            @foreach( $data['options'] as $index => $option )
                                                                <div class="col-{{$data['cols']}} text-left">
                                                                    <div class="form-group form-check">
                                                                        <input type="checkbox" name="{{$input}}[]" id="{{$input}}_{{$index}}" value="{{$option['value']}}">  
                                                                        <label class="form-check-label" for="{{$input}}_{{$index}}">{{$option['text']}}</label>
                                                                    </div>
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                            @else
                                                <div class="form-group row p-1">
                                                    <div class="input-group">
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text" id="basic-addon1">{{$data['label']}}</span>
                                                        </div>
                                                        <input type="text" class="form-control" name="{{$input}}" autocomplete="off" />
                                                    </div>
                                                </div>
                                            @endif
                                        </div>
                                    @endforeach
                                    </div>
                                </div>
                                <div class="col-2 text-center">
                                    <input type="hidden" name="export" value="">
                                    <div class="col-2">
                                        <button class="btn btn btn-dark btn-rounded" id="buttonApplyFilter"> Aplicar </button>
                                        @isset( $page["dataTable"]["export"] )
                                            <button class="btn btn-danger" id="buttonExport"> Export </button>
                                        @endisset
                                    </div>       
                                </div>                        
                            </div>
                            </form>
                        @endisset

                        <div class="table-responsive mt-3">
                            <table class="table table-bordered " id="datatable" >
                                @if( !isset($page['dataTable']['ajax']) )
                                <thead class="thead-light">
                                    <tr>
                                        @foreach( $page['dataTable']['column'] as $c )
                                            @php $columnData[] = $c['data']; @endphp
                                            <th width=" @isset($c['width']) {{$c['width']}}% @endisset">{{$c['title']}}</th>
                                        @endforeach

                                        <th width="">Ação</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach( $data as $row )
                                        <tr id="{{$row['id']}}">
                                            @foreach( $row as $index=> $r )
                                                @if ( in_array( $index, $columnData ) )
                                                    <td class="td_{{$index}}">
                                                        @if ($page['dataTable']['render'])
                                                            {!! $page['dataTable']['render']( $row, $index, $r ) !!}
                                                        @else
                                                            {!! $r !!}
                                                        @endif
                                                    </td>
                                                @endif
                                            @endforeach
                                            <td>
                                                @foreach( $page['dataTable']['render']( $row, 'action' ) as $button )
                                                    @php
                                                        $url = $button['url'];
                                                        if( preg_match('/{(.*?)}/', $url, $match ) ){
                                                            $url = str_replace( '{'. $match[1] .'}', $row[$match[1]], $url );
                                                        }
                                                        $icon = "";
                                                        if( $button['icon'] ) $icon = "<i class='" . $button['icon'] . "'></i>" ;
                                                    @endphp
                                                    <a href="{{$url}}" id="{{$row['id']}}" class="{{$button['class']}} waves-effect waves-light btn-sm m-b-5"> {!! $icon !!} {{ $button['title'] }}</a>
                                                @endforeach
                                                @if( !array_key_exists('deleted_at',$row) or $row['deleted_at'] == '' )
                                                    @if( isset($page['dataTable']['editable']) && $page['dataTable']['editable'] && isset( $page['addButton'] ))
                                                        <a href="{{route($page['addButton']['url'])}}/{{$row['id']}}" class="btn btn-success waves-effect waves-light btn-sm m-b-5 edit">Editar</a>
                                                    @endif
                                                @endif


                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                                @endif
                            </table>
                        </div>
                    </div>
                </div>
            </div>

        </div> <!-- end row -->

    </div> <!-- end col -->
    @push("include-js")
        <script src="{{ asset('js/mask.js')}}"></script>
        <script>
            let dtInit = false;
            let columns = {!! json_encode($page['dataTable']['column']) !!}
            let totCol = columns.length
            
            @if( isset($page['dataTable']['ajax']) )
                function dataTableAjax( filter = null ){

                    $('#datatable').DataTable({
                        order: [[0, 'desc']],
                        pageLength: 2,
                        "processing": true,
                        "serverSide": true,
                        "lengthChange": false,
                        "destroy": true,
                        ajax: {
                            url: "/{{ $page['dataTable']['ajax'] }}",
                            type: "POST",
                            data: filter
                        },
                        columns: columns,
                        "columnDefs": [
                        {
                            render: function ( data, type, row, meta ) {
                                let columns = Object.entries(row)
                                let col = columns[meta.col][0]
                                
                                if (bt_render[col]) {
                                    return bt_render[col].call(data, row, meta)
                                }

                                if (meta.col == totCol - 1) {
                                    let buttons = [];

                                    @isset( $page['dataTable']['renderButtons'] )
                                        buttons = {!! $page['dataTable']['renderButtons'] !!}( row );
                                    @endisset
                                    
                                    @isset( $page["dataTable"]["editable"] )
                                        buttons.push('<a href="{{route($page['addButton']['url'])}}/'+ row.id +'" class="btn btn-success waves-effect waves-light btn-sm m-b-5 edit">Editar</a>')
                                    @endisset

                                    @isset( $page["dataTable"]["delete_url"] )
                                        buttons.push('<a href="{{$page['dataTable']['delete_url']}}/'+ row.id +'" class="btn btn-danger confirm linkdyn waves-effect waves-light btn-sm m-b-5">{{$page['dataTable']['button_delete_title']}}</a>')
                                    @endisset
                                    
                                    return buttons.join(" ");
                                }

                                return data
                            },
                            "targets": '_all'
                        },
                        ],
                        "searching" : false
                    })
                    .off('draw')
                    .on( 'draw', function () {
                        basic()
                        @isset($page["dataTable"]["func_name_on_draw"])
                            {{$page["dataTable"]["func_name_on_draw"]}}()
                        @endisset
                        
                    });
                    dtInit = true;
                }
            @endif

            function buttonApplyFilter( exp = null ){
                
                let data = $("#formFilter").serializeArray()
                let filter = {};
                $.map(data, function(n, i){

                    if( n['name'].indexOf('[]') !== -1 ){
                        if( !filter[n['name']] ){
                            filter[n['name']] = [];
                        }
                        filter[n['name']].push(n['value']);
                    } else {
                        filter[n['name']] = n['value'];
                    }
                    
                });

                if( exp ){
                    $("#formFilter [name=export]").val(1)
                    $("#formFilter").off('submit').submit();
                    return true;       
                }
                dataTableAjax( filter )
            }

            $(function(){

                $("#formFilter").submit(function(){ return false })

                $("#buttonApplyFilter").click(function(){
                    buttonApplyFilter()
                })

                $("#buttonExport").click(function(){
                    buttonApplyFilter( true )
                })

                @if( isset($page['dataTable']['ajax']) )
                    dataTableAjax()
                @else
                    
                    @isset( $page["dataTable"]["export"] )
                    
                        $('#datatable').DataTable({
                            dom: 'Bfrtip',
                            buttons: [
                             'excel', 'pdf'
                            ]
                        });
                        
                    @endisset

                    @empty( $page["dataTable"]["export"] )
                        $('#datatable').DataTable()
                    @endempty

                @endif

                $("#btn-filter")
                    .unbind('click')
                    .click(function(){
                        $("#formFilter").slideToggle();
                        return false;
                    })

                $(".checkall")
                    .unbind('click')
                    .click(function(){
                        let checked = $(this).is(':checked')
                        $(this).parents(".card:eq(0)").find(".card-body input").prop( 'checked',checked )
                    })
                 
                
            })
        </script>
    @endpush


@endsection