<section class="careers-detail relative checkImg py-5">
    <div class="container is-animated py-5">
        <div class="top-info is-animated">
            <a href="{$path}/#careers" class="font-md text-uppercase text-secondary letter-space-1 mb-2 d-inline-block"><i class="fa fa-chevron-circle-left mr-2"></i>Careers</a>
            <h1 class="h2 font-weight-bold mb-2">{$data.careJobsTitle}</h1>
            <div class="info font-md text-secondary mb-4">
                <span class="mr-2"><i class="fa fa-flag mr-1"></i> {$data.jposName}</span>
                <span><i class="fa fa-clock-o mr-1"></i>{if !empty($data.careYearRound)}{$data.careYearRound} Year{else} Fresh Graduate{/if}</span>
            </div>
        </div>
        <!-- Qualifikasi -->
        <div class="text-detail is-animated font-lg mt-4 mb-5">
            {$data.careQualification|html_entity_decode}
        </div>
        <!-- Responsibility -->
        <div class="text-detail is-animated font-lg mt-4 mb-5">
            {$data.careResponsibility|html_entity_decode}
        </div>

        <div class="forms bg-white border shadow-sm is-animated pt-3 pb- 1 px-3">
            <div class="h4 mb-1 text-center">Application Form</div>
            <p class="text-center">{$data.careJobsTitle}</p>
            <form name="send_data" id="send_data" method="post" class="apps-form font-md">
                <input type="hidden" name="txtId" value="">
                <input type="hidden" name="slPosition" id="slPosition" value="{$data.careId}">
                <div class="form-group mb-2">
                    <label class="sr-only" for="txtName">Fullname</label>
                    <input type="text" name="txtName" id="txtName" placeholder="Fullname" class="form-control" data-tabindex="1">
                </div>
                <div class="form-group date mb-2">
                    <div class="input-group">
                        <input type="text" name="txtBirthdate" id="txtBirthdate" class="datepicker font-md form-control" placeholder="Birthdate">
                        <div class="input-group-append">
                            <span class="input-group-text"><i class="fa fa-calendar"></i></span>
                        </div>
                    </div>
                </div>
                <div class="form-group mb-2">
                    <label class="sr-only" for="txtEmail">Email</label>
                    <input type="email" name="txtEmail" id="txtEmail" placeholder="Email" class="form-control">
                </div>
                <div class="form-group mb-2">
                    <label class="sr-only" for="txtPhone">Phone Number</label>
                    <input type="text" name="txtPhone" id="txtPhone" placeholder="Phone Number" class="form-control">
                </div>
                <div class="form-group mb-2">
                    <label class="sr-only" for="txtRemark">Remarks</label>
                    <textarea type="text" name="txtRemark" id="txtRemark" class="form-control" placeholder="Remark"></textarea>
                </div>
                <div class="form-group mb-3">
                    <label class="sr-only" for="fFile">Upload CV (Pdf, Ms.Word, Rar, Zip)</label>
                    <div class="custom-file">
                        <input  type="file" name="fFile" id="fFile" class="form-control" accept="application/pdf,application/vnd.ms-word,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/x-rar-compressed,application/zip" />
                        <label class="custom-file-label" for="fFile">Upload CV</label>
                    </div>
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-hs font-md font-weight-bold text-uppercase btn-block py-2 px-4"><i class="fa fa-send-o mr-2"></i><span class="bt_load">Submit</span></button>
                </div>
            </form>
        </div>

        <div class="article-list mt-5">
            <div class="h4 mb-3">Other Careers</div>
            <div class="careers-list">
                {foreach from=$other item=career}
                <div class="list is-animated mb-4">
                    <div class="card bg-white relative over-hidden">
                        <div class="card-body relative">
                            <h2 class="card-title h5 font-weight-bold mb-2"><a href="{$career.url}">{$career.careJobsTitle}</a></h2>
                            <div class="card-text font-md mb-2">{$career.subject}</div>
                            <div class="font-md mb-3">
                                <span class="mr-2"><i class="fa fa-flag text-secondary mr-1"></i> {$career.jposName}</span>
                                <span><i class="fa fa-clock-o mr-1"></i> {if !empty($career.careYearRound)}{$career.careYearRound} Year{else}Fresh Graduate{/if}</span>
                            </div>
                            <a href="{$career.url}" class="btn btn-hs font-weight-bold text-uppercase font-md px-4">Apply Now <i class="fa fa-chevron-circle-right ml-1"></i></a>

                        </div>
                    </div>
                </div>
                {/foreach}
            </div>
        </div>

    </div>
</section>
<link href="{$path}/Assets/plugins/lobibox.min.css" type="text/css" rel="stylesheet">
<script src="{$path}/Assets/plugins/lobibox.min.js" type="text/javascript"></script>
<script type="text/javascript">
	{literal}
    $(document).ready(function () {
        $('.datepicker').datepicker();
        var par = $('.careers-detail');
        par.find('.container').css({'animation-delay':'300ms', 'opacity': 1});
        par.find('.top-info').addClass('animated fadeInDown').css({'animation-delay':'300ms', 'opacity': 1});
        par.find('.forms').addClass('animated fadeInLeft').css({'animation-delay':'300ms', 'opacity': 1});
        par.find('.text-detail').addClass('animated fadeInRight').css({'animation-delay':'700ms', 'opacity': 1});
        par.find('.tags').addClass('animated fadeInRight').css({'animation-delay':'900ms', 'opacity': 1});
        par.find('.careers-list .list').each(function (i, el) {
            var delays = 300 + (i * 200) + 'ms';
            $(el).addClass('animated fadeInDown').css({'animation-delay':delays, 'opacity': 1})
        });
    });
	{/literal}
	$("#send_data").on("submit", function() {
            $(".loadings").show();
            $(".bt_load").text("Loading..");
			$("button:submit").attr("disabled", true);
            var path = "{$path}";
            var formdata = new FormData($(this)[0]);
            if (formdata) {
                $.ajax({
                    url: path+"/Modules/Admin/Master/Jobapply/save",
                    type: "POST",
                    dataType: "JSON",
                    data: formdata,
                    cache: false,
                    processData: false,
                    contentType: false,
                    success: completeHandler = function (obj) {
                        if (obj.status != 'ok') {
							//console.log(obj.status, obj.error);
							//form.classList.add('was-validated');
							var error = obj.error;
							$.each(error, function (key, val) {
								Lobibox.notify(obj.status, {
									width: 'auto',
									delay: 5000,
									soundPath: 'Assets/sounds/',
									iconSource: 'fontAwesome',
									title: '<div>Error</div>',
									msg: val
								});
							});
							$(".bt_load").text("Submit");
							$("button:submit").attr("disabled", false);
						} else {
							Lobibox.notify("success", {
								width: 'auto',
								//delay: 2500,
								delay: 5000,
								soundPath: 'Assets/sounds/',
								iconSource: 'fontAwesome',
								title: '<div>Success</div>',
								msg: 'Your data has been sent'
							});
                           $("input, textarea").val("");
						   $(".bt_load").text("Submit");
							$("button:submit").attr("disabled", false);
                        }
                    }
                });
            }
        return false;
    });
</script>