@extends('layouts.smartadmin.main')

@section('title')
    @lang('Welcome')
@endsection

@section('content')
    <div class="row">
        <div class="col-lg-4">
            <div class="d-flex flex-column border p-3 profile-widget">
                <div>
                    <x-avatar class="rounded-circle border" style="width: 6.25rem; height: 6.25rem; border-width: 3px !important;"></x-avatar>
                </div>
                <div class="">
                    <div class="profile-widget__name">{{ $user->name }}</div>
                    <div class="profile-widget__role">USER ROLE HERE</div>
                    <div class="d-flex w-100">
                        <div class="d-flex">
                            <div class="profile-widget__details-title">@lang('Email'):</div>
                            <div class="profile-widget__details-value">{{ $user->email }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-8">
            <div class="well border p-3 platforms-widget" style="background-color: white;">
                <div class="row">
                    <div class="col-sm-7">
                        <span class="cabin-font"
                              style="margin-left: 20px;font-size: 32px;font-weight: bold;font-style: italic;color:#5E5E5E">MODULES</span>
                        <div style="margin-top: 20px; margin-left: 20px;">
                            <p class="roboto-font" style="font-size: 16px; overflow: hidden;color:#5E5E5E">
                                Click on the module icon to access or find out more information.</p>
                        </div>
                    </div>
                    <div class="col-sm-5 hidden-xs">
                        <img src="{{ asset('images/platforms/legends.png') }}"
                             class="img-responsive pull-right" alt="legend" style="margin-top: 20px;">
                    </div>
                    <div class="col-sm-12 d-flex justify-content-center align-items-center p-3">
                        <img src="{{ asset('images/platforms/divider.png') }}">
                    </div>
                    <div class="col-sm-12">
                        <ul id="platforms-filter" class="d-flex justify-content-center list-unstyled p-3">
                            <li><a href="#" data-filter="*">ALL</a></li>
                            <li class="ml-3"><a href="#" data-filter=".Live" id="live">LIVE</a></li>
                        </ul>
                    </div>
                    <div class="col-sm-12">
                        <div class="row" id="isotope" style="overflow-x: hidden; overflow-y: hidden;">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{ asset('vendor/isotope-3.0.6/isotope.pkgd.min.js') }}"></script>
    <script>
        $(function () {
            let isotope = $('#isotope').isotope({
                itemSelector: '.item',
                layoutMode: 'fitRows',
                getSortData: {
                    name: '.name',
                    symbol: '.symbol',
                    number: '.number parseInt',
                    category: '[data-category]',
                    weight: function (itemElem) {
                        var weight = $(itemElem).find('.weight').text();
                        return parseFloat(weight.replace(/[\(\)]/g, ''));
                    }
                }
            });

            // filter functions
            var filterFns = {
                // show if number is greater than 50
                numberGreaterThan50: function () {
                    var number = $(this).find('.number').text();
                    return parseInt(number, 10) > 50;
                },
                // show if name ends with -ium
                ium: function () {
                    var name = $(this).find('.name').text();
                    return name.match(/ium$/);
                }
            };

            // bind filter button click
            $('#filters').on('click', 'button', function () {
                var filterValue = $(this).attr('data-filter');
                // use filterFn if matches value
                filterValue = filterFns[filterValue] || filterValue;
                $grid.isotope({filter: filterValue});
            });

            // bind sort button click
            $('#sorts').on('click', 'button', function () {
                var sortByValue = $(this).attr('data-sort-by');
                $grid.isotope({sortBy: sortByValue});
            });

            // change is-checked class on buttons
            $('.button-group').each(function (i, buttonGroup) {
                var $buttonGroup = $(buttonGroup);
                $buttonGroup.on('click', 'button', function () {
                    $buttonGroup.find('.is-checked').removeClass('is-checked');
                    $(this).addClass('is-checked');
                });
            });
        })
    </script>
@endpush