@extends('front.layouts.main')

@section('title') Consultant Registration - Step 1 @endsection

@section('content')

<main class="consultant-steps-page">
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-8 col-md-10">
                <div class="main-content">

                    <form class="form-steps" id="frmStep1" method="post" autocomplete="off"
                        action="{{ route('consultant.storeRegister1',['plan' => Request::get('plan')]) }}">
                        @csrf

                        <ul class="steps d-flex justify-content-center">
                            <li class="text-center active" id="personal-details"><span
                                    class="bold small-font-size">1</span>
                                <p class="xs-font-size">Personal Details</p>
                            </li>
                            <li class="text-center" id="consultant-profile"><span class="bold small-font-size">2</span>
                                <p class="xs-font-size">Consultant Profile</p>
                            </li>
                            <li class="text-center" id="payment"><span class="bold small-font-size">3</span>
                                <p class="xs-font-size">Payment</p>
                            </li>
                        </ul>

                        <fieldset class="text-center">

                            <div class="box white form-card text-left">
                                @include ('front.modules.consultant.register.sections.personal_info')
                            </div>

                            <div class="box white form-card text-left education-info-ajax" id="education-box">
                                @include ('front.modules.consultant.register.sections.education')
                            </div>

                            <div class="box white form-card text-left experience-info-ajax" id="experience-box">
                                @include ('front.modules.consultant.register.sections.work_experience')
                            </div>

                            <div class="box white form-card text-left consultancy-experience-info-ajax"
                                id="consultancy-experience-box">
                                @include ('front.modules.consultant.register.sections.consultancy_experience')
                            </div>

                            <div class="box white form-card text-left certificate-info-ajax" id="certificate-box">
                                @include ('front.modules.consultant.register.sections.awards_certificates')
                            </div>

                            <div class="box white form-card text-left reference-info-ajax" id="reference-box">
                                @include ('front.modules.consultant.register.sections.referees')
                            </div>

                            <input type="submit" name="next" class="action-button btn btn-em submit"
                                value="Save & Next" />

                        </fieldset>
                    </form>
                </div>
            </div>z
        </div>
    </div>
</main>
@endsection
<link rel="stylesheet" type="text/css" href="{{ asset('css/style.css') }}">
@push('pageModals')
<div id="uploadimageModal" class="modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div class="title-wrapper">
                    <h2 class="box-title">Crop Profile Image</h2>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="row">
                    <div class="col-md-8 text-center">
                        <div id="image" style="width:350px; margin-top:30px"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer d-flex justify-content-between">
                <button type="button" class="btn btn-bordered w-50" data-dismiss="modal">Cancel</button>
                <button class="btn btn-transparent w-50 crop_image">Crop & Upload</button>
            </div>
        </div>
    </div>
</div>
@include('front.components.deletemodal')
@endpush

@push('pageCss')
<script>
var userId = "{{auth()->user()->id}}";
var uploadIcon = "{{asset('img/pr-upload-cv.svg')}}";

var stateUrl = "{{route('state.showByCountryId')}}";
var cityUrl = "{{route('city.showByStateId')}}";
var checkEmail = "{{route('front.profile.emailexist')}}";

var showAbout = "{{route('profile.about')}}";
var storeAboutUrl = "{{route('front.profile.contact.store')}}";

var personalModaUrl = "{{route('personal.create')}}";
var storePersonalUrl = "{{route('personal.store')}}";
var updatePersonalUrl = "{{route('front.profile.personal.update')}}";

var educationUrl = "{{route('profile.education.create',['id' => null])}}";
var storeEducationUrl = "{{route('profile.education.store')}}?from=consultantRequest";
var instituteCountryUrl = "{{route('profile.education.instituteCountryId',['id' => null])}}";

var certificateUrl = "{{route('front.profile.certificate.add',['id' => null])}}";
var storeCertificateUrl = "{{route('front.profile.certificate.store')}}?from=consultantRequest";

