@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: 600px;
  margin: 30px auto;
  padding: 20px;
  border: 5px solid red;
  background-color: Yellow;
}
body,p,form,input{margin: 0}
form p {
  font-size: 14px;
  text-align: left;
}

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

.brand,
.name {
  margin-bottom: 20px;
}

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

.submit {
  text-align: right;
}


</style>


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

<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">
    <p class="form-title">店舗作成</p>
    <form action="post">
      <p>業態名</p>
      <p class="brand"><input type="text" size="50" name="brand" /></p>
      <p>店名</p>
      <p class="name"><input type="text" size="50" name="name" /></p>
      <p>エリア</p><select name="area">
<option value=""></option>
<option value="kawasaki">川崎</option>
<option value="chiba">千葉</option>
<option value="yokohama">横浜</option>
<option value="shibuya">渋谷</option>
<option value="shinjuku">新宿</option>
</select>
      <p>住所</p>
      <p class="address"><input type="text" size="80"  name="address" /></p>
      <p>営業時間</p>
      <p class="brand">平日<input type="time" size="5" name="brand" />～<input type="time" size="5" name="brand" /><br>
      週末<input type="time" size="5" name="brand" />～<input type="time" size="5" name="brand" /></p>
      <p>機種</p>
      <p><input type="checkbox" name="riyu" value="1">Ai
<input type="checkbox" name="machine" value="2">STADIUM
<input type="checkbox" name="machine" value="3">LIVE DAM
<input type="checkbox" name="machine" value="4">Premiar DAM
<input type="checkbox" name="machine" value="5">CYBER DAM
<input type="checkbox" name="machine" value="6">LIVEDAM<br>
<input type="checkbox" name="machine" value="7">MAX GO
<input type="checkbox" name="machine" value="8">MAX2
<input type="checkbox" name="machine" value="9">MAX
<input type="checkbox" name="machine" value="10">f1
<input type="checkbox" name="machine" value="11">CROSSO
<input type="checkbox" name="machine" value="12">UGA</p>
      <p>設備</p>
      <p><input type="checkbox" name="facility" value="1">ドリンクバー
<input type="checkbox" name="facility" value="2">デュアルプロジェクタールーム
<input type="checkbox" name="facility" value="3">禁煙ルーム
<input type="checkbox" name="facility" value="4">喫煙所
<input type="checkbox" name="facility" value="5">加熱式たばこルーム
<input type="checkbox" name="facility" value="6">Wi-Fi
<input type="checkbox" name="facility" value="7">携帯充電

      <p class="submit"><input type="submit" value="保存" /></p>
    </form>
  </div>
</div>

<script></script>

@endsection