@extends('admin.layouts.app')
@section('title')
   Edit Page
@endsection
@section('content')
<div class="main-box my-0">

<div class="selected-section bg-white">


    <div class="program-list">
        <div class="single-program">
            <div class="head">
                <p><span class="p-name">Welcome to the application of </span><span class="rank">
                    {{ @$candidates->user->name }}</span></p>
            </div>

            <ul class="d-list">
                <li class="list-head">Name:<span class="value">{{ @$candidates->user->name }}</span></li>
                <li class="list-head">Email:<span class="value">{{ @$candidates->user->email }}</span></li>
                <li class="list-head">Phone:<span class="value">@if(!empty(@$candidates->user->phone)){{ @$candidates->user->phone }}@elseif(!empty(@$candidates->user->alternate_phone)){{ @$candidates->user->alternate_phone }}@else -- @endif</span></li>
            
            </ul>
        </div>
    </div>

    </div>

    <div class="tabs-list">
        <a href="javascript:;" class="apply-btn ml-auto mt-2">+ Apply to Programs</a>
    </div>

    <div class="add-program m-0">
        <div class="head">
            <p class="title">Quick Add Program</p>
        </div>

        {{-- <form action="" class="add-form"> --}}
        <form class="add-form form-horizontal" action="{{ route('candidateApplication.store') }}"
            method="POST" enctype="multipart/form-data">
            @csrf

            <p class="small-head">We only show eligible courses for this student for the selected intake, year and university. To understand why certain courses are not eligible for this student, please go to Search Program.</p>

            <div class="fields-list d-block">
                <input type="hidden" name="candidate_id" id="candidate_id" value="{{ @$candidates->id }}">
            <div class="row">
                
                <div class="col-md-2">
                    <input value="{{ old('partner_application_id') }}" name="partner_application_id" type="text"
                    class="form-control @error('partner_application_id') is-invalid @enderror"
                    placeholder="{{ __('enter') }} Partner Application ID">
                    @error('partner_application_id')
                    <span class="invalid-feedback" role="alert">{{ $message }}</span>
                    @enderror
                </div>
                {{-- <div class="col-md-2">
                <select name="intake" id="intake"
                    class=" form-control  select2bs4 @error('intake') is-invalid @enderror">
                    <option value="" class="d-none">
                        {{ __('select_intake') }}
                    </option>
                    <option
                        {{ "Sept'23" == old('intake') ? 'selected' : '' }}
                        value="Sept'23">Sept'23</option>
                        <option
                        {{ "Nov'23" == old('intake') ? 'selected' : '' }}
                        value="Nov'23">Nov'23</option>
                    <option
                        {{ "Jan'24" == old('intake') ? 'selected' : '' }}
                        value="Jan'24">Jan'24</option>
                    <option
                        {{ "Mar'24" == old('intake') ? 'selected' : '' }}
                        value="Mar'24">Mar'24</option>
                    <option
                        {{ "May'24" == old('intake') ? 'selected' : '' }}
                        value="May'24">May'24</option>
                    <option
                        {{ "Sept'24" == old('intake') ? 'selected' : '' }}
                        value="Sept'24">Sept'24</option>
                    <option
                        {{ "Nov'24" == old('intake') ? 'selected' : '' }}
                        value="Nov'24">Nov'24</option>

                    <option
                        {{ "Jan'25" == old('intake') ? 'selected' : '' }}
                        value="Jan'25">Jan'25</option>
                    <option
                        {{ "May'25" == old('intake') ? 'selected' : '' }}
                        value="May'25">May'25</option>
                    <option
                        {{ "Sept'25" == old('intake') ? 'selected' : '' }}
                        value="Sept'25">Sept'25</option>
                    <option
                        {{ "Nov'25" == old('intake') ? 'selected' : '' }}
                        value="Nov'25">Nov'25</option>
                        <option
                        {{ "Jan'26" == old('intake') ? 'selected' : '' }}
                        value="Jan'26">Jan'26</option>
                    <option
                        {{ "May'26" == old('intake') ? 'selected' : '' }}
                        value="May'26">May'26</option>
                    <option
                        {{ "Sept'26" == old('intake') ? 'selected' : '' }}
                        value="Sept'26">Sept'26</option>
                    <option
                        {{ "Nov'26" == old('intake') ? 'selected' : '' }}
                        value="Nov'26">Nov'26</option>
                </select>
                <x-forms.error name="intake" />
                </div> --}}

                <div class="col-md-2">
                    @php
                    $months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "July", "Aug", "Sept", "Oct", "Nov", "Dec"];
                    @endphp
                    
                    <select name="intake_months[]"
                            class="form-control select2bs4months @error('intake_months') is-invalid @enderror"
                            id="intake_months" multiple>
                            <option value="" class="d-none">
                                {{ __('select_intake') }}
                            </option>
                        @foreach ($months as $month)
                            <option 
                            @if (!empty(request('intake_months'))) 
                            @foreach (request('intake_months') as $key => $intake_months)
                                {{ $month == $intake_months ? 'selected' : '' }}   
                            @endforeach 
                        @endif
                            value="{{ $month }}">
                            {{ $month }}
                          </option>
                        @endforeach
                    
                    </select>
                </div>

                <div class="col-md-2">
                    <select class="form-control select2bs4years" name="intake_years[]" multiple>
                        @for ($i = 2022; $i <=  date('Y')+3; $i++)
                            <option
                            @if (!empty(request('intake_years'))) 
                                @foreach (request('intake_years') as $key => $intake_year)
                                    {{ $i == $intake_year ? 'selected' : '' }}   
                                @endforeach 
                            @endif
                                value="{{ $i }}">
                                {{ $i }}
                            </option>
                        @endfor
                    </select>
                    
                </div>
                <div class="col-md-2">
                {{-- <select  name="university_id"
                    class=" form-control select2bs4 {{ error('university_id') }}"
                    id="university_id">
                    <option value="" class="d-none">
                        {{ __('select_university') }}
                    </option>
                    @foreach ($universities as $universitie)
                
                        <option {{ $universitie->id  == old('university_id') ? 'selected' : '' }}
                            value="{{ $universitie->id }}">
                            {{ $universitie->name }}
                        </option>
                    @endforeach
                </select> --}}
                <select name="university_id" id="university_id" class="form-control select2university">
                    <option value="">{{ __('select_university') }}</option>
                </select> 
                <x-forms.error name="university_id" />
                </div>
                <div class="col-md-2">

                <select name="course"
                    class=" form-control select2bs4 {{ error('course') }}"
                    id="courseSelect">
                    <option value="" class="d-none">
                        Select Course
                    </option>
                
                </select>
                <x-forms.error name="course" />
                </div>
                <div class="col-md-2">

                <select name="partner"
                    class="select2bs44 form-control {{ error('partner') }}"
                    id="partner">
                    <option value="" class="d-none">
                        Select Partner
                    </option>
                    @if(isset($partner_find) && !is_null($partner_find))
                    @foreach(@$partner_find as $partner)
                    <option {!! old('partner') == $partner['name'] ? 'selected' : '' !!}
                        value="{{ $partner['name'] }}">{{ $partner['name'] }}</option>
                    @endforeach
                    @endif
                </select>
                <x-forms.error name="partner" />
                </div>
                <div class="col-md-2">
                <select name="status"
                class="select2bs44 form-control {{ error('status') }}"
                id="status">
            
                    <option value="" class="d-none">
                        Select Status
                    </option>
                    @foreach(get_candidateApplicationStatus_array() as $status)
                    <option {!! old('status') == $status['name'] ? 'selected' : '' !!}
                        value="{{ $status['name'] }}">{{ $status['name'] }}</option>
                    @endforeach
                </select>
                <x-forms.error name="status" />
                </div>
                <div class="col-md-1">
                {{-- <button class="add-btn disabled">Add</button> --}}
                <button type="submit" class="add-btn">
                    + {{ __('create') }}
                </button>
                </div>
            </div>
            </div>
        </form>
    </div>

    <div class="status-panels show">
        <div class="left common">
            @foreach ($candidateApplications as $candidateApplication)         
                <div class="acc-list">
                    <div class="course-detail @if($candidateApplication->id == @$candidateApplicationsID) active @endif" onclick="handleClick({{ @$candidateApplication->id }});">
                        <div class="c-name">
                            <p>
                                <b>Application ID: <span class="text-primary">{{ @$candidateApplication->id }}</span></b><br>
                                <b>Associate ID: <span class="text-primary">
                                      {{ @$candidateApplication->partners->code}}                   
                                    ({{ @$candidateApplication->partner_application_id }})</span></b><br>
                                <span class="course-name">{{ @$candidateApplication->courses->name }}</span>
                                <span class="uni-name">{{ @$candidateApplication->university->name }}</span>
                                @if(@$candidateApplication->priority == 1)
                                <div class="list-head">
                                    <span class="priority">1st priority</span>
                                </div>
                                @elseif(@$candidateApplication->priority == 2)
                                <div class="list-head">
                                    <span class="priority">2nd priority</span>
                                </div>
                                @elseif(@$candidateApplication->priority == 3)
                                <div class="list-head">
                                    <span class="priority">3rd priority</span>
                                </div>
                                @endif
                                
                            </p>
                           
                        </div>
                        <p class="status">Status:<span class="status-type">{{ @$candidateApplication->status }}</span>
                        </p>
    
                    </div>
    
                </div>
        

            @endforeach

        </div>

        <!--Desktop-->
        <div class="right common">
            <div class="app-info">
 
                <div id="appendHere"></div>

                <div class="comment-section">
                    <p class="comment-head">Comments</p>

                    <form action="" class="cmt-form">

                        <div class="field">
                            <img src="{{ Auth::user()->image_url }}" class="user-profile custom-w-img" alt="profile-image"  >
                            <div class="cmt-field w-100">
                                <textarea  id="comment_text" rows="8" type="text" class="comment-input form-control editor1" name="comment_text" placeholder="Write Comments">
                                
                                </textarea>
                               
                            </div>
                        </div>

                      

                        <div class="f-bottom">
                            <div id="selectCommunicationCustomer">
                            <p class="upload-file">
                                <select name="type" id="type" 
                                class=" form-control  select2bs4 @error('type') is-invalid @enderror" onchange="handleClick({{ @$candidateApplication->id }})">
                                <option
                                    {{ "0" == old('type') ? 'selected' : '' }}
                                    value="0">Internal Communication</option>
                                <option
                                    {{ "1" == old('type') ? 'selected' : '' }}
                                    value="1">Customer Communication</option>
                                
                            </select>
                            </p>
                            </div>
                            <button type="button" class="send-btn" onclick="commentButton()">Send</button>
                            {{-- <div class="row">

                                <div class="col-md-6">
                                    <select name="type" id="type"
                                    class=" form-control  select2bs4 @error('type') is-invalid @enderror">
                                    <option
                                        {{ "0" == old('type') ? 'selected' : '' }}
                                        value="0">Internal Communication</option>
                                    <option
                                        {{ "1" == old('type') ? 'selected' : '' }}
                                        value="1">Customer Communication</option>
                                    
                                </select>
                                </div>
                                <div class="col-md-6">
                                    <button type="button" class="send-btn" onclick="commentButton()">Send</button>
                                </div>

                            </div> --}}
                           
                        </div>
                    </form>
                    <div id="appendCommentHere"></div>
                    
                </div>
            </div>
        </div>

     
    </div>

    <div class="card">
        <div class="card-header collapsed fw-bold accordion-bg-light"
            data-toggle="collapse" data-target="#collapseTen" aria-expanded="false"
            aria-controls="collapseTen">
            <span class="title"> Time Line</span>
            <span class="accicon"><i class="fas fa-angle-down rotate-icon"></i></span>
        </div>
        <div id="collapseTen" class="collapse show" data-parent="">
            <div class="card-body">
            <table id="timelineTable" class="table table-bordered table-striped dataTable dtr-inline"
                role="grid" aria-describedby="example1_info">
                <thead>
                    <tr role="row" class="text-center">
                        <th>Application ID</th>
                        <th>Candidate Name</th>
                        <th>Status</th>
                        <th>Comment</th>
                        <th>Change By</th>
                        <th>Change By Type</th>
                        <th>Date & Time</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td colspan="8" class="text-center">
                            <p>{{ __('no_data_found') }}...</p>
                        </td>
                    </tr>
                </tbody>
            </table>
            </div>
        </div>
    </div>

