@extends('layouts.app')

@push('styles')
<!-- MDB -->
{{-- <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.0.0/mdb.min.css" rel="stylesheet" /> --}}
<style>
    /* Font */
    @import url('https://fonts.googleapis.com/css?family=Quicksand:400,700');

    * {
        font-family: 'Nunito', sans-serif;
    }

    img {
        height: auto;
        max-width: 100%;
        vertical-align: middle;
    }

    .cards {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .cards_item {
        display: flex;
        padding: 1rem;
    }

    @media (min-width: 40rem) {
        .cards_item {
            width: 50%;
        }
    }

    @media (min-width: 56rem) {
        .cards_item {
            width: 33.3333%;
        }
    }

    .card {
        background-color: white;
        border-radius: 0.25rem;
        box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.25);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .card_content {
        padding: 1rem;
        background-color: #fff;
    }

    .card_title {
        color: #000;
        font-size: 1.1rem;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: capitalize;
        margin: 0px;
    }

    .card_text {
        color: #000;
        font-size: 0.875rem;
        line-height: 1.5;
        margin-bottom: 1.25rem;
        font-weight: 400;
    }

    .made_by {
        font-weight: 400;
        font-size: 13px;
        margin-top: 35px;
        text-align: center;
    }

</style>
@endpush

@section('title', 'Career')

@section('content')
<section id="home" class="slider-area bg-shape home-two hero"
    style="background:linear-gradient( rgba(0, 0, 0, 0.5) 100%, rgba(0, 0, 0, 0.5)100%),url({{ asset('banner_batu.png') }});min-height: 250px;">
    <div class="hero-area-wrap home-three-hero">
        <div class="slider-active">
            <div class="single-slider home-two-slider home-three-slider">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="slider-content text-center" style="padding-top: 0px;">
                                <h1 data-animation="fadeInLeft" data-delay=".2s">Career</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- <section id="product" class="product-area pt-110 pb-45">
    <div class="container" <div class="row">
        <div class="col-xl-8 offset-xl-2 col-lg-8 offset-lg-2 text-center">
            <div class="section-title pricing-title mb-25">
                <h1>Job Vacancy</h1>
                <p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain
                    was born
                    will give complete account.</p>
            </div>
            <div class="accordion" id="accordionPanelsStayOpenExample">
                @foreach ($karir as $item)
                <div class="accordion-item">
                    <h2 class="accordion-header" id="heading{{ $loop->iteration }}">
<button class="accordion-button @if ($loop->iteration == 1) @else collapsed @endif font-weight-bold" type="button"
    data-mdb-toggle="collapse" data-mdb-target="#collapse{{ $loop->iteration }}"
    aria-expanded="@if ($loop->iteration == 1) true @else false @endif" aria-controls="collapse{{ $loop->iteration }}">
    {{ $item->nama }}
</button>
</h2>
<div id="collapse{{ $loop->iteration }}" class="accordion-collapse collapse @if ($loop->iteration == 1) show @endif"
    aria-labelledby="heading{{ $loop->iteration }}" data-mdb-parent="#accordionExample">
    <div class="accordion-body text-left">
        {{ $item->keterangan }}
    </div>
</div>
</div>
@endforeach
</div>
<div class="px-5 py-4">
    <p class="text-center">
        Please submit your application with updated CV and recent photograph to addresses below. State the
        position code on the envelope or on the e-mail subject. All application letters will be the property
        of the company.
    </p>
    <p>
        <strong>{{ env("APP_NAME") }}</strong>
        <br>
        {{ \Helper::kontak()->location }}
        <br>
        or
        <br>
        <a href="mailto:{{ \Helper::kontak()->email }}">{{ \Helper::kontak()->email }}</a>
    </p>
    <p class="text-center">
        “Only shortlisted candidates will be notified for further process”
    </p>
</div>
</div>
</div>
</section> --}}

<!-- product-area -->
<section id="product" class="product-area pt-110 pb-45">
    <div class="container">
        <div class="row">
            @foreach ($careers as $item)
            <div class="col-lg-3">
                <a href={{ route('career.show', $item->id) }}>
                    <div class="card">
                        <img src="{{ asset('alamkaryalogo.png') }}" class="card-img-top thumbnail p-4">
                        <div class="card_content">
                            <h3 class="card_title">{{ $item->name }}</h3>
                            <p class="card_text mt-2">Closing Date : {{ \Carbon\Carbon::parse($item->batas_waktu)->format('d-m-Y') }}</p>
                        </div>
                    </div>
                </a>
            </div>
            @endforeach
        </div>
    </div>
</section>
<!-- product-area-end -->
@endsection

@push('scripts')
<!-- MDB -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.0.0/mdb.min.js"></script>
@endpush