﻿$(document).ready(function () {

    window.careerCenterContainer = $('#careercenter');

    if (careerCenterContainer.length != 1) return;
    var baseApiUrl = "https://careercenter-api.azurewebsites.net/api/novi/";
    careerCenterContainer.empty();
    $('head').append("<link href='https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css' rel='stylesheet' />");
     
    $('head').append("<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css' integrity='sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==' crossorigin='anonymous' referrerpolicy='no-referrer' />");

    $('head').append("<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.1.5/pagination.css'    integrity='sha512-QmxybGIvkSI8+CGxkt5JAcGOKIzHDqBMs/hdemwisj4EeGLMXxCm9h8YgoCwIvndnuN1NdZxT4pdsesLXSaKaA=='    crossorigin='anonymous' referrerpolicy='no-referrer' />");


    jQuery.cachedScript = function (url, options) {
        // from: https://api.jquery.com/jQuery.getScript/
        options = $.extend(options || {}, {
            dataType: "script",
            cache: true,
            url: url
        });
        return jQuery.ajax(options);
    };

    //only the list page has prerequsites.  for listpage use:
    //LoadSelect2() > LoadPagination() > LoadListPage()
    // we could run LoadSelect and LoadPagination in parallel, but that is more difficult to keep track of.
    //for the details page, just 
    //LoadDetailsPage() directly

    var loc = document.location.href;
    if (loc.toString().includes("www.wai.org")) {
        baseApiUrl = "https://wai-api.azurewebsites.net/api/novi/";
    }
    if (loc.indexOf('id') > -1) {
        LoadDetailsPage();
    } else {
        LoadSelect2();
    }


    function LoadSelect2() {
        $.cachedScript("https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js").done(function (script, textStatus) {
            console.log('LoadSelect2 ' + textStatus);
            LoadPagination()
        });
    }

    function LoadPagination() {
        $.cachedScript("https://cdnjs.cloudflare.com/ajax/libs/paginationjs/2.1.5/pagination.min.js").done(function (script, textStatus) {
            console.log('LoadPagination ' + textStatus);
            LoadListPage();
        });
    }





    function LoadDetailsPage() {
        careerCenterContainer.append('<style>.loader { border: 16px solid #f3f3f3; border-radius: 50%; border-top: 16px solid #3498db; width: 120px; height: 120px; -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .label-inline { font-weight: 700; display: inline-block; margin-right: 2px; float: none; } .btn.btn-blue { background: #1086C7; border: 1px solid #1086C7; } .btn.btn-blue a { color: white; text-decoration: none; } .btn { border-radius: 50px; padding: 9px 40px; color: #FFFFFF; text-align: center; } .position-title { display: inline-block; vertical-align: middle; margin: 0 2em 0 0; } .font { font-size: 15px; font-weight: 700; margin-bottom: 1em; color: white; } .head{ margin: 0 auto; max-width: 1170px; padding: 0 15px; font-size: 36px; font-weight: 900; padding-left: 60px; } .subtitle-bottom { width: 100px; height: 4px; background: white; margin-top:40px; display: block; } h2{ margin-bottom: -35px !important; font-size: 35px; margin-top: 15px; color:white;} </style> ');

        var listUrl = location.href.replace("/" + location.search, "");
        var baseUrl = (window.location).href;
        var jobId = baseUrl.substring(baseUrl.lastIndexOf('=') + 1);

        $.ajax({
            type: 'GET',
            url: baseApiUrl +'GetJobById?jobId=' + jobId,
            success: function (post) {
                console.log(post);
                if (post.jobId != 0)
                    careerCenterContainer.append('<div class="row font" style="background-color: #1086C7; height: 150px;">' +
                        '    <div class="head">  ' +
                        '    <h2>' +
                        '        Jobs and Internships' +
                        '      </h2>' +
                        '      <div class="subtitle-bottom"></div>' +
                        '    </div>' +
                        '      <p style="margin: 0 auto;padding: 20 65px; font-weight: 400; margin-left: 60px; margin-top: 20px;color: white;">Job and Internship Listings <i>Exclusive</i> To Our Members</p>' +
                        '    ' +
                        '</div>' +
                        '<div style="margin: 0 auto;padding: 0 48px;padding-top: 25px">' +
                        '    <div style="font-size: 15px;">' +
                        '        <div class="position-title">' +
                        '            <i class="fa-solid fa-briefcase"></i>' +
                        '            <div class="label-inline">Position Title:&nbsp;</div>' +
                        '            <span id="pos"> ' + post.positionTitle + ' </span>' +
                        '        </div>' +
                        '    </div>' +
                        '    <div style="font-size: 15px;">' +
                        '        <div class="company">' +
                        '            <i class="fa-solid fa-plane-up"></i>' +
                        '            <div class="label-inline">Position Company: &nbsp;</div>' +
                        '            <span id="comInfo"> ' + post.companyName + '</span>' +
                        '        </div>' +
                        '    </div>' +
                        '    <div style="font-size: 15px;">' +
                        '        <div class="company">' +
                        '            <i class="fa-solid fa-stopwatch"></i>' +
                        '            <div class="label-inline">Application Deadline: &nbsp;</div>' +
                        '            <span id="comInfo"> ' + post.lastDate + '</span>' +
                        '        </div>' +
                        '    </div>' +
                        '       <br/>' +
                        '    <div style="color: #636975; font-size: 16px; font-family: Lato,Helvetica,Arial,sans-serif; font-weight: 300; line-height: 24px;">' +
                        '        ' + post.fullDescription + '' +
                        '    </div>' +
                        '    <div style="margin-top: 35px;">' +
                        '    <a href="' + post.applicationURL + '"  target="_blank"><div id="apply" class="btn btn-blue">Apply</div></a>' +
                        '    <a href="' + listUrl + '" ><div class="btn btn-blue">Go Back</div></a>' +
                        '    </div>' +
                        '</div>');
                if (post.applicationURL == '' || post.applicationURL == null)
                    $('#apply').hide();
            }
        });

    }

    function LoadListPage() {
        var careerCenterContainer = window.careerCenterContainer;
        careerCenterContainer.append('<style>.loader { border: 16px solid #f3f3f3; border-radius: 50%; border-top: 16px solid #3498db; width: 120px; height: 120px; -webkit-animation: spin 1s linear infinite; animation: spin 1s linear infinite; } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .ml-1 { margin-left: 36px; margin-top: 15px; } .select2-selection__rendered { line-height: 31px !important; } .select2-container .select2-selection--single { height: 35px !important; width: 160px; border-radius: 25px } .select2-selection__arrow { margin-right: 35px !important; height: 34px !important; } .select2-container--default .select2-selection--single .select2-selection__arrow{ width:40px; !important; } .font { font-size: 15px; font-weight: 700; margin-bottom: 1em; color: white; } .ddl { width: 200px !important; height: 35px !important; border-radius: 25px !important; padding: 10px !important; } .mt-30 { margin-top: 30px } .mt-10 { margin-top: 10px } body { font-family: Roboto, sans-serif; font-size: 14px; line-height: 18px; background: #f4f4f4; } .list-wrapper { padding: 15px; overflow: hidden; } .list-item { border: 1px solid #EEE; background: #FFF; margin-bottom: 10px; padding: 10px; box-shadow: 0px 0px 10px 0px #EEE; } .list-item h4 { color: #FF7182; font-size: 18px; margin: 0 0 5px; } .list-item p { margin: 0; } .simple-pagination ul { margin: 0 0 20px; padding: 0; list-style: none; text-align: center; } .simple-pagination li { display: inline-block; margin-right: 5px; } .simple-pagination li a, .simple-pagination li span { color: #666; padding: 5px 10px; text-decoration: none; border: 1px solid #EEE; background-color: #FFF; box-shadow: 0px 0px 10px 0px #EEE; } .simple-pagination .current { color: #FFF; background-color: #FF7182; border-color: #FF7182; } .simple-pagination .prev.current, .simple-pagination .next.current { background: #e04e60; } .paginationjs{ display: flex; justify-content: center } .title h2, .title h3 { font-size: 20px; color: #505662; margin: 0; padding: 0; } .title a, .title a { color: #505662; text-decoration: none; } .position-title { display: inline-block; vertical-align: middle; margin: 0 2em 0 0; } .label-inline { font-weight: 700; display: inline-block; margin-right: 2px; float: none; } .position-title, .company { display: inline-block; vertical-align: middle; margin: 0 2em 0 0; } .subtitle-bottom { width: 100px; height: 4px; background: #E08147; margin: 1.2em 0 2.5em; display: block; } .btn.btn-blue { background: #1086C7; border: 1px solid #1086C7; } .btn.btn-blue a { color: white; text-decoration: none; } .btn { -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; padding: 0.8em 3em; color: #FFFFFF; text-align: center; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; white-space: normal; } p { margin-top: 0; margin-bottom: 1rem; color: #636975; font-size: 16px; font-family: Lato,Helvetica,Arial,sans-serif; font-weight: 300; line-height: 24px; } .ml{ margin-left: 40px; margin-top: 20px; } .result{ display: inline-block; padding: 0.5em 2em; margin: 0 0 1em; border: 2px solid #DFE4ED; font-size: 18px; font-weight: 900; color: #1086C7; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } .hrVal{ background: #DFE4ED; bottom: 60px;  display: block; height: 1px; left: 0; position: absolute; } html, body{ height: 100%; min-height: 100%; } #objList { height : 100%; width : 100%; overflow : hidden; } </style>');
        careerCenterContainer.append('<div class="row" style="background-color: rgba(16,134,199,0.6); height: 140px;" id="elementtoScrollToID">' +
            '    <div class="col-sm-2 mt-30 ml-1" style="margin-left:15px;"> <span class="font"> Category </span>' +
            '        <div class="mt-10"> <select id="category" class="ddl">' +
            '                <option value="all">All</option>' +
            '            </select> </div>' +
            '    </div>' +
            '    <div class="col-sm-2 mt-30 ml-1"> <span class="font"> Type </span>' +
            '        <div class="mt-10"> <select id="type" class="ddl">' +
            '                <option value="all">Jobs and Internships</option>' +
            '                <option value="Job">Jobs</option>' +
            '                <option value="Internship">Internships</option>' +
            '            </select> </div>' +
            '    </div>' +
            '    <div class="col-sm-2 mt-30 ml-1"> <span class="font">Country </span>' +
            '        <div class="mt-10"> <select id="contry" class="ddl">' +
            '                <option value="all">-Any-</option>' +
            '            </select> </div>' +
            '    </div>' +
            '    <div class="col-sm-2 mt-30 ml-1"> <span class="font">State/Province </span>' +
            '        <div class="mt-10"> <select id="state" class="ddl">' +
            '                <option value="all">All</option>' +
            '            </select> </div>' +
            '    </div>' +
            '    <div class="col-sm-2 " style="margin-top: 50px;"> <button id="find" class="ddl mt-10"' +
            '            style="width: 82px !important;background: #E08147; border: 0px; color: white; padding: 0px;margin-left: 33px;">' +
            '            <i class="fa-solid fa-briefcase"></i><span style="margin-left: 5px;"> Find</span></button> </div>' +
            '</div>' +
            '<div >' +
            '    <p class="ml">Only WAI members have complete access to our Jobs and Internships listings. These opportunities are posted by WAI' +
            '        Corporate Members for your benefit as you embark on your job or internship search.</p>' +
            '<div>' +
            '<div style="display: -webkit-inline-box">' +
            '<hr/ style="width:50%;margin-left:40px;"> <div class="result" id="pg_no" style="margin-left: 50px;margin-right: 50px;"></div> <hr/ style="width:40%">' +
            '' +
            '</div>' +
            '' +
            '</div>' +
            '    <div id="wrapper" class="ml">' +
            '        <section>' +
            '            <div class="data-container"></div>' +
            '            <div id="demo"></div>' +
            '        </section>' +
            '    </div>' +
            '' +
            '</div>');

        $('#category').select2();

        $(document.body).on('change', '#contry', function () {
            console.log(this.value);
            $.ajax({
                type: 'GET',
                url: 'https://countriesnow.space/api/v0.1/countries/states/q?country=' + this.value,
                success: function (res) {
                    console.log(res);
                    var result = res.data.states.map(d => ({ id: d.name, text: d.name }));
                    $('#state').select2({ data: result });
                }
            });
        });
        $.ajax({
            type: 'GET',
            url: 'https://countriesnow.space/api/v0.1/countries/positions',
            success: function (res) {
                console.log(res);
                var result = res.data.map(d => ({ id: d.name, text: d.name }));
                $('#contry').select2({ data: result });
                $('#type').select2(); $('#state').select2();
            }
        });

        $.ajax({
            type: 'GET',
            url: baseApiUrl+'GetCategoriesMaster',
            success: function (res) {
                var result = res.map(d => ({ id: d, text: d }));
                $('#category').select2({ data: result });
            }
        });

        var careerCenterContainer = $('#demo'); // Do not remove this
        var total = 20;
        var rec = [];

        $('#find').click(function () {
            var cat = $('#category').val(); var state = $('#state').val(); var type = $('#type').val(); var contry = $('#contry').val();

            careerCenterContainer.prev().html('<div style="display: flex;justify-content: center;margin-top:50px;"> <div class="loader"></div></div>');
            careerCenterContainer.pagination(
                {
                    dataSource: function (done) {
                        $.ajax({
                            type: 'GET',
                            url: baseApiUrl+'Getactivejobs/?category=' + cat + '&type=' + type + '&country=' + contry + '&state=' + state,
                            success: function (res) {
                                total = res.length;
                                rec = res;
                                done(res);
                                if (total == 0) {
                                    careerCenterContainer.prev().html('<p>No results found.</p>');
                                    $('#demo').hide();
                                    $('#pg_no').hide();
                                }
                                else
                                    $('#pg_no').show();
                            }
                        });
                    },
                    locator: 'items', totalNumber: total, pageSize: 10,
                    ajax: { beforeSend: function () { careerCenterContainer.prev().html('<div style="display: flex;justify-content: center;margin-top:50px;"> <div class="loader"></div></div>'); } },
                    callback: function (response, pagination) {
                        var dataHtml = '';
                        var pageStart = (pagination.pageNumber - 1) * pagination.pageSize;
                        var start = pageStart + 1;
                        var pageEnd = pageStart + pagination.pageSize;
                        $('#pg_no').html('<div> showing ' + start + ' - ' + pageEnd + ' of ' + total + '</div>');
                        if (pageEnd > total)
                            $('#pg_no').html('<div> showing ' + start + ' - ' + total + ' of ' + total + '</div>');
                        $('#pg_res').show();
                        var pageItems = rec.slice(pageStart, pageEnd);
                        var url = document.location.href;
                        $.each(pageItems, function (index, item) {
                            dataHtml += '<div class="val" style="margin:10px;">  <div> <h3 class="title"> <a href="' + url + '/?id=' + item.jobId + '" style="font-weight: 900;"> <span  id="titleInfo">' + item.jobTitle + '</span> </a> </h3> </div> <div> <div class="position-title"> <i class="fa-solid fa-briefcase"></i> <div class="label-inline">Position Title:&nbsp;</div> <span id="pos"> ' + item.positionTitle + '</span> </div> </div> <div> <div class="company"> <i class="fa-solid fa-plane-up"></i> <div class="label-inline">Position Company: &nbsp;</div> <span id="comInfo">' + item.companyName + '</span> </div> </div> <div class="subtitle-bottom"></div> <div> <p id="shortDesc"> ' + item.shortDescription + '... </p> <a href="' + url + '/?id=' + item.jobId + '" ><div class="btn btn-blue">Read More</div> </a></div> <hr style="border: 1px solid #D2D6E0;background-color: #D2D6E0;" /> </div>'
                        });
                        careerCenterContainer.prev().html(dataHtml);
                        document.getElementById('elementtoScrollToID').scrollIntoView();
                    }
                })
        });



        careerCenterContainer.prev().html('<div style="display: flex;justify-content: center;margin-top:50px;"> <div class="loader"></div></div>');
        careerCenterContainer.pagination(
            {
                dataSource: function (done) {
                    $.ajax({
                        type: 'GET',
                        url: baseApiUrl+'GetActiveJobs',
                        success: function (res) {
                            total = res.length;
                            rec = res;
                            done(res);
                        }
                    });
                },
                locator: 'items', totalNumber: total, pageSize: 10,
                ajax: { beforeSend: function () { careerCenterContainer.prev().html('<div style="display: flex;justify-content: center;margin-top:50px;"> <div class="loader"></div></div>'); } },
                callback: function (response, pagination) {
                    var dataHtml = '';
                    var pageStart = (pagination.pageNumber - 1) * pagination.pageSize;
                    var start = pageStart + 1;
                    var pageEnd = pageStart + pagination.pageSize;
                    var pageItems = rec.slice(pageStart, pageEnd);
                    $('#pg_no').html('<div> Showing ' + start + ' - ' + pageEnd + ' of ' + total + '</div>');
                    if (pageEnd > total)
                        $('#pg_no').html('<div> showing ' + start + ' - ' + total + ' of ' + total + '</div>');
                    $('#pg_res').show();
                    var url = document.location.href;
                    $.each(pageItems, function (index, item) {
                        var ur = url + '#' + item.jobId
                        dataHtml += '<div class="val" style="margin:10px;">  <div> <h3 class="title"> <a href="' + url + '/?id=' + item.jobId + '" style="font-weight: 900;" > <span  id="titleInfo">' + item.jobTitle + '</span> </a> </h3> </div> <div> <div class="position-title"> <i class="fa-solid fa-briefcase"></i> <div class="label-inline">Position Title:&nbsp;</div> <span id="pos"> ' + item.positionTitle + '</span> </div> </div> <div> <div class="company"> <i class="fa-solid fa-plane-up"></i> <div class="label-inline">Position Company: &nbsp;</div> <span id="comInfo">' + item.companyName + '</span> </div> </div> <div class="subtitle-bottom"></div> <div> <p id="shortDesc"> ' + item.shortDescription + '... </p> <a href="' + url + '/?id=' + item.jobId + '" ><div class="btn btn-blue">Read More</div></a> </div> <hr style="border: 1px solid #D2D6E0;background-color: #D2D6E0;" /> </div>'
                    });
                    careerCenterContainer.prev().html(dataHtml);
                    document.getElementById('elementtoScrollToID').scrollIntoView();
                }
            })



    }
});