var experienceUrl = "{{ route('front.profile.experience.add',['id' => null])}}";
var storeExperienceUrl = "{{ route('front.profile.experience.store')}}?from=consultantRequest";

var consultancyExperienceUrl = "{{ route('front.profile.consultancy_experience.add',['id' => null])}}";
var consultancyExperienceStoreUrl = "{{ route('front.profile.consultancy_experience.store')}}";

var referenceUrl = "{{ route('front.profile.reference.add',['id' => null])}}";
var storeReferenceUrl = "{{ route('front.profile.reference.store')}}?from=consultantRequest";

var remunerationUrl = "{{ route('front.profile.remuneration.add')}}";
var storeExpactationeUrl = "{{ route('front.profile.remuneration.store')}}";

var uoloadDocumentUrl = "{{ route('front.profile.documents.upload') }}";
var uoloadSaleryUrl = "{{ route('front.profile.documents.uploadSalerySlip') }}";
var uoloadCustomUrl = "{{ route('front.profile.documents.uploadCustomDoc') }}";
var deleteDocUrl = "{{ route('front.profile.documents.destroy') }}";
</script>

@endpush


@push('pageJs')

<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script type="text/javascript" src="{{ asset('js/front/profile/profile.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/front/profile/education.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/front/profile/experience.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/front/profile/consultancy_experience.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/front/profile/certificate.js') }}"></script>
<script type="text/javascript" src="{{ asset('js/front/profile/reference.js') }}"></script>

<script type="text/javascript">
@if(!blank($user - > languages))
@foreach($user - > languages as $language)
$('#language_id_{{ $loop->iteration }}').select2().trigger('change');
@endforeach
@endif

$(document).ready(function() {

    @if($user - > locations && $user - > locations - > country_id)
    $('#country_id').select2();
    @endif
    @if($user - > locations && $user - > locations - > state_id)
    $('#state_id').select2();
    @endif
    @if($user - > locations && $user - > locations - > city_id)
    $('#city_id').select2();
    @endif

    $('.submit').click(function() {
        if ($('#frmStep1').valid()) {
            $(".submit").attr("disabled", true).val("Please Wait...");
            $('#frmStep1').submit();
        }
    });

    // image crop
    $image_crop = $('#image').croppie({
        enableExif: true,
        viewport: {
            width: 200,
            height: 200,
            type: 'square' //square
        },
        boundary: {
            width: 400,
            height: 400
        }
    });

    $(document).on('change', '#profile_image', function() {
        var reader = new FileReader();
        reader.onload = function(event) {
            $image_crop.croppie('bind', {
                url: event.target.result
            }).then(function() {
                console.log('jQuery bind complete');
            });
        }
        reader.readAsDataURL(this.files[0]);
        $('#uploadimageModal').modal('show');
    });

    $(document).on('click', '.crop_image', function(event) {
        $image_crop.croppie('result', {
            type: 'canvas',
            size: 'viewport'
        }).then(function(response) {
            showLoader();
            $.ajax({
                url: "{{route('front.profile.uploadprofile')}}",
                type: "POST",
                data: {
                    "_token": "{{csrf_token()}}",
                    "image": response
                },
                success: function(data) {
                    hideLoder();
                    $("#output").attr('src', data.image);
                    $('#uploadimageModal').modal('hide');
                    $("#progressBarVal").attr("value", data.score);
                    $("#progressBarText").html(data.score);
                }
            });
        })
    });

    var $birth_date = $("#birth_date");
    var today = new Date();
    $birth_date.datepicker({
        autoHide: true,
        format: 'dd/mm/yyyy',
        zIndex: 2048,
        date: null,
        endDate: today.getDate() + '/' + (today.getMonth() + 1) + '/' + today
            .getFullYear(),
    });

    $('#frmStep1').validate({
        rules: {
            profile_image: {
                required: {
                    depends: function(element) {
                        return ($("#profile_pic_uploaded").val() == 0)
                    }
                },
                extension: 'png|jpg',
                filesize: 25,
            },
            first_name: {
                required: true
            },
            last_name: {
                required: true
            },
            short_bio: {
                required: true
            },
            bio: {
                required: true
            },
            country_id: {
                required: true
            },
            state_id: {
                required: true
            },
            city_id: {
                required: true
            },
            gender: {
                required: true
            },
            birth_date: {
                required: true
            }
        },
        messages: {
            profile_image: {
                required: 'Please upload your profile picture',
                extension: 'Valid files Jpg and Png',
            },
            first_name: 'First Name is required',
            last_name: 'Last Name is required',
            short_bio: 'Short Bio is required',
            bio: 'Bio is required',
            country_id: "Country is required",
            state_id: "State is required",
            city_id: "City is required",
            gender: "Gender is required",
            birth_date: "Birth date is required"
        },
        ignore: [],
        errorElement: 'span',
        errorClass: 'invalid-feedback',
        errorPlacement: function(error, element) {
            if (element.hasClass('langRatingClass')) {
                error.css({
                    'display': 'inline-block'
                });
                error.insertAfter(element.parents('.radio-img'));
            } else if (element.hasClass('custom-file-input')) {
                error.insertAfter(element.parents('.media')[0]);
            } else if (element.type == 'input') {
                error.insertAfter(element.sibling(a));
            } else {
                if (element.hasClass('select-two')) {
                    error.insertAfter(element.next('.select2-container'));
                } else {
                    if (element.is('#fb-userId')) {
                        el = $(".name-opt .dropdown-menu").parent();
                        error.insertAfter(el);
                    } else {
                        error.insertAfter(element);
                    }
                }
            }
        },
        invalidHandler: function(event, validator) {
            var offset = $(validator.errorList[0].element).offset().top;
            $('html, body').animate({
                scrollTop: offset - 100
            }, 100);
        }
    });

    // language
    $('.addNewLangBtn').on('click', function() {
        addNewLanguage()
    });

    $(document).on('click', '.removeAppendedLangBtn', function() {
        $i = $(this).data('id');
        $('.appendedLangRow_' + $i).remove()
    });
    validateLangIdClass();

});

