@extends('layouts.member-login')
@section('title', 'Other Profile')
@section('page_title', 'OtherProfile')

@section('page_level_css')
<link href="{{ asset('assets/vendors/general/select2/dist/css/select2.css') }}" rel="stylesheet" type="text/css" />
<style>
    .dz-image img {
        position: relative;
        height: 100%;
    }
</style>

<link href="{{asset('assets/vendors/general/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css')}}" rel="stylesheet" type="text/css" />
@endsection

@section('content')
@php
$textLength = 250;
@endphp

<div class="kt-content kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor" id="kt_content">
    <!-- begin:: Content -->
    <div class="kt-container kt-container--fluid kt-grid__item kt-grid__item--fluid">
        <!-- begin:: Page -->
        <div class="kt-grid kt-grid--ver kt-grid--root">
            <div class="kt-grid kt-grid--hor kt-grid--root">

                @include('member.include.user-info-box')

                <div class="mt-4">
                    <div class="my-profile-cms-content">
                        <form action="{{ getMURL('post/title-author') }}" method="POST" id="myOwnProfile">
                            @csrf
                            @isset($post->id)
                            <input type="hidden" name="id" value="{{ $post->id }}">
                            @endisset
                            <div class="row">

                                @include('member.include.2027-pn')


                                <div class="col-xl-9 col-lg-9 col-md-7 col-sm-12">
                                    <div class="grey-bg-wrap profile-section">
                                        <div class="post-right-wrapper">

                                            @include('member.profile.include.cr02-other-profile')

                                            @include('member.profile.include.cr03-other-wishlist')

                                            @include('member.profile.include.cr04-other-post')

                                            @include('member.profile.include.cr04-other-education-experience')

                                            @include('member.profile.include.cr05-other-representative-publication')
                                            
                                            @include('member.profile.include.cr06-other-collaborations')
                                            

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

                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- end:: Content -->
</div>
<!-- Modal-->

@include('member.include.tooltip-modal-box')

@endsection

@section('page_level_js')
<script src="//cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.js"></script>
<script src="{{ asset('assets/vendors/general/select2/dist/js/select2.full.js') }}" type="text/javascript"></script>
<script src="{{asset('assets/vendors/general/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/vendors/custom/js/vendors/bootstrap-datepicker.init.js')}}" type="text/javascript"></script>
@endsection

@push('footerscript')
<script type="text/javascript">
    // Hide the extra content initially
    $('.read-more-content').addClass('hide');
    $('.read-more-show, .read-more-hide').removeClass('hide');

    // Set up the toggle effect:
    $('.read-more-show').on('click', function(e) {
        $(this).next('.read-more-content').removeClass('hide');
        $(this).addClass('hide');
        e.preventDefault();
    });

    $('.read-more-hide').on('click', function(e) {
        $(this).parent('.read-more-content').addClass('hide');
        var moreid = $(this).attr("more-id");
        $('.read-more-show#' + moreid).removeClass('hide');
        e.preventDefault();
    });



    $(document).on('keyup', '.countTextarea', function() {
        var fieldId = $(this).attr('id');
        var textMaxLength = $(this).attr('maxlength');
        if (fieldId == 'collaborationReviewText') {
            checkRemainingCharacters($(this), textMaxLength);
        }
    });



    function checkRemainingCharacters($mainTA, textMaxLength) {
        var textareaCharacters = $mainTA.val().length;
        var remainingCharacters = textMaxLength - textareaCharacters;
        $mainTA.parent('.RemainingCharacters').find('.countCharacters').html(remainingCharacters);
    }

    /* Drag & Drop Dragula JS */
    dragula([
        document.getElementById("pronounces"),
    ]);
    /* Drag & Drop Dragula JS */
    console.log('last push code');
</script>
@endpush