@extends("layout")

@section("content")

<style>
body {
  margin: 0;
}
.header {
  background-color: rgba(255, 0, 0);
  height: 70px;
  width: 100%;
}
.container {
  width: 100%;
  margin: 0 auto;
  color: #180000;
  position: relative;
  z-index: 1;
}
.header-list {
  position: absolute;
  right: 0;
  text-align: center;
}
ul {
  margin: 0;
}
li {
  list-style: none;
  float: left;
  padding: 23px 10px;
  color: white;
  transition: 0.5s;
  margin: 0;
}
.logo {
  height: 60px;
  float: left;
  padding-top: 5px;
  cursor: pointer;
}
.header-list li:hover {
  text-shadow: -2px -2px 3px rgba(255, 204, 51), 2px 2px 3px rgba(255, 255, 255);
  color: rgba(255, 255, 255);
}
.top-wrapper {
  padding: 100px 0 100px 0;
  background-color: skyblue;
  text-align: center;
  width: auto;
  height: 1000px;
  position: relative;
}
.top-wrapper img {
  width: 100%;
  height: 430px;
}
h1 {
  font-size: 50px;
  color: black;
  float: left;
}
h2 {
  font-size: 30px;
  color: White;
  float: left;
}
#text {
  text-shadow: 1px 1px 1px red, -1px -1px 1px red, 10px 15px 4px black;
}
.wrapper {
  width: 100%;
  height: 100%;
  /*background:url('https://school.oohara.jp/kasai/staytogether.png');*/
  background: black;
}
.wrapper:hover {
  /* background:url('https://school.oohara.jp/kasai/keepdistance.png');*/
}
.circle {
  width: 100px;
  height: 100px;
  border: solid 10px white;
  position: absolute;
  top: 250px;
  border-radius: 50%;
  transition: 1s;
}
.c1 {
  left: 0;
}
.c2 {
  left: 80px;
}
.c3 {
  left: 160px;
}
.c4 {
  left: 240px;
}
.ac1 {
  left: 0;
}
.ac2 {
  left: 150px;
}
.ac3 {
  left: 300px;
}
.ac4 {
  left: 450px;
}
.t1 {
  position: absolute;
  top: 400px;
  color: white;
  font-size: 30px;
  left: 100px;
  text-align: center;
  transition: 1s;
}
.t2 {
  position: absolute;
  top: 400px;
  color: white;
  font-size: 30px;
  left: 100px;
  text-align: center;
  opacity: 0;
  transition: 1s;
}
.header-list li {
  transition: 1s;
  cursor: pointer;
}
.header-list li:hover {
  opacity: 0.7;
  background: green;
}
input {
  margin: 0;
}
#form {
  width: 800px;
  margin: 30px auto;
  padding: 20px;
  border: 5px solid red;
  background-color: White;
}
body,p,form,input{margin: 0}
form p {
  font-size: 14px;
  text-align: left;
}

.form-title {
  text-align: center;
}

.mail,
.pass {
  margin-bottom: 20px;
}

input[type="email"],
input[type="password"] {
  width: 300px;
  padding: 4px;
  font-size: 14px;
}

.submit {
  text-align: right;
}
.shop {
  width: 800px;
  margin: 30px auto;
  padding: 10px;
  border: 5px solid red;
  background-color: Yellow;
  color: red;
}

</style>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="header">
  <div class="container">
    <img class="logo" src="https://school.oohara.jp/kasai/logo.png" onclick="location.href='/'">
    <div class="header-list">
      <ul>
      @if(empty(\Cookie::get("name")))
        <li onclick="location.href='/login'">ログイン</li>
        <li onclick="location.href='/register'">会員登録</li>
        @else
        <li>ようこそ{{\Cookie::get("name")}}さん</li>
        <li onclick="location.href='/logout'">ログアウト</li>
        @endif
      </ul>
    </div>
  </div>
</div>
<div class="top-wrapper">
  <div id="form">
    <form action="post">
      <p><input type="radio" name="charge" value="1">一般料金
<input type="radio" name="charge" value="2">新規入会
<input type="radio" name="charge" value="3">会員料金
<input type="checkbox" name="charge" value="4">学生料金</p>
      <p><input type="radio" name="drink" value="1">ワンドリンクオーダー制
<input type="radio" name="drink" value="2">ソフトドリンクバー
<input type="radio" name="drink" value="3">アルコール飲み放題</p>
      <p class="time"><input type="radio" name="time" value="2">時間制<input type="text" size="1" name="brand" />時間<input type="radio" name="time" value="2">フリータイム</p>
      <p><input type="radio" name="day" value="1">現在時刻
<input type="radio" name="day" value="2">日時指定<input type="datetime" name="brand" /></p>
    </form>
  </div>
  @foreach($shopdate as $rec)
  <div class="shop">
    {{$rec->brand}}<br>
    {{$rec->shop}}<br>
    \{{$rec->week_a_general_30}}
  </div>
  @endforeach
</div>

<script></script>

@endsection