@extends('layouts.admin')

@section('main-content')

<div class="admin px-2 mx-1">
    <div class="row justify-content-center">
        @if($process_callout['title'])
        <div class="col-12 p-0 mb-3">
            <div class="m-0 p-0">
                @include('tables.process_callout')
            </div>
        </div>
        @endif
        <div class="col-12 p-0">
            <div class="card {{$table_name}}">
                @if(isset($title) && $title)
                <div class="card-header">
                    {{ __($label) }}
                    <span class="float-right">@include('tables.action_create')</span>
                </div>
                @endif

                <div class="card-body">
                    {{-- Házipéntárnál dátum választó START --}}
                    @if ($route == 'house_cashier')
                        @include('tables.components.houser_cashier_date_picker', ['year' => $year, 'month' => $month])
                    @endif
                    {{-- Házipéntárnál dátum választó END --}}

                    <div class="data-table-onsite-{{$table_name}}"></div>
                    <div class="data-table-list-{{$table_name}}">
                        @if($process_callout['title'])
                            <div class="col-12 p-0 mb-3">
                                <div class="m-0 p-0">
                                    @include('comments.panel', ['comment_target' => $process_callout['data']])
                                    {{-- @include('comments.panel', ['comment_target_model' => 'Process', 'comment_target_id' => $process_callout['data']->id]) --}}
                                </div>
                            </div>
                        @endif

                        @if(isset($table_filter) && !empty($table_filter))
                            <div class="me-3 d-inline">
                                @if(isset($table_filter_name) && $table_filter_name != '')
                                {!! __($table_filter_name) !!}:
                                @endif
                                <select class="table-filter">
                                    <option value="">{!! __('all') !!}</option>
                                    @foreach ($table_filter as $filter)
                                    <option>{!! __($filter['name']) !!}</option>
                                    @endforeach
                                </select>
                            </div>
                        @endif

                        @if(isset($checkbox_filter) && !empty($checkbox_filter))
                            <div class="form-check d-inline-block me-4">
                                <input type="checkbox" class="form-check-input checkbox-filter" id="checkbox_filter" name="checkbox_filter">
                                <label class="form-check-label" for="checkbox_filter">{!! __($checkbox_filter_name) !!}</label>
                            </div>
                        @endif

                        <table class="table data-table-{{$table_name}} display responsive nowrap" style="width: 100% !important">
                            <thead>
                                <tr class="table-titles-row">
                                    @if(!empty($action_replicate))
                                    <th data-key="action_replicate"></th>
                                    @endif
                                    @foreach($data as $key => $value)
                                    <th data-key="{{$key}}">{{__($value)}}</th>
                                    @endforeach
                                    @if(!empty($action))
                                    <th data-key="action"></th>
                                    @endif
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
@push('scripts')
<script>
    $(document).ready( function () {
        // START Search with column
        // START Hide column with search
        function hideSearchInputs(columns) {
            const visible = columns.visible().toArray();
            const responsive_visible = columns.responsiveHidden().toArray();

            $('.table-titles-row.filters th').each(function(){
                if($(this).is(':empty')) $(this).hide();
            });

            columns.eq(0).each(function (colIdx) {
                if(responsive_visible[colIdx] && visible[colIdx])
                    $('#{{$table_name}}Table_filter_'+colIdx).parent('th').show();
                else
                    $('#{{$table_name}}Table_filter_'+colIdx).parent('th').hide();
            });
        }
        // END Hide column with search

        // Setup - add a text input to each footer cell
        @if( !Request::ajax() )
        $('.data-table-{{$table_name}} thead tr')
            .clone(true)
            .addClass('filters')
            .appendTo('.data-table-{{$table_name}} thead');
        @endif
        // END Search with column
        
        @if(isset($date))
        var route = "{!! route( $route.'.list', ['date' => $date]) !!}";
        @else
        var route = "{!!route( $route.'.list', ['id' => $id ?? null, 'type' => $type ?? null, 'view' => request()->input('view') ?? null, 'vehicle_id' => request()->input('vehicle_id') ?? null]) !!}";
        @endif

        window.{{$table_name}}Table = $('.data-table-{{$table_name}}').DataTable({
            processing: true,
            @if(in_array($route,['offers']))
                serverSide: true,
            @endif
            responsive: true,
            autoWidth: false,
            ordering: @if(!empty($order) && $order[0] === 'disabled') false @else true @endif, // HA üres tömböt kapunk, akkor true legyen az értéke
            ajax: route,
            @if(!empty($order) && $order[0] !== 'disabled')  // Ha üres tömb vagy disabled, akkor nem kell rendezés
            order: [[ {{$order[0]}}, '{{$order[1]}}' ]],
            @else
            order: [],
            @endif
            dom: 'ftip',
            pageLength: {{ $page_length }},
            language: {
                url: '/js/datatable/lang/hu.json',
                search: "", "searchPlaceholder": "Keresés",
            },
            columns: [
                @php
                    $order_item = [];
                    $secondary_order_item = [];

                    if(isset($secondary_order)) { // másodlagos rendezés
                        $data_keys = array_keys($data);

                        foreach($secondary_order as $o_key => $o_value)
                        {
                            $data_index = array_search($o_value, $data_keys);

                            if ($data_index !== false) 
                                $secondary_order_item[array_search($o_key, $data_keys)] = $data_index;
                        }
                    }
                    
                    if(isset($orderable)) {
                        $data_keys = array_keys($data);

                        foreach($orderable as $o_key => $o_value)
                        {
                            $data_index = array_search($o_value, $data_keys);

                            if ($data_index !== false) 
                                $order_item[array_search($o_key, $data_keys)] = $data_index;
                        }
                    }

                    if($secondary_order_item) //másodlagos rendezés
                    {
                        foreach($secondary_order_item as $s_key => $s_value)
                        {
                            $o_item[$s_key] = $order_item[$s_key] . ', ' .  $order_item[$s_value];
                        }

                        foreach($o_item as $o_item_key => $o_item_value)
                        {
                            $order_item[$o_item_key] = $o_item_value;
                        }
                    }

                @endphp
                @foreach($data as $key => $value)
                {
                    data: '{{strpos($key,".") ? substr($key,strpos($key,".")+1) : $key}}', 
                    name: '{{$key}}', 
                    @if(isset($hide_column) && in_array($key, $hide_column))visible: false, @endif 
                    @if(isset($order[2]) && $order[2] == 'hidden' && $loop->index == $order[0])visible: false, @endif
                    @if(isset($order_item[$loop->index]))orderData: [{{$order_item[$loop->index]}}], @endif
                },
                @endforeach
                @if(!empty($action))
                {data: 'actions', name: 'actions', orderable: false, searchable: false},
                @endif
            ],
            columnDefs: [
                @foreach($data as $key => $value)
                    @php $substr = 1 @endphp
                    @foreach ($substr_exception as $exception)
                        @if($key == $exception)
                            @php $substr = 0 @endphp
                        @endif
                    @endforeach
                {
                    targets: [{{ $loop->index }}],                    
                    render: function (data, type, row) {
                        var substr = {{ $substr }};
                        var isHTML = RegExp.prototype.test.bind(/(<([^>]+)>)/i);
                        return type === 'display' && data && substr && !isHTML(data) && data.length > 30 ?
                                "<div style='position:relative;cursor:pointer;' data-content='"+data+"' onmouseover='window.popoverClick($(this),true)' onmouseout='window.popoverClick($(this),false)'>"+data + "</div>"
                                : data;
                    }
                },
                @endforeach
            ],
            drawCallback : function( settings )
            {
                $('.data-table-{{$table_name}}').off('click').on('click', 'button', function() {
                    var action = $(this).data('action');
                    var status = $(this).data('status');
                    var tr     = $(this).parents('tr');
                    var row    = window.{{$table_name}}Table.row( tr.hasClass('child') ? $(this).parents('tr').prev() : $(this).parents('tr') );
                    var data   = row.data();
                    var table  = '@if(isset($table_name)){{$table_name}}@endif';
                    var model  = '@if(isset($model_name)){{$model_name}}@endif';

                    @include('tables.js.actions')
                });
                this.api().responsive.recalc();
            },
            orderCellsTop: true,
            fixedHeader: true,
            initComplete: function () {
                @if( !Request::ajax() )
                // START Search with column
                var api = this.api();

                // START Hide column with search
                //hideSearchInputs(api.columns());//.responsiveHidden().toArray());
                // END Hide column with search

                // For each column
                api.columns().eq(0).each(function (colIdx) {
                    // console.log($(api.column(colIdx).header()).attr("aria-label"));
                    // && $(api.column(colIdx).header()).is(":visible") && $(api.column(colIdx).header()).attr("aria-label") != ''
                    // Set the header cell to contain the input element
                    var cell = $('.filters th').eq(
                        $(api.column(colIdx).header()).index()
                    );
                    var title = $(cell).text();
                    if(title == 'Státusz' && '{{$route}}' == 'offers') {
                        // A státusz és a hasonló oszlopokat select-el kell szűrni

                        cell.html('');
                        var column = api.column(colIdx);
                        var select = $('<select style="width: 100%; height: 2.02em;" id="{{$table_name}}Table_filter_'+colIdx+'"><option value="" style="height: 100%; padding: 0px;"></option></select>')
                            .appendTo(cell)
                            .on('change', function () {
                                var val = $.fn.dataTable.util.escapeRegex($(this).val());

                                column.search(val ? '^' + val + '$' : '', true, false).draw();
                            });

                        @php
                            $options = '';
                            $statuses = array_unique(\App\Models\Offer::statuses());
                            sort($statuses);
                            foreach ($statuses as $status) {
                                $options .= '<option value="'.$status.'">'.$status.'</option>';
                            }
                        @endphp

                        select.append('{!! $options !!}');
                    } else if(title == 'Státusz' || title == 'Beszállító' || title == 'Fizetési mód' || title == 'Számla típusa' || title == 'Teljesítve' || title == 'Típus' || title == 'Eseti beszállító' || title == 'Nem szükséges jóváhagyás' || title == 'Nem érkezik visszaigazolás' || title == 'Nem érkezik szállítólevél' || title == 'Ügyfél válasza' || title == 'Nyomonkövetés') {
                        // A státusz és a hasonló oszlopokat select-el kell szűrni

                        cell.html('');
                        var column = api.column(colIdx);
                        var select = $('<select style="width: 100%; height: 2.02em;" id="{{$table_name}}Table_filter_'+colIdx+'"><option value="" style="height: 100%; padding: 0px;"></option></select>')
                            .appendTo(cell)
                            .on('change', function () {
                                var val = $.fn.dataTable.util.escapeRegex($(this).val());

                                column.search(val ? '^' + val + '$' : '', true, false).draw();
                            });

                        column
                            .data()
                            .unique()
                            .sort()
                            .each(function (d, j) {
                                if (d != null && d.search('<span') != -1 && $(d).text().length) {
                                    text = $(d).text();
                                } else {
                                    text = d;
                                }
                                select.append('<option value="' + text + '">' + text + '</option>');
                            });

                    } else {
                        if ($(api.column(colIdx).header()).index() >= 0 && $(api.column(colIdx).header()).attr("aria-label") != '') {
                            $(cell).html('<input type="text" placeholder="' + title + '"/ id="{{$table_name}}Table_filter_'+colIdx+'">');
                        }
                    }
                    // $(cell).html('<input type="text" placeholder="' + title + '" />');

                    // On every keypress in this input
                    $(
                        'input',
                        $('.filters th').eq($(api.column(colIdx).header()).index())
                    )
                        .off('keyup change')
                        .on('change', function (e) {
                            // Get the search value
                            $(this).attr('title', $(this).val());
                            var regexr = '({search})'; //$(this).parents('th').find('select').val();
                            //var cursorPosition = this.selectionStart;
                            // Search the column for that value
                            api
                                .column(colIdx)
                                .search(
                                    this.value != ''
                                        ? regexr.replace('{search}', '(((' + $.fn.dataTable.util.escapeRegex(this.value) + ')))')
                                        : '',
                                    this.value != '',
                                    this.value == ''
                                )
                                .draw();
                        })
                        .on('keyup', function (e) {
                            e.stopPropagation();

                            var cursorPosition = this.selectionStart;
                            $(this).trigger('change');
                            $(this)
                                .focus()[0]
                                .setSelectionRange(cursorPosition, cursorPosition);

                            // Ez azért kellett mert keresés után elvesztette a focust és nem lehetett kattintani az action gombokra elsőre csak másodikra
                            var firstDtrControl = $('.dtr-control:first');
                            firstDtrControl.focus();
                            $(this).focus();
                            
                        });
                });
                // END Search with column

                $(window).trigger('resize');
                @endif

                // Lépés a datatable utolsó oldalára
                @if(isset($select_last_page) && $select_last_page)
                    var lastPage = window.{{$table_name}}Table.page.info().pages - 1;
                    window.{{$table_name}}Table.page(lastPage).draw('page');
                @endif
            },
            // initComplete: function() {
            //     $(window).trigger('resize');
            // }
        });


        @if(isset($table_filter) && !empty($table_filter))
        $('.table-filter').on('change', function(){
            table.search(this.value).draw();
        });
        @endif

        @if(isset($checkbox_filter) && !empty($checkbox_filter))
        $('.checkbox-filter').on('change', function(){
            if($(this).prop('checked') === true) {
                table
                @foreach ($checkbox_filter as $filter)
                .column({{$filter['col']}}).search('{{__($filter['search'])}}')
                @endforeach
                .draw();
            } else {
                table
                @foreach ($checkbox_filter as $filter)
                .column({{$filter['col']}}).search('')
                @endforeach
                .draw();
            }
        });
        @endif

        // START Hide column with search
        {{$table_name}}Table
            .columns()
            .eq(0)
            .each(function (colIdx) {
                $("input", $(".filters th")[colIdx]).on("keyup change", function () {
                    {{$table_name}}Table.column(colIdx).search(this.value).draw();
                });
            });

        {{$table_name}}Table.on("responsive-resize", function (e, datatable, columns) {
            hideSearchInputs({{$table_name}}Table.columns());
        });

        {{$table_name}}Table.on( 'init.dt', function () {
            hideSearchInputs({{$table_name}}Table.columns());

            window.dt_col_resize('.data-table-{{$table_name}}');
        });
        // END Hide column with search

    });


    function popoverClick(item, open) {
        if(open) {
            item.append('<div class="popover-item arrow-box" style="min-width:100px;max-width:400px;position:absolute;margin-top:8px;z-index:1000;">'+item.data('content')+'</div>');
            item.closest('td').css( "overflow", "visible" );
        } else {
            item.find('.popover-item').remove();
            item.closest('td').css( "overflow", "hidden" );
        }
    }

</script>
@endpush

@endsection