@extends('layout')

@section('css')
<link rel="stylesheet" href="{{url('/')}}/assets/front/css/style_caruser.css">
    <style>
        .btn-pink {
            color: #fff !important;
            background: #af2653 !important;
        }
        #jobApply input.form-control, #jobApply select.form-control, #jobApply select.form-control option {
            font-size: 14px !important;
        }
        .btn-pink:hover {
            background: #cc3b6b !important;
        }
        .help-block.text-danger {
            display: none;
        }

        .btn-orange {
            color: #fff !important;
            background: #ff6600 !important;
        }

        .btn-orange:hover {
            background: #ff9900 !important;
        }

        .btn-blue {
            color: #fff !important;
            background: #4980bd !important;
        }

        .btn-blue:hover {
            background: #69abe3 !important;
        }

        .btn-green {
            color: #fff !important;
            background: #4cad2b !important;
        }

        .btn-green:hover {
            background: #76c139 !important;
        }

        .video:before {
            background: none !important;
        }

        .newsletter:after {
            background: -webkit-linear-gradient(-30deg, #2c039f 0%, #c0392b 100%) !important;
        }

        a.title-link {
            background: none !important;
            -webkit-background-clip: initial !important;
            -webkit-text-fill-color: initial !important;
            padding: 0 !important;
            width: initial !important;
            display: initial !important;
            text-align: center !important;
            position: initial !important;
            border: none !important;
            border-radius: 0 !important;
            margin-top: 0 !important;
        }

        @media (min-width: 992px) {
            .modal-xl {
                max-width: 930px;
            }
        }

        .form-switch {
            display: inline-block;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }

        .form-switch i {
            position: relative;
            display: inline-block;
            margin-right: .5rem;
            width: 46px;
            height: 26px;
            background-color: #e6e6e6;
            border-radius: 23px;
            vertical-align: text-bottom;
            transition: all 0.3s linear;
        }

        .form-switch i::before {
            content: "";
            position: absolute;
            left: 0;
            width: 42px;
            height: 22px;
            background-color: #7f7f7f;
            border-radius: 11px;
            transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
            transition: all 0.25s linear;
        }

        .form-switch i::after {
            content: "";
            position: absolute;
            left: 0;
            width: 22px;
            height: 22px;
            background-color: #fff;
            border-radius: 11px;
            box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
            transform: translate3d(2px, 2px, 0);
            transition: all 0.2s ease-in-out;
        }

        .form-switch:active i::after {
            width: 28px;
            transform: translate3d(2px, 2px, 0);
        }

        .form-switch:active input:checked + i::after {
            transform: translate3d(16px, 2px, 0);
        }

        .form-switch input {
            display: none;
        }

        .form-switch input + i {
            background-color: #7f7f7f;
        }

        .form-switch input:checked + i {
            background-color: #5b4de2;
        }

        .form-switch input:checked + i::before {
            transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0);
        }

        .form-switch input:checked + i::after {
            transform: translate3d(22px, 2px, 0);
        }

        .custom-radio .custom-control-input:checked ~ .custom-control-label::before {
            background-color: #5b4de2;
        }

        .custom-control-input:checked ~ .custom-control-label::before {
            color: #fff;
            background-color: #5b4de2;
        }
        .file input {
            position: absolute;
            font-size: 50px;
            opacity: 0;
            right: 0;
            top: 0;
        }
        .form-error {
            font-size: 13px;
            color: red;
        }
        .file > .form-error {
            position: absolute;
            top: 20px;
            left: 130px;
        }

        /*@dinar 27.07.20*/
        .load-progress {
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 99; 
            display: none;
            justify-content: center;
            align-items: center;
        }
        .load-progress.active {
            display: flex;
        }
        #progressBar {
            border-radius: 10px;
            border: none;
            width: 100%;
            max-width: 300px; 
            height: auto;
        }
        #progressBar[value]::-webkit-progress-bar {
          background-color: #eee!important;
          border-radius: 2px!important;
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset!important;
        }

        .custom-file-label {
            background-color: #f2f6fc;
            width: 120px;
        }
        .custom-file-input:disabled {
            cursor: not-allowed;
        }


