@extends('layouts.app')
@section('title', __(':name に口コミを投稿', ['name'=>$shop->t('name')]).'｜'.config('app.name'))

@push('head')
<style>
  .star-input{display:inline-flex;gap:4px;cursor:pointer;direction:rtl;}
  .star-input input{display:none;}
  .star-input label{font-size:38px;color:#dcdce0;}
  .star-input input:checked ~ label,.star-input label:hover,.star-input label:hover ~ label{color:var(--star);}
</style>
@endpush

@section('content')
<div class="crumb"><a href="{{ route('home') }}">{{ __('ホーム') }}</a> ＞ <a href="{{ route('shops.show',$shop->id) }}">{{ $shop->t('name') }}</a> {{ __('＞ 口コミ投稿') }}</div>
<div class="l-cols">
  <div class="l-main">
    <section class="sec">
      <div class="sec-hd"><h2 class="ic-pen">{{ __('口コミを投稿する') }}</h2></div>

      <div class="card card-pad" style="background:var(--brand-pale);margin-bottom:14px;">
        <div class="small muted">{{ __('投稿対象') }}</div>
        <div style="font-weight:900;">{{ $shop->t('name') }}</div>
        <div class="small muted">{{ $shop->t('pref') }}・{{ $shop->t('city') }}</div>
      </div>

      @if($errors->any())
      <div class="card card-pad" style="border-color:var(--pink);color:var(--pink);margin-bottom:14px;">
        @foreach($errors->all() as $e)<div class="small">{{ $e }}</div>@endforeach
      </div>
      @endif

      <form class="card card-pad" method="post" action="{{ route('reviews.store',$shop->id) }}">
        @csrf
        {{-- ハニーポット --}}
        <div style="position:absolute;left:-9999px;" aria-hidden="true">
          <label>Website<input type="text" name="website" tabindex="-1" autocomplete="off"></label>
        </div>

        <div class="field">
          <label>{{ __('★ スコア') }}<span class="req">*</span></label>
          <div class="star-input">
            @for($i=5;$i>=1;$i--)
            <input type="radio" name="rating" id="r{{ $i }}" value="{{ $i }}" @checked(old('rating')==$i)>
            <label for="r{{ $i }}">★</label>
            @endfor
          </div>
        </div>
        <div class="field"><label>{{ __('タイトル') }}<span class="req">*</span></label><input type="text" name="title" value="{{ old('title') }}" placeholder="{{ __('例：技術がしっかりしていて満足でした') }}"></div>
        <div class="field"><label>{{ __('本文') }}<span class="req">*</span></label><textarea name="body" placeholder="{{ __('施術内容、雰囲気、料金感など（10文字以上）') }}">{{ old('body') }}</textarea></div>
        <div class="hr"></div>
        <div class="field"><label>{{ __('お名前（任意）') }}</label><input type="text" name="nickname" value="{{ old('nickname') }}" placeholder="{{ __('未記入の場合「匿名」で表示') }}"></div>
        <div class="field"><label>{{ __('メールアドレス（任意・非公開）') }}</label><input type="email" name="email" value="{{ old('email') }}"></div>
        <div class="hr"></div>
        <div class="card card-pad" style="background:#fafafa;">
          <div class="small" style="font-weight:800;">{{ __('私はロボットではありません') }}</div>
          <div class="small muted">{{ __('reCAPTCHA v3（本番で有効化）') }}</div>
        </div>
        @include('partials.recaptcha', ['formId'=>'review'])
        <label class="small" style="display:block;margin:14px 0;font-weight:600;">
          <input type="checkbox" name="agree" value="1"> <a href="{{ route('info','terms') }}">{{ __('利用規約') }}</a>{{ __('に同意します') }}
        </label>
        <button class="btn primary block" type="submit">{{ __('確認して投稿する') }}</button>
        <a href="{{ route('shops.show',$shop->id) }}" class="btn block" style="margin-top:8px;">{{ __('キャンセル') }}</a>
        <div class="small muted" style="margin-top:10px;">{{ __('投稿は管理者の承認後に公開されます。') }}</div>
      </form>
    </section>
  </div>
  <aside class="l-side">
    <div class="sw"><div class="sw__hd">{{ __('投稿のお願い') }}</div>
      <div class="sw__bd small" style="color:var(--ink-2);">
        <p style="margin:0 0 8px;">{{ __('実際の体験に基づく内容をお願いします。') }}</p>
        <p style="margin:0 0 8px;">{{ __('個人を特定できる情報は記載しないでください。') }}</p>
        <p style="margin:0;">{{ __('承認制のため公開に時間がかかります。') }}</p>
      </div>
    </div>
  </aside>
</div>
@endsection