@extends('layouts.dashboard')
@section('content')
    <div class="page-content">
        <div class="innerpage-heading">
            <a href="javascript:void(0)" onclick="window.history.back()" class="arrow-btn">
                <img src="{{ asset('images/back-arrow.svg') }}">
                <span>{{ __('return') }}</span>
            </a>
            <button class="btn btn-primary add-note-btn" data-bs-toggle="modal" data-bs-target="#addNoteModal"
                data-candidate-id="{{ $candidate->id }}" data-coordinator-invitations-id="{{ $coordinatorInvitation->id }}" data-candidate-name="{{ $candidate->first_name . ' ' . $candidate->last_name ?? '-' }}">
                <img src="{{ asset('images/edit-note.svg') }}">
                <span>{{ __('add_comment') }}</span>
            </button>
        </div>

        <div class="tabs-menu">
            <button class="btn tab-btn active" data-tab="tab-details">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2.5 16.6667C4.44649 14.6021 7.08918 13.3333 10 13.3333C12.9108 13.3333 15.5535 14.6021 17.5 16.6667M13.75 6.25C13.75 8.32107 12.0711 10 10 10C7.92893 10 6.25 8.32107 6.25 6.25C6.25 4.17893 7.92893 2.5 10 2.5C12.0711 2.5 13.75 4.17893 13.75 6.25Z" stroke="#717680" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
                <span>{{ __('participant_details') }} </span>
            </button>

            <button class="btn tab-btn" data-tab="tab-activity">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M18.3333 10H15L12.5 17.5L7.49996 2.5L4.99996 10H1.66663" stroke="#717680" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
                <span>{{ __('progress_in_process_tab_title') }}</span>
            </button>

            <button class="btn tab-btn" data-tab="tab-adjustments">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M11.6667 1.89136V5.33348C11.6667 5.80018 11.6667 6.03354 11.7575 6.2118C11.8374 6.3686 11.9649 6.49608 12.1217 6.57598C12.3 6.66681 12.5333 6.66681 13 6.66681H16.4422M13.3334 10.8334H6.66671M13.3334 14.1667H6.66671M8.33337 7.50008H6.66671M11.6667 1.66675H7.33337C5.93324 1.66675 5.23318 1.66675 4.6984 1.93923C4.22799 2.17892 3.84554 2.56137 3.60586 3.03177C3.33337 3.56655 3.33337 4.26662 3.33337 5.66675V14.3334C3.33337 15.7335 3.33337 16.4336 3.60586 16.9684C3.84554 17.4388 4.22799 17.8212 4.6984 18.0609C5.23318 18.3334 5.93324 18.3334 7.33337 18.3334H12.6667C14.0668 18.3334 14.7669 18.3334 15.3017 18.0609C15.7721 17.8212 16.1545 17.4388 16.3942 16.9684C16.6667 16.4336 16.6667 15.7335 16.6667 14.3334V6.66675L11.6667 1.66675Z" stroke="#717680" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
                <span>{{ __('system_suggestions_tab_title') }}</span>
            </button>

            <button class="btn tab-btn" data-tab="tab-recommended">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M10 12.5L7.50004 10M10 12.5C11.1641 12.0573 12.2808 11.499 13.3334 10.8334M10 12.5V16.6667C10 16.6667 12.525 16.2084 13.3334 15C14.2334 13.65 13.3334 10.8334 13.3334 10.8334M7.50004 10C7.94349 8.84957 8.50188 7.74676 9.16671 6.70838C10.1377 5.15587 11.4897 3.87758 13.0942 2.99512C14.6987 2.11266 16.5023 1.65535 18.3334 1.66671C18.3334 3.93338 17.6834 7.91671 13.3334 10.8334M7.50004 10H3.33337C3.33337 10 3.79171 7.47504 5.00004 6.66671C6.35004 5.76671 9.16671 6.66671 9.16671 6.66671M3.75004 13.75C2.50004 14.8 2.08337 17.9167 2.08337 17.9167C2.08337 17.9167 5.20004 17.5 6.25004 16.25C6.84171 15.55 6.83337 14.475 6.17504 13.825C5.85113 13.5159 5.42445 13.3372 4.9769 13.3234C4.52934 13.3096 4.09244 13.4615 3.75004 13.75Z" stroke="#717680" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
                <span>{{ __('next_steps_tab_title') }}</span>
            </button>
        </div>

        @include('candidates.tabs.tab-details')

        @include('candidates.tabs.tab-activity')

        @include('candidates.tabs.tab-adjustments')
        
        @include('candidates.tabs.tab-recommended')

        <div class="modal fade" id="cvContentModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-xl" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="btn-close js-close-cv" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body" style="overflow-x: auto;">
                        <p id="cvContent"></p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary js-close-cv" data-bs-dismiss="modal" aria-label="Close">{{ __('close') }}</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('js')
