@extends('layouts/layoutMaster')

@section('title', 'Interview Schedule')

@section('vendor-style')
@vite([
'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
'resources/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.scss',
'resources/assets/vendor/libs/select2/select2.scss',
'resources/assets/vendor/libs/flatpickr/flatpickr.scss',
'resources/assets/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.scss'
])
@endsection

@section('vendor-script')
@vite([
'resources/assets/vendor/libs/select2/select2.js',
'resources/assets/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.js',
'resources/assets/vendor/libs/flatpickr/flatpickr.js',
'resources/assets/vendor/libs/sortablejs/sortable.js',
])
@endsection

@section('content')
<style>
    .dataTables_scroll {
        max-height: 200px;
    }

    .floating-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* animation: floatBounce 2.5s ease-in-out infinite; */
    }

    .wizard-header {
        background: white;
        border-bottom: 1px solid #f0e5e2ff;
        padding: 1rem 0;
    }
    .wizard-header .job-icon {
        width: 40px;
        height: 40px;
        background: #AB2B22;
        color: white;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .wizard-stepper {
        display: flex;
        justify-content: space-between;
        position: relative;
    }
    .wizard-stepper::before {
        content: '';
        position: absolute;
        top: 30%;
        left: 30px;
        right: 0;
        height: 3px;
        background: #f0e5e2ff;
        transform: translateY(-50%);
        z-index: 0;
    }
    .wizard-stepper .progress-line {
        position: absolute;
        top: 30%;
        right: 70px !important;
        left: 30px;
        height: 3px;
        background: #AB2B22;
        transform: translateY(-50%);
        z-index: 1;
        transition: width 0.3s ease;
    }
    .wizard-step {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
    }
    .wizard-step.disabled {
        cursor: not-allowed;
        opacity: 1.5;
    }
    .step-circle {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 2px solid #f0e5e2ff;
        background: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 14px;
        color: #9E9E9E;
        transition: all 0.3s ease;
    }
    .wizard-step.active .step-circle {
        border-color: #AB2B22;
        color: #AB2B22;
    }
    .wizard-step.completed .step-circle {
        background: #AB2B22;
        border-color: #AB2B22;
        color: white;
    }
    .step-title {
        margin-top: 8px;
        font-size: 13px;
        color: #9E9E9E;
        font-weight: 500;
    }
    .wizard-step.active .step-title {
        color: #1e293b;
    }
    .interview-type-card {
        border: 1px solid #f0e5e2ff;
        border-radius: 8px;
        padding: 1rem;
        cursor: pointer;
        transition: all 0.2s ease;
        background: #F3F4F6;
        position: relative;
    }
    .interview-type-card:hover {
        border-color: #cbd5e1;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }
    .interview-type-card.selected {
        border-color: #AB2B22;
        background: rgba(240, 127, 113, 0.05);
        box-shadow: 0 0 0 3px rgba(235, 67, 37, 0.1);
    }
    .interview-type-card .card-checkbox {
        position: absolute;
        top: 12px;
        right: 12px;
    }
    .interview-type-card .type-icon {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        background: #e2e2e2ff;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #9E9E9E;
        margin-bottom: 12px;
    }
    .interview-type-card.selected .type-icon {
        background: #AB2B22;
        color: white;
    }
    .config-card {
        background: #F8F9FA;
        border: 1px solid #f0e5e2ff;
        border-radius: 8px;
        margin-bottom: 1rem;
    }
    .config-card .card-header {
        background: transparent;
        border-bottom: 1px solid #f0e5e2ff;
        padding: 1rem 1.25rem;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .config-card .header-icon {
        width: 40px;
        height: 40px;
        border-radius: 8px;
        background: #AB2B22;
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .mode-option {
        border: 1px solid #f0e5e2ff;
        border-radius: 8px;
        padding: 12px;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    .mode-option:hover {
        border-color: #cbd5e1;
    }
    .mode-option.selected {
        border-color: #AB2B22;
        background: rgba(37, 99, 235, 0.05);
    }
    .question-item {
        background: white;
        border: 1px solid #f0e5e2ff;
        border-radius: 8px;
        padding: 12px;
        margin-bottom: 12px;
    }
    .pipeline-item {
        position: relative;
        padding-left: 60px;
        margin-bottom: 24px;
    }
    .pipeline-item::before {
        content: '';
        position: absolute;
        left: 19px;
        top: 40px;
        bottom: -24px;
        width: 2px;
        background: #f0e5e2ff;
    }
    .pipeline-item:last-child::before {
        display: none;
    }
    .pipeline-icon {
        position: absolute;
        left: 0;
        top: 0;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 2px solid #AB2B22;
        background: white;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #AB2B22;
    }
    .pipeline-content {
        background: white;
        border: 1px solid #f0e5e2ff;
        border-radius: 8px;
        padding: 1rem;
    }
    .channel-option {
        border: 1px solid #f0e5e2ff;
        border-radius: 8px;
        padding: 1rem;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .channel-option:hover {
        border-color: #cbd5e1;
    }
    .channel-option.selected {
        border-color: #AB2B22;
        background: rgba(37, 99, 235, 0.05);
    }
    .empty-state {
        text-align: center;
        padding: 3rem;
        border: 2px dashed #f0e5e2ff;
        border-radius: 8px;
        background: white;
    }
    .wizard-step-content {
        display: none;
    }
    .wizard-step-content.active {
        display: block;
    }
    .btn-primary {
        background-color: #AB2B22;
        border-color: #AB2B22;
    }
    .btn-primary:hover {
        background-color: #ee3c30ff;
        border-color: #ee3c30ff;
    }
    @media (max-width: 768px) {
        .step-title {
            display: none;
        }
    }
    .drag-handle {
        cursor: grab;
        user-select: none;
    }

    .drag-handle:active {
        cursor: grabbing;
    }

    .toggle-icon {
        transition: transform 0.2s ease;
    }

    .collapsing + .toggle-icon,
    .collapse.show + .toggle-icon {
        transform: rotate(180deg);
    }

    .sortable-ghost {
        opacity: 0.5;
    }

    /* #confirmScheduleModal .modal-content {
        display: flex;
        flex-direction: column;
        max-height: 90vh;
    }

    #confirmScheduleModal .modal-body {
        flex: 1 1 auto;
        overflow-y: auto;
        max-height: calc(90vh - 160px);
    }

    #confirmStageList {
        max-height: 55vh;
        overflow-y: auto;
        padding-right: 6px;
    }
    .modal-dialog.modal-xl {
        max-height: 90vh;
    } */

    
</style>

<!-- Lead List Table -->
<div class="card card-action">
    <div class="card-header border-bottom pb-0 mb-0 d-flex align-items-center justify-content-between">
        <div class="d-flex flex-column align-items-start">
            <h5 class="card-title mb-1 text-black">Interview Schedule</h5>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb custom-breadcrumb">
                    <!-- Home -->
                    <li class="breadcrumb-item">
                        <a href="{{ url('/dashboard') }}">
                            <i class="mdi mdi-home"></i> Home
                        </a>
                    </li>
                    <li class="breadcrumb-item" aria-current="page">
                        <a href="javascript:void(0);">
                            <i class="mdi mdi-account-group"></i> HR Management
                        </a>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">
                        <a href="javascript:void(0);" class="active-link">
                            HR Recruitment
                        </a>
                    </li>
                </ol>
            </nav>
        </div>
        <div class="d-flex justify-content-end align-items-center gap-2">
            <div>
                <span><i class="mdi mdi-briefcase-outline fs-5"></i></span>
                <span class="fs-6 fw-medium text-black" id="jobTitle">{{ $jobRequest->job_role_name }}</span>
                 <div class="text-end d-block">
                    <span class="fs-8 fw-medium text-white badge" style="background-color: {{ $jobRequest->entity_base_color ?? '' }};">{{ $jobRequest->entity_name }}</span>
                </div>
            </div>
           
        </div>
    </div>
    <div class="card-body pt-2 pb-4 mt-0">
        <div class="container">
            <div class="card" style="box-shadow: none;">
                <div class="card-body px-2 py-2">
                    <div class="wizard-stepper">
                        <div class="progress-line" id="progressLine" style="width: 0%"></div>
                        <div class="wizard-step active" data-step="0" onclick="goToStep(0)">
                            <div class="step-circle">1</div>
                            <div class="step-title">Interview Types</div>
                        </div>
                        <div class="wizard-step disabled" data-step="1" onclick="goToStep(1)">
                            <div class="step-circle">2</div>
                            <div class="step-title">Configuration</div>
                        </div>
                        <div class="wizard-step disabled" data-step="2" onclick="goToStep(2)">
                            <div class="step-circle">3</div>
                            <div class="step-title">Questions</div>
                        </div>
                        <div class="wizard-step disabled" data-step="3" onclick="goToStep(3)">
                            <div class="step-circle">4</div>
                            <div class="step-title">Review</div>
                        </div>
                        <div class="wizard-step disabled" data-step="4" onclick="goToStep(4)">
                            <div class="step-circle">5</div>
                            <div class="step-title">Send</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="wizard-step-content active" id="step-0">
                <div class="mb-4">
                    <h2 class="h4 fw-semibold mb-2">Select Interview Types</h2>
                    <p class="text-muted">Choose which interview stages this job position requires</p>
                </div>
                <div class="row g-3" id="interviewTypesGrid">
                    @if(isset($interviewCategoryType))
                        @foreach($interviewCategoryType as $type)
                        <div class="col-md-4">
                            <div class="interview-type-card" data-type="{{$type->sno}}" onclick="toggleInterviewType(this)">
                                <div class="form-check card-checkbox">  
                                    <input class="form-check-input" type="checkbox" 
                                        name="interview_types[]" 
                                        id="check-interview-type-{{$type->sno}}" 
                                        value="{{$type->sno}}" />
                                </div>
                                <div class="type-icon">
                                    @if($type->category_icon)
                                        <i class="{{$type->category_icon}}"></i>
                                    @else
                                        <i class="mdi mdi-account-outline"></i>
                                    @endif
                                </div>
                                <h6 class="fw-semibold mb-1">{{$type->interview_category_name ?? '-'}}</h6>
                                <p class="text-muted small mb-0 text-truncate">{{$type->interview_category_desc ?? ''}}</p>
                            </div>
                        </div>
                        @endforeach
                    @endif
                </div>
            </div>
            <div class="wizard-step-content" id="step-1">
                <div class="mb-4">
                    <h2 class="h4 fw-semibold mb-2">Configure Interviews</h2>
                    <p class="text-muted">Set the schedule and mode for each interview type</p>
                </div>
                <div class="accordion" id="configFormsContainer"></div>
            </div>
            <div class="wizard-step-content" id="step-2">
                <div class="mb-4">
                    <h2 class="h4 fw-semibold mb-2">Define Questions</h2>
                    <p class="text-muted">Add questions for each interview stage (optional)</p>
                </div>
                <div class="accordian" id="questionBuildersContainer"></div>
            </div>
            <div class="wizard-step-content" id="step-3">
                <div class="mb-4">
                    <h2 class="h4 fw-semibold mb-2">Review Pipeline</h2>
                    <p class="text-muted">Review your interview schedule before sending to the candidate</p>
                </div>
                <div class="card border" style="box-shadow: none;background-color: #F8F9FA;">
                    <div class="card-header">
                        <h5 class="mb-0 fw-semibold">Interview Pipeline</h5>
                    </div>
                    <div class="card-body">
                        <div id="pipelineContainer"></div>
                    </div>
                </div>
            </div>
            <input type="hidden" name="schedule_hidden_id" id="schedule_hidden_id" value="{{$scheduleId}}">
            <input type="hidden" name="first_stage_id" id="first_stage_id">
            <input type="hidden" name="sharecode" id="sharecode">
            <div class="wizard-step-content" id="step-4">
                <div class="mb-4">
                    <h2 class="h4 fw-semibold mb-2">Send to Candidate</h2>
                    <p class="text-muted">Choose how to notify the candidate about their interview schedule</p>
                </div>

                <div class="card mb-2 border" style="box-shadow: none;background-color: #F8F9FA;">
                    <div class="card-header">
                        <h6 class="mb-0 fw-semibold">Communication Channels</h6>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-12">
                                <div class="d-flex align-items-center justify-content-between gap-5 border border-2 rounded p-2">
                                    <div class="d-flex align-items-start flex-column justify-content-start gap-1">
                                        <label class="fw-semibold fs-6 text-black">Share Link</label>
                                        <small class="fs-7 text-dark font-medium">Send the URL to Send Interview Schedule to the Candidate</small>
                                    </div>
                                    <div class="input-group">
                                        <input type="text"
                                            id="shareLink"
                                            class="form-control"
                                            value="{{$url}}"
                                            readonly>

                                        <span class="input-group-text cursor-pointer" onclick="copyLink()">
                                            <i class="mdi mdi-content-copy"></i>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            <!-- <div class="col-md-12">
                                <label class="fs-5 fw-semibold text-black">OR</label>
                            </div> -->
                            <!-- <div class="col-md-4">
                                <div class="channel-option" data-channel="email" onclick="toggleChannel(this)">
                                    <input class="form-check-input" type="checkbox" id="channel-email" checked>
                                    <i class="mdi mdi-email-outline text-muted"></i>
                                    <span class="fw-medium">Email</span>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="channel-option" data-channel="whatsapp" onclick="toggleChannel(this)">
                                    <input class="form-check-input" type="checkbox" id="channel-whatsapp">
                                    <i class="mdi mdi-whatsapp text-muted"></i>
                                    <span class="fw-medium">WhatsApp</span>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="channel-option" data-channel="call" onclick="toggleChannel(this)">
                                    <input class="form-check-input" type="checkbox" id="channel-call">
                                    <i class="mdi mdi-phone-outline text-muted"></i>
                                    <span class="fw-medium">Call</span>
                                </div>
                            </div> -->
                        </div>
                    </div>
                </div>

                <!-- <div class="card mb-2 border" style="box-shadow: none;background-color: #F8F9FA;">
                    <div class="card-header d-flex align-items-center justify-content-between mb-0 pb-0">
                        <h6 class="mb-0 fw-semibold">Message Preview</h6>
                        <div class="text-end">
                            <button class="btn btn-primary" id="sendBtn" onclick="sendNotification()">
                                <i class="mdi mdi-send me-2"></i>Send to Candidate
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <textarea class="form-control bg-gray-100" id="messagePreview" rows="8" readonly></textarea>
                    </div>
                </div> -->
            </div>

            <div class="d-flex justify-content-between border-top pt-4 mt-4">
                <button class="btn btn-outline-secondary" id="backBtn" onclick="prevStep()" disabled>
                    Back
                </button>
                <button class="btn btn-primary" id="nextBtn" onclick="nextStep()">
                    Next
                </button>
            </div>
        </div>
    </div>
</div>

<!-- <div class="modal fade" id="confirmScheduleModal" tabindex="-1">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Confirm Interview Schedule</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">
        <p><strong>Job Role:</strong> {{ $jobRequest->job_role_name }}</p>
        <p>
          <strong>Entity:</strong>
          <span class="badge" style="background: {{ $jobRequest->entity_base_color }}">
            {{ $jobRequest->entity_name }}
          </span>
        </p>

        <hr>

        <h6>Interview Stages</h6>
        <ol id="confirmStageList"></ol>
      </div>

      <div class="modal-footer">
        <button class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
        <button class="btn btn-primary" id="confirmSubmitBtn" onclick="createInterviewSchedule()">
          Create Interview Schedule
        </button>
      </div>
    </div>
  </div>
</div> -->

    <div class="modal fade" id="confirmScheduleModal" tabindex="-1">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content shadow-lg border-0 rounded-4">

            <!-- Header -->
            <div class="modal-header ">
                <h5 class="modal-title fw-semibold">
                Confirm Interview Schedule
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <!-- Body -->
            <div class="modal-body px-4 py-3">

                <!-- Job Info -->
                <div class="mb-3">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                    <div class="text-muted small">Job Role</div>
                    <div class="fw-semibold">{{ $jobRequest->job_role_name }}</div>
                    </div>
                    <span class="badge px-3 py-2"
                        style="background: {{ $jobRequest->entity_base_color }}">
                    {{ $jobRequest->entity_name }}
                    </span>
                </div>
                </div>

                <hr>

                <!-- Interview Stages -->
                <h6 class="fw-semibold mb-3">Interview Stages</h6>
                <div id="confirmStageList" class="vstack gap-3"></div>

            </div>

            <!-- Footer -->
            <div class="modal-footer">
                <button class="btn btn-outline-secondary px-4" data-bs-dismiss="modal">
                Cancel
                </button>
                <button class="btn btn-primary px-4" onclick="createInterviewSchedule()">
                Create Interview Schedule
                </button>
            </div>

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



<!--begin::Modal - Add Question -->
<div class="modal fade" id="kt_modal_add_new_questions" tabindex="-1" aria-hidden="true"
    data-bs-keyboard="false" data-bs-backdrop="static" data-bs-focus="false">
    <!--begin::Modal dialog-->
    <div class="modal-dialog modal-xl">
        <!--begin::Modal content-->
        <div class="modal-content rounded">
            <!--begin::Modal header-->
            <div
                class="modal-header d-flex align-items-center justify-content-between border border-bottom-1 pb-0 mb-4">
                <div class="text-center mt-4">
                    <h3 class="text-center text-black">Add Interview Question - <span class="text-primary" id="quest_interview_category_name"></span></h3>
                </div>
                
                <!--begin::Close-->
                <div class="btn btn-sm btn-icon btn-active-color-primary rounded" style="border: 2px solid #000;" data-bs-dismiss="modal">
                    <!--begin::Svg Icon | path: icons/duotune/arrows/arr061.svg-->
                    <span class="svg-icon svg-icon-1">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="#000" xmlns="http://www.w3.org/2000/svg">
                            <rect opacity="0.5" x="6" y="17.3137" width="16" height="2" rx="1" transform="rotate(-45 6 17.3137)" fill="#000" />
                            <rect x="7.41422" y="6" width="16" height="2" rx="1" transform="rotate(45 7.41422 6)" fill="#000" />
                        </svg>
                    </span>
                    <!--end::Svg Icon-->
                </div>
                <!--end::Close-->
            </div>
            <!--end::Modal header-->
            <!--begin::Modal body-->
            <div class="modal-body pt-0 pb-10 px-10 px-xl-20">
                

                <!--begin::Heading-->
                <form id="addQuestionForm" action="{{ route('add_new_interview_question') }}" method="POST" >
                @csrf
                <div class="row">
                    <div class="d-flex justify-content-between">
                        <input type="hidden" name="job_role_id" value="{{ $jobRequest->job_role_id }}">
                        <input type="hidden" name="job_request_id" value="{{ $jobRequest->sno }}">
                        <input type="hidden" name="entity_id" id="entity_id" value="{{ $jobRequest->entity_id }}">
                        <input type="hidden" name="interview_category_id" id="interview_category_id" >
                        <div>
                            <span><i class="mdi mdi-briefcase-outline fs-5"></i></span>
                            <span class="fs-6 fw-medium text-black">{{ $jobRequest->job_role_name }}</span>
                            <div class="text-start d-block mt-2">
                                <span class="fs-8 fw-medium text-white badge" style="background-color: {{ $jobRequest->entity_base_color ?? '' }};">{{ $jobRequest->entity_name }}</span>
                            </div>
                            
                        </div>
                        <div class="d-flex justify-content-end align-items-center gap-2">

                            <button type="button"
                                class="btn btn-sm btn-outline-primary"
                                onclick="generateAIQuestions()">
                                <i class="mdi mdi-robot-outline me-1"></i>
                                Generate with AI
                            </button>
                        </div>
                    </div>
                    <div class="row mt-2 px-5">
                        <div class="col-lg-4 ">
                            <label class="text-black fs-7 mb-1 fw-medium">Thinking Time (Mins)</label>
                            <select class="form-select select3 " id="question_thinking_time" name="question_thinking_time">
                                <option value="15 Seconds">15 Seconds</option>
                                <option value="30 Seconds" selected>30 Seconds</option>
                                <option value="1 Minutes">1 Minutes</option>
                                <option value="1 Minutes 30 Seconds">1 Minutes 30 Seconds</option>
                                <option value="2 Minutes">2 Minutes</option>
                                <option value="2 Minutes 30 Seconds">2 Minutes 30 Seconds</option>
                            </select>
                        </div>
                        <div class="col-lg-4 ">
                            <label class="text-black fs-7 mb-1 fw-medium">Allowed Time (Mins)</label>
                            <select class="form-select select3 " id="question_allowed_time" name="question_allowed_time">
                                <option value="15 Seconds">15 Seconds</option>
                                <option value="30 Seconds">30 Seconds</option>
                                <option value="1 Minutes">1 Minutes</option>
                                <option value="1 Minutes 30 Seconds">1 Minutes 30 Seconds</option>
                                <option value="2 Minutes" selected>2 Minutes</option>
                                <option value="2 Minutes 30 Seconds">2 Minutes 30 Seconds</option>
                                <option value="3 Minutes">3 Minutes</option>
                                <option value="4 Minutes">4 Minutes</option>
                                <option value="5 Minutes">5 Minutes</option>
                                <option value="10 Minutes">10 Minutes</option>
                                <option value="15 Minutes">15 Minutes</option>
                            </select>
                        </div>
                        <div class="col-lg-4">
                            <label class="text-black fs-7 mb-1 fw-medium">Retakes</label>
                            <input type="number" id="question_retake" name="question_retake" class="form-control form-control-sm" placeholder="0" value="3"maxlength="2" />
                        </div>
                    </div>
                    <div id="questions_container" >
                    </div>
                    <div class="mb-1 mt-1">
                        <button type="button" class="btn btn-primary" id="add_Question">
                            <i class="mdi mdi-plus me-1"></i>
                        </button>
                    </div>
                </div>
                <div class="d-flex justify-content-between align-items-center mt-4">
                    <button type="reset" class="btn btn-outline-danger text-primary me-3" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" id="createbtn" class="btn btn-primary" onclick="addValidateForm()">Add
                        Question</button>
                </div>
                </form>
            </div>
            <!--end::Modal body-->
        </div>
        <!--end::Modal content-->
    </div>
    <!--end::Modal dialog-->
</div>
<!--end::Modal - Add  Question-->


<script>
    let questionConfigs = {}; 
    let activeQuestionCategory = null;
    var entity_id = @json($jobRequest->entity_id);
        var interviewTypeData = @json($interviewCategoryType);
        var job_role_id = @json($jobRequest->job_role_id);
        var job_request_id = @json($jobRequest->sno);
        var modeTypeData = @json($interviewModeList);
        const interviewTypes = {};
        let questionBankByCategory = {};
        let questionBank = [];
        interviewTypeData.forEach(type => {
            interviewTypes[type.sno] = {
                sno: type.sno,
                title: type.interview_category_name,
                icon: type.category_icon || 'mdi-account-outline'
            };
        });
        const modeOptions = modeTypeData.map(mode => ({
            value: mode.sno, // Adjust property names based on your DB columns
            label: mode.interview_mode_name,   // e.g., 'Video', 'In-Person'
            icon: mode.mode_icon || 'mdi mdi-help-circle-outline' // Fallback icon
        }));

        async function fetchQuestions(categoryId) {
            if (questionBankByCategory[categoryId]) return;

            try {
                const response = await $.ajax({
                    url: '/interview_questions_by_role_categ',
                    method: 'GET',
                    data: {
                        job_role_id,
                        interview_category_id: categoryId
                    }
                });

                // ✅ Normalize backend → frontend format
                const rawList = response?.data || [];

                questionBankByCategory[categoryId] = rawList.map(q => ({
                    id: q.sno,                   
                    text: q.field_name,           
                    input_type: q.field_value,    
                    options: q.field_option,       
                    thinking: q.thinking_time,    
                    allowed: q.allowed_time,      
                    retakes: q.retakes,  
                }));

                
            } catch (e) {
                questionBankByCategory[categoryId] = [];
            }
        }



        function openAddQuestionModal(type, title) {
            $('#interview_category_id').val(type);
            activeQuestionCategory = type;
            $('#quest_interview_category_name').text(title);
            $('#kt_modal_add_new_questions').modal('show');
        }


        function resolveScheduleDate(type) {
            const val = configs[type]?.schedule_datetime;

            if (typeof val === 'string' && val.trim() !== '') {
                return val;
            }

            // Always fallback to a real Date
            return new Date();
        }


        async function renderQuestionBuilders() {

            console.log(configs)

            var firstStage_id=$('#first_stage_id').val(); 

            if(firstStage_id){
                // updateLink(firstStage_id);
            }else{
                const firstType = selectedTypes.values().next().value;
                $('#first_stage_id').val(firstType); 
                // updateLink(firstType);
            }

            selectedTypes.forEach(type => {
                if (!Array.isArray(questions[type])) {
                    questions[type] = [];
                }
            });
            const container = document.getElementById('questionBuildersContainer');
            container.innerHTML = '';

            let index = 0;

            for (const type of selectedTypes) {
                const info = interviewTypes[type];

                // ✅ WAIT for fetch
                await fetchQuestions(type);

                // ✅ CATEGORY-SPECIFIC QUESTIONS
                
                const questionList = questionBankByCategory[type] || [];

                if (!questions[type] || questions[type].length === 0) {
                    questions[type] = questionList.map(q => q.id);
                }
                const selected = questions[type] || [];
                const allSelected =
                questionList.length > 0 &&
                selected.length === questionList.length &&
                questionList.every(q => selected.includes(q.id));
                
                const hasQuestions = questionList.length > 0;
                const collapseId = `collapse-${type}`;
                const headingId = `heading-${type}`;

                let questionsContentHtml = '';

                if (hasQuestions) {
                    
                    questionsContentHtml = questionList.map(q =>{
                        const cfg = questionConfigs[String(q.id)] || {};
                     return`<div class="d-flex align-items-start gap-2 py-4 flex-column bg-white px-4 mb-4 rounded border">
                            <div class="d-flex align-items-start gap-3 py-2">
                                <div class="form-check mt-1">
                                    <input class="form-check-input"
                                        type="checkbox"
                                        ${selected.includes(q.id) ? 'checked' : ''}
                                        onchange="toggleQuestion('${type}', ${q.id}, this.checked)">
                                </div>
                                <div class="flex-grow-1">
                                    <div class="fw-medium">${q.text}</div>
                                    <div class="d-flex flex-wrap gap-2 small text-muted mt-2">
                                        <span class="badge bg-light text-dark border d-flex align-items-center gap-1">
                                            <i class="mdi mdi-brain"></i>
                                            Thinking: <strong>${q?.thinking || '30 Seconds'}</strong>
                                        </span>

                                        <span class="badge bg-light text-dark border d-flex align-items-center gap-1">
                                            <i class="mdi mdi-clock-outline"></i>
                                            Allowed: <strong>${q?.allowed || '1 Minutes'}</strong>
                                        </span>

                                        <span class="badge bg-light text-dark border d-flex align-items-center gap-1">
                                            <i class="mdi mdi-repeat"></i>
                                            Retakes: <strong>${q?.retakes ?? 3}</strong>
                                        </span>
                                    </div>
                                </div>
                            </div>
                            
                           
                        </div>
                    `}).join('');
                } else {
                    questionsContentHtml = `
                        <div class="text-center py-5 w-100">
                            <i class="mdi mdi-clipboard-text-outline fs-1 text-muted"></i>
                            <p class="text-muted mt-2">No questions found for this ${info.title}.</p>
                            <button type="button"
                                class="btn btn-primary btn-sm mt-2"
                                onclick="openAddQuestionModal('${type}', '${info.title}')">
                                <i class="mdi mdi-plus me-1"></i>Add Question
                            </button>
                        </div>
                    `;
                }
                let html ='';
                let modeInfo = modeOptions.find(m => m.value == configs[type].mode);
                if(configs[type].mode !=4){
                    
                 html = `
                    <div class="accordion-item mb-3 rounded config-card px-3 py-3" data-type="${type}">
                        <h2 class="accordion-header" id="${headingId}" style="border-top: none;">
                            <button class="accordion-button collapsed"
                                type="button"
                                data-bs-toggle="collapse"
                                data-bs-target="#${collapseId}"
                                aria-expanded="${index === 0}">
                                <div class="d-flex align-items-center justify-content-between w-100">
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="header-icon">
                                            <i class="${info.icon}"></i>
                                        </div>
                                        <div>
                                            <h6 class="mb-0 fw-semibold">${info.title}
                                            <small class="ms-2">
                                                <span class="badge bg-info-subtle text-dark fs-8" ><i class=" ${modeInfo.icon} me-1"></i>${modeInfo.label}</span>
                                            </small>
                                            </h6>
                                            
                                            <small class="text-muted">
                                                ${selected.length} of ${questionList.length} selected
                                            </small>
                                        </div>
                                    </div>
                                    <div class="d-flex align-items-center gap-2">
                                    ${hasQuestions ? `
                                    <div class="form-check me-3 d-flex align-items-center gap-1" onclick="event.stopPropagation()">
                                        <input class="form-check-input"
                                            type="checkbox"
                                            ${allSelected ? 'checked' : ''}
                                            onchange="selectAllQuestions('${type}', this.checked)">
                                        <label class="form-check-label fw-medium">Select All</label>
                                    </div>` : ''}
                                    </div>
                                </div>
                            </button>
                        </h2>
                        <div id="${collapseId}"
                            class="accordion-collapse collapse ${index === 0 ? 'show' : ''}">
                            <div class="accordion-body rounded mt-2">
                                <div class="scroll-y max-h-400px p-2">
                                    ${questionsContentHtml}
                                </div>
                            </div>
                        </div>
                    </div>
                `;
                }else{
                    
                     html = `
                    <div class="accordion-item mb-3 rounded config-card px-3 py-3 bg-light" data-type="${type}">
                        <h2 class="accordion-header" id="${headingId}" style="border-top: none;">
                            <button class="accordion-button collapsed"
                                type="button"
                                data-bs-toggle="collapse"
                                data-bs-target="#${collapseId}"
                                aria-expanded="${index === 0}">
                                <div class="d-flex align-items-center justify-content-between w-100">
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="header-icon">
                                            <i class="${info.icon}"></i>
                                        </div>
                                        <div>
                                            <h6 class="mb-0 fw-semibold">${info.title}</h6>
                                        </div>
                                        <div>
                                        <small class="">
                                            <span class="badge bg-info-subtle text-dark fs-8" ><i class=" ${modeInfo.icon} me-1"></i>${modeInfo.label}</span>
                                            <span class="badge bg-primary-subtle text-primary fs-8"><i class="fa-regular fa-clock me-1"></i>${configs[type].schedule_time}</span>
                                        </small>
                                        </div>
                                    </div>
                                </div>
                            </button>
                        </h2>
                    </div>
                `;
                }
                
                container.insertAdjacentHTML('beforeend', html);
                
                index++;
            }
        }

        function updateQuestionConfig(qid, field, value) {
            qid = String(qid); 
            if (!questionConfigs[qid]) {
                questionConfigs[qid] = {};
            }
            questionConfigs[qid][field] = value;
        }

        function handleDurationInput(type, input) {
            input.value = input.value.replace(/[^0-9]/g, '');

            if (!configs[type]) return;

            configs[type].duration_value = Number(input.value);
            updateNextButton();
        }


        function handleDurationUnitChange(type, unit) {
            if (!configs[type]) return;

            configs[type].duration_unit = unit;
            updateNextButton();
        }


        // Fixed toggle function to refresh UI
        function toggleQuestion(type, questionId, isChecked) {
            questionId = Number(questionId); // ✅ normalize

            if (!Array.isArray(questions[type])) {
                questions[type] = [];
            }

            if (isChecked) {
                if (!questions[type].includes(questionId)) {
                    questions[type].push(questionId);
                }
            } else {
                questions[type] = questions[type].filter(id => id !== questionId);
            }

            renderQuestionBuilders(); // keep UI in sync
        }


        function addCustomQuestion(type) {
            // Logic to open a modal or append a blank question row
            alert('Redirecting to add question for category: ' + type);
        }
        
        let questions = {};
        interviewTypeData.forEach(type => {
            questions[type.sno] = [];
        });
        let currentStep = 0;
        let selectedTypes = new Set();
        let configs = {};
        let channels = { email: true, whatsapp: false, call: false };
        
        function updateProgress() {
            const steps = document.querySelectorAll('.wizard-stepper .wizard-step');
            const progress = document.getElementById('progressLine');

            const active = steps[currentStep];

            const rect = active.getBoundingClientRect();
            const parent = active.parentElement.getBoundingClientRect();

            const width = rect.left + rect.width/4 - parent.left; 

            progress.style.width = `${width}px`;
        }

        function toggleInterviewType(card) {
            const type = card.dataset.type;
            const checkbox = card.querySelector('input[type="checkbox"]');

            if (selectedTypes.has(type)) {
                selectedTypes.delete(type);
                card.classList.remove('selected');
                checkbox.checked = false;
            } else {
                selectedTypes.add(type);
                card.classList.add('selected');
                checkbox.checked = true;

                // ✅ FULL DEFAULT CONFIG
               configs[type] = {
                    duration_value: 1,
                    duration_unit: 'Days',
                    mode: modeOptions[0]?.value || null,
                    callConfirmation: false,
                    imidiateNotify: false,

                    // ✅ DEFAULTS
                    schedule_date: new Date().toISOString().split('T')[0],
                    schedule_time: '10:00 AM'
                };

                questions[type] = questions[type] || [];
            }

            updateNextButton();
        }

        function toggleChannel(element) {
            const channel = element.dataset.channel;
            const checkbox = element.querySelector('input[type="checkbox"]');
            channels[channel] = !channels[channel];
            checkbox.checked = channels[channel];
            element.classList.toggle('selected', channels[channel]);
            updateNextButton();
        }
        function goToStep(step) {
            if (step > currentStep) return;
            currentStep = step;
            updateUI();
        }
        function nextStep() {
            if (currentStep === 4) {
                openConfirmScheduleModal();
                return;
            }
            currentStep++;
            updateUI();
        }

        // function openConfirmScheduleModal() {
        //     const list = document.getElementById('confirmStageList');
        //     list.innerHTML = '';

        //     let order = 1;
        //     selectedTypes.forEach(type => {
        //         const info = interviewTypes[type];
        //         list.insertAdjacentHTML('beforeend', `
        //             <li>${info.title} - Interview Date :${formatDate(configs[type].schedule_date)} ${configs[type].schedule_time}</li>
        //         `);
        //         order++;
        //     });

        //     new bootstrap.Modal('#confirmScheduleModal').show();
        // }


        // function openConfirmScheduleModal() {
        //     const container = document.getElementById('confirmStageList');
        //     container.innerHTML = '';

        //     selectedTypes.forEach((type, index) => {
        //         const info = interviewTypes[type];
        //         const questionSelect = questions[type] || [];

        //         const questionHTML = questionSelect.length
        //             ? questionSelect.map((qid, i) => `
        //                 <li class="small text-muted d-flex justify-content-between">
        //                     Q${i + 1} · ${questionBankByCategory[type][qid].text} Thinking: ${questionConfigs[qid]?.thinking || '1 Min'}
        //                     · Allowed: ${questionConfigs[qid]?.allowed || '1 Min'}
        //                     · Retakes: ${questionConfigs[qid]?.retakes ?? 3}
        //                 </li>
        //             `).join('')
        //             : `<li class="small text-muted fst-italic">No questions assigned</li>`;

        //         container.insertAdjacentHTML('beforeend', `
        //             <div class="card border-0 shadow-sm rounded-3">
        //                 <div class="card-body">

        //                     <div class="d-flex justify-content-between align-items-center mb-2">
        //                         <div class="fw-semibold">
        //                              ${info.title}
        //                         </div>
        //                         <span class="badge bg-primary-subtle text-primary">
        //                             ${formatDate(configs[type].schedule_date)}
        //                             · ${configs[type].schedule_time}
        //                         </span>
        //                     </div>

        //                     <div class="mt-3">
        //                         <div class="fw-semibold small mb-1">Questions</div>
        //                         <ul class="ps-3 mb-0">
        //                             ${questionHTML}
        //                         </ul>
        //                     </div>

        //                 </div>
        //             </div>
        //         `);
        //     });

        //     new bootstrap.Modal(document.getElementById('confirmScheduleModal')).show();
        // }

        function openConfirmScheduleModal() {
            console.log("config:",configs)
            const container = document.getElementById('confirmStageList');
            container.innerHTML = '';
            let lastScheduledDate = new Date();

            [...selectedTypes].forEach((type, indextype) => {
                const info = interviewTypes[type];
                const selectedQuestionIds = questions[type] || [];
                const questionBank = questionBankByCategory[type] || [];
                let modeInfo = modeOptions.find(m => m.value == configs[type].mode);
                const questionHTML = selectedQuestionIds.length
                    ? selectedQuestionIds.map((qid, i) => {
                        const qObj = questionBank.find(q => q.id === qid);

                        return `
                            <li class="small text-muted">
                                <div class="fw-medium text-dark">
                                    Q${i + 1}. ${qObj?.text || 'Question not found'}
                                </div>
                                <div class="ps-3">
                                    Thinking: ${questionConfigs[qid]?.thinking || '30 Seconds'} ·
                                    Allowed: ${questionConfigs[qid]?.allowed || '1 Minutes'} ·
                                    Retakes: ${questionConfigs[qid]?.retakes ?? 3}
                                </div>
                            </li>
                        `;
                    }).join('')
                    : `<li class="small text-muted fst-italic">No questions assigned</li>`;

                
                let scheduled;
                if (indextype === 0) {
                    scheduled = getScheduledDateTime(configs[type], new Date());
                } else {
                    scheduled = getScheduledDateTime(configs[type], lastScheduledDate);
                }

                lastScheduledDate = scheduled; // update for next iteration

                const { date, time } = formatDateTime(scheduled);

                container.insertAdjacentHTML('beforeend', `
                    <div class="card border-0 shadow-sm rounded-3 mb-3">
                        <div class="card-body">

                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <div class="fw-semibold">
                                    ${info.title}
                                </div>
                                <div>
                                    <span class="badge bg-info-subtle text-dark">
                                        <span><i class=" ${modeInfo.icon} me-1"></i>${modeInfo.label}</span>
                                    </span>
                                    ${indextype == 0 ? '':
                                    `<span class="badge bg-primary-subtle text-primary">
                                        ${date}${configs[type].mode != 4 ? '' : ` · ${configs[type].schedule_time}`}
                                    </span>`
                                    }
                                    
                                </div>
                            </div>

                            <div class="mt-3">
                                <div class="fw-semibold small mb-2">Questions</div>
                                <ul class="ps-3 mb-0">
                                    ${questionHTML}
                                </ul>
                            </div>

                        </div>
                    </div>
                `);
            });

            new bootstrap.Modal(document.getElementById('confirmScheduleModal')).show();
        }



        function prevStep() {
            if (currentStep > 0) {
                currentStep--;
                updateUI();
            }
        }
        function updateUI() {
            document.querySelectorAll('.wizard-step-content').forEach((el, i) => {
                el.classList.toggle('active', i === currentStep);
            });

            document.querySelectorAll('.wizard-step').forEach((el, i) => {
                el.classList.remove('active', 'completed', 'disabled');
                if (i < currentStep) el.classList.add('completed');
                else if (i === currentStep) el.classList.add('active');
                else el.classList.add('disabled');

                const circle = el.querySelector('.step-circle');
                if (i < currentStep) {
                    circle.innerHTML = '<i class="mdi mdi-check"></i>';
                } else {
                    circle.textContent = i + 1;
                }
            });

            // const progress = (currentStep / 4) * 100;
            // document.getElementById('progressLine').style.width = progress + '%';

            updateProgress();

            document.getElementById('backBtn').disabled = currentStep === 0;
            
            if (currentStep === 4) {
                document.getElementById('nextBtn').innerHTML = '<i class="mdi mdi-check me-2"></i>Complete Setup';
            } else {
                document.getElementById('nextBtn').innerHTML = 'Next';
            }

            if (currentStep === 1) renderConfigForms();
            if (currentStep === 2) renderQuestionBuilders();
            if (currentStep === 3) renderPipeline();
            if (currentStep === 4) {
                updateMessagePreview();
                document.querySelectorAll('.channel-option').forEach(el => {
                    const channel = el.dataset.channel;
                    el.classList.toggle('selected', channels[channel]);
                });
            }

            updateNextButton();
        }
        function updateNextButton() {
            const btn = document.getElementById('nextBtn');
            let canProceed = true;

            if (currentStep === 0) {
                canProceed = selectedTypes.size > 0;
            } else if (currentStep === 1) {
                canProceed = Array.from(selectedTypes).every(type => {
                    const cfg = configs[type];

                    if (!cfg) return false;
                    if (cfg.mode == null) return false;

                    // Immediate notify → duration must be 0 seconds
                    if (cfg.imidiateNotify) {
                        return cfg.duration_value === 0 && cfg.duration_unit === 'Seconds';
                    }

                    // Normal case
                    return cfg.duration_value > 0 && !!cfg.duration_unit;
                });
            }else if (currentStep === 4) {
                const hasChannel = channels.email || channels.whatsapp || channels.call;
                // const hasContact = document.getElementById('candidateEmail').value || 
                //                    document.getElementById('candidatePhone').value;
                // canProceed = hasChannel && hasContact;
                canProceed = hasChannel;
            }

            btn.disabled = !canProceed;
        }
        function renderConfigForms() {
            const container = document.getElementById('configFormsContainer');
            container.innerHTML = '';

            let index = 0;

            selectedTypes.forEach(type => {
                const info = interviewTypes[type];
                if (!info) return;
                const config = configs[type];
                const collapseId = `collapse-${type}`;
                const headingId = `heading-${type}`;

                const html = `
                <div class="accordion-item mb-3 rounded config-card" data-type="${type}">
                    <h2 class="accordion-header" id="${headingId}" >
                     <span class="drag-handle cursor-move">
                        <div class="d-flex align-items-center justify-content-between px-3 py-2">
                            <span class="drag-handle cursor-move mb-1">
                                <i class="mdi mdi-menu-swap fs-2 text-muted"></i>
                            </span>
                            <button class="accordion-button collapsed flex-grow-1 " style="background-color: #F8F9FA;"
                                    type="button"
                                    data-bs-toggle="collapse"
                                    data-bs-target="#${collapseId}"
                                    aria-expanded="${index === 0}"
                                    aria-controls="${collapseId}">

                                <div class="d-flex align-items-center justify-content-between gap-5">
                                    <div class="d-flex align-items-center gap-2">
                                        <div class="header-icon">
                                            <i class="${info.icon}"></i>
                                        </div>
                                        <span class="fw-semibold">${info.title}</span>
                                    </div>
                                </div>
                            </button>
                        </div>
                        </span>
                    </h2>
                    <div id="${collapseId}"
                        class="accordion-collapse collapse ${index === 0 ? 'show' : ''}"
                        data-bs-parent="#configFormsContainer">
                        <div class="accordion-body">
                            <div class="row g-3 mb-4 bg-white rounded">
                                <div class="col-md-6" id="durationContainer-${type}">
                                    <label class="form-label">Duration<span class="text-danger">*</span></label>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <input type="text" class="form-control" id="duration_unit_${type}" placeholder="Enter Duration" value="${config.duration_value ?? 1}"
                                                inputmode="numeric"
                                                oninput="handleDurationInput('${type}', this)">
                                        </div>
                                        <div class="col-md-6">
                                            <select class="form-select select3 durationDrop" id="duration_type_${type}" onchange="handleDurationUnitChange('${type}', this.value)">
                                                <option value="Minutes">Minutes</option>
                                                <option value="Hours">Hours</option>
                                                <option value="Days" selected>Days</option>
                                                <option value="Month">Month</option>
                                                <option value="Seconds">Seconds</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-6"> 
                                    <label class="form-label">Call Confirmation<span class="text-danger">*</span></label>
                                    <div class="d-flex align-items-center justify-content-between border rounded p-2">
                                        <div class="d-flex align-items-center gap-3">
                                            <i class="mdi mdi-phone-outline"></i>
                                            <label class="fw-medium">Confirmation through call</label>
                                        </div>
                                        <div class="form-check form-switch mb-0">
                                            <input class="form-check-input"
                                                type="checkbox"
                                                ${config.callConfirmation ? 'checked' : ''}
                                                onchange="updateConfig('${type}', 'callConfirmation', this.checked)">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12 mb-4">
                                    <label class="form-label">Interview Mode <span class="text-danger">*</span></label>
                                    <div class="row g-2">
                                        ${modeOptions.map((opt,indx) => `
                                            <div class="col-6">
                                                <div class="mode-option ${config.mode === opt.value ? 'selected' : ''}" 
                                                    onclick="selectMode('${type}', '${opt.value}', this)">
                                                    <div class="d-flex justify-content-between align-items-center">
                                                        <div class="form-check">
                                                            <input class="form-check-input" type="radio"
                                                                name="mode-${type}"
                                                                value="${opt.value}"
                                                                ${configs[type].mode === opt.value ? 'checked' : ''}
                                                                onchange="selectMode('${type}', '${opt.value}', this)">
                                                            <label class="form-check-label d-flex align-items-center gap-2">
                                                                <i class=" ${opt.icon} text-muted"></i>
                                                                ${opt.label}
                                                            </label>
                                                        </div>
                                                        ${opt.value == 4 ?
                                                        `<div class="input-group input-group-merge w-30 interview-time-container" style="display:none;">
                                                            <span class="input-group-text">
                                                                <i class="mdi mdi-clock-outline"></i>
                                                            </span>
                                                            <input type="text"
                                                                class="form-control interview-time" 
                                                                data-type="${type}"
                                                                value="${resolveScheduleTimeOnly(type)}"
                                                                placeholder="Select Time">
                                                        </div>`
                                                        :""}
                                                    </div>
                                                </div>
                                            </div>
                                        `).join('')}
                                    </div>
                                </div>
                        </div>
                    </div>
                </div>
                `;

                container.insertAdjacentHTML('beforeend', html);
                index++;
            });

            initInterviewSortable();
            initSelect2();


             $('.interview-time').each(function () {
                if (this._flatpickr) this._flatpickr.destroy();

                flatpickr(this, {
                    enableTime: true,
                    noCalendar: true,
                    dateFormat: 'h:i K',   // ✅ 12-hour with AM/PM
                    time_24hr: false,
                    onChange: function (selectedDates, dateStr, instance) {
                        const type = instance.input.dataset.type;
                        configs[type].schedule_time = dateStr;
                    }
                });
            });
        }
        function initSelect2() {
            $('.durationDrop.select3').select2({
                width: '100%',
                placeholder: 'Select unit',
                minimumResultsForSearch: Infinity, // hide search if not needed
                dropdownParent: $('#configFormsContainer') // fixes z-index inside accordion
            });
        }
        function timeinitSelect2() {
            $('.thinkingTime.select3').select2({
                width: '100%',
                minimumResultsForSearch: Infinity, // hide search if not needed
                dropdownParent: $('#questionBuildersContainer') // fixes z-index inside accordion
            });
            $('.allowedTime.select3').select2({
                width: '100%',
                minimumResultsForSearch: Infinity, // hide search if not needed
                dropdownParent: $('#questionBuildersContainer') // fixes z-index inside accordion
            });
        }
        function updateConfig(type, field, value) {
            if (!configs[type]) return;

            configs[type][field] = value;

            if (field === 'imidiateNotify') {
                if (value) {
                    // ✅ FORCE VALID DURATION
                    configs[type].duration_value = 0;
                    configs[type].duration_unit = 'Seconds';

                    $(`#duration_unit_${type}`).val(0).prop('readonly', true);
                    $(`#duration_type_${type}`).val('Seconds').trigger('change').prop('disabled', true);
                } else {
                    configs[type].duration_value = '';
                    configs[type].duration_unit = 'Minutes';

                    $(`#duration_unit_${type}`).val('').prop('readonly', false);
                    $(`#duration_type_${type}`).val('Minutes').trigger('change').prop('disabled', false);
                }
            }

            updateNextButton();
        }

        function selectMode(type, mode, element) {
            configs[type].mode = mode;

            // element.closest('.row')
            //     .querySelectorAll('.mode-option')
            //     .forEach(el => el.classList.remove('selected'));

            // element.closest('.mode-option').classList.add('selected');

            const row = element.closest('.row');
            row.querySelectorAll('.mode-option')
                .forEach(el => el.classList.remove('selected'));

            const option = element.classList.contains('mode-option')
                ? element
                : element.closest('.mode-option');

            option.classList.add('selected');

            const radio = option.querySelector('input[type="radio"]');
            if (radio) {
                radio.checked = true;
            }

            row.querySelectorAll('.interview-time-container')
                .forEach(el => el.style.display = 'none');

            if (String(mode) === "4") {
                const interviewTimeInput = option.querySelector('.interview-time-container');
                if (interviewTimeInput) {
                    interviewTimeInput.style.display = 'flex';
                }
            }

            updateNextButton();
        }

        // function renderQuestionBuilders() {
        //     const container = document.getElementById('questionBuildersContainer');
        //     container.innerHTML = '';

        //     let index = 0;
        //     selectedTypes.forEach(type => {
        //         const info = interviewTypes[type];
        //         const selected = questions[type] || [];

        //         const allSelected = questionBank.length &&
        //             questionBank.every(q => selected.includes(q.id));

        //         const collapseId = `collapse-${type}`;
        //         const headingId = `heading-${type}`;

        //         const questionsHtml = questionBank.map((q, i) => `
        //             <div class="d-flex align-items-start gap-2 py-4 flex-column bg-white px-4 mb-4 rounded">
        //                 <div class="d-flex align-items-start gap-3 py-2">
        //                     <div class="form-check mt-1">
        //                         <input class="form-check-input"
        //                             type="checkbox"
        //                             ${selected.includes(q.id) ? 'checked' : ''}
        //                             onchange="toggleQuestion('${type}', '${q.id}', this.checked)">
        //                     </div>
        //                     <div class="flex-grow-1">
        //                         <div class="fw-medium">${q.text}</div>
        //                     </div>
        //                 </div>
        //                 <div class="row">
        //                     <div class="col-lg-4 mb-2">
        //                         <label class="text-black fs-7 mb-1 fw-medium">Thinking Time (in Mins)<span class="text-danger">*</span></label>
        //                         <input type="text" class="form-control" placeholder="Enter Thinking Time" />
        //                     </div>
        //                     <div class="col-lg-4 mb-2">
        //                         <label class="text-black fs-7 mb-1 fw-medium">Allowed Time (in Mins)<span class="text-danger">*</span></label>
        //                         <input type="text" class="form-control" placeholder="Enter Allowed Time" />
        //                     </div>
        //                     <div class="col-lg-4 mb-2">
        //                         <label class="text-black fs-7 mb-1 fw-medium">Retake Count<span class="text-danger">*</span></label>
        //                         <input type="text" class="form-control" placeholder="Enter Retake Count" />
        //                     </div>
        //                 </div>
        //             </div>
        //         `).join('');

        //         const html = `
        //             <div class="accordion-item mb-3 rounded config-card px-3 py-3" data-type="${type}">
        //                 <h2 class="accordion-header" id="${headingId}" style="border-top: none;">
        //                     <button class="accordion-button collapsed" type="button"
        //                         data-bs-toggle="collapse"
        //                         data-bs-target="#${collapseId}"
        //                         aria-expanded="${index === 0}"
        //                         aria-controls="${collapseId}"
        //                         style="background-color: #F8F9FA;">
        //                         <div class="d-flex align-items-center justify-content-between gap-5 w-100">
        //                             <div class="d-flex align-items-center gap-2">
        //                                 <div class="header-icon">
        //                                     <i class=" ${info.icon}"></i>
        //                                 </div>
        //                                 <div>
        //                                     <h6 class="mb-0 fw-semibold">${info.title}</h6>
        //                                     <small class="text-muted">
        //                                         ${selected.length} of ${questionBank.length} selected
        //                                     </small>
        //                                 </div>
        //                             </div>
        //                             <div class="form-check">
        //                                 <input class="form-check-input"
        //                                     type="checkbox"
        //                                     ${allSelected ? 'checked' : ''}
        //                                     onchange="selectAllQuestions('${type}', this.checked)">
        //                                 <label class="form-check-label fw-medium">
        //                                     Select All
        //                                 </label>
        //                             </div>
        //                         </div>
        //                     </button>
        //                 </h2>
        //                 <div id="${collapseId}"
        //                     class="accordion-collapse collapse ${index === 0 ? 'show' : ''}"
        //                     data-bs-parent="#questionBuildersContainer">
        //                     <div class="accordion-body mx-4 my-4">
        //                         <div class="row scroll-y max-h-250px">
        //                             ${questionsHtml}
        //                         </div>
        //                     </div>
        //                 </div>
        //             </div>
        //         `;

        //         container.insertAdjacentHTML('beforeend', html);
        //         index++;
        //     });
        // }
        function selectAllQuestions(type, checked) {
            const list = questionBankByCategory[type] || [];
            questions[type] = checked ? list.map(q => q.id) : [];
            renderQuestionBuilders();
        }

        function resolveScheduleDateOnly(type) {
            return configs[type]?.schedule_date || '';
        }

        function resolveScheduleTimeOnly(type) {
            return configs[type]?.schedule_time || '';
        }
        function addQuestion(type, title) {
           $('#interview_category_id').val(type);
           $('#quest_interview_category_name').text(title);
            const id = 'q_' + Date.now();
            questions[type].push({ id, text: '', type: 'text' });
            renderQuestionBuilders();
        }
        function updateQuestion(type, id, field, value) {
            const q = questions[type].find(q => q.id === id);
            if (q) q[field] = value;
        }
        function removeQuestion(type, id) {
            questions[type] = questions[type].filter(q => q.id !== id);
            renderQuestionBuilders();
        }
        function renderPipeline() {
            const container = document.getElementById('pipelineContainer');
            console.log(configs)
            if (selectedTypes.size === 0) {
                container.innerHTML = `
                    <div class="text-center py-5">
                        <p class="text-muted">No interviews configured yet</p>
                        <p class="text-muted small">Select interview types to build your pipeline</p>
                    </div>
                `;
                return;
            }


            let html = '';
            let index = 1;
           
            selectedTypes.forEach(type => {
                const info = interviewTypes[type];
                const config = configs[type];
                const modeInfo = modeOptions.find(m => m.value == config.mode);
                console.log(configs)
                console.log(config)
                console.log(modeOptions)
                html += `
                    <div class="pipeline-item">
                        <div class="pipeline-icon">
                            <i class=" ${info.icon}"></i>
                        </div>
                        <div class="pipeline-content">
                            <div class="d-flex justify-content-between align-items-start flex-wrap gap-2">
                                <div>
                                    <div class="d-flex align-items-center gap-2 mb-1 flex-wrap">
                                        <h6 class="mb-0 fw-semibold">${info.title}</h6>
                                        <span class="badge bg-secondary">Stage ${index}</span>
                                    </div>
                                    <div class="d-flex align-items-center gap-3 text-muted small flex-wrap">
                                        
                                        <span><i class=" ${modeInfo.icon} me-1"></i>${modeInfo.label}</span>
                                    </div>
                                </div>
                                <div class="d-flex gap-1">
                                
                                </div>
                            </div>
                        </div>
                    </div>
                `;
                index++;
            });


            container.innerHTML = html;
          

            $(".common_datepicker").datepicker({
                format: "yyyy-mm-dd",
                autoclose: true,
                todayHighlight: true
            });

            $('.interview-time').each(function () {
                if (this._flatpickr) this._flatpickr.destroy();

                flatpickr(this, {
                    enableTime: true,
                    noCalendar: true,
                    dateFormat: 'h:i K',   // ✅ 12-hour with AM/PM
                    time_24hr: false,
                    onChange: function (selectedDates, dateStr, instance) {
                        const type = instance.input.dataset.type;
                        configs[type].schedule_time = dateStr;
                    }
                });
            });
            
        }

        

        function formatDate(dateString) {
            const date = new Date(dateString);

            // Check if the date is valid
            if (isNaN(date.getTime())) {
                return '-'; // Return '-' if the date is invalid
            }

            // Get the day, month (abbreviated), and year
            const day = String(date.getDate()).padStart(2, '0'); // Get day and pad with leading zero
            const month = date.toLocaleString('default', { month: 'short' }); // Get abbreviated month
            const year = date.getFullYear(); // Get full year

            // Construct and return the formatted date string
            return `${day}-${month}-${year}`; // Format as DD-MMM-YYYY
        }

        function handleDateChange(dateStr, type) {
            configs[type].schedule_date = dateStr.value;
            console.log(`Date changed: ${dateStr.value} for type: ${type}`);
        }

        function formatTime(seconds) {
            const mins = Math.floor(seconds / 60);
            const secs = seconds % 60;
            return `${mins}:${String(secs).padStart(2,'0')}`;
        }
        function removeInterview(type) {
            selectedTypes.delete(type);
            const card = document.querySelector(`.interview-type-card[data-type="${type}"]`);
            if (card) {
                card.classList.remove('selected');
                card.querySelector('input[type="checkbox"]').checked = false;
            }
            renderPipeline();
        }
      
        function updateMessagePreview() {
            const jobTitle = document.getElementById('jobTitle')?.textContent || 'Position';
            let interviewList = '';
            let index = 1;

            selectedTypes.forEach(type => {
                const info = interviewTypes[type];
                const config = configs[type];
                const dateStr = config.duration ? 
                    new Date(config.duration).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' }) : 
                    'TBD';
                interviewList += `${index}. ${info.title} - ${dateStr} (${config.duration} min)\n`;
                index++;
            });

            const message = `Dear Candidate,

                We are pleased to inform you that you have been shortlisted for the ${jobTitle} position.

                Your interview schedule:

                ${interviewList}
                Please confirm your availamdility by responding to this message.

                Best regards,
                HR Team`;

            // document.getElementById('messagePreview').value = message;
        }
        function sendNotification() {
            const btn = document.getElementById('sendBtn');
            btn.disabled = true;
            btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Sending...';

            setTimeout(() => {
                btn.innerHTML = '<i class="mdi mdi-check-circle me-2"></i>Sent Successfully';
                btn.classList.remove('btn-primary');
                btn.classList.add('btn-success');
            }, 1500);
        }
        // document.getElementById('candidateEmail').addEventListener('input', updateNextButton);
        // document.getElementById('candidatePhone').addEventListener('input', updateNextButton);
        updateUI();
</script>


<script>
    function buildInterviewPayload() {
        var sharecode= $('#sharecode').val();
        var shareLink= $('#shareLink').val();
        return {
            job_request_id,
            entity_id,
            // sharecode,
            // shareLink,
            interview_stages: Array.from(selectedTypes).map(type => ({
                interview_category_id: type,
                config: {
                    duration_value: configs[type]?.duration_value || 0,
                    interview_date: configs[type]?.schedule_date || '',
                    interview_time: configs[type]?.schedule_time || '',
                    duration_unit: configs[type]?.duration_unit || 'Minutes',
                    mode: configs[type]?.mode,
                    call_confirmation: configs[type]?.callConfirmation || false,
                    immediate_notify: configs[type]?.imidiateNotify || false
                },
            questions: (questions[type] || []).map(qid => ({
                    question_id: qid,
                    thinking_time: questionConfigs[qid]?.thinking || '30 Seconds',
                    allowed_time: questionConfigs[qid]?.allowed || '1 Minutes',
                    retakes: questionConfigs[qid]?.retakes ?? 3,
                    schedule_datetime: configs[type].schedule_datetime
                    
                }))
            })),
            channels
        };
    }


function getDefaultInterviewDateTime() {
    const d = new Date();
    d.setDate(d.getDate() + 1); // +1 day

    const day   = String(d.getDate()).padStart(2, '0');
    const month = d.toLocaleString('en-US', { month: 'short' });
    const year  = d.getFullYear();
    const hour  = String(d.getHours()).padStart(2, '0');
    const min   = String(d.getMinutes()).padStart(2, '0');

    return `${day}-${month}-${year} ${hour}:${min}`;
}

function saveInterviewProcess() {
    $.ajax({
        url: '/save-interview-process',
        type: 'POST',
        data: JSON.stringify(buildInterviewPayload()),
        contentType: 'application/json',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success() {
            toastr.success('Interview process saved successfully');
        },
        error() {
            toastr.error('Failed to save interview process');
        }
    });
}

</script>
<script>
    function initInterviewSortable() {
        const container = document.getElementById('configFormsContainer');

        if (!container) return;

        new Sortable(container, {
            animation: 150,
            handle: '.drag-handle',
            ghostClass: 'sortable-ghost',
            filter: 'input, select, textarea, button, label',
            preventOnFilter: false,
            onEnd() {
                syncInterviewOrder();
            }
        });
    }

    function syncInterviewOrder() {
        const cards = document.querySelectorAll('#configFormsContainer .config-card');

        selectedTypes = new Set(
            Array.from(cards).map(card => card.dataset.type)
        );
        const firstType = selectedTypes.values().next().value;
        $('#first_stage_id').val(firstType); 
        // console.log("First value:", firstType);
        // updateLink(firstType)
    }

    function copyLink() {
        const input = document.getElementById('shareLink');

        // Create temp input (works everywhere)
        const tempInput = document.createElement('input');
        tempInput.value = input.value;
        document.body.appendChild(tempInput);

        tempInput.select();
        tempInput.setSelectionRange(0, 99999); // mobile support

        try {
            document.execCommand('copy');
            toastr.success('Link copied to clipboard');
        } catch (err) {
            toastr.error('Failed to copy link');
        }

        document.body.removeChild(tempInput);
    }
</script>

<script>

    function createQuestionBlock(isDefault = false) {
        // Delete button only for non-default blocks
        var deleteButtonHTML = isDefault ? '' : `
            <div class="col-lg-1">
                <a href="javascript:;" class="btn btn-outline-danger mt-4 px-1 py-2 del-question">
                    <i class="mdi mdi-delete fs-4"></i>
                </a>
            </div>
        `;

        var block = `
        <div class="altmobile-row rounded mb-3">
        <div class="payment_mode_question_block px-2 py-2">
                <div class="row my-2">
                <div class="col-lg-11">
                    <div class="row">
                        <div class="col-lg-12 mb-3">
                            <label class="text-dark mb-1 fs-6 fw-semibold">Question Name<span class="text-danger">*</span></label>
                            <input type="text" class="form-control label-name" name="label_names[]" placeholder="Enter Question Name" />
                            
                        </div>
                        <div class="col-lg-4 mb-3">
                            <label class="text-dark mb-1 fs-6 fw-semibold">Input Value<span class="text-danger">*</span></label>
                            <select class="select3 questInpt form-select input-value-select" name="label_values[]" data-bs-parent="#questions_container">
                                <option value="">Select Input Value</option>
                                <option value="text_field">Text Field</option>
                                <option value="check_box">Check Box</option>
                                <option value="radio_button">Radio Button</option>
                                <option value="list_box">List Box</option>
                               
                            </select>
                            
                        </div>

                        <div class="col-lg-6 mb-3 mt-3 option-blocks"></div>


                    </div>
                </div>
                ${deleteButtonHTML}
            </div>
            <hr class="bg-light m-1">
            </div>
        </div>
        `;
        return block;
    }
    
    $(document).ready(function(){
        var $firstBlock = $(createQuestionBlock(true));
        $('#questions_container').append($firstBlock);
        initializeBlock($firstBlock);
    });

    // Add new question block
    $('#add_Question').on('click', function() {
        var $block = $(createQuestionBlock(false));
        $('#questions_container').append($block);
        initializeBlock($block);
    });

    // Initialize block behavior
    function initializeBlock($block){
        // $block.find('.select3').select2({width: '100%'});
        $block.find('.questInpt.select3').select2({
                width: '100%',
                dropdownParent: $('#questions_container')
            });
        handleInputValueChange($block);

        // Delete question block
        $block.find('.del-question').on('click', function() {
            $block.remove();
        });
    }

    
    // Handle Input Value (Main Section)
    function handleInputValueChange($block) {
        $block.find('.input-value-select').on('change', function() {
            var value = $(this).val();
            var $container = $block.find('.option-blocks');
            $container.empty();

            if(value === 'check_box' || value === 'radio_button' || value === 'list_box') {
                var type = value;
                var uniqueId = 'accordion-' + type + '-' + new Date().getTime();
                var typeText = type.replace('_',' ');
                typeText = typeText.charAt(0).toUpperCase() + typeText.slice(1);

                var html = `
                <div class="accordion">
                <div class="accordion-item mb-2">
                    <h2 class="accordion-header">
                    <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#${uniqueId}"> ${typeText} </button>
                    </h2>
                    <div id="${uniqueId}" class="accordion-collapse collapse">
                    <div class="accordion-body px-2">
                        <div class="scroll-y max-h-200px ${type}-container p-3" style="overflow-x: hidden;">
                        <div class="option-item row mb-2">
                            <div class="col-lg-10">
                            <label class="text-dark mb-1 fs-6 fw-semibold">Option 1 <span class="text-danger">*</span></label>
                            <textarea class="form-control" rows="1" placeholder="Enter Option 1"></textarea>
                            </div>
                            <div class="col-lg-2 d-flex justify-content-center align-items-center mb-1"></div>
                        </div>
                        </div>
                        <div class="mb-1 mt-1">
                        <button type="button" class="btn btn-primary mt-2 add-option-btn">Add Option</button>
                        </div>
                    </div>
                    </div>
                </div>
                </div>`;
                $container.append(html);

                $container.find('.add-option-btn').on('click', function(e){
                    e.preventDefault();
                    var $optionsContainer = $container.find(`.${type}-container`);
                    var nextNum = $optionsContainer.find('.option-item').length + 1;
                    var $newRow = $(`
                        <div class="option-item row mb-2">
                        <div class="col-lg-10">
                            <label class="text-dark mb-1 fs-6 fw-semibold">Option ${nextNum} <span class="text-danger">*</span></label>
                            <textarea class="form-control" rows="1" placeholder="Enter Option ${nextNum}"></textarea>
                        </div>
                        <div class="col-lg-2 d-flex justify-content-start align-items-end mb-1">
                            <div>
                            <a href="javascript:;" class="btn btn-outline-danger delete-option w-100 h-100 d-flex justify-content-center align-items-center p-1">
                                <i class="mdi mdi-delete fs-4"></i>
                            </a>
                            </div>
                        </div>
                        </div>
                    `);
                    $optionsContainer.append($newRow);

                    $newRow.find('.delete-option').on('click', function() {
                        $newRow.remove();
                        updateOptionNumbers($optionsContainer);
                        updateDependsSelect($block);
                    });

                    $newRow.find('textarea').on('input', function() {
                        updateDependsSelect($block);
                    });

                    updateDependsSelect($block);
                });

                $container.find('textarea').on('input', function() {
                    updateDependsSelect($block);
                });
                updateDependsSelect($block);
            }
        });
    }

    // Update depends select based on main options only
    function updateDependsSelect($block) {
        var $dependsSelect = $block.find('.depends-select');
        $dependsSelect.empty().append('<option value="">Select Label</option>');
        $block.find('.option-blocks textarea').each(function(){
            var val = $(this).val().trim();
            if(val) $dependsSelect.append(`<option value="${val}">${val}</option>`);
        });
    }

    // Update numbering for main options
    function updateOptionNumbers($optionsContainer){
        $optionsContainer.find('.option-item').each(function(index){
            $(this).find('label').html(`Option ${index+1} <span class="text-danger">*</span>`);
            $(this).find('textarea').attr('placeholder', `Enter Option ${index+1}`);
        });
    }

    // Update numbering for depends local options
    function updateDepOptionNumbers($container){
        $container.find('.option-item').each(function(index){
            $(this).find('label').html(`Option ${index+1} <span class="text-danger">*</span>`);
            $(this).find('textarea').attr('placeholder', `Enter Option ${index+1}`);
        });
    }
</script>

<script>
    function addValidateForm() {
        const $form = $('#addQuestionForm');
        const $blocks = $('#questions_container .payment_mode_question_block');
        let isValid = true;

        // Reset old validation
        $form.find('.is-invalid').removeClass('is-invalid');
        $form.find('.invalid-feedback-dynamic').remove();
        const $question_retake = $('#question_retake');
        const question_retake = parseInt($question_retake.val(), 10);

        const $question_allowed_time = $('#question_allowed_time');
        const question_allowed_time = $question_allowed_time.val();

        const $question_thinking_time = $('#question_thinking_time');
        const question_thinking_time = $question_thinking_time.val();

        if (!question_thinking_time) {
            showError($question_thinking_time, "Thinking Time is Required.");
            isValid = false;
        }

        if (!question_allowed_time) {
            showError($question_allowed_time, "Allowed Time is Required.");
            isValid = false;
        }
        if (isNaN(question_retake) || question_retake < 1) {
            showError($question_retake, "Retakes must be at least 1.");
            isValid = false;
        }

        

        

        $blocks.each(function(index) {
            const $block = $(this);
            const $labelName = $block.find('.label-name');
            const $inputValue = $block.find('.input-value-select');
            const labelName = $labelName.val()?.trim();
            const inputValue = $inputValue.val();

            if (!labelName) {
                showError($labelName, "Question Name is required.");
                isValid = false;
            }

            if (!inputValue || inputValue === "Select Input Value") {
                showError($inputValue.next('.select2'), "Please select an Input Value.");
                isValid = false;
            }

            if (['check_box', 'radio_button', 'list_box'].includes(inputValue)) {
                const $options = $block.find('.option-blocks textarea');
                if ($options.length === 0) {
                    showError($block.find('.option-blocks'), "Option is required.");
                    isValid = false;
                } else {
                    $options.each(function() {
                        if (!$(this).val().trim()) {
                            showError($(this), "Option is required.");
                            isValid = false;
                        }
                    });
                }
            }
        });

        if (!isValid) {
            $('html, body').animate({
                scrollTop: $('.is-invalid').first().offset().top - 120
            }, 400);
            return false;
        }

       
        submitQuestionsViaAjax($form);
    }

    // Helper: Show inline validation message
    function showError($el, message) {
        $el.addClass('is-invalid');
        if ($el.next('.invalid-feedback-dynamic').length === 0) {
            $(`<div class="invalid-feedback invalid-feedback-dynamic">${message}</div>`).insertAfter($el);
        }

        $el.on('input change', function() {
            if ($(this).val()?.trim()) {
                $(this).removeClass('is-invalid');
                $(this).next('.invalid-feedback-dynamic').remove();
            }
        });
    }

    function renderQuestionLoading(type, info) {
        return `
            <div class="text-center py-5">
                <div class="spinner-border text-primary mb-2"></div>
                <p class="text-muted mb-0">Loading questions for ${info.title}...</p>
            </div>
        `;
    }


    function submitQuestionsViaAjax($form) {
        const $btn = $('#createbtn');
        const originalBtnHtml = $btn.html();

        // 1. Disable button and show loading state
        $btn.prop('disabled', true);
        $btn.html('<span class="spinner-border spinner-border-sm me-2"></span> Adding...');

        // 2. Prepare Data
        // We can use FormData to automatically capture all inputs (including hidden ones or files)
        const formData = new FormData($form[0]);

        // 3. AJAX Call
        $.ajax({
            url: $form.attr('action'), // Uses the action defined in your <form> tag
            type: 'POST',
            data: formData,
            processData: false, // Required for FormData
            contentType: false, // Required for FormData
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') // Best practice for Laravel
            },
            success: function(response) {
                const modalElement = document.getElementById('kt_modal_add_new_questions');
                const modalInstance = bootstrap.Modal.getInstance(modalElement);
                modalInstance?.hide();
                if (activeQuestionCategory) {
                    delete questionBankByCategory[activeQuestionCategory];
                }

                $('#addQuestionForm')[0].reset();
                $('#questions_container').empty(); 
                
                $btn.prop('disabled', false);
                $btn.html(originalBtnHtml);
                toastr.success('Questions added successfully.');
              
                renderQuestionBuilders();
               
            },
            error: function(xhr) {
                // Error Logic
                const errorMsg = xhr.responseJSON?.message || 'Something went wrong.';
                $btn.prop('disabled', false);
                $btn.html(originalBtnHtml);
                toastr.error(errorMsg);
            },
            complete: function() {
        }
    });
}

    
    function createInterviewSchedule() {
    $.ajax({
        url: '/create-interview-schedule',
        type: 'POST',
        data: JSON.stringify(buildInterviewPayload()),
        contentType: 'application/json',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success(res) {
            if (!res.status) return;

            const baseUrl = window.location.origin;
            const interviewUrl = `${baseUrl}/interview_login/${res.share_code}`;

            $('#shareLink').val(interviewUrl);

            toastr.success('Interview schedule created successfully');

            window.location.href = '/hr_recruitment/job_request';

            bootstrap.Modal.getInstance(
                document.getElementById('confirmScheduleModal')
            ).hide();
        }
    });
}


    function updateLink(stage_id) {
        var schedule_id = $('#schedule_hidden_id').val();
        var encrypt_id = `${schedule_id}~${stage_id}`;
        var share_code = btoa(encrypt_id); // Base64 encode the encrypt_id
        console.log("link ", share_code)
        const baseUrl = window.location.origin;
        var interviewUrl = `${baseUrl}/interview_login/${share_code}`;
        $('#shareLink').val(interviewUrl); 
        $('#sharecode').val(share_code); 
    }

</script>
<script>
function generateAIQuestions() {
    const jobRoleId = {{ $jobRequest->job_role_id }};
    const interviewCategoryId = $('#interview_category_id').val();

    if (!interviewCategoryId) {
        toastr.warning('Please select an interview category');
        return;
    }

    const btn = event.target.closest('button');
    const originalHtml = btn.innerHTML;

    btn.disabled = true;
    btn.innerHTML = `<span class="spinner-border spinner-border-sm me-1"></span> Generating...`;

    $.ajax({
        url: '/ai/generate-interview-questions',
        type: 'POST',
        data: {
            job_role_id: jobRoleId,
            interview_category_id: interviewCategoryId
        },
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        success(res) {
            if (!res.status || !res.questions.length) {
                toastr.warning('No AI questions generated');
                return;
            }

            // Clear existing blocks
            if (res.questions.length) {
                $('#questions_container').empty();
            }


            res.questions.forEach((q, index) => {
                const $block = $(createQuestionBlock(index === 0));
                $block.find('.label-name').val(q.question);
                $block.find('.input-value-select')
                      .val('text_field')
                      .trigger('change');

                $('#questions_container').append($block);
                initializeBlock($block);
            });

            toastr.success(`${res.questions.length} AI questions added`);
        },
        error() {
            toastr.error('AI question generation failed');
        },
        complete() {
            btn.disabled = false;
            btn.innerHTML = originalHtml;
        }
    });
}

function getScheduledDateTime(config, baseDate = new Date()) {
    let result = new Date(baseDate);

    const value = Number(config.duration_value);
    const unit = config.duration_unit;

    switch (unit) {
        case 'Minutes':
            result.setMinutes(result.getMinutes() + value);
            break;
        case 'Hours':
            result.setHours(result.getHours() + value);
            break;
        case 'Days':
            result.setDate(result.getDate() + value);
            break;
        case 'Weeks':
            result.setDate(result.getDate() + value * 7);
            break;
    }

    // Only move Sunday to Monday
    if (result.getDay() === 0) {
        result.setDate(result.getDate() + 1);
    }

    return result;
}


function formatDateTime(date) {
    return {
        date: date.toLocaleDateString('en-GB', {
            day: '2-digit',
            month: 'short',
            year: 'numeric'
        }),
        time: date.toLocaleTimeString([], {
            hour: '2-digit',
            minute: '2-digit'
        })
    };
}

// function skipWeekend(date) {
//     while (date.getDay() === 0 || date.getDay() === 6) {
//         date.setDate(date.getDate() + 1);
//     }
//     return date;
// }
</script>

@endsection