@extends('layouts.main')
@section('title', 'Vornamen')
@section('headline', 'Vornamen')
@section('content')

    <div id="main-wrapper">
        <div class="row">
            <div class="col-md-12">
                @if(request()->get('del') == '1')
                    <div class="alert alert-success" role="alert">
                        Der Vorname wurde erfolgreich gelöscht!
                    </div>
                @elseif(request()->get('del') == '0')
                    <div class="alert alert-danger" role="alert">
                        Beim Löschen des Vornamen ist ein Fehler aufgetreten!
                    </div>
                @elseif(request()->get('c') == '1')
                    <div class="alert alert-success" role="alert">
                        Der Vorname wurde erfolgreich angelegt!
                    </div>
                @elseif(request()->get('c') == '0')
                    <div class="alert alert-danger" role="alert">
                        Beim speichern des Vornamen ist ein Fehler aufgetreten!
                    </div>
                @elseif(request()->get('u') == '1')
                    <div class="alert alert-success" role="alert">
                        Der Vorname wurde erfolgreich aktualisiert!
                    </div>
                @elseif(request()->get('u') == '0')
                    <div class="alert alert-danger" role="alert">
                        Beim speichern des Vornamen ist ein Fehler aufgetreten!
                    </div>
                @endif

                <div class="panel panel-white">
                    <div class="panel-heading clearfix">
                    </div>
                    <div class="panel-body">
                        <div class="table-responsive">
                            <div class="filter-container" id="filterContainer">
                                {!! Form::open(['action' => 'GenderLookup\GenderLookupOverviewController@index', 'class' => 'form-horizontal', 'id' => 'filterGenderLookupForm', 'method' => 'get', 'role' => 'form', 'files' => true]) !!}
                                    <input name="filtered" id="filtered" type="hidden" value="1">
                                    <input name="page" id="page" type="hidden" value="{{$page}}">
                                    <div id="pageLen" style="float: right; margin-left: 20px;">
                                        <input class="form-control" name="len" id="inputPageLen" type="text" max="999" maxlength="3" value="@if($pageLength){{$pageLength}}@else{{auth()->user()->table_page_length}}@endif" style="float: left; width: 50px;"> <label style="float: right; padding: 7px 5px 0;">Einträge anzeigen</label>
                                    </div>
                                    <label style="float: right; padding: 7px 5px 0;">Filtern:</label>
                                {!! Form::close() !!}
                            </div>
                            <div class="button-line" id="buttonLine">
                                <a class="btn btn-primary" href="{{ route('create-gender-lookup') }}"><i class="menu-icon icon-plus"></i> Neuer Vorname</a>
                            </div>

                            {{-- {!! Form::open(['action' => 'Ajax\AuctionObjectsStageOverviewController@bulkEditStatus', 'class' => 'form-horizontal', 'id' => 'frm-bulk-edit', 'method' => 'post', 'role' => 'form', 'files' => true]) !!} --}}
                            <table id="data-table-gender-lookup" class="cell-border data-table display table table-data-width nowrap hover">
                                <thead>
                                    <tr>
                                        {{--<th class="col-bulk">
                                            <input id="dt-check-all" type="checkbox">
                                        </th>--}}
                                        <th></th>
                                        <th>Vorname</th>
                                        <th>Land</th>
                                        <th>Geschlecht</th>
                                        <th>Vertrauen</th>
                                        <th>Vorname normalisiert</th>
                                        <th>ID</th>
                                    </tr>
                                </thead>
                            </table>

                            <div class="row" style="padding-bottom: 20px;">
                                <div class="col-md-12">
                                    <!-- Bulk Section -->
                                </div>
                            </div>
                            {{-- {!! Form::close() !!} --}}

                            <div class="clear"></div>

                            {!! Form::open(['action' => 'GenderLookup\GenderLookupController@destroy', 'class' => 'form-horizontal', 'id' => 'deleteGenderLookupForm', 'method' => 'post', 'role' => 'form', 'files' => true]) !!}
                            <input type="hidden" id="deleteGenderLookupId" name="id" value="">
                            {!! Form::close() !!}

                            <script type="text/javascript">

                                var pageParam = ($.urlParam('page') == '') ? null : $.urlParam('page');
                                var lenParam = ($.urlParam('len') == '') ? 10 : $.urlParam('len');
                                var displayStart = 0;

                                if (pageParam != null) {

                                    displayStart = (pageParam - 1) * lenParam;
                                }

                                var table = $('#data-table-gender-lookup').DataTable({
                                    fixedHeader: {
                                        header: true,
                                        headerOffset: $('.page-header').outerHeight()
                                    },
                                    processing: true,
                                    serverSide: true,
                                    ordering: true,
                                    autoWidth: false,
                                    "displayStart": displayStart,
                                    "pageLength": {{ $pageLength }},
                                    "lengthMenu": [ 10, 25, 50, 100 ],
                                    "lengthChange": false,
                                    "order": [[ 6, "asc" ]],
                                    "ajax": {
                                        "url": "/ajax/ajax-gender-lookup-overview",
                                        "type": "POST",
                                        "headers": {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
                                        "dataSrc": "data",
                                        "data": {
                                            //'status': filterStatus,
                                            //'lang': filterLanguage,
                                        },
                                    },
                                    "deferRender": true,
                                    "columns": [
                                        /*{
                                            "data": "id",
                                            "name": "gl.id",
                                            "searchable": false,
                                            "orderable": false,
                                            className: "col-bulk",
                                            "mRender": function ( data, type, row ) {
                                                return '<input class="dt-checkboxes" name="dt_checkbox[]" type="checkbox" value="'+row.id+'">';
                                            },
                                        },*/
                                        {
                                            "mRender": function ( data, type, row ) {
                                                return '<a class="action-icon" href="/vorname-bearbeiten/'+row.id+'/?page='+(table.page.info().page+1)+'&len='+(table.page.info().length)+'"><i class="fa fa-pencil" aria-hidden="true"></i></a> <a class="action-icon" href="javascript:confirmDeleteGenderLookup('+row.id+')" title="Vorname löschen"><i class="fa fa-trash" aria-hidden="true"></i></a>';
                                            },
                                            className: "col-action",
                                            orderable: false,
                                            searchable: false,
                                            width: 60,
                                        },
                                        { "data": "firstname", "name": "gl.firstname", "searchable": true },
                                        { "data": "country", "name": "gl.country", "searchable": true, "width": 80 },
                                        {
                                            "data": "gender",
                                            "name": "gl.gender",
                                            "searchable": true,
                                            "mRender": function ( data, type, row ) {

                                                if(type === 'display') {

                                                    var dropdown = '';
                                                    var genderLookupId = row.id;

                                                    dropdown += '<select onchange="dynamicAssignGender(' + genderLookupId + ', this)" style="width: 140px;">';
                                                    dropdown += '<option value="" ' + (row.gender == 0 || row.gender_id == '' ? 'selected' : '') + '>- Bitte wählen -</option>';
                                                    dropdown += '<option value="1" ' + (row.gender == 1 ? 'selected' : '') + '>weiblich</option>';
                                                    dropdown += '<option value="2" ' + (row.gender == 2 ? 'selected' : '') + '>männlich</option>';
                                                    dropdown += '<option value="3" ' + (row.gender == 3 ? 'selected' : '') + '>divers</option>';
                                                    dropdown += '</select>';

                                                    return dropdown;
                                                } else {
                                                    return data;
                                                }
                                            },
                                            "width": 150,
                                            orderable: true
                                        },
                                        { "data": "confidence", "name": "gl.confidence", "searchable": true },
                                        { "data": "firstname_normalized", "name": "gl.firstname_normalized", "searchable": true },
                                        { "data": "id", "name": "gl.id", "searchable": true, "width": 75 },
                                    ],
                                    "columnDefs": [

                                    ],
                                    'stateSave': false,
                                    'select': 'multiple',
                                    "language": {
                                        "url": "/plugins/datatables/i18n/German.json",
                                        "processing": "<img src='/images/loading.gif'>",
                                    },
                                    "fnInitComplete": function (settings, json) {
                                        $('#filterContainer').insertAfter('#data-table-gender-lookup_filter');
                                        $('#buttonLine').insertBefore('#data-table-gender-lookup_filter');
                                        $('#filterContainer').show();
                                        $('#buttonLine').show();
                                    },
                                });

                                $('.table-responsive').on('scroll', function(e) {
                                    var left = $(this).scrollLeft();
                                    var left = left - 17;
                                    $('.fixedHeader-floating').css('left', -left);
                                });

                                $(document).on('change', '#dt-check-all', function(e){

                                    if(this.checked){
                                        $('.dt-checkboxes').each(function(){
                                            this.checked = true;
                                        });
                                    }else{
                                        $('.dt-checkboxes').each(function(){
                                            this.checked = false;
                                        });
                                    }
                                });

                                var lastChecked = null;

                                $(document).on('mousedown', '.dt-checkboxes', function(e){


                                    if(!lastChecked) {
                                        lastChecked = this;
                                        return;
                                    }

                                    if(e.shiftKey) {
                                        var from = $('.dt-checkboxes').index(this);
                                        var to = $('.dt-checkboxes').index(lastChecked);

                                        var start = Math.min(from, to);
                                        var end = Math.max(from, to) + 0;

                                        $('.dt-checkboxes').slice(start, end)
                                            .filter(':not(:disabled)')
                                            //.prop('checked', lastChecked.checked).parent().parent().addClass('selected')
                                            .prop('checked', true)
                                            .parent().parent().addClass('selected');

                                        console.log(table.column(0).checkboxes.selected());

                                    }

                                    lastChecked = this;

                                    if(e.altKey){

                                        $('.dt-checkboxes')
                                            .filter(':not(:disabled)')
                                            .each(function () {
                                                var $checkbox = $(this);
                                                $checkbox.prop('checked', !$checkbox.is(':checked'));
                                            });
                                    }

                                });

                                // cut column values
                                $.fn.dataTable.render.ellipsis = function ( cutoff, wordbreak, escapeHtml ) {
                                    var esc = function ( t ) {
                                        return t
                                            .replace( /&/g, '&amp;' )
                                            .replace( /</g, '&lt;' )
                                            .replace( />/g, '&gt;' )
                                            .replace( /"/g, '&quot;' );
                                    };

                                    return function ( d, type, row ) {
                                        // Order, search and type get the original data
                                        if ( type !== 'display' ) {
                                            return d;
                                        }

                                        if ( typeof d !== 'number' && typeof d !== 'string' ) {
                                            return d;
                                        }

                                        d = d.toString(); // cast numbers

                                        if ( d.length < cutoff ) {
                                            return d;
                                        }

                                        var shortened = d.substr(0, cutoff-1);

                                        // Find the last white space character in the string
                                        if ( wordbreak ) {
                                            shortened = shortened.replace(/\s([^\s]*)$/, '');
                                        }

                                        // Protect against uncontrolled HTML input
                                        if ( escapeHtml ) {
                                            shortened = esc( shortened );
                                        }

                                        return '<span class="ellipsis" title="'+esc(d)+'">'+shortened+'&#8230;</span>';
                                    };
                                };

                                // delete gender lookup confirmation
                                function confirmDeleteGenderLookup(id) {

                                    var r = confirm("Möchten Sie den Vornamen löschen?");

                                    if (r == true) {

                                        // write artist id to hidden delete form
                                        $('#deleteGenderLookupId').val(id);
                                        $('#deleteGenderLookupForm').submit();
                                    }
                                }

                                // assign gender
                                function dynamicAssignGender(id, selectObject) {

                                    var genderLookupId = id;
                                    var gender = selectObject.value;

                                    // Ajax request
                                    $.ajax({
                                        url: '/ajax/post-ajax-gender-lookup-assignment-gender',
                                        type: 'POST',
                                        beforeSend: function (xhr) {
                                            var token = $('meta[name="csrf_token"]').attr('content');

                                            if (token) {
                                                return xhr.setRequestHeader('X-CSRF-TOKEN', token);
                                            }
                                        },
                                        data: {
                                            id : genderLookupId,
                                            gender : gender
                                        },
                                        success:function(data){
                                            table.ajax.reload(null, false);
                                        },error:function(e){
                                            console.log(e);
                                            console.log('Ajax Error while assigning');
                                        }
                                    });
                                }

                                $(document).on('change', '.dt-checkboxes-select-all input', function(e){

                                    if ($(this).prop('checked')) {
                                        $('.dt-checkboxes').parent().parent().addClass('selected');
                                    } else {
                                        $('.dt-checkboxes').parent().parent().removeClass('selected');
                                    }
                                });

                                $(document).on('change', '.dt-checkboxes', function(e){

                                    if ($(this).prop('checked')) {
                                        $(this).parent().parent().addClass('selected');
                                    } else {
                                        $(this).parent().parent().removeClass('selected');
                                    }
                                });

                                /*function submitFilterForm(fieldKey) {

                                    if(fieldKey == 1) {
                                        // reset status dropdown
                                        $('#selectFilterObjectStatus').prop('selectedIndex', 0);

                                        // reset auction dropdown
                                        $('#selectedFilterAuctionName').prop('selectedIndex', 0);
                                    }
                                    else if(fieldKey == 2) {
                                        // reset auction dropdown
                                        $('#selectedFilterAuctionName').prop('selectedIndex', 0);
                                    }

                                    $('#filterAuctionObjectForm')[0].submit();
                                }*/

                            </script>

                        </div>
                    </div>
                </div>


            </div>
        </div><!-- Row -->
    </div><!-- Main Wrapper -->

@stop