@extends('layouts.member-login')
@section('title', 'My Profile')
@section('page_title', 'MyProfile')

@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%;
    }

    .post-type-selector-image {
        font-weight: bold;
    }
</style>

<link href="{{asset('assets/vendors/general/bootstrap-datepicker/dist/css/bootstrap-datepicker3.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/vendors/general/ion-rangeslider/css/ion.rangeSlider.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/vendors/general/nouislider/distribute/nouislider.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/vendors/general/owl.carousel/dist/assets/owl.carousel.css')}}" rel="stylesheet" type="text/css" />
<link href="{{asset('assets/vendors/general/owl.carousel/dist/assets/owl.theme.default.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.2026-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">

                                            @if($PostRequest->count() > 0)
                                            @include('member.profile.include.cr07-post-review')
                                            @endif

                                            @include('member.profile.include.cr01-my-profile')

                                            @include('member.profile.include.cr02-my-wishlist')

                                            @include('member.profile.include.cr03-my-post-list')

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

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

                                            @include('member.profile.include.cr06-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>
<script src="{{asset('assets/vendors/general/ion-rangeslider/js/ion.rangeSlider.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/vendors/general/nouislider/distribute/nouislider.js')}}" type="text/javascript"></script>
<script src="{{asset('assets/vendors/general/owl.carousel/dist/owl.carousel.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:
    $(document).on('click', '.read-more-show', function(e) {
        $(this).next('.read-more-content').removeClass('hide');
        $(this).addClass('hide');
        e.preventDefault();
    });

    $(document).on('click', '.read-more-hide', function(e) {
        $(this).parent('.read-more-content').addClass('hide');
        var moreid = $(this).attr("more-id");
        $(this).parent('.read-more-content').siblings(".read-more-show").removeClass('hide');
        // $('.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 == 'short_bio' || fieldId == 'research_description' || fieldId == 'education_description' || fieldId == 'experience_description') {
            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"),
        document.getElementById("dragable_education_card"),
        document.getElementById("dragable_experience_card"),
        document.getElementById("publicationListPopUp"),
        document.getElementById("load-education-list"),
        document.getElementById("load-experience-list"),
    ], {
        revertOnSpill: true
    }).on('drop', function(el) {

        if ($(el).parent().attr('id') == "dragable_education_card") {
            rearrangeEducation();
        } else if ($(el).parent().attr('id') == "dragable_experience_card") {
            rearrangeExperience();
        }

    });

    /* Drag & Drop Dragula JS */
    console.log('last push code');
</script>
@endpush