@extends('frontend.layout')
@section('page_title', $single_job->position.": ".$single_job->company_name)
@section('styles')
<style>
    .company-logo {
        position: absolute;
        right: 10px;
        top: 15px;
        max-height: 90%;
        max-width: 95px;
    }
    .job-top-title {
        margin-top: 2px;
        color: #009688;
        font-size: 18px;
    }
    @media only screen and (max-width: 1199px) {
        .company-logo {
            position: static;
            display: block;
            margin: 10px auto;
            max-height: 120px;
            max-width: 120px;
        }
    }
</style>
@endsection

@section('content')

<section class="section">
    <div class="container">

        <div class="row" style="margin-bottom: 30px; position: relative;">
            <div class="jihtext">
                <h2 class="col-xs-12">{{$single_job->company_name}}</h2>
                <h3 class="col-xs-12 job-top-title">{{$single_job->position}}</h3>
            </div>

            <img class="company-logo visible-lg" src="{{asset('common_image/jobs')}}/{{$single_job->company_logo ?? 'placeholder.png'}}" alt="{{$single_job->company_name}}">
        </div>

        <div class="row">

            <div class=" col-xs-12 col-sm-6">

                <div class="cpanel">
                    <div class="cpanel-heading">
                        General Info
                    </div>
                    <div class="cpanel-body">
                        <ul class="data-list">
                            <li>
                                <span class="title">Published on: </span>
                                <span class="info">{{$single_job->published_on}}</span>
                            </li>
                            <li>
                                <span class="title">Deadline: </span>
                                <span class="info">{{$single_job->deadline}}</span>
                            </li>
                            <li>
                                <span class="title">Source: </span>
                                <span class="info">{{$single_job->source}}</span>
                            </li>
                            <li>
                                <span class="title">Vacancy: </span>
                                <span class="info">{{$single_job->vacancy}}</span>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="cpanel">
                    <div class="cpanel-heading">
                        Job Details
                    </div>
                    <div class="cpanel-body">
                        <ul class="data-list">
                            <li>
                                <span class="title">Job Nature: </span>
                                <span class="info">{{$single_job->job_nature}}</span>
                            </li>
                            <li>
                                <span class="title">Job Location: </span>
                                <span class="info">{{$single_job->job_location}}</span>
                            </li>
                            <li>
                                <span class="title">Salary: </span>
                                <span class="info">{{$single_job->salary}}</span>
                            </li>
                            <li>
                                <span class="title">Job Description: </span>
                                <span class="info">
                                {!! $single_job->job_description !!}
                                </span>
                            </li>
                            <li>
                                <span class="title">Compensation &amp; Other Benefits: </span>
                                <span class="info">{!!$single_job->compensation_other_benefits!!}</span>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>

            <div class="col-xs-12 col-sm-6">

                <div class="cpanel">
                    <div class="cpanel-heading">
                        Job Requirements
                    </div>
                    <div class="cpanel-body">
                        <ul class="data-list">
                            <li>
                                <span class="title">Educational Requirements: </span>
                                <span class="info">{!! $single_job->educational_requirement !!}</span>
                            </li>
                            <li>
                                <span class="title">Experience Requirements: </span>
                                <span class="info">{{$single_job->exprience_requirement}}</span>
                            </li>
                            <li>
                                <span class="title">Additional Requirements: </span>
                                <span class="info">{!! $single_job->additional_requirement !!}</span>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="cpanel">
                    <div class="cpanel-heading">
                        Apply Procedure
                    </div>
                    <div class="cpanel-body">
                        <ul class="data-list">
                            <li>
                                <span class="title">Apply Instructions: </span>
                                <span class="info">{!! $single_job->apply_instructions !!}</span>
                            </li>
                            <li>
                                <span class="title">Apply Link: </span>
                                <span class="info">
                                            <a href="{{$single_job->apply_link}}" target="_blank" class="hlink">Apply</a>
                                </span>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>

        </div> <!-- row -->

    </div>
</section>

@endsection