@extends('frontend.layouts.template')
@section('stylesheet')
    <link href="{{ asset('frontend/assetsnew/css/profile.css') }}" rel="stylesheet" />
@endsection
@section('content')
<div class="row box-banner" style="">
    <div class="col-12 p-0 img-bg">
        <div class="box-page-profile" style="">
            <div class="box-page-login-sub">
                <div class="mb-3">
                    <h3><b class="c-black">PROFILE</b></h3>
                    @if (session('success'))
                        <div class="alert alert-success">
                            {{ session('success') }}
                        </div>
                    @endif
                    @if ($errors->any())
                    <div class="alert alert-danger">
                        {{ $errors->first() }}
                    </div>
                @endif

                </div>
                <form action="{{ url('profile-update') }}" method="POST">
                    <input type="hidden" name="_token" value="{{ csrf_token() }}" />
                    <div class="row">
                        <div class="col-12 col-md-2 p-res-0" style="padding-top: 5px;">
                            Full Name
                        </div>
                        <div class="col-12 col-md-4" style="padding-left: 0;">
                            <div class="form-group">
                                <input type="text" class="form-control border-r0" placeholder="Enter name" name="name" value="{{ old('name') ? old('name') : $user->name }}">
                            </div>
                        </div>
                        <div class="col-12 col-md-2 p-res-0" style="padding-top: 5px;">
                            Occupation
                        </div>
                        <div class="col-12 col-md-4" style="padding-left: 0;">
                            <div class="form-group">
                                <div class="dropdown">
                                    <button class="btn btn-default dropdown-toggle border-r0 dpregis" type="button" id="menu1" data-toggle="dropdown" style="">{{ old('occupation') ? old('occupation') : $user->occupation }}
                                        <span class="caret" style="float: right;"></span>
                                    </button>
                                    <ul class="dropdown-menu dpregis-menu" role="menu" aria-labelledby="menu1">
                                        <li><a data-index="Teacher" href="javascript:">Teacher</a></li>
                                        <li><a data-index="School Administrator" href="javascript:">School Administrator</a></li>
                                        <li><a data-index="Higher-Education Faculty" href="javascript:">Higher-Education Faculty</a></li>
                                        <li><a data-index="Researcher" href="javascript:">Researcher</a></li>
                                        <li><a data-index="Graduation Student" href="javascript:">Graduation Student</a></li>
                                        <li><a data-index="Education Consultant" href="javascript:">Education Consultant</a></li>
                                        <li><a data-index="Information Educator (Museums, Science, Center, etc.)" href="javascript:">Information Educator (Museums, Science, Center, etc.)</a></li>
                                        <li><a data-index="STEM-related Industries Representative" href="javascript:">STEM-related Industries Representative</a></li>
                                        <li><a data-index="STEM-related Organizations/Associations Administrators" href="javascript:">STEM-related Organizations/Associations Administrators</a></li>
                                        <li><a data-index="Government Agency Representative" href="javascript:">Government Agency Representative</a></li>
                                        <li><a data-index="Other..." href="javascript:">Other...</a></li>
                                    </ul>
                                    <input type="hidden" id="Occupation" name="occupation" value="{{ old('occupation') ? old('occupation') : $user->occupation }}">

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

                        <div class="col-12 col-md-2 p-res-0" style="padding-top: 5px;">
                            Email Address
                        </div>
                        <div class="col-12 col-md-4" style="padding-left: 0;">
                            <div class="form-group">
                                <input type="email" class="form-control border-r0"  placeholder="XXXXXXXX@XX.XXX" name="email" value="{{ old('email') ? old('email') : $user->email }}">
                            </div>
                        </div>
                        <div class="col-12 col-md-2 p-res-0" style="padding-top: 5px;">
                            Password
                        </div>
                        <div class="col-12 col-md-4" style="padding-left: 0;">
                            <div class="form-group">
                                <div class="input-group" id="show_hide_password">
                                    <input class="form-control border-r0" type="password" placeholder="XXXXXX">
                                    <div class="input-group-addon">
                                        <a href=""><i class="fa fa-eye-slash c-black" aria-hidden="true"></i></a>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-12 col-md-12">
                            <div class="form-group">
                                <label for="comment" class="c-black"><b>Affiliated institution <a href="#" class="editor" data-id="affiliated"><i class="fa fa-pencil" aria-hidden="true"></i></a></b></label>
                                <div class="affiliated-text">
                                    {!! $user->affiliated !!}
                                </div>
                                <textarea class="form-control border-r0 affiliated-input" name="affiliated" rows="3" >{{ old('affiliated') ? old('affiliated') : $user->affiliated }}</textarea>
                            </div>
                        </div>
                        <div class="col-12 col-md-12">
                            <div class="form-group">
                                <label for="comment" class="c-black"><b>City and Country of Origin <a href="#" class="editor" data-id="city"><i class="fa fa-pencil" aria-hidden="true"></i></a></b></label>
                                <div class="city-text">
                                    {!! $user->city !!}
                                </div>
                                <textarea class="form-control border-r0 city-input" name="city" rows="3" >{{ old('city') ? old('city') : $user->city }}</textarea>
                            </div>
                        </div>
                        <div class="col-12 col-md-12">
                            <div class="text-right button-center" style="margin-top:15px;">
                                <button type="submit" class="btn button-b text-center border-r0" style="">SAVE CHANGES</button>
                            </div>
                        </div>


                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="col-12 p-0">
        @if (auth()->user()->level == 'admin' || auth()->user()->level == 'researchers')
            <div class="box-page-profile-2">
                <ul class="nav nav-tabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" href="#article">Article</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" data-toggle="tab" href="#history">History</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div id="article" class="container tab-pane active"><br>
                        @include('frontend.member.inc-tab-article')
                    </div>
                    <div id="history" class="container tab-pane fade"><br>
                        @include('frontend.member.inc-history')
                    </div>
                </div>
            </div>
        @else
            <div class="box-page-profile-2">
                @include('frontend.member.inc-history')
            </div>
        @endif
    </div>
