@extends('layouts.main')
@section('title', 'Recorded Assessment Live Stream')
@section('content')
<div class="hme-loading-mask" style="display:none;">
    <div class="hme-loading-container">
        <div class="hme-dual-ring"></div>
        <div>Please wait, Loading...</div>
    </div>
</div>

<div class="pcoded-content">
    <div class="pcoded-inner-content p-0">
        <div class="main-body">
            <div class="page-wrapper p-0">
                <div class="page-header p-15 m-b-0 pro-page-heading1">
                    <div class="page-header-title">
                        <h4>Search Assessments</h4>
                    </div>
                    <div class="page-header-breadcrumb p-r-10">
                        <ul class="breadcrumb-title">
                            <li class="breadcrumb-item">
                                <!-- @if(Auth::guard('corporate')->user()->user_type == 1)
									<a href="{{secure_url('company/dashboard') }}">
								@elseif(Auth::guard('corporate')->user()->user_type == 2)
									<a href="{{secure_url('recruiter/dashboard') }}">
								@endif 
									<span class="hiremee-home"></span>
								</a> -->
                                <span class="hiremee-home"></span>
                            </li>
                            <li class="breadcrumb-item"><a
                                    href="{{ secure_url('pro/company/stream-recorded-video') }}">Search Assessments</a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="page-body">
                    <div class="card borderless-card m-b-0 bg-f7f7f7">
                        <div class="card-block p-t-0">
                            <div class="row">
                                <div class="col-md-7">
                                    <div class="card borderless-card m-b-0">
                                        <div class="card-block">

                                            {!! Form::open([
                                            'url' => 'pro/company/stream-recorded-video-search',
                                            'method' => 'POST',
                                            'id' => 'test_result_form_submit',
                                            'target' => '_blank'
                                            ]) !!}

                                            {{-- Assessment Category --}}
                                            <div class="row form-group">
                                                <div class="col-md-12 text-left f-w-400 m-b-5">Assessment Category <span
                                                        style="color:red">*</span> :</div>
                                                <div class="col-md-12">
                                                    <div class="pos-relative">
                                                        <div class="form-radio">
                                                            <div class="radio radiofill radio-primary radio-inline">
                                                                <label>
                                                                    <input name="assessment_type"
                                                                        class="assessment_type" value="1" type="radio"
                                                                        checked>
                                                                    <i class="helper"></i> Corporate
                                                                </label>
                                                            </div>
                                                            <div class="radio radiofill radio-primary radio-inline">
                                                                <label>
                                                                    <input name="assessment_type"
                                                                        class="assessment_type" value="2" type="radio">
                                                                    <i class="helper"></i> Assessment Inventory
                                                                </label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            {{-- Assessment Name --}}
                                            <div class="row form-group">
                                                <div class="col-md-12 text-left f-w-400 m-b-5">Assessment Name <span
                                                        style="color:red">*</span> :</div>
                                                <div class="col-md-12 m-b-15">
                                                    <div class="pos-relative">
                                                        <div class="hme-select-style">
                                                            {!! Form::select(
                                                            'assessment', // name used in validation
                                                            $assessmentMaster ?? [], // options array (key => label)
                                                            null, // selected
                                                            [
                                                            'class' => 'form-control js-select2',
                                                            'id' => 'assessment_name',
                                                            'placeholder' => 'Select Assessment'
                                                            ]
                                                            ) !!}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            {{-- Schedule --}}
                                            <div class="row form-group">
                                                <div class="col-md-12 text-left f-w-400 m-b-5">List of schedule <span
                                                        style="color:red">*</span> :</div>
                                                <div class="col-md-12 m-b-15">
                                                    <div class="pos-relative">
                                                        <div class="hme-select-style">
                                                            {!! Form::select(
                                                            'schedule', // name used in validation
                                                            [], // will be populated via AJAX
                                                            null,
                                                            [
                                                            'class' => 'form-control js-select2',
                                                            'id' => 'assessment_schedule',
                                                            'placeholder' => 'Select Schedule'
                                                            ]
                                                            ) !!}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="row form-group">
                                                <div class="col-sm-12 d-flex justify-content-start">
                                                    <button class="btn btn-primary m-r-10 pro-green" type="submit">Live
                                                        Stream</button>
                                                    <button class="btn pro-default border-none" id="clear"
                                                        type="reset">Cancel</button>
                                                </div>
                                                <div class="col-md-2"></div>
                                            </div>

                                            {!! Form::close() !!}

                                        </div>
                                    </div>
                                </div>
                            </div> <!-- /.row -->
                        </div>
                    </div> <!-- /.card -->
                </div> <!-- /.page-body -->
            </div>
        </div>
    </div>
</div>
@endsection

