@extends('admin.layouts.app')
@section('title')
   Edit Page
@endsection
@section('content')
<div class="container-fluid">
    <div class="card w-100 bg-success">
        <div class="card-body">
          <h5 class="card-title">Welcome to the application of <b>{{ @$candidates->user->name }}</b></h5><br>

          <div class="row mt-2">
            <div class="col">
             <b><p class="mb-0">Name</p></b>
             @php
            //  dd(@$candidates[0]->user->name);
             @endphp
             <p>{{ @$candidates->user->name }}</p>
            </div>
            <div class="col">
                <b><p class="mb-0">Email</p></b>
                <p>{{ @$candidates->user->email }}</p>
            </div>
            <div class="col">
               <b><p class="mb-0">Phone</p></b> 
                <p>@if(!empty(@$candidates->user->phone)){{ @$candidates->user->phone }}@elseif(!empty(@$candidates->user->alternate_phone)){{ @$candidates->user->alternate_phone }}@else -- @endif</p>
            </div>
            {{-- <div class="col">
                <b><p class="mb-0">Student Url Link</p></b>
                <p>{{ @$candidates-user->phone }}</p>
            </div> --}}
          </div>
       
        </div>
      </div>
  </div>
  <div class="container-fluid">
    <div class="row">
        <div class="col-4">
          <div class="nav flex-column nav-pills bg-white" id="v-pills-tab" role="tablist" aria-orientation="vertical">
            @foreach ($candidateApplications as $candidateApplication)
            <a class="nav-link @if($candidateApplication->id == @$candidateApplicationsID) active @endif px-0" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true"   onclick="handleClick({{ @$candidateApplication->id }});">
                <div class="card-body py-0">
                    <div class="row mt-2">
                        <div class="col">
                            <b><p>Application ID: <span class="text-primary">{{ @$candidateApplication->id }}</span></p></b>
                       
                        </div>
                    
                        <div class="col">
                            <b><p class="mb-0 text-end">{{ dateMonthTimeFormat(@$candidateApplication->created_at)}}</p></b>
                        </div>            
                    </div>

                    <div class="row mt-2">
                        <div class="col">
                            <b><p>Associate ID: <span class="text-primary">
                                @if (isset(get_candidateApplicationPartner_array()[@$candidateApplication->partner])) 
                                  {{ get_candidateApplicationPartner_array()[@$candidateApplication->partner]['code'] }}                   
                                @endif
                                ({{ @$candidateApplication->partner_application_id }})</span></p></b>
                        </div>         
                    </div>
                    
                    
                    <div><h5>{{ @$candidateApplication->courses->name }}</h5></div>
                    <div><h6>{{ @$candidateApplication->university->name }}</h6></div>
                    <div><p>status: <span class="text-primary">{{ @$candidateApplication->status }}</span></p></div>
                </div>
            </a>

            @endforeach

          </div>
        </div>

        <div class="col-8">
          <div class="tab-content" id="v-pills-tabContent">
            <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
                <div class="card-one">
                 
                    <div id="appendHere"></div>
             
                    <div class="pb-3 comment-border" >
                        <h4>Comment</h4>
                        <div class="div ">
                           
                            <div class="">
                                <textarea class="form-control" id="comment_text" rows="3" placeholder="Write comment"></textarea>
                            </div>
                            <div class="text-end mt-4">
                                
                                <button type="button" class="btn btn-success px-5" onclick="commentButton()">
                                    Send
                                </button>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div>
                            <div id="appendCommentHere"></div>
                          
                        </div>
                    </div>
                </div>

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

@endsection

@section('style')
<style>

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #fff;
    background-color: #d6e4ebe8;

    border-left: 4px solid #0946efe8;
}
.comment-border{
    border-bottom: 1.7px solid rgb(131, 126, 126);
}
.custom-comment{
    border-radius: 16px;
}
</style>

@endsection



@section('script')

    <script>
          $(document).ready(function() {
                 var id = "{{ @$candidateApplicationsID }}";
            handleClick(id);
          });

        function handleClick(id) {
            $.ajax({
                url: "{{ route('candidateApplication.commentAndApplicationGetByApplicationID') }}",
                type: "POST",
                data: {
                    id: id,
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'json',
                success: function(result) {
                    $('#appendHere').html('');
                    $('#appendCommentHere').html('');
                    var htmlToAppend = `
                    <div class="card w-100">
                        <div class="card-body" id="ApendCardData">
                            <input type="hidden" name="applications_id" id="applications_id" value="${result.candidateApplications['id']}">
                            <div class="row mt-2">
                                <div class="col">
                                    <p class="mb-0">${result.candidateApplications['created_at']}</p>
                                </div>
                                <div class="col">
                                    <b><p class="mb-0 text-primary text-end">Case ${result.candidateApplications['status']}</p></b>
                                </div>
                            </div>
                            <div class="row mt-2">
                                <div class="col">
                                    <b><p>Application ID: <span class="text-primary">${result.candidateApplications['id']}</span></p></b>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    <b><p>Associate ID: <span class="text-primary">${result.candidateApplications['partnerApplicationId']}</span></p></b>
                                </div>
                            </div>
                            <div><h5>${result.candidateApplications['course']}</h5></div>
                            <div><h6>${result.candidateApplications['universities']}</h6></div>
                        </div>
                    </div>
                `;

                $('#appendHere').append(htmlToAppend);
                    $.each(result.comments, function(key, comment) {

                        var commentHTML = `
                            <div class="mt-3">
                                <div>
                                    <span class="pl-2"><b>${comment.comment_by_admin}</b></span>
                                    <div class="bg-success p-3 custom-comment">
                                        <p>${comment.comment}</p>
                                    </div>

                                     <div class="text-end">
                                        <p class="text-dark">${comment.created_at}</p>
                                    </div>
                                </div>
                            </div>
                        `;
                        $("#appendCommentHere").append(commentHTML);
                    });
                }
            });

        }

        function commentButton() {    
            var applications_id = $('#applications_id').val();
            var comment_text = $('#comment_text').val();
            if (!applications_id) {
                toastr.error("Applications ID is required.");
                return;
            }
    
            if (!comment_text) {
                toastr.error("Comment is required.");
                return;
            }
            var type = $('#comment_text').val();   
                $.ajax({   
                url: "{{ route('candidateApplication.commentInsertByApplicationsId') }}",
                type: "POST",
                data: {
                        applications_id: applications_id,
                        comment_text: comment_text,
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'json',
                    success: function(response) {
                        if (response.success) {
                            toastr.success("Comment Created Successfully!");

                        } else {
                            toastr.error("Something went wrong.");
                        }
                        handleClick(applications_id);
                        $('#comment_text').val(" "); 
                    },
                    error: function(error) {
                        console.error(error);
                        toastr.error("Something went wrong.");
                    }
                });
            
        }

        
    </script>


   

@endsection