</div>
@endsection
@section('modals')
    <div id="madal-confirm" class="modal fade" role="dialog">
        <div class="modal-dialog modal-md" style="transform: translate(0,-50%);top: 45%;">
            <div class="modal-content border-r0" style="background: unset;border: none;">
                <div class="modal-header" style="border:none">
                    <button type="button" class="close" data-dismiss="modal" style="padding: 0;font-size: 40px;">&times;</button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body" style="background: #fff;">
                    @if( auth()->check() )
                    <div class="c-black">
                        <div class="box-p-50 text-center">
                            <div class="">
                                <div style="">
                                    <img src="{{ asset('frontend/assetsnew/img/whatworks/icon/icon-d.png') }}" alt="" style="width: 35px;">
                                </div>
                                <div class="mt-2"><b>Are you sure to clear your history ?</b></div>
                            </div>
                            <div class="mt-3 mb-3">
                                <a href="javascript:;" class="button-close" data-dismiss="modal" style="font-size: 12px;padding: 7px 42px;box-shadow: unset;">NO</a>
                                <a href="{{ url('profile/clear-history') }}" class="button-b" id="" style="font-size: 12px;padding: 7px 50px;box-shadow: unset;">YES</a>
                            </div>
                        </div>
                    </div>
                    @else
                        @php
                            redirect('login');
                        @endphp
                    @endif

                </div>
            </div>

        </div>
    </div>
@endsection

@section('javascript')
<script>
    $('ul.dpregis-menu li a').click(function() {
        $('.dpregis').html($(this).data("index"));
        $('#Occupation').val($(this).data("index"));
    });
    $(document).ready(function() {
		$("#show_hide_password a").on('click', function(event) {
			event.preventDefault();
			if ($('#show_hide_password input').attr("type") == "text") {
				$('#show_hide_password input').attr('type', 'password');
				$('#show_hide_password i').addClass("fa-eye-slash");
				$('#show_hide_password i').removeClass("fa-eye");
			} else if ($('#show_hide_password input').attr("type") == "password") {
				$('#show_hide_password input').attr('type', 'text');
				$('#show_hide_password i').removeClass("fa-eye-slash");
				$('#show_hide_password i').addClass("fa-eye");
			}
		});
        $('.affiliated-input').hide();
        $('.city-input').hide();
        $('.editor').on('click',function(e){
            e.preventDefault();
            let type = $(this).data('id');
            if( type == 'affiliated'){
                $('.affiliated-input').show()
                $('.affiliated-text').hide()
            }
            if( type == 'city'){
                $('.city-input').show()
                $('.city-text').hide()
            }
            $(this).hide();
        })
        if( $('.alert-success') !== undefined ){
            setTimeout( ()=>{
                $('.alert-success').remove();
            },3000);
        }

        $('.button-clear').on('click',function(e){
            e.preventDefault();
            $('#madal-confirm').modal('show');
        })
        $('.delete-blog').on('click',function(e){
            e.preventDefault();

            let id = $(this).data('id');
            let url = `{{ url('profile/what-works/delete') }}/${id}`;
            console.log('delete file id : ', url );
            if( !confirm('แน่ใจว่าต้องการลบบทความนี้') )
                return false;
            window.location.href = `${url}`;
        })
        $('#select_all').on('click',function(){
        if(this.checked){
            $('.checkbox').each(function(){
                this.checked = true;
            });
        }else{
             $('.checkbox').each(function(){
                this.checked = false;
            });
        }
    });

    $('.checkbox').on('click',function(){
        if($('.checkbox:checked').length == $('.checkbox').length){
            $('#select_all').prop('checked',true);
        }else{
            $('#select_all').prop('checked',false);
        }
    });
    $('.btn-blog-delete').on('click',function(e){
        if( !confirm('แน่ใจว่าต้องการลบบทความ') ){
            e.preventDefault();
            return false;
        }
        let blogsId = [];
        $(".checkbox:checked").each(function(){
            blogsId.push($(this).val());
        });
        let url = `{{ url('profile/what-works/delete') }}/${blogsId.join(',')}`;
        window.location.href = `${url}`;

    })
        /*
        $('.select-all').on('click',function(e){
            console.log('select status : ', $(this).is(':checked') );
            if( $(this).is(':checked') ){
                $('.select-row').prop('checked',true);
            }else{
                $('.select-row').prop('checked',false);
            }
        })

        let selectRow = $('.select-row');
        selectRow.on('click', function(e){
            let c = 0;
            $('.select-row').each( function(data,idx) {
                console.log('each data : ', data ,' check : ' , data.val() );
                if( $(this).is(':checked') )
                    c++;
            });
            console.log('is checked : ', c ,' total : ', selectRow.length );

            if( selectRow.length == c ){
                $('.select-all').prop('checked',true);
            }else{
                $('.select-all').prop('checked',false);
            }
        });
        */

	});
</script>
@endsection