</div>

@endsection

@section('style')
<link rel="stylesheet" href="{{ asset('backend') }}/student-panel/css/nice-select.css">
<link rel="stylesheet" href="{{ asset('backend') }}/student-panel/css/app-manager.css">

<link rel="stylesheet" href="{{ asset('backend/plugins/select2/css/select2.min.css') }}">
<link rel="stylesheet" href="{{ asset('backend/plugins/select2-bootstrap4-theme/select2-bootstrap4.min.css') }}">

<style>
    .custom-m{
        margin: 0px 35px 0px 35px;
    }
    .custom-w-img{
        width: 32px!important;
        height: 32px!important;
    }


    .select2-results__option[aria-selected=true] {
            display: none;
        }

        .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
            color: #fff;
            border: 1px solid #fff;
            background: #007bff;
            border-radius: 30px;
        }

        .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
            color: #fff;
        }

        .card-header .title {
            font-size: 17px;
            color: #000;
        }

        .card-header .accicon {
            float: right;
            font-size: 20px;
            width: 1.2em;
        }

        .card-header {
            cursor: pointer;
            border-bottom: none;
        }

        .card {
            border: 1px solid #ddd;
        }

        .card-body {
            border-top: 1px solid #ddd;
        }

        .card-header:not(.collapsed) .rotate-icon {
            transform: rotate(180deg);
        }