<script>
document.addEventListener('turbo:load', function() {
    //if (window.jsAlreadyLoadedSection) return; // exit if already run
    //window.jsAlreadyLoadedSection = true;

    const tabButtons = document.querySelectorAll('.tab-btn');
    const tabSections = document.querySelectorAll('.tab-section');

    tabButtons.forEach(btn => {
        btn.addEventListener('click', function() {

            const target = this.getAttribute('data-tab');

            // Reset buttons
            tabButtons.forEach(b => {
                b.classList.remove('active');
                //b.classList.add('btn-light');
            });

            // Activate current button
            //this.classList.remove('btn-light');
            this.classList.add('active');

            // Hide all sections
            tabSections.forEach(section => {
                section.classList.add('d-none');
            });

            // Show selected section
            document.getElementById(target).classList.remove('d-none');
        });
    });
});

$(document).on('click', '.js-close-cv', function () {
    $('#cvContentModel').modal('hide');
});

function downloadCV(event,id) {
    event.preventDefault();
    event.stopPropagation();

    $.ajax({
        type: "POST",
        url: "{{url('downloadCandidateCv')}}",
        data: {id:id,_token: window.APP.csrfToken},
        success: function (data) {
            window.location = data.url;
        }
    });
}

function showResume(event,id) {
    $.ajax({
        type: "POST",
        url: "{{url('showResume')}}",
        data: { id:id,user_type:1,_token: window.APP.csrfToken},
        success: function (response) {
            if (response.type === 'manual') {
                let htmlContent = response.content.replace(/\n/g, '<br>');
                $("#cvContent").html(htmlContent);
                $("#cvContentModel").modal('show');
            } else if (response.type === 'file') {
                var fileUrl = response.url;
                let viewerUrl = '';

                if (fileUrl.endsWith('.pdf')) {
                    viewerUrl = fileUrl;
                } else if (fileUrl.endsWith('.doc') || fileUrl.endsWith('.docx')) {
                    viewerUrl = `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(fileUrl)}`;
                } else {
                    $("#cvContent").html("Unsupported file type.");
                    $("#cvContentModel").modal('show');
                    return;
                }

                var iframe = '<iframe src="'+viewerUrl+'" width="100%" height="600px" style="border:none;"></iframe>';
                $("#cvContent").html(iframe);
                $("#cvContentModel").modal('show');
            } else {
                $("#cvContent").html("Invalid response.");
                $("#cvContentModel").modal('show');
            }
        }
    });
}

$(document).on('click', '.btn-arrow', function() {
    var $btn = $(this);
    var $currentRow = $btn.closest('tr');
    var $nextRow = $currentRow.next('.row-show');

    $nextRow.stop(true, true).slideToggle(200, function() {

        if ($nextRow.is(':visible')) {
            $btn.addClass('active');
        } else {
            $btn.removeClass('active');
        }
    });
});


$(document).on('click', '.open-cv-fit', function () {

    let candidateId   = $(this).data('id');
    let candidateName = $(this).data('name');

    // Set values in modal
    $('#candidateId').val(candidateId);
    $('#candidateName').text(' - ' + candidateName);

    // Optional: show loading text
    $('#cvFitContent').html('⏳ Loading CV analysis...');

    // Open modal
    $('#cvFitModal').modal('show');

    // OPTIONAL: AJAX call per row
    
});

$(document).on('click', '.close-cvFitModal', function () {
    $('#cvFitModal').modal('hide');
});

