@extends('user.profiler.layouts.topmaster')
@section('title', 'Profiler - Career')

@section('content')

    <form action="{{ route('user.profiler.save.career') }}" method="POST" class="submitCareer">
        @csrf
        <div class="preferences">
            <div class="form-result"></div>
            <div class="Title">
                <h1 class="">Pick Your Prefered Career</h1>
                <p class="p">Select five career paths.</p>
            </div>
            <div class="prefOptWrap mb-30">

                @foreach ($randCareers as $career)
                    <div class="pOptions">
                        <input class="career-checkbox" name="career_choice[]" type="checkbox" value="{{ $career->id }}"/>
                        <h4>{{ $career->title }}</h4>
                    </div>
                @endforeach

            </div>
            <div class="Next">
                <button type="submit" class="start continueBtn">
                    <span style="color: #fff">Continue</span>
                </button>
                <h3 style="cursor: pointer">
                    <a style="color: #4490ce" href="{{ route("user.dashboard.skipper") }}">I don't see my Interest</a>
                </h3>
            </div>
        </div>
    </form>
@endsection
@section('scripts')
    <script>
        var limit = 5;

        $('input[type=checkbox]').on('change', function (e) {
            if ($('input[type=checkbox]:checked').length > limit) {
                $(this).prop('checked', false);
            } else {
                $(this).closest('.pOptions').css("background-color", "#D5E0EA");

                $(this).parent().find("h4").css("color", "#2F5E83");
            }

        });


        $(".submitCareer").submit(function (event) {
            event.preventDefault();
            $form = $(this);
            $result = $form.find(".form-result");
            submitable = true;

            $form.find(":input.js-required").not(":disabled").each(function () {
                if (!$(this).val()) {
                    $(this).addClass("error");
                    submitable = false;
                }
            });
            if ($('input[type=checkbox]:checked').length < limit) {
                alert("You have to select at least " + limit + " options")
                submitable = false;
            }

            if (submitable) {

                showPleaseWait();
                $('.continueBtn').prop('disabled', true);
                var formdata = new FormData($(".submitCareer")[0]);
                $.ajax({
                    url: $form.attr("action"),
                    type: $form.attr("method"),
                    data: formdata,
                    dataType: "json",
                    contentType: false,
                    cache: false,
                    processData: false,
                    success: function (resp) {
                        hidePleaseWait();
                        GuildAjax.DisplayFormResult($form, "success", resp.msg);
                        $('.submitCareer')[0].reset();
                        $form.find('.pOptions').css("background-color", "#f5f5f5");
                        $form.find("h4").css("color", "#000000");
                        if (typeof resp.url === "string") {
                            setTimeout(function () {
                                window.location.href = resp.url;
                            }, resp.delaytime);
                        }

                        $('.continueBtn').prop('disabled', false);
                    },
                    error: function (err) {
                        hidePleaseWait();
                        console.log(err.status);
                    }
                });
            }
        });


    </script>
@endsection