@extends('layouts.layout')

@section('meta')
  @parent
  <meta name="description" content="アイリス不動産のWeb予約ページです。サービスを受けるにあたってWebから予約を受け付けています。各サービスによって予約時間が異なり、お客様のご都合の良い日時に合わせて予約して下さい。" />
@endsection

@section('canonical')
  <link rel="canonical" href="https://www.iris-real-estate.net/reservations">
@endsection

@section('title')
  Web予約 | アイリス不動産
@endsection

@section('style')
  @parent
  <link rel="stylesheet" href="{{ mix('css/all_for_reservations.css') }}">
@endsection

@section('breadcrumb')
  <ol class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/">
        <span itemprop="name">ホーム</span>
      </a>
      <meta itemprop="position" content="1" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/reservations">
        <span itemprop="name">Web予約</span>
      </a>
      <meta itemprop="position" content="2" />
    </li>
  </ol>
@endsection

@section('content_title')
  Web予約
@endsection

@section('content')
  <section id="introduction_section">
    <h2 class="section_title">予約の方法</h2>

    <p id="introduction">
      サービスを受けるにあたって、Web予約を受け付けております。カレンダーから、ご都合の良い日時を選択してください
      (平塚のアパートの内見は30分, 不動産投資面談は60分, 不動産査定は60分かかります)。予約確定後に2営業日以内に確認メールが送られます。
    </p>
  </section>

  <table id="calendar_table">
    <caption>
      <h2>
        {!! $calendar->get_back_btn() !!}
        <span>{{ $calendar->get_table_title() }}</span>
        {!! $calendar->get_next_btn() !!}
      </h2>
    </caption>
    <thead>
      {!! $calendar->get_content_of_thead() !!}
    </thead>
    <tbody>
      {!! $calendar->get_content_of_tbody() !!}
    </tbody>
  </table>

  @isset($reservations_table)   
    <table id="reservations_table">
      <caption>
        <h2>{{ $reservations_table->get_table_title() }}</h2>
      </caption>
      <thead>
        {!! $reservations_table->get_content_of_thead() !!}
      </thead>
      <tbody>
        {!! $reservations_table->get_content_of_tbody() !!}
      </tbody>
    </table>
  @endisset
@endsection

@section('script')
  @parent
  <script>
    const day = @json($day);
    
    if (day) {
      const reservations_table = document.querySelector("#reservations_table");
      reservations_table.scrollIntoView({
          behavior: "smooth",
      });
    } 
  </script>
@endsection