@extends('web.layouts.container')
@section('content')
    <section class="news-det job-det section">
        <div class="container">
{{--            @if($job->image)--}}
{{--            <div class="img-box mt-5">--}}
{{--                <img src="{{asset($job->image)}}" alt="" class="sec-img"/>--}}
{{--            </div>--}}
{{--            @endif--}}
            <div class="card-body col-lg-11 mt-4 det_container">
                <h1 class="title color-secondary mb-4">
                    {{$job->name}}
                </h1>
                <h5 class="subtitle color-primary mb-4">{{$job->catName}}</h5>
                {!! $job->description !!}
            </div>
            <div class="uploading_box row mt-4 align-items-center">
                <div class="col-lg-4">
                    <div class="jobImg-box">
                        <img src="{{asset('assets/web/images/icons/cv.svg')}}" alt="" class="icon"/>
                    </div>
                </div>
                <div class="col-lg-8">
                    <h1 class="title color-secondary">{{__('jobs.drop_your_cv')}}</h1>
                    <p class="det">{{__('jobs.job_detail_hint')}}</p>
                    <div class="butns d-flex align-items-center">
                        <div class="upload-main-wrapper me-3">
                            <div class="upload-wrapper" style="direction: ltr">
                                <form class="upload_cv_form" action="{{route('job.uploadCv')}}" method="post" enctype="multipart/form-data">
                                    @csrf()
                                    <input type="file" name="cv" id="upload-file">
                                </form>
                                <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">{{__('jobs.upload_cv')}}</span>
                                <div class="file-success-text d-none success_svg">
                                    <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:#ffffff;stroke-width:10;stroke-miterlimit:10;" cx="49.799" cy="49.746" r="44.757"/>
                                        <polyline style="fill:rgba(0,0,0,0);stroke:#ffffff;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>
                                </div>
                            </div>
                            <p id="file-upload-name"></p>
                        </div>
                        <a target="_blank" href="{{$job->linkedin_url}}" class="butn bg-primary text-white">
                            <i class="fa-brands fa-linkedin"></i> {{__('jobs.apply_with_linkedin')}}
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <img src="{{asset('assets/web/images/pattern-2.png')}}" alt="" class="bg"/>
    </section>
@endsection

@section('inner_js')

    <script>

        let jobId = "{{$job->id}}",
            uploadWrapper = $('.upload-wrapper'),
            successSvg = $('.success_svg'),
            fileUploadName = $('#file-upload-name');

        uploadWrapper.click(function(){
            $(this).removeClass('success');
            fileUploadName.html('');
        });

        $('input[name="cv"]').change(async function (e) {
            e.preventDefault();

            // $(this).prop('disabled', true);

            successSvg.addClass('d-none');
            uploadWrapper.removeClass('success');
            uploadWrapper.removeClass('success');


            if($(this).val() === ''){
                return false;
            }

            let form = $('.upload_cv_form'),
                data = new FormData(form[0]),
                url = form.attr('action'),
                method = form.attr('method');

            data.append('job_id', jobId);

            const response=await ajax({
                url,
                data,
                dataType: 'json',
                method
            });

            if (response.errors){
                uploadWrapper.removeClass('success');
                fileUploadName.html('');
                $(this).prop('disabled', false);
                toasterError(response.errors);
            }

            if (response.message){
                $('.success_svg').removeClass('d-none');
                toasterSuccess(response.message);
            }

        });

        $(document).ready(function () {
            $('.det_container p').addClass('det')
        })
    </script>

@endsection