@section('footer')
<script type="text/javascript">
$(document).ready(function() {
    // Initialize validation
    $("#test_result_form_submit").validate({
        ignore: [],
        rules: {
            assessment: {
                required: true
            }, // match 'name' attributes
            schedule: {
                required: true
            }
        },
        messages: {
            assessment: "Kindly select an assessment.",
            schedule: "Kindly select a schedule."
        },
        errorElement: 'span',
        errorPlacement: function(error, element) {
            var parent = $(element).parent();
            $('.tooltip').tooltip('hide');
            console.log("error[0].id", error[0].id);
            $("body").find('#' + error[0].id + '-custom').remove();
            parent.append(
                '<span data-position="left" data-delay="0" data-animation="false" class="js-tootletip hiremee-info text-danger tooltip-validate" id="' +
                error[0].id + '-custom" data-toggle="tooltip" data-original-title="' + error[0]
                .innerText + '" data-trigger="hover" style="margin-right:25px;"></span>');

            $('#' + error[0].id + '-custom').tooltip(tooltip_direction_options);

        },
        submitHandler: function(form) {
            form.submit();
        }
    });

    // Assessment type change → reload assessments
    $('.assessment_type').on('change', function(e) {
        e.preventDefault();
        //Reset the field
        $("body").find('#assessment_schedule-error-custom').remove();
        $("body").find('#assessment_name-error-custom').remove();
        // Reset schedule & assessment
        let $assessment = $('#assessment_name');
        $assessment.empty().append('<option value="">Select Assessment</option>');
        let $schedule = $('#assessment_schedule');
        $schedule.empty().append('<option value="">Select Schedule</option>');
        const opt = $(this).val();
        //const url = 'pro/company/get-inventory-assessment';

        $.ajax({
            url: baseUrl + '/pro/company/get-inventory-stream-assessment',
            data: {
                type: opt,
                pagetype: 'live_proctor'
            },
            dataType: 'json',
            type: 'get',
            beforeSend: function() {
                $('.hme-loading-mask').fadeIn();
            },
            success: function(res) {
                $('.hme-loading-mask').fadeOut();
                // Rebuild the assessment select
                const $assessment = $('#assessment_name');
                $assessment.empty().append('<option value="">Select Assessment</option>');

                if (res && Array.isArray(res.data)) {
                    res.data.forEach(function(item) {
                        $assessment.append(
                            $('<option>', {
                                value: item.id,
                                text: item.text
                            })
                        );
                    });
                } else if (res && res.response) {
                    // Fallback to HTML string of <option>…</option>
                    $assessment.append(res.response);
                }

                // Reset schedule when type changes
                $('#assessment_schedule').empty().append(
                    '<option value="">Select Schedule</option>');
            },
            error: function() {
                $('.hme-loading-mask').fadeOut();
            }
        });
    });

    // Assessment change → load schedules
    $('#assessment_name').on('change', function() {
        const assessmentId = $(this).val();
        // if(assessmentId == null || assessmentId == ''){
        //     $("body").find('#assessment_name-error-custom').add();
        // }else{
        //     //$("body").find('#assessment_schedule-error-custom').remove();
        //     $("body").find('#assessment_name-error-custom').remove();
        // }
        const $schedule = $('#assessment_schedule');

        // Reset schedules
        $schedule.empty().append('<option value="">Select Schedule</option>');

        if (!assessmentId) return;

        $.ajax({
            url: baseUrl + '/pro/company/proctoring/schedules',
            type: 'POST',
            dataType: 'json',
            data: {
                assessment_id: assessmentId,
                type: 'assessment_stream_search',
                _token: '{{ csrf_token() }}'
            },
            beforeSend: function() {
                $('.hme-loading-mask').fadeIn();
            },
            success: function(schedules) {
                $('.hme-loading-mask').fadeOut();
                let options = '<option value="">Select Schedule</option>';
                schedules.forEach(function(s) {
                    options += `<option value="${s.start_date}|${s.end_date}" data-count="${s.candidate_count}">
                    ${moment(s.start_date).format('YYYY-MM-DD HH:mm')} - ${moment(s.end_date).format('YYYY-MM-DD HH:mm')}
                </option>`;
                });
                $('#assessment_schedule').html(options);

            },
            error: function() {
                $('.hme-loading-mask').fadeOut();
            }
        });
    });
    $('#clear').on('click', function(e) {
        e.preventDefault();
        //Reset the field
        $("body").find('#assessment_schedule-error-custom').remove();
        $("body").find('#assessment_name-error-custom').remove();
        // Reset schedule & assessment
        let $assessment = $('#assessment_name');
        $assessment.empty().append('<option value="">Select Assessment</option>');
        let $schedule = $('#assessment_schedule');
        $schedule.empty().append('<option value="">Select Schedule</option>');
    });
});
</script>
@endsection