@extends('layouts.app')
@section('title', $job->title.'｜'.optional($job->shop)->name.' の求人｜'.config('app.name'))
@section('meta_description', \Illuminate\Support\Str::limit(strip_tags($job->summary ?: $job->description), 110))

@section('content')
<div class="crumb"><a href="{{ route('home') }}">ホーム</a> ＞ <a href="{{ route('jobs.index') }}">求人</a> ＞ {{ $job->title }}</div>
<div class="l-cols">
  <div class="l-main">
    @if($job->shop && $job->shop->line_url && $job->shop->member && $job->shop->member->planAllows('line_button'))
    <a href="{{ $job->shop->line_url }}" rel="nofollow noopener" target="_blank"
       class="btn block" style="margin-bottom:12px;background:#06C755;border-color:#06C755;color:#fff;font-size:16px;padding:14px;">💬 LINEで気軽に質問する</a>
    @endif

    <section class="sec">
      <div class="sec-hd"><h2 class="ic-mega">
        {{ $job->title }}
        @if($job->isNew())<span class="badge ok" style="vertical-align:middle;">NEW</span>@endif
        @php $dl = $job->daysLeft(); @endphp
        @if($dl !== null && $dl <= 14)<span class="badge off" style="vertical-align:middle;">残り{{ $dl }}日</span>@endif
      </h2></div>

      @if($job->featured_image)
      <div class="card" style="margin-bottom:12px;overflow:hidden;border-radius:6px;">
        <img src="{{ $job->featured_image }}" alt="{{ $job->title }}" loading="lazy" style="display:block;width:100%;height:auto;max-height:380px;object-fit:cover;">
      </div>
      @endif

      <div class="card card-pad" style="margin-bottom:12px;">
        <div class="row" style="gap:6px;flex-wrap:wrap;">
          @if($job->wage)<span class="tag">{{ $job->wage }}</span>@endif
          @foreach(($job->tags ?? []) as $t)<span class="tag">{{ $t }}</span>@endforeach
        </div>
        <dl class="kv" style="margin-top:10px;">
          <dt>店舗</dt><dd><a href="{{ route('shops.show',$job->shop_id) }}">{{ optional($job->shop)->name }}</a>（{{ optional($job->shop)->pref }}{{ optional($job->shop)->city }}）</dd>
          @if($job->expires_at)<dt>掲載期限</dt><dd>{{ $job->expires_at->format('Y-m-d') }}</dd>@endif
          <dt>掲載日</dt><dd>{{ optional($job->created_at)->format('Y-m-d') }}</dd>
        </dl>
      </div>

      @if($job->wage_examples)
      <div class="card card-pad" style="margin-bottom:12px;">
        <div style="font-weight:800;margin-bottom:6px;">給与モデルケース</div>
        <div style="white-space:pre-wrap;">{{ $job->wage_examples }}</div>
      </div>
      @endif

      @if($job->summary)
      <div class="card card-pad" style="margin-bottom:12px;">
        <div style="font-weight:800;margin-bottom:6px;">概要</div>
        <div style="white-space:pre-wrap;">{{ $job->summary }}</div>
      </div>
      @endif

      <div class="card card-pad" style="margin-bottom:12px;">
        <div style="font-weight:800;margin-bottom:6px;">仕事内容</div>
        <div style="white-space:pre-wrap;line-height:1.8;">{{ $job->description }}</div>
      </div>

      @if($job->images && $job->images->count())
      <div class="card card-pad" style="margin-bottom:12px;">
        <div style="font-weight:800;margin-bottom:8px;">写真ギャラリー</div>
        <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;">
          @foreach($job->images as $im)
          <a href="{{ $im->path }}" target="_blank" rel="noopener" style="display:block;">
            <img src="{{ $im->path }}" alt="{{ $im->alt }}" loading="lazy"
                 style="display:block;width:100%;height:140px;object-fit:cover;border-radius:4px;background:#eee;border:1px solid var(--line);">
          </a>
          @endforeach
        </div>
      </div>
      @endif

      @if($job->requirements)
      <div class="card card-pad" style="margin-bottom:12px;">
        <div style="font-weight:800;margin-bottom:6px;">応募条件</div>
        <div style="white-space:pre-wrap;">{{ $job->requirements }}</div>
      </div>
      @endif

      @if($job->benefits)
      <div class="card card-pad" style="margin-bottom:12px;">
        <div style="font-weight:800;margin-bottom:6px;">待遇・福利厚生</div>
        <div style="white-space:pre-wrap;">{{ $job->benefits }}</div>
      </div>
      @endif
    </section>
  </div>
  <aside class="l-side">
    <div class="sw"><div class="sw__hd">この求人に応募</div>
      <div class="sw__bd">
        <a href="{{ route('shops.contact',$job->shop_id) }}" class="btn primary block" style="margin-bottom:8px;">✉ 店舗にメールで問合せ</a>
        @if($job->shop && $job->shop->tel)<a href="tel:{{ $job->shop->tel }}" class="btn block" style="margin-bottom:8px;">📞 電話する</a>@endif
        @if($job->shop && $job->shop->line_url && $job->shop->member && $job->shop->member->planAllows('line_button'))
        <a href="{{ $job->shop->line_url }}" rel="nofollow noopener" target="_blank" class="btn block" style="margin-bottom:8px;background:#06C755;border-color:#06C755;color:#fff;">LINEで相談</a>
        @endif
        <a href="{{ route('shops.show',$job->shop_id) }}" class="btn ghost block">店舗ページを見る</a>
      </div>
    </div>
  </aside>
</div>
@endsection