</script>
<script>
$(document).ready(function () {
    $.ajax({
        url: "{{ route('candidate.summary') }}",
        type: "POST",
        data: {
            candidate_id: "{{ $candidate->id }}",
            _token: "{{ csrf_token() }}"
        },
        beforeSend: function () {
            $('#summaryLoader').show();
            $('#summaryContent').hide();
        },
        success: function (response) {

            if (!response.success || !response.data) {
                $(".strength-text").html(`<strong>{{ __('key_strengths') }}</strong> -`);
                $('#summaryLoader').hide();
                $('#summaryContent').fadeIn(200);
                return;
            }

            const d = response.data;

            let strengthsHtml = '';
            if (Array.isArray(d.strengths) && d.strengths.length) {
                strengthsHtml = d.strengths.join(' | ');
            }

            if(d.role){
                $(".candidate-role").removeClass('d-none');
                $(".candidate-role").text(d.role);
            } else {
                $(".candidate-role").addClass('d-none');
            }

            $(".profile-text").html(`<strong>{{ __('summary_profile_title') }}</strong> ${d.profile ?? '-'}`);
            $(".strength-text").html(`<strong>{{ __('key_strengths') }}</strong> ${strengthsHtml ?? '-'}`);

            $('#summaryLoader').hide();
            $('#summaryContent').fadeIn(200);
        },
        error: function () {
            $(".strength-text").html(`<strong>{{ __('key_strengths') }}</strong> -`);
            $('#summaryLoader').hide();
            $('#summaryContent').fadeIn(200);
        }
    });
});

function showAllSkills() {
    document.getElementById('more-skills').style.display = 'inline';
    document.querySelector('.more-badge').style.display = 'none';
}
</script>

<script>
    // dropdown script 
    $(function () {

  let activeDropdown = null;
  let activeButton = null;

  // Open dropdown
  $(document).on('click', '.select-dropdown', function (e) {
    e.preventDefault();
    e.stopPropagation();

    const $btn = $(this);
    const $wrap = $btn.closest('.select-dropdown-wrapper');
    const $list = $wrap.find('.select-dropdown-list');

    // Close previous dropdown
    if (activeDropdown && activeDropdown[0] !== $list[0]) {
      closeDropdown(activeDropdown);
    }

    $list.data('wrap', $wrap);
    activeButton = $btn;

    // Move to body
    $('body').append($list);

    positionDropdown($btn, $list);

    $list.stop(true, true).slideDown(200);
    activeDropdown = $list;
  });

  // Reposition on scroll / resize
  $(window).on('scroll resize', function () {
    if (activeDropdown && activeButton) {
      positionDropdown(activeButton, activeDropdown);
    }
  });

  // Select option
  $(document).on('click', '.select-dropdown-list li', function (e) {
    e.stopPropagation();

    const $list = $(this).closest('.select-dropdown-list');
    const $wrap = $list.data('wrap');
    const $btn = $wrap.find('.select-dropdown');

    const icon =
      '<svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4 6L8 10L12 6" stroke="#A4A7AE" stroke-width="1.5"/></svg>';

    const text = $(this).html();
    $btn.html(text.trim() === '* Reset'
      ? 'Select one option' + icon
      : text + icon
    );

    closeDropdown($list);
  });

  // Click outside
  $(document).on('click', function () {
    if (activeDropdown) closeDropdown(activeDropdown);
  });

  // -------- FIXED POSITIONING FUNCTION --------
  function positionDropdown($btn, $list) {
    const rect = $btn[0].getBoundingClientRect();
    const listHeight = $list.outerHeight();

    const spaceBelow = window.innerHeight - rect.bottom;
    let top;

    if (spaceBelow < listHeight + 10) {
      // open UP
      top = rect.top - listHeight;
    } else {
      // open DOWN
      top = rect.bottom;
    }

    $list.css({
      position: 'fixed',
      top: top,
      left: rect.left,
      minWidth: rect.width,
      zIndex: 99999
    });
  }
  // -------------------------------------------

  function closeDropdown($list) {
    $list.slideUp(150, function () {
      const $wrap = $list.data('wrap');
      $wrap.append($list);
      $list.removeAttr('style');
    });
    activeDropdown = null;
    activeButton = null;
  }

});

</script>

@endsection