@extends('cabMeWebsite.master')

<style>
    .tab-content>.tab-pane {
        display: block !important;
    }
</style>
@section('content')
    <section class="subheader">
        <div class="container">
            <div class="col-12">
                <div class="row">
                    <div class="inner-padding">
                        <h2>Help</h2>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="help">
        <div class="container py-1 py-sm-2">
            <div class="col-12">
                <div class="row justify-content-center">
                  {{--  <a class="d-inline-block p-1 border-bottom mr-3" style="border-color:#ff5639!important"
                       href="rider-help-center.html">For
                        Riders</a>
                    <a class="d-inline-block p-1 ml-3" href="driver-help-center.html">For Driver</a>--}}
                </div>
                <div class="row my-2 my-md-4">
                    <div class="col-12 col-md-4">
                        <div class="nav flex-column nav-pills active show" id="v-pills-trip" role="tablist"
                             aria-orientation="vertical">
                            {{--@foreach($user_help as $key => $userhelp)
                                <a class="nav-link userhelp" id="v-pills-trip-tab_{{$userhelp->id}}" data-toggle="pill" href="#v-pills-trip"
                                   role="tab" aria-controls="v-pills-trip" value="{{$userhelp->id}}" aria-selected="true">{{$userhelp->title}} </a>
                                <script>
                                    var userhelpid = $('.userhelp').attr('id');
                                    console.log(userhelpid);
                                </script>
                            @endforeach--}}
                            {{--<a class="nav-link userhelp" id="helplist" data-toggle="pill" href="#v-pills-trip"
                               role="tab" aria-controls="v-pills-trip" value="" aria-selected="true"> </a>--}}
                        </div>
                    </div>
                    <!--//Col-4-->
                    <div class="col-12 col-md-8" id="userhelp_description" style="text-align: justify;">
{{--                        <div class="tab-content" id="v-pills-tabContent">--}}
{{--                            @foreach($user_help_description as $key => $userhelpDesc)--}}

                           {{-- <div class="tab-pane fade show " id="v-pills-trip" role="tabpanel"
                                 aria-labelledby="v-pills-trip-tab">--}}
{{--                                <p>--}}
{{--                                    <script>$('')</script>--}}

{{--                                        {{$userhelpDesc->help_description}}--}}
{{--                                        @if($userhelpDesc->user_help_id == )--}}

{{--                                </p>--}}
{{--                            </div>--}}
{{--                            @endforeach--}}
                           {{-- <div class="tab-pane fade" id="v-pills-profile" role="tabpanel"
                                 aria-labelledby="v-pills-profile-tab">...</div>
                            <div class="tab-pane fade" id="v-pills-Understanding" role="tabpanel"
                                 aria-labelledby="v-pills-Understanding-tab">...</div>--}}
{{--                        </div>--}}
                    </div>
                    <!--//Col-8-->
                </div>
                <!--//Row-->
            </div>
        </div>
    </section>
    <script type="text/javascript">
        var base_url = '';
        $(function () {
            $.ajax({
                type:'GET',
                url:  base_url+'/api/userhelplist',
                data:'helpList',
                success:function(data) {
                    if(data.statusCode == 200){
                        // console.log(data);exit;

                        $(data.helpList).each(function (index,value) {
                            if(value.id == 1)
                            {
                                $('#v-pills-trip').append('<a class="nav-link helplist active show" id="'+value.id+'" data-toggle="pill" ' +
                                    'href="#v-pills-trip" role="tab" aria-controls="v-pills-trip" value="'+value.id+'" ' +
                                    'aria-selected="true">'+value.title+' </a>');
                                showDescriptions(value.id);
                            }
                            else
                            {
                                $('#v-pills-trip').append('<a class="nav-link helplist" id="'+value.id+'" data-toggle="pill" ' +
                                    'href="#v-pills-trip" role="tab" aria-controls="v-pills-trip" value="'+value.id+'" ' +
                                    'aria-selected="true">'+value.title+' </a>');
                            }
                        });
                        $('.helplist').each(function () {


                            $(this).on("click", function(){

                                showDescriptions($(this).attr('id'));
                            });
                        });
                    }
                }
            });
    });
        function showDescriptions(userhelpid) {
            // var userhelpid = $(this).attr('id');
            $.ajax({
                type:'GET',
                url:  base_url+'/api/userhelpdescription',
                data:{'user_help_id':userhelpid},
                success:function(data) {
                    if(data.statusCode == 200){
                        console.log(data);
                        $('#userhelp_description').append().empty();
                        $(data.helpDescriptionDetails).each(function (index,value) {
                            console.log(value);

                            $('#userhelp_description').append('<div class="tab-content" id="v-pills-tabContent">' +
                                '<div class="tab-pane fade show " id="v-pills-trip" role="tabpanel" aria-labelledby="v-pills-trip-tab">' +
                                '<p>'+value.help_description+'</p></div></div>');
                        });

                    }
                }
            });
        }
    </script>
@endsection