@extends('layouts.app')

@section('content')

    @include('layouts.inc.breadcrumb',['title' => $company->name])

    <section class="space-ptb">
        <div class="container">
            <div class="row">
                <div class="col-12 col-lg-8 mx-auto">
                    <div class="employers-list border p-3">
                        <div class="employers-list-logo">
                            <img class="img-fluid" src="{{ asset("storage/company/{$company->logo}") }}" alt="{{ $company->name }}">
                        </div>
                        <div class="z1employers-list-details">
                            <div class="employers-list-info">
                                <div class="employers-list-title">
                                    <h5 class="mb-0">{{ $company->name }}</h5>
                                </div>
                                <div class="employers-list-option">
                                    <ul class="list-unstyled">
                                        <li><span class="flag-icon flag-icon-{{ Str::slug($company->country) }} mr-1"></span>{{ $company->country }}</li>
                                        <li><i class="fa fa-phone fa-flip-horizontal pl-1"></i>{{ $company->phone }}</li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="border p-4 mt-4 mt-md-5">
                        <div class="row">
                            <div class="col-md-4 col-sm-6 mb-4">
                                <div class="d-flex">
                                    <span class="flag-icon font-xll  align-self-center flag-icon-{{ Str::slug($company->country) }} mr-1"></span>
                                    <div class="feature-info-content pl-3">
                                        <label class="mb-1">Country</label>
                                        <span class="mb-0 font-weight-bold d-block text-dark">{{ $company->country }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-6 mb-4">
                                <div class="d-flex">
                                    <i class="font-xll text-primary align-self-center flaticon-apartment"></i>
                                    <div class="feature-info-content pl-3">
                                        <label class="mb-1">City</label>
                                        <span class="mb-0 font-weight-bold d-block text-dark">{{ $company->city }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-6 mb-4">
                                <div class="d-flex">
                                    <i class="font-xll text-primary align-self-center flaticon-contact"></i>
                                    <div class="feature-info-content pl-3">
                                        <label class="mb-1">Phone</label>
                                        <span class="mb-0 font-weight-bold d-block text-dark">{{ $company->phone }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-6 mb-4">
                                <div class="d-flex">
                                    <i class="font-xll text-primary align-self-center flaticon-businessman"></i>
                                    <div class="feature-info-content pl-3">
                                        <label class="mb-1">Jobs published</label>
                                        <span class="mb-0 font-weight-bold d-block text-dark">{{ (int) $company->jobs_count }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4 col-sm-6 mb-md-0 mb-4">
                                <div class="d-flex">
                                    <i class="font-xll text-primary align-self-center flaticon-interview"></i>
                                    <div class="feature-info-content pl-3">
                                        <label class="mb-1">Job applicants</label>
                                        <span class="mb-0 font-weight-bold d-block text-dark">{{ (int) $company->applicants_count }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="mt-4 mt-md-5 mb-4 mb-md-5">
                        <h5 class="mb-3 mb-md-4">Description</h5>
                        <div>
                            {!! $company->description !!}
                        </div>
                    </div>
                    <hr>
                </div>
            </div>
        </div>
    </section>

    @if ($jobs->count())
        <section class="space-ptb bg-light">
            <div class="container">

                <div class="section-title">
                    <h2 class="title">Most recent jobs added</h2>
                </div>

                <div class="jobs-grid">
                    @foreach($jobs as $job)
                        <x-job.grid-item :job="$job"/>
                    @endforeach
                </div>

                <div class="row">
                    <div class="col-12 text-center mt-4 text-center">
                        <a class="btn btn-outline-primary" href="{{ route('job.index',['company' => $company->slug]) }}">View more jobs</a>
                    </div>
                </div>

            </div>
        </section>
    @endif

@endsection