@extends('front.layouts.master')

@section('css')
    <link rel="stylesheet" href="{{ asset('front/assets/css/intlTelInput.css') }}">
    <style>
        .iti {
            width: 100% !important;
            display: block !important;
        }

        .loading_bar {
			display: none;
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background: #fff url("{{ asset('front/assets/img/loading.gif') }}") no-repeat center center;
			opacity: 0.7;
			filter: alpha(opacity=75);
			z-index: 99;
			text-align: center;
			width: 100%;
			height: 100%;
		}
    </style>
@endsection

@section('content')

<div class="loading_bar"></div>

<!-- banner section start -->
<section class="description-banner">
    <div class="container">
        <div class="banner-content">
            <h1 class="text-light font-heavy text-uppercase">{{ $career->title }}</h1>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item font-medium text-light"><a href="{{ route('front.home') }}">Home</a></li>
                    <li class="breadcrumb-item font-medium text-light">{{ $career->title }}</li>
                </ol>
            </nav>
        </div>
    </div>
</section>
<!-- banner section end -->

<!-- start career section -->
<section class="career-detail">
    <div class="container">
        <div class="row">
            <div class="heading facility-heading network-heading mb-4">
                <h2 class="text-center font-bold">Join Our Team </h2>
            </div>
        </div>

        <div class="row mt-4">
            <div class="col-lg-5 col-sm-5">
                {!! Form::open(['route' => ['front.career-submit', $career->id], 'method' => 'post', 'id' => 'ajax-submit', 'files' => 'true']) !!}
                    <div class="row d-flex flex-wrap justify-content-between">
                        <div class="mb-4 col-12 col-md-6">
                            <input type="text" name="name" class="form-control" placeholder="Name" id="name">
                        </div>

                        <div class="mb-4 col-12 col-md-6">
                            <input type="email" name="email" class="form-control" placeholder="Email Address" id="email">
                        </div>

                        <div class="mb-4 col-12 col-md-6">
                            <input type="text" class="form-control" id="phone_number" name="contact_number" placeholder="Contact Number" value="{{ $phone }}" autocomplete="off" onkeypress="javascript:return numeric(event,this)">
                            <input type="hidden" id="dial_code" value="{{ $dialCode }}" name="dial_code">
                            <input type="hidden" id="dial_code_iso" value="{{ $dialCodeISO }}" name="dial_code_iso">
                        </div>

                        <div class="mb-4 col-12 col-md-6">
                            {{ Form::select('gender', gender(true, '', 'Gender'), null, ['class' => 'form-select mt-0 mb-0']) }}
                        </div>

                        <div class="mb-4 col-12">
                            <input type="file" class="form-control" name="attachment" />
                        </div>
                    </div>

                    <div>
                        <button type="submit" name="submit" class="btn btn-primary font-bold border-0">APPLY NOW</button>
                    </div>
                {!! Form::close() !!}
            </div>
            <div class="col-lg-7 col-sm-7 mt-4 mt-md-0">
                <div class="right-desp">
                    <span class="d-block">
                        <img src="{!! image($career->image, CAREER_PATH) !!}" class="w-100 h-100 rounded" alt="{{ $career->title }}">
                    </span>
                    <div class="job-desp">
                        <div class="skills mt-4">
                            <h4 class="font-bold">Skills Required:</h4>
                            <div class="font-medium custom-career">{!! $career->skill !!}</div>
                        </div>

                        <hr>

                        <div class="d-flex align-items-center mt-2">
                            <strong class="font-bold  text-md-center me-2">No. Of Openings: </strong>
                            <p class="text-primary font-medium text-md-center">{{ $career->number_of_opening }}</p>
                        </div>
                        <div class="d-flex align-items-center mt-2">
                            <strong class="font-bold  text-md-center me-2">Experience:</strong>
                            <div class="text-primary font-medium text-md-center">{!! $career->experience !!}</div>
                        </div>
                        <div class="d-flex align-items-center mt-2">
                            <strong class="font-bold  text-md-center me-2">Qualification:</strong>
                            <div class="text-primary font-medium text-md-center">{!! $career->qualification !!}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</section>
<!-- end career section -->
@endsection

@section('bottom_script')

<script src="{{asset('front/assets/js/intlTelInput.js')}}"></script>
<script>
    window.addEventListener('load', (event) => {
        var input = document.getElementById("phone_number");
        var dialing_code = document.getElementById("dial_code");
        var dialing_code_iso = document.getElementById("dial_code_iso");
        var iti = window.intlTelInput(input, {
            utilsScript: "{{ asset('front/assets/js/utils.js') }}"
        });

        iti.setNumber('{{ $dialCode }}');
        iti.setNumber('{{ $phone }}');

        input.addEventListener("countrychange", function() {
            var number = iti.selectedCountryData.dialCode;
            dialing_code.value = '+' + number;
            dialing_code_iso.value = iti.selectedCountryData.iso2.toUpperCase();
        });
    });
</script>
<script src="{{asset('front/assets/js/intlTelInput.js')}}"></script>

<script>
    function numeric(e, object) {
        var KeyID = (window.event) ? event.keyCode : e.which;
        if ((KeyID >= 65 && KeyID <= 90) || (KeyID >= 97 && KeyID <= 99) || (KeyID >= 100 && KeyID <= 122) || (KeyID >= 33 && KeyID <= 47) || (KeyID >= 58 && KeyID <= 64) || (KeyID >= 91 && KeyID <= 95) || (KeyID >= 123 && KeyID <= 126)) {
            return false;
        }
    }

    function load_bar_window(x) {
        if (x == 0) {
            $('body').removeClass('overlay');
            $('body').css({
                "cursor": "default"
            });
            $(".loading_bar").css("display", "none"); //modal window
        } else if (x == 1) {
            $('body').addClass('overlay');
            $('body').css({
                "cursor": "wait"
            });
            $(".loading_bar").css({
                "display": "block"
            });
        } else {
            return alert("Wrong argument!");
        }
    }

    $('#ajax-submit').submit(function (e) {
        e.preventDefault();

        $('#ajax-submit').find(".error").remove();
        let form = $('#ajax-submit');

        $.ajax({
            type: $(this).attr('method'),
            url: $(this).attr('action'),
            data: new FormData(this),
            processData: false,
            contentType: false,
            beforeSend: function () {
                $('.alert').fadeOut();
                load_bar_window(1);
            },
            success: function (data) {
                load_bar_window(0);
                if (data.success) {
                    $(this).find("button[type='submit']").prop('disabled', true);
                    $('#contact_us_success').html(data.message).fadeIn().delay(2500).fadeOut();
                    setInterval(() => {
                        location.reload();
                    }, 5000);
                }
                else {
                    if (data.status == 206) {
                        $.each(data.message, function (i, v) {
                            let error = '<div class="error">' + v + '</div>';
                            let split = i.split('.');
                            if (split[2]) {
                                var ind = split[0] + '[' + split[1] + ']' + '[' + split[2] + ']';
                                form.find("[name='" + ind + "']").parent().append(error);
                            } else if (split[1]) {
                                let ind = split[0] + '[' + split[1] + ']';
                                form.find("[name='" + ind + "']").parent().append(error);
                            } else {
                                form.find("[name='" + i + "']").parent().append(error);
                            }
                        });
                    } else if (data.status == 207) {
                        $('#contact_us_error').html(data.message).fadeIn();
                    }
                }
            },
            error: function (data) {
                console.log('An error occurred.');
            }
        });
    });
</script>
@endsection