@extends(ucfirst(getScope()).'.Layout.master')
@section('content')
    @component('Components.demoWarning') @endcomponent
    <div class="memberSearch row">
        <div class="inputHolder">
            <i class="icon-magnifier"></i>
            <input type="text" class="memberSearchInput" placeholder="{{ _t('member.member_search') }}" style="width:64%!important;">

        </div>
        <div class="twoWaySwitch">
{{--            <label>{{ _t('member.member_id') }}</label>--}}
{{--            <input type="hidden" name="searchMode" class="searchMode" value="member_id">--}}
{{--            <label>{{ _t('member.username') }}</label>--}}
            <label class="toggleOption">
                <input type="radio" name="searchMode" value="member_id" checked>{{ _t('member.member_id') }}
            </label>
            <label class="toggleOption">
                <input type="radio" name="searchMode" value="username">{{ _t('member.username') }}
            </label>
        </div>
        <div class="buttonGroup">
            <button class="btn btn-circle primaryButton ladda-button advSearch" data-style="expand-left">
                <i class="icon-eyeglasses"></i> {{ _t('member.advanced') }}
            </button>
        </div>
    </div>
    <div class="advSearchResult col-md-12">
        <div class="resultSummary">
            <h3>
                {{ _t('member.found') }}<span>0</span> {{ _t('member.results') }}
                <button class="btn btn-circle btn-outline red closeAdvResults">{{ _t('member.close') }}</button>
            </h3>
        </div>
        <div class="resultHolder row"></div>
    </div>
    <div class="memberManagementWrapper row">
        <div class="memberNav col-md-3 col-sm-3">
            @component('Admin.Management.Member.Components.memberCard')
                {{ $user->id }}
            @endcomponent
        </div>
        <div class="memberPanel col-md-9 col-sm-9" data-unit="memberSlice"></div>
    </div>
    <style>
        /*.page-content {
            background: #eee;
        }*/
    </style>
    <script>
        "use strict";
        $(function () {
            $('.searchMode').prettySwitch({
                checkedValue: 'username',
                unCheckedValue: 'member_id',
            });

            // Set the radio button checked
            $('input[name="searchMode"][value="member_id"]').prop('checked', true);

            $('input[name="searchMode"]').on('change', function () {
                setupUserSearch()
            });

            // switching navs
            $('body').on('click', 'ul.memberOptions li', function () {
                var userId = $(this).closest('.navCard').attr('data-user');
                $(this).addClass('active').siblings().removeClass('active');
                var target = $('.slice[data-user="' + userId + '"] .panelForm[data-target="' + $(this).attr('data-target') + '"]');
                target.addClass('active').siblings().removeClass('active');
                // load unit on demand
                loadMemberUnit(target, {user: userId});
            });
            // switching cards
            $('body').on('click', '.navCard', function () {
                $(this).removeClass('collapsed').siblings().addClass('collapsed');
                $('.slice[data-user="' + $(this).attr('data-user') + '"]').addClass('active').siblings().removeClass('active');
            });
            // load slice
            loadUserUnit({{ $user->id }});
            // slice switch
            $('body').on('click', '.navCard.collapsed img', function () {
                var userId = $(this).closest('.navCard').attr('data-user');
                //loadUserUnit(userId, true);
            });
            // Setup search
            setupUserSearch();

            $('.memberSearchInput').on('keypress', function (){
                setupUserSearch();
            })
            // Advanced search
            $('button.advSearch').click(function () {
                var options = {
                    action: 'getUsers',
                    data: {
                        keyword: $('.memberSearch .inputHolder input[type="text"]').val(),
                        deepSearch: true
                    }
                };
                $.post('{{ route('user.api') }}', options, function (response) {
                    Ladda.stopAll();
                    response = response.filter(function(user) {
                        return user.id != 2;
                    });
                    $('.advSearchResult').slideDown().find('.resultHolder').empty().siblings('.resultSummary')
                        .find('h3 span').text(response.length);
                    if (!response.length) {
                        $('.advSearchResult .resultHolder')
                            .html("<div class='noAdvSearchResults'>{{ _t('member.no_results') }}</div>");
                    }
                    array_chunk(response, 4).forEach(function (set) {
                        let output = '<div class="row">';
                        set.forEach(function (user) {
                            if(user.meta_data) {
                                output += '<div class="col-md-3 setHolder">\n' +
                                    '                <div class="resultSet" data-user="' + user.id + '">\n' +
                                    '                    <div class="headerData">\n' +
                                    '                        <div class="profilePic">\n' +
                                    '                           <img src="' + getUserProfilePic(user) + '" alt="Profile Picture">' +
                                    '                        </div>\n' +
                                    '                        <div class="data">\n' +
                                    '                            <div class="username">' + user.username + '</div>\n' +
                                    '                        </div>\n' +
                                    '                    </div>\n' +
                                    '                    <div class="bodyData">\n' +
                                    '                        <div class="eachData">\n' +
                                    "                           <label>{{ _t('member.member_id') }}</label>\n" +
                                    '                            <span class="value">' + user.member_id + '</span>\n' +
                                    '                        </div>\n' +
                                    '                        <div class="eachData">\n' +
                                    "                           <label>{{ _t('member.full_name') }}</label>\n" +
                                    '                            <span class="value">' + user.meta_data['firstname'] + ' ' + user.meta_data['lastname'] + '</span>\n' +
                                    '                        </div>\n' +
                                    '                        <div class="eachData">\n' +
                                    "                          <label>{{ _t('member.email') }}</label>\n" +
                                    '                            <span class="value">' + user.email + '</span>\n' +
                                    '                        </div>\n' +
                                    '                        <div class="eachData">\n' +
                                    "                            <label>{{ _t('member.phone') }}</label>\n" +
                                    '                            <span class="value">' + user.phone + '</span>\n' +
                                    '                        </div>\n' +
                                    '                    </div>\n' +
                                    '                </div>\n' +
                                    '            </div>';
                            }
                        });
                        $('.advSearchResult .resultHolder').append('</div>' + output);
                    });
                }).fail(function (response) {
                    Ladda.stopAll();
                });
            });
            // pick user card
            $('body').on('click', '.setHolder .resultSet', function () {
                let user = $(this).attr('data-user');

                getUserCard(user).done(function () {
                    loadUserUnit(user, true).done(function () {
                        $('.memberSearch .inputHolder input[type="text"]').val('');
                    });
                });
                $(this).closest('.advSearchResult').slideUp().find('.resultHolder').empty();
            });
            // close adv-search results
            $('body').on('click', 'button.closeAdvResults', function () {
                $('.advSearchResult').slideUp().find('.resultHolder').empty();
            });
        });

        function getUserProfilePic(user) {
            if (!user.meta_data) return '/photos/maleUser.jpg'; // default fallback

            let profilePic = user.meta_data.profile_pic;
            const assetBaseUrl = "{{ asset('') }}";

            if (profilePic && profilePic !== '')
                return assetBaseUrl + profilePic;

            let gender = user.meta_data.gender || 'male';

            return gender === 'female' ? assetBaseUrl + '/photos/femaleUser.jpg' : assetBaseUrl + '/photos/maleUser.jpg';
        }

        function loadUserUnit(user, append) {
            let targetSlice = $('.slice[data-user="' + user + '"]');

            if (!targetSlice.length)
                return loadMemberUnit('.memberPanel', {user: user}, append).done(function () {
                    $('.slice[data-user="' + user + '"]').addClass('active').siblings().removeClass('active');
                    loadMemberUnit('.slice[data-user="' + user + '"] .panelForm.active', {user: user});
                });
        }

        //Ajax info retrieval
        function loadMemberUnit(elem, postParams, appendOrPrepend, unit, route) {
            elem = jQuerize(elem);
            let options = {unit: unit ? unit : elem.attr('data-unit')};

            simulateLoading(elem);

            route = route ? route : '{{ route("management.members.unit") }}';

            if (postParams) $.extend(options, postParams);

            return $.post(route, options, function (response) {
                if (appendOrPrepend) {
                    if (appendOrPrepend == 'prepend') {
                        elem.prepend(response);
                    } else {
                        // console.log(response);
                        elem.append(response);
                    }

                } else {
                    // console.log(response);
                    // console.log(elem);
                    elem.html(response);
                }

                simulateLoading(elem, true);
            });
        }

        function setupUserSearch() {
            return new Promise((resolve, reject) => {
                let searchMode = $('input[name="searchMode"]:checked').val();

                var action = '';
                if (searchMode == "username")
                    action = 'getUsers';
                else
                    action = 'getUsersByMemberId';

                let input = $('.memberSearch .inputHolder input[type="text"]');

                input.off('keyup');  // Remove old keyup events
                input.siblings('.ajaxFetcherWrapper').remove(); // Remove any existing dropdowns

                let options = {
                    route: '{{ route("user.api") }}',
                    action: action,
                    name: searchMode,
                    deepSearch: false,
                    dropDownTopOffset: 5,
                    width: $('.inputHolder').width(),
                    offset: {
                        left: $('.inputHolder').offset().left,
                        top: $('.inputHolder').offset().top
                    },
                    selectedCallback: function (target, userId, name) {
                        getUserCard(userId).done(function () {
                            loadUserUnit(userId, true).done(function () {
                                $('.memberSearch .inputHolder input[type="text"]').val('');
                                resolve();  // Resolve promise here after user card and unit loaded
                            });
                        });
                    }
                };

                input.ajaxFetch(options);
            });
        }

        function getUserCard(userId) {
            let targetCard = $('.navCard[data-user="' + userId + '"]');

            if (targetCard.length) return;

            return loadMemberUnit('.memberNav', {user: userId}, 'prepend', 'userCard').done(function () {
                $('.navCard:not([data-user="' + userId + '"])').addClass('collapsed');
            });
        }
    </script>
@endsection