@extends( 'layout.main' )

@push( 'scripts' )
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyACthij0mF2Hhs6ETMGkQ5eMiB6wdCBtC8&libraries=places"></script>
    <script src="{{ asset( 'js/infobox.min.js' ) }}"></script>
    <script src="{{ asset( 'js/markerclusterer.js' ) }}"></script>
    <script src="{{ asset( 'js/maps.js' ) }}"></script>
@endpush

@section( 'content' )

    <!-- Apply for a job popup
================================================== -->
    @if( $job->hasApplied() === false )
        <div id="small-dialog" class="zoom-anim-dialog mfp-hide dialog-with-tabs">
            <!--Tabs -->
            <div class="sign-in-form">

                <ul class="popup-tabs-nav">
                    <li><a href="#tab">Apply Now</a></li>
                </ul>

                <div class="popup-tabs-container">

                    <!-- Tab -->
                    <div class="popup-tab-content" id="tab">

                        <!-- Welcome Text -->
                        <div class="welcome-text">
                            <h3>Please confirm you'd like to apply to this job</h3>
                        </div>

                        <!-- Form -->
                        <form method="post" action="{{ route( 'jobs.apply', $job->ID ) }}" id="apply-now-form">
                        @csrf

                        <!-- Button -->
                            <button class="button margin-top-35 full-width button-sliding-icon ripple-effect" type="submit" form="apply-now-form">Let's go!
                                <i class="icon-material-outline-arrow-right-alt"></i></button>

                        </form>

                    </div>

                </div>
            </div>
        </div>
    @endif

    <!-- Apply for a job popup / End -->


    <div class="single-page-header" data-background-image="{{ asset( 'images/single-job.jpg' ) }}">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="single-page-header-inner">
                        <div class="left-side">
                            @if( $job->company->image )
                            <div class="header-image">
                                <a href="{{ route( 'companies.show', $job->company->slug )  }}"><img src="{{ $job->company->image }}" alt=""></a>
                            </div>
                            @endif
                            <div class="header-details">
                                <h3>{{ $job->title }}</h3>
                                <h5>{{ $job->address['address'] }}</h5>
                                <ul>
                                    <li>
                                        <a href="{{ route( 'companies.show', $job->company->slug )  }}"><i class="icon-material-outline-business"></i> {{ $job->company->name }}
                                        </a>
                                    </li>
                                    @if ( $job->meta->start_date )
                                        <li>
                                            <span><i class="icon-material-outline-date-range"></i> Start Date: {{ $job->start_time->format( 'l, F d, Y') }}
                                            </span>
                                        </li>
                                    @endif
                                    @if ( $job->company->average_rating === 0 )
                                        <li>
                                            <i class="icon-material-outline-star"></i> No Reviews
                                        </li>
                                    @else
                                        <a href="#reviews">
                                            <li>
                                                <div title="{{ $job->company->reviews()->count() }} reviews" class="star-rating" data-rating="{{ $job->company->average_rating }}"></div>
                                            </li>
                                        </a>
                                    @endif
                                </ul>
                            </div>
                        </div>
                        <div class="right-side">
                            <div class="salary-box">
                                <div class="salary-type">Daily Rate</div>
                                <div class="salary-amount">{{ $job->daily_rate }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if ( $job->getApplication() && $job->getApplication()->applicant_accepted )
    <div class="container margin-bottom-50">
        <div class="notification notice closeable">
            <p>You have accepted the offer from <strong>{{ $job->company->name }}</strong>. The job start date is on {{ \Carbon\Carbon::parse( $job->start_timestamp )->format( 'l, F d, Y \a\t H:i') }}.</p>
        </div>
    </div>
    @elseif ( $job->getApplication() && $job->getApplication()->applicant_rejected )
    <div class="container margin-bottom-50">
        <div class="notification notice closeable">
            <p>You have rejected the offer from <strong>{{ $job->company->name }}</strong>.</p>
        </div>
    </div>
    @elseif ( $job->hasApplied() && $job->getApplication()->sent_employment_request )
    <div class="container margin-bottom-50">
        <div class="notification notice closeable">
            <p><strong>{{ $job->company->name }}</strong> has offered you a contract. If you choose to accept, you will begin on {{ $job->start_time->format( 'l, F d, Y') }}.</p>

            <div class="margin-top-20">
                <form class="d-inline-block" method="post" action="{{ route( 'application.reply', [ 'job' => $job->ID, 'contract' => $job->getApplication()->id ] ) }}">
                    @csrf

                    <input type="hidden" name="accepted" value="true">
                    <button type="submit" class="d-inline-block text-white button primary">
                        <i class="icon-line-awesome-check"></i> Accept Job
                    </button>
                </form>

                <form class="d-inline-block" method="post" action="{{ route( 'application.reply', [ 'job' => $job->ID, 'contract' => $job->getApplication()->id ] ) }}">
                    @csrf

                    <input type="hidden" name="accepted" value="false">
                    <button type="submit" class="d-inline-block margin-left-15 button gray">Reject Offer</button>
                </form>
            </div>
        </div>
    </div>
    @endif

    <!-- Page Content
================================================== -->
    <div class="container">

        <div id="main-app" class="row">
{{--        <div class="row">--}}

            <!-- Content -->
            <div class="col-xl-8 col-lg-8 content-right-offset">

                <div class="single-page-section">
                    <h3 class="margin-bottom-25">Job Description</h3>
                    <p>{!! clean( $job->post_content ) !!}</p>
                </div>

                <div class="single-page-section">
                    <h3 class="margin-bottom-30">Location</h3>
                    <div id="single-job-map-container">
                        <div id="singleListingMap" data-latitude="{{ $job->address['lat'] }}" data-longitude="{{ $job->address['lng'] }}" data-map-icon="im im-icon-Hamburger"></div>
                        <a href="#" id="streetView">Street View</a>
                    </div>
                </div>

                <div class="single-page-section">
                    <h3 class="margin-bottom-25">Similar Jobs Nearby</h3>

                    <!-- Listings Container -->
                    <div class="listings-container grid-layout">

                    @foreach( \App\Helpers\jobs_nearby( $job ) as $nearby_job )
                        <!-- Job Listing -->
                            <a href="{{ $nearby_job->url }}" class="job-listing">

                                <!-- Job Listing Details -->
                                <div class="job-listing-details">
                                @if( $nearby_job->company )
                                    <!-- Logo -->
                                        <div class="job-listing-company-logo">
                                            <img src="{{  $nearby_job->company->image }}" alt="">
                                        </div>
                                @endif

                                <!-- Details -->
                                    <div class="job-listing-description">
                                        @if ( $nearby_job->company )
                                            <h4 class="job-listing-company">{{ $nearby_job->company->name }}</h4>
                                        @endif
                                        <h3 class="job-listing-title">{{ $nearby_job->title }}</h3>
                                    </div>
                                </div>

                                <!-- Job Listing Footer -->
                                <div class="job-listing-footer">
                                    <ul>
                                        @if ( $proximity = $nearby_job->proximity )
                                            <li>
                                                <i class="icon-material-outline-location-on"></i> {{ $proximity }} km away
                                            </li>
                                        @endif
                                        <li>
                                            <i class="icon-material-outline-business-center"></i> {{ $nearby_job->getTypeAttribute() }}
                                        </li>
                                        <li>
                                            <i class="icon-material-outline-account-balance-wallet"></i> {{ $nearby_job->daily_rate }}
                                        </li>
                                        <li>
                                            <i class="icon-material-outline-access-time"></i>{{ $nearby_job->created_at->diffForHumans() }}
                                        </li>
                                    </ul>
                                </div>
                            </a>
                    @endforeach
                    <!-- Job Listing -->
                    </div>
                    <!-- Listings Container / End -->

                </div>
            </div>


            <!-- Sidebar -->
            <div class="col-xl-4 col-lg-4">
                <div class="sidebar-container">

                    <job-apply :job-id="{{ $job->ID }}" :is-unauthenticated="{{ ! auth()->check() ? 'true' : 'false' }}" :is-owner="{{ $job->post_author === $user->ID ? 'true' : 'false' }}" :has-closed="{{ $job->is_closed ? 'true' : 'false' }}" :has-previously-applied="{{ $job->hasApplied() ? 'true' : 'false' }}" :has-signed-contract="{{ $user->has_signed_contract ? 'true' : 'false' }}"></job-apply>

{{--                    @auth--}}
{{--                        @if ( $job->is_closed )--}}
{{--                            <a href disabled class="disabled apply-now-button popup-with-zoom-anim">This job is now closed.</a>--}}
{{--                        @elseif ( $job->post_author === $user->ID )--}}
{{--                            --}}{{-- Edit Page Link --}}
{{--                            <a href="{{ route( 'jobs.edit', $job->ID ) }}" class="apply-now-button">Edit Job Listing--}}
{{--                                <i class="icon-material-outline-arrow-right-alt"></i></a>--}}
{{--                        @else--}}
{{--                            @if( $job->hasApplied() === false )--}}
{{--                                <a href="#small-dialog" class="apply-now-button popup-with-zoom-anim">Apply Now--}}
{{--                                    <i class="icon-material-outline-arrow-right-alt"></i></a>--}}
{{--                            @else--}}
{{--                                <a href disabled class="disabled apply-now-button popup-with-zoom-anim">You've already applied--}}
{{--                                </a>--}}
{{--                            @endif--}}
{{--                        @endif--}}
{{--                    @else--}}
{{--                        <a href="#sign-in-dialog" class="apply-now-button popup-with-zoom-anim">Log in to apply--}}
{{--                            <i class="icon-material-outline-arrow-right-alt"></i></a>--}}
{{--                @endauth--}}

                <!-- Sidebar Widget -->
                    <div class="sidebar-widget">
                        <div class="job-overview">
                            <div class="job-overview-headline">Job Summary</div>
                            <div class="job-overview-inner">
                                <ul>
                                    @if( $job->proximity )
                                        <li>
                                            <i class="icon-material-outline-location-on"></i>
                                            <span>Proximity</span>
                                            <h5>{{ $job->proximity }} km away</h5>
                                        </li>
                                    @endif
                                    @if ( $job->type )
                                        <li>
                                            <i class="icon-material-outline-business-center"></i>
                                            <span>Job Type</span>
                                            <h5>{{ $job->type }}</h5>
                                        </li>
                                    @endif
                                    <li>
                                        <i class="icon-material-outline-local-atm"></i>
                                        <span>Day Rate</span>
                                        <h5>{{ $job->daily_rate }}</h5>
                                    </li>
                                    <li>
                                        <i class="icon-material-outline-access-time"></i>
                                        <span>Date Posted</span>
                                        <h5>{{ $job->created_at->diffForHumans() }}</h5>
                                    </li>
                                    <li>
                                        <i class="icon-material-outline-account-circle"></i>
                                        <span>Candidates To Hire</span>
                                        <h5>{{ $job->number_of_candidates }}</h5>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- Sidebar Widget -->
                    <div class="sidebar-widget">
                        <h3>Share</h3>

                        <!-- Copy URL -->
                        <div class="copy-url">
                            <input id="copy-url" type="text" value="" class="with-border">
                            <button class="copy-url-button ripple-effect" data-clipboard-target="#copy-url" title="Copy to Clipboard" data-tippy-placement="top">
                                <i class="icon-material-outline-file-copy"></i></button>
                        </div>

                        <!-- Share Buttons -->
                        <div class="share-buttons margin-top-25">
                            <div class="share-buttons-trigger"><i class="icon-feather-share-2"></i></div>
                            <div class="share-buttons-content">
                                <span>Interesting? <strong>Share It!</strong></span>
                                <ul class="share-buttons-icons">
                                    <li>
                                        <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode( $job->url) }}" data-button-color="#3b5998" title="Share on Facebook" data-tippy-placement="top"><i class="icon-brand-facebook-f"></i></a>
                                    </li>
                                    <li>
                                        <a href="https://twitter.com/home?status={{ urlencode( $job->url ) }}" data-button-color="#1da1f2" title="Share on Twitter" data-tippy-placement="top"><i class="icon-brand-twitter"></i></a>
                                    </li>
                                    <li>
                                        <a href="https://plus.google.com/share?url={{ urlencode( $job->url ) }}" data-button-color="#dd4b39" title="Share on Google Plus" data-tippy-placement="top"><i class="icon-brand-google-plus-g"></i></a>
                                    </li>
                                    <li>
                                        <a href="https://www.linkedin.com/shareArticle?mini=true&url={{ urlencode( $job->url ) }}&title={{ urlencode( $job->title ) }}&summary=&source=" data-button-color="#0077b5" title="Share on LinkedIn" data-tippy-placement="top"><i class="icon-brand-linkedin-in"></i></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>

@endsection