</style>

@endsection



@section('script')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="{{ asset('tinymce/tinymce.min.js') }}" referrerpolicy="origin"></script>
<script src="{{ asset('backend') }}/student-panel/js/app-status.js"></script>
<script src="{{ asset('backend/plugins/select2/js/select2.full.min.js') }}"></script>


    <script>
      

           
          $(document).ready(function() {

            $('.select2bs4').select2({
            theme: 'bootstrap4',
            minimumResultsForSearch: 10
            });

            $('.select2bs4months').select2({
            theme: 'bootstrap4',
            multiple: true,
            tags: true,
            placeholder: 'Select Intake Month'
            
            })

            $('.select2bs4years').select2({
                theme: 'bootstrap4',
                multiple: true,
                tags: true,
                placeholder: 'Select Intake years'
            });

            $('.select2university').select2({
                theme: 'bootstrap4',
                ajax: {
                    url: "{{ route('candidateApplication.universityListByName') }}",
                    dataType: 'json',
                    type: "POST",
                    delay: 250,
                    data: function (params) {
                        return {
                            term: params.term,
                            _token: '{{ csrf_token() }}'
                        };
                    },
                    processResults: function (data) {
                        return {
                            results: data.map(function(item) {
                                console.log(item);
                                return {
                                    id: item.id,
                                    text: `${item.name} (${item.id})`
                                };
                            })
                        };
                    },
                    cache: true
                },
                minimumInputLength: 1,
                placeholder: 'Search for universities',
                escapeMarkup: function (markup) {
                    return markup;
                },
                templateSelection: function (data) {
                    return data.text;
                }
            });

            $('.select2bs44').select2({
            theme: 'bootstrap4',
            minimumResultsForSearch: -1 // Disable search box
            });

            $('#university_id').on('change', function() {
                var university_id = this.value;
                $.ajax({
                    url: "{{ route('admin.courseGetByUniversityId') }}",
                    type: "POST",
                    data: {
                        university_id: university_id,
                        _token: '{{ csrf_token() }}'
                    },
                    dataType: 'json',
                    success: function(result) {

                    console.log(result);
                        $('#courseSelect').html(
                                '<option value="">Select Course</option>')
                            .removeAttr(
                                'disabled');
                        $.each(result.course, function(key, value) {
                            $("#courseSelect").append('<option value="' +
                                value.id + '">' + value.name +
                                '</option>');
                        });
                    }
                });

            });
                 var id = "{{ @$candidateApplicationsID }}";
            handleClick(id);
          });

        function handleClick(id) {
            var communicationType = $('#type').val();
            $.ajax({
                url: "{{ route('candidateApplication.commentAndApplicationGetByApplicationID') }}",
                type: "POST",
                data: {
                    id: id,
                    type: communicationType,
                    _token: '{{ csrf_token() }}'
                },
                dataType: 'json',
                success: function(result) {
                    $('#appendHere').html('');
                    $('#appendCommentHere').html('');
                    $('#selectCommunicationCustomer').html('');
                    
                    var htmlToAppend = `
                    <div class="status-detail">
                        <input type="hidden" name="applications_id" id="applications_id" value="${result.candidateApplications['id']}">
                    <div class="status-head">
                        <p>
                            <span class="date">${result.candidateApplications['created_at']}</span>
                        </p>
                        <p class="status-type">${result.candidateApplications['status']}</p>
                    </div>
                    <div class="status-head">
                        <p>
                            Application ID:<span class="app-id d-inline-block">${result.candidateApplications['id']}</span>
                        </p>
                        <p class="ms-3">
                            Associate ID: <span class="app-id d-inline-block">${result.candidateApplications['partnerApplicationId']}</span>
                        </p>
                    </div>
                    <p class="course-name">${result.candidateApplications['course']}</p>
                    <p class="uni-name">${result.candidateApplications['universities']}</p>
                </div>`;

                $('#appendHere').append(htmlToAppend);

                    var htmlSelectCommunicationCustomer = '<p class="upload-file">' +
                        '<select name="type" id="type" class="form-control select2bs4" onchange="handleClick(' + result.candidateApplications['id'] + ')">' +
                            '<option value="0"' + (communicationType == 0 ? ' selected' : '') + '>Internal Communication</option>' +
                            '<option value="1"' + (communicationType == 1 ? ' selected' : '') + '>Customer Communication</option>' +
                        '</select>' +
                    '</p>';

                    // Append the new select to the container
                    $('#selectCommunicationCustomer').append(htmlSelectCommunicationCustomer);

                    $.each(result.comments, function(key, comment) {

                        var commentHTML = `
                            <div class="cmt-list">
                                <div class="detail">
                                    <p class="u-name"><img src="${comment.comment_by_image_url}" class="user-profile custom-w-img" alt="profile-image" width="100%" height="100%">${comment.comment_by_admin}</p>
                                    <p><span class="date">${comment.created_at}</span></p>
                                </div>
                                <div class="comment">
                                    ${comment.comment}
                                </div>
                            </div>
                        `;
                        $("#appendCommentHere").append(commentHTML);
                    });

                    renderTimeline(result.applicationTimeline);
                },
                error: function (xhr, status, error) {
                    console.error(xhr.responseText);
                    toastr.error("Something Went Wrong.");
                }
            });

        }


        function renderTimeline(applicationTimeline) {
            var tbody = $('#timelineTable tbody');
            tbody.empty();

            if (applicationTimeline.length > 0) {
                $.each(applicationTimeline, function(index, timeline) {
                    var row = '<tr>' +
                        '<td>' + timeline.application_id + '</td>' +
                        '<td>' + (timeline.auth_name || timeline.candidate_id || "--") + '</td>' +
                        '<td>' + timeline.status + '</td>' +
                        '<td>' + timeline.comment + '</td>' +
                        '<td>' + timeline.auth_name + '</td>' +
                        '<td>' + timeline.auth_type + '</td>' +
                        '<td>' + (timeline.created_at || "--") + '</td>' +
                        '</tr>';
                    tbody.append(row);
                });
            } else {
                var noDataRow = '<tr><td colspan="7" class="text-center"><p>No data found...</p></td></tr>';
                tbody.append(noDataRow);
            }
        }

        function commentButton() {    
            var applications_id = $('#applications_id').val();
            var comment_text = tinymce.get("comment_text").getContent();
            var communicationType = $('#type').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,
                        type: communicationType,
                    _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);
                        tinymce.get("comment_text").setContent(" ");
                    },
                    error: function(error) {
                        console.error(error);
                        toastr.error("Something went wrong.");
                    }
                });
            
        }
        var elementsWithContainerClass = document.querySelectorAll('[class*="container"]');

