@extends('web.layouts.container')

@section('content')
<script src="https://www.google.com/recaptcha/api.js"></script>
<main>
    <!-- Start pg-header -->
    <section class="pg-header section">
        <div class="container">
            <h1 class="title text-white text-uppercase fw-bold text-center"> {{ __('careers.job_details') }}  </h1>
        </div>
        <img src="{{ asset('assets/web/images/header-1.png')}}" alt="" class="bg"/>
    </section>

    <!-- Start impact-pg -->
    <section class="impact-pg news-det job-det section">
        <div class="container">
            <div class="main_inner">
                <div class="box bg_gray mb-0">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="img_box">
                                <img src="{{ asset($career->image?:'assets/web/images/drives-2.png')}}" alt="" class="sec-img"/>
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="text_box">
                                <h2 class="title fw-bold  mb-5 ">
                                    {!! footerLink($career->currentDescription->name, false, false, 2) !!}
                                </h2>
                                <div class="row">
                                    <div class="col-lg-6">
                                        <div class="mb-4">
                                            <h5 class="subtitle fw-bold color-primary mb-3">{{ __('careers.career_description') }}</h5>
                                            {!! $career->currentDescription->career_description !!}
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="mb-4">
                                            <h5 class="subtitle fw-bold color-primary mb-3">{{ __('careers.mini_qualifications') }}</h5>
                                            {!! $career->currentDescription->mini_qualifications !!}
                                        </div>
                                    </div>
                                </div>
                              
                             
                            </div>
                        </div>
                        <div class="col-lg-12">
                            <div class="form_box">
                                <form action="{{route('jobs.apply', $career->id)}}" method="post" class="row career_form">
                                    @csrf()
                                    <h4 class="title fs-2 mb-4 pb-2 fw-bold">
                                        {{ __('careerApplications.apply_job') }}
                                    </h4>
                                    <div class="row">
                                        <div class="col-lg-5">
                                            <div class="form-group mb-4">
                                                <input class="form-control" placeholder="{{ __('careerApplications.name') }}" name="name" type="text"/>
                                            </div>
                                            <div class="form-group mb-4">
                                                <input class="form-control" placeholder="{{ __('careerApplications.email') }}" name="email" type="email"/>
                                            </div>
                                            <div class="form-group mb-4">
                                                <input class="form-control" placeholder="{{ __('careerApplications.phone') }}" name="phone" type="tel"/>
                                            </div>
                                        </div>
                                        <div class="col-lg-7">
                                            <div class="cv_uploading_box justify-content-center d-flex align-items-center">
                                                <img src="{{ asset('assets/web/images/icons/upload_file.svg')}}" alt="" class="icon"/>
                                                <div class="upload_txt">
                                                    <h5 class="label fs-5 mb-3">{{ __('careerApplications.upload_resume') }}</h5>
                                                    <div class="upload-main-wrapper me-3">
                                                        <div class="upload-wrapper">
                                                            <input type="file" id="upload-file" name="cv" accept=".doc,.docx,.pdf,.rar,.png,.jpg,.jpeg">
                                                            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="224.3881704980842 176.8527621722847 221.13266283524905 178.8472378277154" width="221.13" height="178.85"><defs><path d="M357.38 176.85C386.18 176.85 409.53 204.24 409.53 238.02C409.53 239.29 409.5 240.56 409.42 241.81C430.23 246.95 445.52 264.16 445.52 284.59C445.52 284.59 445.52 284.59 445.52 284.59C445.52 309.08 423.56 328.94 396.47 328.94C384.17 328.94 285.74 328.94 273.44 328.94C246.35 328.94 224.39 309.08 224.39 284.59C224.39 284.59 224.39 284.59 224.39 284.59C224.39 263.24 241.08 245.41 263.31 241.2C265.3 218.05 281.96 199.98 302.22 199.98C306.67 199.98 310.94 200.85 314.93 202.46C324.4 186.96 339.88 176.85 357.38 176.85Z" id="b1aO7LLtdW"></path><path d="M306.46 297.6L339.79 297.6L373.13 297.6L339.79 255.94L306.46 297.6Z" id="c4SXvvMdYD"></path><path d="M350.79 293.05L328.79 293.05L328.79 355.7L350.79 355.7L350.79 293.05Z" id="b11si2zUk"></path></defs><g><g><g><use xlink:href="#b1aO7LLtdW" opacity="1" fill="#ffffff" fill-opacity="1"></use></g><g><g><use xlink:href="#c4SXvvMdYD" opacity="1" fill="#363535" fill-opacity="1"></use></g><g><use xlink:href="#b11si2zUk" opacity="1" fill="#363535" fill-opacity="1"></use></g></g></g></g></svg>
                                                            <span class="file-upload-text">{{ __('careerApplications.browse') }}</span>
                                                            <div class="file-success-text">
                                                                <svg version="1.1" id="check" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                                                                    viewBox="0 0 100 100"  xml:space="preserve">
                                                                <circle style="fill:rgba(0,0,0,0);stroke:#001F6F;stroke-width:10;stroke-miterlimit:10;" cx="49.799" cy="49.746" r="44.757"/>
                                                                <polyline style="fill:rgba(0,0,0,0);stroke:#001F6F;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;" points="
                                                                    27.114,51 41.402,65.288 72.485,34.205 "/>
                                                                </svg> 
                                                                {{-- <span>Successfully</span> --}}
                                                                <span id="file-upload-name_">---</span>
                                                            </div>
                                                        </div>
                                                        {{-- <p id="file-upload-name"></p> --}}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-12 mt-4">
                                            <div class="g-recaptcha" data-sitekey="{{ env('GOOGLE_RECAPTCHA_KEY') }}"></div>
                                        </div>
                                        <div class="col-lg-12 mt-4">
                                            <button class="butn secondary_butn py-3 fs-6 career_btn"><b> {{ __('careerApplications.apply') }}</b></button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    

</main>
@endsection

@section('inner_js')
<script>
    $(document).ready(function(){
        $('#upload-file').change(function() {
            let file = $(this).val().split(/\/|\\/);
            const filename= file.pop();
            $('#file-upload-name_').html(filename);
            if(filename!=""){
                // setTimeout(function(){
                //     $('.upload-wrapper').addClass("uploaded");
                // }, 600);
                // setTimeout(function(){
                //     $('.upload-wrapper').removeClass("uploaded");
                // }, 1600);
                setTimeout(function(){
                    $('.upload-wrapper').addClass("success");
                }, 600);
            }
        });
    });
</script>
@endsection