@extends('admin::index')

@section('title', 'Page Title')

@section('content')
    <section class="header">
        @include('members/_breadcrumb_member_view')
    </section>
    <section class="content">
        <div class="row">
            <div class="col-lg-12 card">
                <div class="card__group">
                    <div class="card__item">
                        <div class="card__group__icon card__group__icon--primary">
                            <i class="fa fa-user-plus" aria-hidden="true"></i>
                        </div>
                        <div class="card__content">
                            <h3 class="card__number">{{ $totalMember }}<h3>
                            <p class="card__label">{{ __('Total Member')}}</p>
                        </div>
                    </div>
                    <div class="card__item">
                        <div class="card__group__icon card__group__icon">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.625 1.57275V5.32275C11.625 5.5714 11.7238 5.80985 11.8996 5.98567C12.0754 6.16148 12.3139 6.26025 12.5625 6.26025H16.3125" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.5714 18.9194H4.92857C4.41708 18.9194 3.92654 18.7087 3.56487 18.3336C3.20319 17.9586 3 17.4499 3 16.9194V2.91943C3 2.389 3.20319 1.88029 3.56487 1.50522C3.92654 1.13015 4.41708 0.919434 4.92857 0.919434H11.6786L16.5 5.91943V16.9194C16.5 17.4499 16.2968 17.9586 15.9351 18.3336C15.5735 18.7087 15.0829 18.9194 14.5714 18.9194Z" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"></path><rect x="6.375" y="8.79395" width="6.75" height="1.49625" rx="0.5" fill="currentColor"></rect><rect x="6.375" y="13.2949" width="4.5" height="1.49625" rx="0.5" fill="currentColor"></rect></svg>
                        </div>
                        <div class="card__content">
                            <h3 class="card__number">{{ count($projectsInprocess) }}<h3>
                            <p class="card__label">{{ __('Inprocess project')}}</p>
                        </div>
                    </div>
                    <div class="card__item">
                        <div class="card__group__icon card__group__icon--success">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.625 1.57275V5.32275C11.625 5.5714 11.7238 5.80985 11.8996 5.98567C12.0754 6.16148 12.3139 6.26025 12.5625 6.26025H16.3125" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.5714 18.9194H4.92857C4.41708 18.9194 3.92654 18.7087 3.56487 18.3336C3.20319 17.9586 3 17.4499 3 16.9194V2.91943C3 2.389 3.20319 1.88029 3.56487 1.50522C3.92654 1.13015 4.41708 0.919434 4.92857 0.919434H11.6786L16.5 5.91943V16.9194C16.5 17.4499 16.2968 17.9586 15.9351 18.3336C15.5735 18.7087 15.0829 18.9194 14.5714 18.9194Z" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M7 12H13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M10 9V15" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg>
                        </div>
                        <div class="card__content">
                            <h3 class="card__number">{{ count($projectsAll) }}<h3>
                            <p class="card__label">{{ __('All project')}}</p>
                        </div>
                    </div>
                    <div class="card__item__project">
                        <strong class="card__label">{{ __('List inprocess project')}}:</strong>
                        <ul class="project__list row">
                            @foreach($projectsInprocess as $key => $projectItem)
                                <li class="project__item col-lg-6 m-b-5" data-name=".{{ $projectItem->name }}">
                                    <span class="project__color" style="background-color:  {{ $colorChart[$key] ?? $colorChart[0]}}"></span>
                                    <span>{{ $projectItem->name }}</span>
                                </li>
                            @endforeach
                        </ul>

                    </div>
                </div>
            </div>
            <div class="col-lg-12 ">
                <div id="girdview" class="box-member" hidden>
                    <button class="btn btn-primary btn-toggle-name p-t-0 p-b-0" type="button"><i class="fa fa-file-text-o"></i> {{ __('Show')}}</button>
                    {!! $grid !!}
                </div>
            </div>
        </div>
    </section>
    @include('members/_modal_add')
    <script>
        $(document).ready(function() {
            $('#state').bootstrapSwitch();

            $('.table').addClass('table-bordered');
            var box_header_element = document.getElementsByClassName("box-header")[0];
            if (box_header_element != undefined) {
                var pull_right_element = box_header_element.getElementsByClassName('pull-right')[0];
                pull_right_element.classList.add('filter-btn');
                $('#girdview').show();
                $('.inprocess-box').show();
            }

            $("input.form-date").on("change", function() {
                if (this.value) {
                    this.setAttribute(
                        "data-date",
                        moment(this.value, "YYYY-MM-DD")
                        .format(this.getAttribute("data-date-format"))
                    )
                } else {
                    this.setAttribute("data-date", "dd-mm-yyyy")
                }

            }).trigger("change")

            $(".btn-toggle-name").on("click", function (e) {
                e.preventDefault();
                let elmProcess =  $(".progress-inprocess");
                console.log(elmProcess)
                if(!$(this).hasClass('extend')) {
                    $(this).addClass('extend')
                    $(this).html('<i class="fa fa-file-text-o"></i> {{ __('Hide')}}');
                    elmProcess.each(function () {
                        $(this).css('height', '16px');
                        $(this).html($(this).data('name'));
                    })
                } else {
                    $(this).removeClass('extend')
                    $(this).html('<i class="fa fa-file-text-o"></i> {{ __('Show')}}');
                    elmProcess.each(function () {
                        $(this).css('height', '10px');
                        $(this).html('');
                    })
                }
            })

            $(".project__item").on("mouseenter", function () {
                let elmProcess = $('.progress-inprocess'+$(this).data('name'));
                elmProcess.each(function (i, val) {
                    $(this).tooltip('show');
                })
            })

            $(".project__item").on("mouseleave", function () {
                let elmProcess = $($(this).data('name'));
                elmProcess.each(function (i, val) {
                    $(this).tooltip('hide');
                })
            })
        });

        // Create member
        $("#btn-create").on("click", function() {
            var data = $("#create-member-form").serialize();
            var name = $("input[name='name']").val();
            var username = $("input[name='username']").val();

            console.log(data);
            $.ajax({
                type: "post",
                url: "{{ route('member.create') }}",
                data: {
                    data,
                    '_token': '{{ csrf_token() }}',
                },
                dataType: "json",
                beforeSend: function() {
                    $('#syn_loading').show();
                },
                success: function(res) {
                    $('#btn-create').attr("disabled", true);
                    if (res.status == 'fail') {
                        jQuery('.alert-danger').show();
                        jQuery('.alert-danger').html('<p>' + res.message + '</p>');
                        $('#btn-create').attr("disabled", false);
                    } else {
                        $('#btn-create').hide();
                        $('#body-create').hide();
                        $('#add-projects-modal .btn-close').addClass('btn-primary');
                        $('#add-projects-modal .btn-close').removeClass('btn-default');
                        $('#add-projects-modal .modal-footer').addClass('text-center');
                        $('#body-result').show();
                        $('#syn_loading').show();
                        setTimeout(function(){
                            $('#syn_loading').hide();
                            $('#body-result .body-success').show();
                        }, 1000);
                    }
                }
            });
        });

        $( ".btn-close" ).on("click", function() {
            $.pjax.reload({container:'#pjax-container'});
        });
    </script>
@endsection