function addNewLanguage() {

    var langLength = $('.addNewLang').children(':last').data('id') + 1;

    $('.addNewLang').append(`<tr class="appendedLangRow_` + langLength + ` appendedRow" data-id="` + langLength + `">
                                    <td class="border-0">
                                                    <div class="form-group mb-0">
                                                        <label class="control-label d-block" for="marital-status">&nbsp;</label>
                                                        <a href="javascript:void(0)" data-id="` + langLength + `" class="d-block mt-3 text-center 
                                                            removeAppendedLangBtn"><span class="material-icons gray">close</span></a>
                                                    </div>
                                                </td>
                                                <td class="border-0 w-50">
                                                    <div class="form-group btm-arrow select mb-0">
                                                        <label class="control-label" for="language_id_` + langLength +
        `"></label>
                                                        <select class="form-control select-two langIdClass" name="language[` +
        langLength + `]" id="language_id_` + langLength +
        `">
                                                            <option value="">Select</option>
                                                            @isset($languages)
                                                            @foreach($languages as $language)
                                                                <option value="{{ $language['id'] }}">{{ $language['name'] }}</option>
                                                            @endforeach
                                                            @endisset
                                                        </select>
                                                    </div>
                                                </td>
                                                <td class="border-0">
                                                    <div class="form-group mb-0 radio-img">
                                                        <label class="control-label d-block" for="marital-status">&nbsp;</label>
                                                        <fieldset class="rating view-only single-line-rating">

                                                            <input type="radio" class="langRatingClass validLangRatingClass" value="5" name="langRatings[` +
        langLength +
        `]" id="language_5_` + langLength + `" required>
                                                            <label class="full" for="language_5_` + langLength +
        `" title="Awesome - 5 stars"><i 
                                                                class="material-icons">star</i></label>

                                                            <input type="radio" class="langRatingClass" value="4" name="langRatings[` +
        langLength + `]" id="language_4_` + langLength + `">
                                                            <label class="full" for="language_4_` + langLength +
        `" title="Pretty good - 4 stars"><i 
                                                                class="material-icons">star</i></label>

                                                            <input type="radio" class="langRatingClass" value="3" name="langRatings[` +
        langLength + `]" id="language_3_` + langLength + `">
                                                            <label class="full" for="language_3_` + langLength +
        `" title="Meh - 3 stars"><i 
                                                                class="material-icons">star</i></label>

                                                            <input type="radio" class="langRatingClass" value="2" name="langRatings[` +
        langLength + `]" id="language_2_` + langLength + `">
                                                            <label class="full" for="language_2_` + langLength +
        `" title="Kinda bad - 2 stars"><i 
                                                                class="material-icons">star</i></label>

                                                            <input type="radio" class="langRatingClass" value="1" name="langRatings[` +
        langLength + `]" id="language_1_` + langLength + `">
                                                            <label class="full" for="language_1_` + langLength + `" title="Sucks big time - 1 star"><i 
                                                                class="material-icons">star</i></label>

                                                        </fieldset>
                                                    </div>
                                                </td>
                                            </tr>`);

    singleSelcet2InModal("#language_id_" + langLength);

    validateLangIdClass();

    var langLength = langLength + 1;

}

