@extends('app-new')

@push('head-script')
    <!-- BEGIN: Vendor CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/forms/wizard/bs-stepper.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/flatpickr/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/vendors/css/pickers/pickadate/pickadate.css">
    <!-- END: Vendor CSS-->

    <!-- BEGIN: Page CSS-->
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-validation.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/core/menu/menu-types/vertical-menu.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/form-wizard.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-flat-pickr.css">
    <link rel="stylesheet" type="text/css" href="/app-assets/css/plugins/forms/pickers/form-pickadate.css">
    {{-- <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css"> --}}
    <!-- END: Page CSS-->
@endpush

@push('content-header')
    <div class="row breadcrumbs-top">
        <div class="col-12">
            <h2 class="content-header-title float-start mb-0">{{trans('recruitment/job-openings.job_openings')}}</h2>
            <div class="breadcrumb-wrapper">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ $orgUrl.'/home' }}">Home</a>
                    </li>
                    <li class="breadcrumb-item"><a href="{{ $orgUrl . '/menu-setting' }}">{{trans('recruitment/job-requisition.recruitment')}}</a>
                    </li>
                    <li class="breadcrumb-item"><a href="{{ $orgUrl.'/job-interview' }}">Job Interview</a>
                    </li>
                    <li class="breadcrumb-item active">
                        Add Job Interview
                    </li>
                </ol>
            </div>
        </div>
    </div>
@endpush
@push('prev-next-head')
<div class="content-header-right text-end col-md-3 col-12">
    <div class="form-group breadcrumb-right">
        <a href="javascript:history.back()"
            class="btn btn-secondary btn-sm waves-effect waves-float waves-light"><svg
                xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                class="feather feather-arrow-left-circle">
                <circle cx="12" cy="12" r="10"></circle>
                <polyline points="12 8 8 12 12 16"></polyline>
                <line x1="16" y1="12" x2="8" y2="12"></line>
            </svg> Back</a>
    </div>
</div>
@endpush