.custom-file {
    position: relative;
    display: inline-block;
    width: 100%;
	height: 35px;
    margin-bottom: 0;
}
.custom-file-input {
    position: relative;
    z-index: 2;
    width: 100%;
    height: calc(1.5em + 1.75em);
    margin: 0;
    opacity: 0;
	height: 35px;
}
.custom-file-label {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    height: calc(1.5em + 1.75em);
    padding: .75em .75rem;
    font-weight: 300;
    line-height: 1;
    color: #1a1b21;
    background-color: #fff;
    border: .0625em solid #eaedf2;
    border-radius: .25rem;
    box-shadow: 0 4px 30px rgba(0,0,0,.05);
	font-size: 16px;
}
.custom-control-label::before, .custom-file-label, .custom-select {
    transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.custom-file-label {
    border: .0625em solid #eaedf2;
    font-size: 1rem;
    color: #80828a;
    text-align: left;
	height: 35px;
	font-size: 16px;
}
.grecaptcha-badge {
	display: none !important;
}
    </style>
@stop

@section('content')

    
    <!--Page Title-->
    <section class="page-title" style="background-image:url({{url('/')}}/assets/front/img/bg-page-title-1.jpg);">
    	<div class="auto-container">
        	<div class="inner-box">
                <h1>{{ $career->title }}</h1>
                <ul class="bread-crumb">
                	<li><a href="/">Home</a></li>
                    <li>{{ $career->title }}</li>
                </ul>
            </div>
        </div>
    </section>
    <!--End Page Title-->

    <!-- Banner Section start -->
    <section class="banner-section inner-banner career career-details section-padding">
        <div class="banner-bottom pb-120">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-lg-12">
                        <div class="top-box d-flex align-items-center justify-content-between">
                            <div class="left-box">
                            <div class="text-center mb-3">
                                <div class="section-text">
                                    <h2 class="title">{{ $career->title }}</h2>
                                </div>
                                <ul class="mb-3 d-flex justify-content-center">
                                    <li class="me-3"><i class="fal fa-globe"></i> {{ $career->location }}</li>
                                    <li><i class="fal fa-clock"></i> 
                                    @if ($career->offer_type == 'freelance')
                                        Freelance
                                    @endif
                                    @if ($career->offer_type == 'part_time')
                                        Part Time
                                    @endif
                                    @if ($career->offer_type == 'full_time')
                                        Full Time
                                    @endif
                                    @if ($career->offer_type == 'temporary')
                                        Temporary
                                    @endif									
									</li>
                                </ul>
                                <a href="#apply" class="mb-5 theme-btn btn-style-one">Apply Now</a>
                            </div>
                                    {!! $career->description !!}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Banner Section end -->




<section class="section bg-soft text-dark carers__details p-0 section--blue overflow-visible more-features">
        <div class="overlay pt-120 pb-120">
    <div class="container">
        <div id="apply" class="row">
            <div class="col">
                <div class="donation-form-outer">
                    <div class="card-body p-4">
                                <div class="row">
                                        <div class="col-xl-12 col-lg-12 col-md-12">
                                            <div class="">
                                                <div class="card-body">
                                                    <h2 class="text-3xl font-700 pb-3 text-center">Apply For This Job</h5>
                                                    <br>
                                                    <form role="form" action="{{ route('form.job.apply', $career->id) }}" method="post" id="jobApply" enctype="multipart/form-data">
                                                        <div class="row">
                                                            <div class="form-group col-md-6">
                                                                <label class="field-label" for="">First Name</label>
                                                                <div class="input-group">
                                                                    <input type="text" name="f_name" class="" value="" required>

                                                                </div>
                                                            </div>
                                                            <div class="form-group col-md-6">
                                                                <label class="field-label" for="">Last Name</label>
                                                                <div class="input-group">
                                                                    <input type="text" name="l_name" class="" value="" required>
                                                                                                                                    </div>
                                                            </div>
                                                        </div>
                                                        <div class="row mt-2">
                                                            <div class="form-group col-md-6">
                                                                <label class="field-label" for="">Address</label>
                                                                <div class="input-group">
                                                                    <input type="text" name="address" class="" value="" required>
                                                                                                                                    </div>
                                                            </div>
                                                            <div class="form-group col-md-6">
                                                                <label class="field-label" for="">Email Address</label>
                                                                <div class="input-group">
                                                                    <input type="email" name="email" class="" value="" required>
                                                                                                                                    </div>
                                                            </div>
                                                        </div>
                                                        <div class="row mt-2">
                                                            <div class="form-group col-md-6">
                                                                <label class="field-label" for="">City</label>
                                                                <div class="input-group">
                                                                    <input type="text" name="city" class="" value="" required>
                                                                                                                                    </div>
                                                            </div>
                                                            <div class="form-group col-md-6">
                                                                <label class="field-label" for="">Zip</label>
                                                                <div class="input-group">
                                                                    <input type="text" name="zip" class="" value="" required>
                                                                                                                                    </div>
                                                            </div>
                                                        </div>
                                                        <div class="row mt-2">
                                                            <div class="form-group col-md-6">
                                                                <label class="field-label" for="">Country</label>
                                                                <div class="input-group">
                                                                    <select id="2country" name="country" class="form-control custom-select-sm form__select" required><option selected value="" hidden>Select</option></select>
                                                                                                                                    </div>
                                                            </div>
                                                            <div class="form-group col-md-6">
                                                                <label class="field-label" for="">State</label>
                                                                <div class="input-group">
                                                                    <select id="2state" name="state" class="form-control custom-select-sm form__select" required>
                                                                        <option selected="" value="" hidden="">Select state</option>
                                                                    </select>                                                                                                                                    </div>
                                                            </div>
                                                        </div>
                                                        <div class="row mt-2">
                                                            <div class="form-group col-md-6">
                                                                <label class="field-label" for="">Cell Phone</label>
                                                                <div class="input-group">
                                                                    <input type="text" name="cell_phone" class="" value="" required>
                                                                                                                                    </div>
                                                            </div>
                                                            <div class="form-group col-md-6">
                                                                <label class="field-label" for="">Home phone</label>
                                                                <div class="input-group">
                                                                    <input type="text" name="home_phone" class="" value="" required>
                                                                                                                                    </div>
                                                            </div>
                                                        </div>
                                                        <div class="row mt-3">
                                                        <div class="col-md-4">

                                                        <div class="row text-center text-dark">
                                                            <div class="col-md-12">
                                                                <p>Employment desired</p>
                                                            </div>
                                                            <div class="col-md-12 text-center justify-content-center d-flex text-dark">
                                                                <label class="form-switch pull-right ps-0 text-dark">
                                                                    <input type="checkbox" name="employment_desired">
                                                                    Part Time
                                                                    <i class="mx-2"></i>
                                                                    Full Time
                                                                </label>
                                                            </div>


                                                        </div>
                                                        </div>
                                                        <div class="col-md-4">
                                                        <div class="row text-center text-dark">


                                                            <div class="col-md-12">
                                                                <p>Currently employed</p>
                                                            </div>
                                                            <div class="col-md-12 text-center justify-content-center d-flex text-dark">
                                                                <label class="form-switch pull-right ps-0 text-dark">
                                                                    <input type="checkbox" name="currently_employed">
                                                                    No
                                                                    <i class="mx-2"></i>
                                                                    Yes
                                                                </label>
                                                            </div>

                                                        </div>
                                                        </div>
														
														
                                                        <div class="col-md-4">
                                                        <div class="row text-center text-dark">


                                                            <div class="col-md-12">
                                                                <p>Driver's license</p>
                                                            </div>
                                                            <div class="col-md-12 justify-content-center d-flex text-dark">
                                                                <label class="form-switch pull-right ps-0 text-dark">
                                                                    <input type="checkbox" name="driver_licence">
                                                                    No
                                                                    <i class="mx-2"></i>
                                                                    Yes
                                                                </label>
                                                            </div>

                                                        </div>
                                                        </div>

                                                        </div>
                                                        <div class="row mt-2">
                                                        <div class="col-md-3">
                                                        <div class="row">
                                                            <div class="col-md-12">
                                                                <label class="">Upload CV</label>
                                                            </div>
                                                            <div class="col-md-12 text-dark">

                                                                <div class="custom-file">
                                                                    <input type="file" class="custom-file-input" name="cv" onchange="uploadFile()" id="customFile" data-validation-allowing="pdf, doc, docx, rtf, jpg" data-validation-max-size="9M">
                                                                    <label class="custom-file-label" for="customFile"><i class="fa fa-upload"></i></label>
                                                                </div>
                                                                <span>Tip: Allowed file types: pdf, doc, docx, rtf, jpg, jpeg</span>
                                                            </div>
                                                        </div>
                                                        </div>
                                                        <div class="col-md-5 d-flex align-items-center">
                                                        <div class="d-flex width_100 flex-wrap mobwrap justify-content-right align-items-center">
                                                            <div class="mobw_100 w-100 mb-3 text-center text-dark">
                                                                Education
                                                            </div>
                                                            <div class="text-center w-100 mobtxt_left d-flex flex-nowrap">

                                                                <div class="custom-control custom-radio custom-control-inline ps-4 text-dark d-flex align-items-center">
                                                                    <input type="radio" id="2education1" name="education" class="custom-control-input" value="high_school" checked="">
                                                                    <label class="custom-control-label text-dark mb-0 ms-3" for="2education1">High school</label>
                                                                </div>
                                                                <div class="custom-control custom-radio custom-control-inline ps-5 text-dark d-flex align-items-center">
                                                                    <input type="radio" id="2education2" name="education" class="custom-control-input" value="tech_school">
                                                                    <label class="custom-control-label text-dark mb-0 ms-3" for="2education2">Tech school</label>
                                                                </div>
                                                                <div class="custom-control custom-radio custom-control-inline ps-5 text-dark d-flex align-items-center">
                                                                    <input type="radio" id="2education3" name="education" class="custom-control-input" value="college">
                                                                    <label class="custom-control-label text-dark mb-0 ms-3" for="2education3">College</label>
                                                                </div>
                                                                                                                            </div>
                                                        </div>
                                                        </div>
                                                        </div>
                                                        <div class="row mt-2 justify-content-center mt-5">
                                                            <div class="d-flex justify-content-center">
                                                                <button 
                                                                    type="submit" 
                                                                    onclick="googleCaptcha()" 
                                                                    class="theme-btn btn-style-one">
                                                                        Submit Application
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
</section>
<div class="load-progress">
    <progress id="progressBar" class="progress-bar" value="0" max="100"></progress>
</div>

<script src="{{ asset('assets/user/js/countries.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js?render=6LeTNrcZAAAAAI-U4pRp7_6NU4QaQozOwhZYCClY"></script>









    
    <!--Recent Causes Section-->
    <section class="recent-causes-section">
    	<div class="auto-container">
        	<!--Heading-->
            <div class="sec-title">
            	<h2>Opened positions</h2>
            </div>
            
            <div class="row clearfix">
			@foreach ($lastOffers as $item)
            	<!--Cause Box Two-->
                <div class="cause-box-two col-md-4 col-sm-6 col-xs-12">
                	<div class="inner-box">
                		<figure class="mt-3"><a href="{{ route('careersDetail', $item->id) }}"><img src="{{url('/')}}/assets/front/img/logoc.png" alt=""></a></figure>
                		<div class="lower-content pt-3">                            
                            <h3><a href="{{ route('careersDetail', $item->id) }}">{{ $item->title }}</a></h3>
                            <div class="text-dark mb-3">{!! Illuminate\Support\Str::words(strip_tags($item->description), 15) !!}</div>
                            <div class="donate-box">
                                <div class="donate-info"> <i class="fal fa-money-bill"></i> {{ $item->salary }} / <span class="goal"><i class="fal fa-globe ms-3"></i> {{ $item->location }}</span></div>
                            </div>
                        </div>
                        <ul class="links clearfix">
                            <li><a href="{{ route('careersDetail', $item->id) }}" class="theme-btn donate-btn">APPLY NOW</a></li>
                            <li><a href="{{ route('careersDetail', $item->id) }}" class="theme-btn more-btn">MORE DETAILS</a></li>
                        </ul>
                    </div>
                </div>
            @endforeach   
            </div>
                
        </div>
    </section>	

@stop
@section('script')
<script>
$(document).ready(function(){
    $.fn.equivalent = function (){
        var $blocks = $(this),
            maxH    = $blocks.eq(0).height(); 
        $blocks.each(function(){
            maxH = ( $(this).height() > maxH ) ? $(this).height() : maxH;
        });
        $blocks.height(maxH); 
    }
    $('.morcareer').equivalent(); 
    $('.morcareerp').equivalent(); 
});




</script>
 
<script>
// Передача списка стран в указанные элементы
populateCountries('2country', '2state');


$('#jobApply').on('submit', function(e) {
    e.preventDefault();

    var $form = $(this);
    var url = $form.attr('action');

    if ($('[name=cv]')[0].files[0] === undefined) {
        swal('File is required')
        return false;        
    } else {
        let file = $('[name=cv]')[0].files[0].name
        $('[name=cv]').val('');
            
        let data = new FormData(this);
        data.append("cv", file);
        
        axios.post(url, data).then(function(response) {
            swal('Your request has been accepted!');
            $('#jobApply')[0].reset()
            $('#customFile').attr('disabled', false)
        }, function(error) {
            var defaultMaessage = 'Something went wrong while processing of the query';

            if (error.response.status == 422) {
                for (var key in error.response.data.errors) {
                    var $control = $form.find('[name='+ key +']');

                    $control
                        .addClass('is-invalid')
                        .siblings('div')
                        .children('small')
                        .html(error.response.data.errors[key][0]);

                    $control.one('keyup keypress change', function() {
                        $(this)
                            .removeClass('is-invalid')
                            .siblings('div')
                            .children('small')
                            .empty();
                    });
                }

                return;
            }

            if (error.response.data) {
                swal(error.response.data.message || defaultMaessage);
                return;
            }

            swal(defaultMaessage);
        });

    }


    
});

// @Dinar 28.07.20 google captcha
function googleCaptcha() {
    grecaptcha.ready(function() {
      grecaptcha.execute('6LeTNrcZAAAAAI-U4pRp7_6NU4QaQozOwhZYCClY', {action: 'submit'}).then(function(token) {
        console.log(token)
      });
    });
}


// @Dinar 28.07.20 progress upload files 
function _(el) {
  return document.getElementById(el);
}

function uploadFile() {
    var file = _("customFile").files[0];
    var allowedExt = [ 'jpg', 'jpeg', 'pdf', 'doc', 'docx', 'rtf' ];
    var ext = file.name.split('.').pop().toLowerCase();
    if (allowedExt.indexOf(ext) == -1) {
        swal({
            title: 'Your file has incorrect format',
            text: 'Allowed file types: pdf, doc, docx, rtf, jpg, jpeg'
        })
        return;
    }
    if (file.size > 8388608) {
        swal('Your file is out of the size limit');
        return;
    }

    let url = $('#jobApply').attr('action') + 'File';
    let data = new FormData();
    data.append("cv", file);

    var config = {
        onUploadProgress: function(progressEvent) {
            $('.load-progress').addClass('active');
            var percentCompleted = Math.round( (progressEvent.loaded * 100) / progressEvent.total );
            _("progressBar").value = Math.round(percentCompleted);
        }
    };
 
    axios.post(url, data, config).then(function(response) {
        $('.load-progress').removeClass('active')
        _("progressBar").value = 0;
        $('#customFile').attr('disabled', true)

    }, function(error) {
        var defaultMaessage = 'Something went wrong while processing of the query';

        if (error.response.data) {
            swal(error.response.data.message || defaultMaessage);
            return;
        }

        swal(defaultMaessage);
    });

}

</script>
@stop