// Loop through the selected elements
elementsWithContainerClass.forEach(function(element) {
    // Check if the element's class contains the desired content
    if (element.classList.contains('container-fluid')) {
        // Do something with the matching element(s)
        // For example, remove the class
        element.classList.remove('container-fluid');
        element.classList.add('custom-m');
    }
});


tinymce.init({
            selector: `#comment_text`,
            plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount code imagetools fontawesome',
            toolbar: 'fontawesome | searchreplace |undo redo | blocks |bold italic underline strikethrough | align | link image media table | numlist bullist indent outdent',
            // toolbar: 'undo redo | blocks fontsize | bold italic underline strikethrough | link image media table | align lineheight | numlist bullist indent outdent | emoticons charmap | removeformat code | fontawesome | searchreplace',
            image_advtab: true,
            // extended_valid_elements: 'svg[*],path[*],use[*]',
            valid_elements: '*[*]',
            valid_children: '*[*]',
            extended_valid_elements: '*[*]',
            file_picker_types: 'image',
            file_picker_callback: function(callback, value, meta) {
            if (meta.filetype === 'image') {
                // Implement your custom file picker logic here
                // For example, you can use an input type=file or open a file picker dialog
                // Once the user selects an image, pass the selected file to the callback
                // using the callback function provided by TinyMCE
            }
            }
         });

        
    </script>


   

@endsection