@section('content')
<!-- Basic multiple Column Form section start -->
<form role="post-data" method="POST" action="{{ $orgUrl.'/job-interview/store' }}" redirect="{{ $orgUrl.'/job-interview' }}">
    <section class="vertical-wizard">
        <div class="bs-stepper vertical vertical-wizard-example">
            <div class="bs-stepper-header">
                <div class="step" data-target="#personal-info-vertical" role="tab" id="personal-info-vertical-trigger">
                    <button type="button" class="step-trigger">
                        <span class="bs-stepper-box">1</span>
                        <span class="bs-stepper-label">
                            <span class="bs-stepper-title">Job Interview Details</span>
                            <span class="bs-stepper-subtitle">Add Job Interview Details</span>
                        </span>
                    </button>
                </div>
            </div>
            <div class="bs-stepper-content">
                <div id="personal-info-vertical" class="content position-relative" role="tabpanel" aria-labelledby="personal-info-vertical-trigger" style="min-height: 470px">
                    <div class="content-header">
                        <h5 class="mb-0">Job Interview Details</h5>
                        <small class="text-muted">Enter Job Interview Details</small>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-1  {{{ $errors->has('name') ? 'has-error' : '' }}}">
                                <label class="form-label" for="job_id"> Job/Position Name <span class="mendatory-field text-danger">*</span></label>
                                <select class="form-control select2" id="job_id" name="job_id" onchange="getJobCandidate(this.value, '{{$orgUrl}}');">
                                    <option value="">Select</option>
                                    @foreach($jobs as $val)
                                        <option value="{{$val->id}}"  {{ old('job_id',@$candidateInfo->job_id) == $val->id ? 'selected' : '' }}>{{ ucfirst($val->posting_title) }}</option>
                                    @endforeach
                                </select>                               
                                {!! $errors->first('job_id', '<label class="error" for="job_id">:message</label>')!!}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-1  {{{ $errors->has('name') ? 'has-error' : '' }}}">
                                <input type="hidden" name="organization_id" value="{{$organization->id}}">
                                <label class="form-label" for="candidate_id"> Candidate <span class="mendatory-field text-danger">*</span></label>
                                <select class="form-control select2" id="candidate_id" name="candidate_id">
                                    <option value="">Select</option>
                                    @foreach($candidates as $val)
                                        <option value="{{$val->id}}"  {{ old('candidate_id',@$candidateInfo->id) == $val->id ? 'selected' : '' }}>{{ ucfirst($val->first_name) }} {{ ucfirst($val->last_name) }}</option>
                                    @endforeach
                                </select>                               
                                {!! $errors->first('candidate_id', '<label class="error" for="candidate_id">:message</label>')!!}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-1  {{{ $errors->has('name') ? 'has-error' : '' }}}">
                                <label class="form-label" for="interview_type"> Interview Type <span class="mendatory-field text-danger">*</span></label>
                                <select class="form-control select2" id="interview_type" name="interview_type">
                                    <option value="">Select</option>
                                    @foreach($interviewTypes as $val)
                                        <option value="{{$val->id}}"  {{ old('interview_type') == $val->id ? 'selected' : '' }}>{{ ucfirst($val->name) }} </option>
                                    @endforeach
                                </select>                               
                                {!! $errors->first('interview_type', '<label class="error" for="interview_type">:message</label>')!!}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-1  {{{ $errors->has('name') ? 'has-error' : '' }}}">
                                <label class="form-label" for="interview_date"> Interview Date <span class="mendatory-field text-danger">*</span></label>
                                <input type="date" value="{{ old('interview_date') }}" name="interview_date" class="form-control" id="interview_date">
                                {!! $errors->first('interview_date', '<label class="error" for="interview_date">:message</label>')!!}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-1  {{{ $errors->has('name') ? 'has-error' : '' }}}">
                                <label class="form-label" for="interview_start_time"> Start Time <span class="mendatory-field text-danger">*</span></label>
                                <input id="interview_start_time" class="form-control" name="interview_start_time" value="{{ old('interview_start_time') }}" type="time">
                                {!! $errors->first('interview_start_time', '<label class="error" for="interview_start_time">:message</label>')!!}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-1  {{{ $errors->has('name') ? 'has-error' : '' }}}">
                                <label class="form-label" for="interview_end_time"> End Time <span class="mendatory-field text-danger">*</span></label>
                                <input id="interview_end_time" class="form-control" name="interview_end_time" type="time" value="{{ old('interview_start_time') }}">
                                {!! $errors->first('interview_end_time', '<label class="error" for="interview_end_time">:message</label>')!!}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-1  {{{ $errors->has('name') ? 'has-error' : '' }}}">
                                <label class="form-label" for="location"> Location <span class="mendatory-field text-danger">*</span></label>
                                <input type="text" value="{{ old('location') }}" name="location" class="form-control" placeholder="Enter location" id="location">
                                {!! $errors->first('location', '<label class="error" for="location">:message</label>')!!}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-1  {{{ $errors->has('name') ? 'has-error' : '' }}}">
                                <label class="form-label" for="interviewer"> Interviewer <span class="mendatory-field text-danger">*</span></label>
                                <select class="form-control select2" id="interviewer" name="interviewer[]" multiple>
                                    <option value="">Select</option>
                                    @foreach($users as $val)
                                        <option value="{{ $val->id }}"  {{ old('interviewer') == $val->id ? 'selected' : '' }}>{{ $val->name }} ({{ $val->email }})</option>
                                    @endforeach
                                </select>    
                                {!! $errors->first('interviewer', '<label class="error" for="interviewer">:message</label>')!!}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-1  {{{ $errors->has('name') ? 'has-error' : '' }}}">
                                <label class="form-label" for="comments"> Comment</label>
                                <input type="text" value="{{ old('comments') }}" name="comments" class="form-control" placeholder="Enter comments" id="comments">
                                {!! $errors->first('comments', '<label class="error" for="comments">:message</label>')!!}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-1  {{{ $errors->has('name') ? 'has-error' : '' }}}">
                                <label class="form-label" for="rate"> {{ trans('recruitment/job-interview.evaluation_refrence') }} <span class="mendatory-field text-danger">*</span></label>
                                <input type="text" value="{{ old('rate') }}" name="rate" class="form-control numberonly" placeholder="Enter rate" id="rate">
                                {!! $errors->first('rate', '<label class="error" for="rate">:message</label>')!!}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-1">
                                <label class="form-label" for="meeting_link"> Meeting Link</label>
                                <input type="text" value="{{ old('meeting_link') }}" name="meeting_link" class="form-control" placeholder="Enter meeting link" id="meeting_link">
                                {!! $errors->first('meeting_link', '<label class="error" for="meeting_link">:message</label>')!!}
                            </div>
                        </div>
                    </div>
                    <br>
                    <br>
                    <div class="content-footer position-absolute bottom-0 col-md-12">
                        <div class="d-flex justify-content-between content-footer">
                            <button type="button" data-request="ajax-submit" data-target="[role=post-data]" class="btn btn-success btn-submit user-submit" id="submit-text">{{trans('common/common.submit')}}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
 
