@extends('app-new')

@push('head-script')
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">Dashboard</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="index.html">Home</a>
                    </li>
                    <li class="breadcrumb-item active">Recruitment
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush

@push('prev-next-head')
    <div class="content-header-right text-end col-md-3 col-12">
        <div class="form-group breadcrumb-right">
            <button class="btn btn-primary-inner btn-sm mb-sm-0 mb-50" data-bs-target="#filter" data-bs-toggle="modal"><i
                    data-feather="filter"></i> Filter</button>
        </div>
    </div>
@endpush

@section('content')
    <section id="chartjs-chart">
        <div class="row">

            <div class="col-md-12 col-12">
                <div class="row rec-topheaddata">
                    <div class="col-md-3 col-6 mb-1">
                        <div class="rec-total-bg">
                            <div class="row align-items-center">
                                <div class="col-md-5 text-center">
                                    <img src="/assets/img/tr.png" />
                                </div>
                                <div class="col-md-7">
                                    <h3>{{ $requestData['total_requests'] }}</h3>
                                    <p>Total Request</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-6 mb-1">
                        <div class="rec-total-bg ogbox">
                            <div class="row align-items-center">
                                <div class="col-md-5 text-center">
                                    <img src="/assets/img/og.png" />
                                </div>
                                <div class="col-md-7">
                                    <h3>{{ $requestData['on_going_applicants'] }}</h3>
                                    <p>On-Going Recruitment</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-6 mb-1">
                        <div class="rec-total-bg jmbox">
                            <div class="row align-items-center">
                                <div class="col-md-5 text-center">
                                    <img src="/assets/img/jm.png" />
                                </div>
                                <div class="col-md-7">
                                    <h3>-</h3>
                                    <p>Joining This Month</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 col-6 mb-1">
                        <div class="rec-total-bg thbox">
                            <div class="row align-items-center">
                                <div class="col-md-5 text-center">
                                    <img src="/assets/img/th.png" />
                                </div>
                                <div class="col-md-7">
                                    <h3>{{ $requestData['hired_applicants'] }}</h3>
                                    <p>Total Hired</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-12">

                <div class="rec-rewqpostmang">
                    <h3>Recommended Candidates -</h3>
                    <select class="form-select" id="recommended_canditates_select">
                        <option value="">All</option>
                        @foreach ($jobRequisitions as $jobRequisition)
                            <option value="{{ @$jobRequisition->jobOpening->id }}">{{ $jobRequisition->position_title }}
                                ({{ @$jobRequisition->jobOpening->job_id }})
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="candidates-tables">
                    <table class="table">
                        <thead>
                            <tr>
                                <th width="350px">Candidate</th>
                                <th>Skills</th>
                                <th>Exp.</th>
                                <th width="170px">Current Employer</th>
                                <th>Location</th>
                                <th>Comment</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody id="recommended_canditates_tbody">
                        </tbody>
                    </table>
                </div>

            </div>



            <div class="col-md-12">
                <div class="rec-rewqpostmang">
                    <h3>Shortlisted Candidates -</h3>
                    <select class="form-select" id="shortlisted_canditates_select">
                        <option value="">All</option>
                        @foreach ($jobRequisitions as $jobRequisition)
                            <option value="{{ @$jobRequisition->jobOpening->id }}">{{ $jobRequisition->position_title }}
                                ({{ @$jobRequisition->jobOpening->job_id }})
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="candidates-tables">
                    <table class="table">
                        <thead>
                            <tr>
                                <th width="350px">Candidate</th>
                                <th>Skills</th>
                                <th>Exp.</th>
                                <th width="170px">Current Employer</th>
                                <th>Location</th>
                                <th>Status</th>
                                <th>Rating</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody id="shortlisted_canditates_tbody">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>
    <div class="modal modal-slide-in fade filterpopuplabel" id="filter">
        <div class="modal-dialog sidebar-sm">
            <form class="add-new-record modal-content pt-0">
                <div class="modal-header mb-1">
                    <h5 class="modal-title" id="exampleModalLabel">Apply Filter</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">×</button>
                </div>
                <div class="modal-body flex-grow-1">
                    <div class="mb-1">
                        <label class="form-label" for="fp-range">Select Date Range</label>
                        <input type="text" id="fp-range" class="form-control flatpickr-range"
                            placeholder="YYYY-MM-DD to YYYY-MM-DD" />
                    </div>

                    <div class="mb-1">
                        <label class="form-label">Select Manager</label>
                        <select class="form-select">
                            <option>Select</option>
                        </select>
                    </div>

                    <div class="mb-1">
                        <label class="form-label">Select Department</label>
                        <select class="form-select">
                            <option>Select</option>
                        </select>
                    </div>

                    <div class="mb-1">
                        <label class="form-label">Select Designation</label>
                        <select class="form-select">
                            <option>Select</option>
                        </select>
                    </div>

                </div>
                <div class="modal-footer justify-content-start">
                    <button type="button" class="btn btn-primary data-submit mr-1">Apply</button>
                    <button type="reset" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
                </div>
            </form>
        </div>
    </div>
@endsection

