@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;
    }

</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>
            <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" 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-start">
                        <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>
                    <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,                    // REQUIRED
                    text: q.field_name,           // REQUIRED
                    input_type: q.field_value,    // optional
                    options: q.field_option       // optional
                }));

                
            } 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() {

            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];
                const selected = questions[type] || [];

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

                // ✅ CATEGORY-SPECIFIC QUESTIONS
                
                const questionList = questionBankByCategory[type] || [];
                const hasQuestions = questionList.length > 0;

                const allSelected = hasQuestions &&
                    questionList.every(q => selected.includes(q.id));

                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>
                            </div>
                            <div class="row w-100">
                                <div class="col-lg-4 mb-2">
                                    <label class="text-black fs-7 mb-1 fw-medium">Thinking Time (Mins)</label>
                                    <select class="form-select select3 " id="thinking_time_${q.id}" onchange="updateQuestionConfig(${q.id}, 'thinking', this.value)">
                                        <option value="15 Seconds">15 Seconds</option>
                                        <option value="30 Seconds" ${cfg.thinking === '30 Seconds' || !cfg.thinking ? '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 mb-2">
                                    <label class="text-black fs-7 mb-1 fw-medium">Allowed Time (Mins)</label>
                                    <select class="form-select select3 " id="allowed_time_${q.id}" onchange="updateQuestionConfig(${q.id}, 'allowed', this.value)">
                                        <option value="15 Seconds">15 Seconds</option>
                                        <option value="30 Seconds">30 Seconds</option>
                                        <option value="1 Minutes" ${cfg.allowed === '1 Minutes' || !cfg.allowed ? 'selected' : ''}>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>
                                        <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 mb-2">
                                    <label class="text-black fs-7 mb-1 fw-medium">Retakes</label>
                                    <input type="number" class="form-control form-control-sm" placeholder="0" 
                                    value="${questionConfigs[String(q.id)]?.retakes ?? 3}"
                                    maxlength="2" oninput="updateQuestionConfig(${q.id}, 'retakes', this.value)"/>
                                </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>
                    `;
                }

                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}">
                                <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>
                                            <small class="text-muted">
                                                ${selected.length} of ${questionList.length} selected
                                            </small>
                                        </div>
                                    </div>
                                    ${hasQuestions ? `
                                    <div class="form-check me-3" 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>
                            </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>
                `;
                
                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: 5,
                    duration_unit: 'Minutes',
                    mode: modeOptions[0]?.value || null,
                    callConfirmation: false,
                    imidiateNotify: false,

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

                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}</li>
                `);
                order++;
            });

            new bootstrap.Modal('#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 ?? 5}"
                                                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">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">Immediate<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-bell-ring"></i>
                                            <label class="fw-medium">Interview wil be Notified after shortlisted</label>
                                        </div>
                                        <div class="form-check form-switch mb-0">
                                            <input class="form-check-input"
                                                type="checkbox"
                                                ${config.imidiateNotify ? 'checked' : ''}
                                                onchange="updateConfig('${type}', 'imidiateNotify', this.checked)">
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-12"> 
                                    <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="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>
                                                </div>
                                            </div>
                                        `).join('')}
                                    </div>
                                </div>
                        </div>
                    </div>
                </div>
                `;

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

            initInterviewSortable();
            initSelect2();
        }
        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');

            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');
           
            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 class="input-group input-group-merge me-1">
                                        <span class="input-group-text">
                                            <i class="mdi mdi-calendar-month-outline"></i>
                                        </span>
                                        <input type="text"
                                            class="form-control interview-date common_datepicker"
                                            data-type="${type}"
                                            value="${resolveScheduleDateOnly(type)}"
                                            placeholder="Select Date" onchange="handleDateChange('${this.value}',${type})">
                                    </div>

                                    <div class="input-group input-group-merge">
                                        <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>
                    </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 handleDateChange(dateStr, type) {
            
            configs[type].schedule_date = dateStr;
        }

        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() {
    return {
        job_request_id,
        entity_id,
        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 || '1 Minutes',
                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)
        );
    }

    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();

        $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');

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




</script>

@endsection