</form>
<!-- Basic Floating Label Form section end -->

@endsection 

@push('footer-script')

<!-- BEGIN: Page Vendor JS-->
<script src="/app-assets/vendors/js/forms/wizard/bs-stepper.min.js"></script>
<script src="/app-assets/vendors/js/forms/select/select2.full.min.js"></script>
<script src="/app-assets/vendors/js/forms/validation/jquery.validate.min.js"></script>
<script src="/app-assets/vendors/js/pickers/flatpickr/flatpickr.min.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/picker.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/picker.date.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/picker.time.js"></script>
<script src="/app-assets/vendors/js/pickers/pickadate/legacy.js"></script>
<!-- END: Page Vendor JS-->

<!-- BEGIN: Page JS-->
<script src="/app-assets/js/scripts/forms/form-wizard.js"></script>
<script src="/app-assets/js/scripts/forms/form-validation.js"></script>
<script src="/app-assets/js/scripts/forms/pickers/form-pickers.js"></script>
<!-- END: Page JS-->

<script src="{{ asset('js/common-script.js') }}"></script>
<script src="{{ asset('js/sweetalert.js') }}"></script>
{{-- <script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script> --}}

<script>

// $(document).ready(function(){
//     $('input.timepicker').timepicker({});
// });

// $('#interview_start_time').timepicker({
//     timeFormat: 'h:mm p',
//     interval: 60,
//     minTime: '10',
//     maxTime: '6:00pm',
//     defaultTime: '11',
//     startTime: '10:00',
//     dynamic: false,
//     dropdown: true,
//     scrollbar: true
// });

// $('#interview_end_time').timepicker({
//     timeFormat: 'h:mm p',
//     interval: 60,
//     minTime: '10',
//     maxTime: '6:00pm',
//     defaultTime: '11',
//     startTime: '10:00',
//     dynamic: false,
//     dropdown: true,
//     scrollbar: true
// });


// $('#interview_start_time').timepicker({
//     timeFormat: 'h:mm p',
//     dropdown: true,
//     change:function(time){
//         var element = $(this), text;
//         var timepicker = element.timepicker();
//         $('#interview_end_time').val(timepicker.format(new Date(time.getTime() + 30*60000)));
//     },
//     'onSelect': function() {
//         $('#endTime').timepicker('option', 'minTime', $(this).val());                        
//     }
// });

// $('#interview_end_time').timepicker({
//     timeFormat: 'h:mm p',
//     dropdown: true
// });


</script>
@endpush