@push('footer-script')
    <script>
        $(window).on('load', function() {
            if (feather) {
                feather.replace({
                    width: 14,
                    height: 14
                });
            }
        })

        $(function() {
            $('#recommended_canditates_select').trigger('change');
            $('#shortlisted_canditates_select').trigger('change');
        });

        $('#recommended_canditates_select').change(function() {
            let job_id = $(this).val();

            $.ajax({
                url: '{{ $orgUrl }}/get-recommended-candidates',
                method: 'GET',
                data: {
                    job_id
                },
                success: function(response) {
                    let html = '';

                    response.data = [];

                    if(!response.data.length){
                        html = `
                            <tr>
                                <td colspan="100%" style="text-align:center">No Candidates Found</td>
                            </tr>
                        `;
                    }

                    // Loop through each candidate in the response data
                    response.data.forEach(candidate => {
                        // Destructure the candidate object for easy reference
                        const { 
                            first_name = '', 
                            last_name = '', 
                            current_employer_details = '', 
                            mobile = '', 
                            email = '', 
                            resume = '', 
                            work_experience = {}, 
                            location = '',
                            candidate_skill = []
                        } = candidate;

                        // Generate skills HTML (limit to 2 skills)
                        const skillsHtml = candidate_skill.slice(0, 2).map(candidateSkill => `
                            <span class="badge rounded-pill badge-light-secondary badgeborder-radius">
                                ${candidateSkill?.skill?.name || ''}
                            </span>
                        `).join('');

                        // Calculate remaining skills and append additional info if needed
                        const remainingSkills = candidate_skill.length - 2;
                        const remainingSkillsHtml = remainingSkills > 0 ? `<span class="skilnum">+${remainingSkills}</span>` : '';

                        // Construct the HTML for the candidate row
                        html += `
                            <tr>
                                <td>
                                    <div class="cand-inforecsec">
                                        <div>
                                            <h3>${first_name} ${last_name}</h3>
                                            <h4>Designation Name${current_employer_details ? ', ' + current_employer_details : ''}</h4>
                                            <h5>${mobile} <a href="mailto:${email}">${email}</a></h5>
                                        </div>
                                        <div>
                                            ${resume ? `<a target="_blank" href="${resume}"><img src="/assets/img/resume2.png" /></a>` : ''}
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    ${skillsHtml} ${remainingSkillsHtml}
                                </td>
                                <td>${work_experience?.name || ''}</td>
                                <td>${current_employer_details || ''}</td>
                                <td>${location}</td>
                                <td>
                                    <input type="text" class="form-control" placeholder="Add Comment" />
                                </td>
                                <td>
                                    <select class="form-select">
                                        <option>Select</option>
                                        <option>Approve</option>
                                        <option>Reject</option>
                                    </select>
                                </td>
                            </tr>
                        `;
                    });

                    // Update the table body with the constructed HTML
                    $('#recommended_canditates_tbody').html(html);
                }
            })
        });

        $('#shortlisted_canditates_select').change(function() {
            let job_id = $(this).val();

            $.ajax({
                url: '{{ $orgUrl }}/get-shortlisted-candidates',
                method: 'GET',
                data: {
                    job_id
                },
                success: function(response) {
                    let html = '';

                    if(!response.data.length){
                        html = `
                            <tr>
                                <td colspan="100%" style="text-align:center">No Candidates Found</td>
                            </tr>
                        `;
                    }

                    // Loop through each candidate in the response data
                    response.data.forEach(candidate => {
                        // Destructure the candidate object for easy reference
                        const { 
                            first_name = '', 
                            last_name = '', 
                            current_employer_details = '', 
                            mobile = '', 
                            email = '', 
                            resume = '', 
                            work_experience = {}, 
                            job_interview = {}, 
                            location = '',
                            candidate_skill = []
                        } = candidate;

                        // Generate skills HTML (limit to 2 skills)
                        const skillsHtml = candidate_skill.slice(0, 2).map(candidateSkill => `
                            <span class="badge rounded-pill badge-light-secondary badgeborder-radius">
                                ${candidateSkill?.skill?.name || ''}
                            </span>
                        `).join('');

                        // Calculate remaining skills and append additional info if needed
                        const remainingSkills = candidate_skill.length - 2;
                        const remainingSkillsHtml = remainingSkills > 0 ? `<span class="skilnum">+${remainingSkills}</span>` : '';

                        let rating = Math.floor(job_interview.interview_rating / job_interview.rate * 5);
                        let ratingHtml = Array(rating).fill().map(() => `<img src="/assets/img/full-star.png" />`).join('');
                        ratingHtml += Array(5 - rating).fill().map(() => `<img src="/assets/img/blank-star.png" />`).join('');
                        
                        // Construct the HTML for the candidate row
                        html += `
                            <tr>
                                <td>
                                    <div class="cand-inforecsec">
                                        <div>
                                            <h3>${first_name} ${last_name}</h3>
                                            <h4>Designation Name${current_employer_details ? ', ' + current_employer_details : ''}</h4>
                                            <h5>${mobile} <a href="mailto:${email}">${email}</a></h5>
                                        </div>
                                        <div>
                                            ${resume ? `<a target="_blank" href="${resume}"><img src="/assets/img/resume2.png" /></a>` : ''}
                                        </div>
                                    </div>
                                </td>
                                <td>
                                    ${skillsHtml} ${remainingSkillsHtml}
                                </td>
                                <td>${work_experience?.name || ''}</td>
                                <td>${current_employer_details || ''}</td>
                                <td>${location}</td>
                                <td>
                                    <div class="rec-status">
                                        <span class="skilnum">${job_interview?.interview_type?.name || ''}</span>
                                        <h5>${job_interview?.interview_date}</h5>
                                    </div>
                                </td>
                                <td>
                                    <div class="ratingcan-star">
                                        ${ratingHtml}
                                    </div>
                                </td>
                                <td>
                                    <div class="action-rec">
                                        <a href="#feedbackcandidate" data-bs-toggle="modal"><i
                                                data-feather="message-circle"></i></a>
                                        <a href="#" class="text-danger"><i data-feather="trash-2"></i></a>
                                    </div>
                                </td>
                            </tr>
                        `;
                    });

                    // Update the table body with the constructed HTML
                    $('#shortlisted_canditates_tbody').html(html);
                }
            })
        });
    </script>
@endpush