@extends('layouts.fe')

@section('title', 'Contact')
@section('css-header')
<link href="{{ asset('fe/assets/css/common.css') }}" rel="stylesheet" type="text/css" />
<link href="{{ asset('fe/assets/css/contact.css') }}" rel="stylesheet" type="text/css" />
<style>
  .g-recaptcha {
    display: flex
;
    justify-content: center;
    align-items: center;
  }
  .contact-form {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    max-width: 600px;
    margin: auto;
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }

  .form-group {
    margin-bottom: 10px;
  }

  label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
  }

  input,
  textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
  }

  button,
  a.button {
    background: #ef8e03;
    color: white;
    border: none;
    padding: 10px 50px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 100;
  }

  button:hover,
  a.button:hover {
    background: #0056b3;
    text-transform: none;
  }

  .title_4 {
    font-size: 18px;
    line-height: 24px;
  }

  .form-data {
    width: 100%;
  }

  .submit-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
  }
</style>

@endsection
@section('content')






@if(!session('success'))
<div id="contact">
  <h2 class="title_2">お問合せフォーム</h2>
  <div class="contact-form">
    @if ($errors->any())
    <div style="color: red;">
      <ul>
        @foreach ($errors->all() as $error)
        <li>{{ $error }}</li>
        @endforeach
      </ul>
    </div>
    @endif
    <form action="/contact-form" method="POST" class="form-data">
      @csrf

      <div class="form-group">
        <label for="customer_name">お名前</label>
        <input type="text" id="customer_name" name="customer_name" required
          value="{{ old('customer_name') }}">
        @error('customer_name')
        <div style="color:red;">{{ $message }}</div>
        @enderror
      </div>

      <div class="form-group">
        <label for="company_name">貴社名</label>
        <input type="text" id="company_name" name="company_name"
          value="{{ old('company_name') }}">
        @error('company_name')
        <div style="color:red;">{{ $message }}</div>
        @enderror
      </div>

      <div class="form-group">
        <label for="email">メールアドレス</label>
        <input type="email" id="email" name="email" required
          value="{{ old('email') }}">
        @error('email')
        <div style="color:red;">{{ $message }}</div>
        @enderror
      </div>

      <div class="form-group">
        <label for="phone">お電話番号</label>
        <input type="text" id="phone" name="phone"
          value="{{ old('phone') }}">
        @error('phone')
        <div style="color:red;">{{ $message }}</div>
        @enderror
      </div>

      <div class="form-group">
        <label for="inquiry">お問い合せ内容</label>
        <textarea id="inquiry" name="inquiry" rows="7" required>{{ old('inquiry') }}</textarea>
        @error('inquiry')
        <div style="color:red;">{{ $message }}</div>
        @enderror
      </div>
      <div class="form-group">
        <div class="privacy" style="margin-top:20px;">
          <h3 style="
    width: 100%;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;">個人情報の取り扱いについて</h3>
          <span style="
    width: 100%;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 10px;
">個人情報の取り扱いについては、以下に記載されているプライバシーポリシーを遵守します。次の「個人情報保護方針」に同意いただける場合は、「同意する」にチェックを付け、確認画面におすすみください。</span>
          <a href="https://alphacep.co.jp/privacy.html" target="_blank" style="
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 10px;
"><i class="fa fa-arrow-right" style="
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    border: 1px solid;
    font-size: 14px;
    background: #ed3c3c;
"></i> 個人情報保護方針</a>
          <div class="agree" style="
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
">
            <span style="width: 100%;" class="wpcf7-form-control-wrap acceptance-727">
              <span style="width: 100%;" class="wpcf7-form-control wpcf7-acceptance"><span class="wpcf7-list-item"><label style="display: flex
;
    justify-content: center;gap:10px;
    align-items: center;
    width: 100%;"><input style="width: unset;" type="checkbox" name="acceptance-727" value="1" aria-invalid="false" required=""><span class="wpcf7-list-item-label">同意する</span></label></span></span></span>
          </div>
        </div>
      </div>

      <div class="form-group">
        <!-- <label style="display: flex; align-items: center; gap: 10px;">
          {{-- Hiển thị captcha --}}
          <img style="width: 120px;" src="" alt="captcha" class="captcha-img" id="captchaImage">

          {{-- Nút refresh captcha --}}
          <button type="button" class="refresh-captcha" style="border: none; background: none; cursor: pointer;padding: 0px;" onclick="refreshCaptcha()">
            <i style="color: #636363;" class="fa fa-refresh"></i>
          </button>
        </label>
        <input type="text" name="captcha" placeholder="キャプチャを入力してください" required
          value="{{ old('captcha') }}"> -->
          {!! NoCaptcha::display() !!}
        @error('captcha')
        <div style="color:red;">{{ $message }}</div>
        @enderror
      </div>

      <div class="submit-button">
        <button type="submit">送信</button>
      </div>
    </form>
  </div>
</div>

@else
<div id="contact">
  <div class="contact-form">
    <h2 class="title_2">お問い合わせが完了しました</h2>
    <p></p>お問合せ内容を記載したメールアドレスを自動配信しております。
    自動配信メールが届かない場合は、大変お手数ですが info@alphacep.co.jp までお問い合わせください。</p>
    <a class="button" href="/">トップに戻る</a>
  </div>
</div>
@endif
@endsection

@section('script-footer')

<script>
  // function refreshCaptcha() {
  //   const timestamp = new Date().getTime(); // để tránh cache
  // }
</script>
{!! NoCaptcha::renderJs() !!}

@endsection