function validateLangIdClass() {
    $('.langIdClass').each(function() {
        $(this).rules("add", {
            required: true,
            messages: {
                required: 'This field is required.',
            },

        });
    });
    $('.validLangRatingClass').each(function() {
        $(this).rules("add", {
            required: true,
            messages: {
                required: 'This field is required.',
            }
        });
    });
}

function singleSelcet2Modal(elementId, modalId) {
    $(elementId).select2({
        placeholder: "Select",
        allowClear: true,
        dropdownParent: $(modalId + ' .modal-content')
    });
}

function singleSelcet2InModal(elementId) {
    $(elementId).select2({
        placeholder: "Select",
        allowClear: true
    });
}

function options(elementId, data, selected) {
    $(elementId).empty();
    $(elementId).append('<option value="" hidden>Select</option>')
    jQuery.each(data, function(i, val) {
        $(elementId).append('<option value="' + val.id + '" >' + val.name + '</option>');
    });
    if (selected != undefined) {
        $(elementId).val(selected);
    }
}

function singleSelcet2(elementId) {
    $(elementId).select2({
        placeholder: "Select",
        allowClear: true
    });
}

function singleTagsSelcet2(elementId) {
    $(elementId).select2({
        placeholder: "Select",
        tags: true,
        allowClear: true
    });
}

// delete
$(document).on("click", ".deleteentity", function() {
    var deleteUrl = $(this).attr("watever-data");
    $("#modalDeleteYes").attr("deleteUrl", deleteUrl);
    $("#modalDeleteConfirm").modal("show").on("click", "#modalDeleteYes", function() {
        axios.get(deleteUrl)
            .then(function(response, sectiondata) {
                if (response.data.section == "education") {
                    $(".education-info-ajax").empty();
                    $(".education-info-ajax").append(response.data.html);
                } else if (response.data.section == "certificate") {
                    $(".certificate-info-ajax").empty();
                    $(".certificate-info-ajax").append(response.data.html);
                } else if (response.data.section == "experience") {
                    $(".experience-info-ajax").empty();
                    $(".experience-info-ajax").append(response.data.html);
                } else if (response.data.section == "reference") {
                    $(".reference-info-ajax").empty();
                    $(".reference-info-ajax").append(response.data.html);
                } else if (response.data.section == "consultancy_experience") {
                    $(".consultancy-experience-info-ajax").empty();
                    $(".consultancy-experience-info-ajax").append(response.data.html);
                }
                $("#progressBarVal").attr("value", response.data.score);
                $("#progressBarText").html(response.data.score);
                if (response.data.score == 100) {
                    $(".note").addClass('d-none');
                } else {
                    $(".note").removeClass('d-none');
                }
                $("#modalDeleteConfirm").modal("hide");
            })
    });
});
</script>
@endpush