@extends('layouts.app')

@section('head')
<link rel="stylesheet" href="{{ URL::asset('css/style.css') }}">
<link rel="stylesheet" href="{{ URL::asset('css/inform.css') }}">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
* {
    box-sizing: border-box;
}
[class*="col-"] {
    float: left;
	margin:20px;
    margin-left: 35px;
}

.row:after {
    content: "";
    clear: both;
    display: block;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

/* For mobile phones: */
[class*="col-"] {
    width: 100%;
}

@media only screen and (min-width: 300px) {
    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
	}
@media only screen and (min-width: 768px) {
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}

#grid1 {
	background-image: url("{{ URL::asset('images/inform/b01.png') }}");
}
#grid2 {
	background-image: url("{{ URL::asset('images/inform/b02.png') }}");
}
#grid3 {
	background-image: url("{{ URL::asset('images/inform/b03.png') }}");
}
#grid4 {
	background-image: url("{{ URL::asset('images/inform/b04.png') }}");
}
#grid5 {
	background-image: url("{{ URL::asset('images/inform/b05.png') }}");
}
#grid6 {
	background-image: url("{{ URL::asset('images/inform/b06.png') }}");
}
#grid7 {
	background-image: url("{{ URL::asset('images/inform/b07.png') }}");
}
#grid8 {
	background-image: url("{{ URL::asset('images/inform/b08.png') }}");
}
</style>

@endsection

@section('header')
	<div id="back"><a onclick="window.location='{{ url('auth/index') }}'">〈返回</a></div>
	<div id="title">修繕通報</div>
@endsection

@section('content')

<div id="grid_view" style='position:relative;'>
	<a id="grid1" class="grid_button col-12" onclick="location.href='{{ url('auth/inform', 1) }}'"></a>
	<a id="grid2" class="grid_button col-12" onclick="location.href='{{ url('auth/inform', 2) }}'"></a>
	<a id="grid3" class="grid_button col-12" onclick="location.href='{{ url('auth/inform', 3) }}'"></a>
	<a id="grid4" class="grid_button col-12" onclick="location.href='{{ url('auth/inform', 4) }}'"></a>
	<a id="grid5" class="grid_button col-12" onclick="location.href='{{ url('auth/inform', 5) }}'"></a>
	<a id="grid6" class="grid_button col-12" onclick="location.href='{{ url('auth/inform', 6) }}'"></a>
	<a id="grid7" class="grid_button col-12" onclick="location.href='{{ url('auth/inform', 7) }}'"></a>
	<a id="grid8" class="grid_button col-12" onclick="location.href='{{ url('auth/inform', 8) }}'" ></a>
	<br style="clear:both" />
</div>

@include('common.messages')

@endsection