@extends('includes.master')
  @section('content')    
 
      <script type="text/javascript">
   
   $('head').append('<meta name="csrf-token" content="{{ csrf_token() }}">');
 </script>

          <div class="right_col" role="main">
            <div class="row">
              <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
              

                  <div class="x_content" id="app">
                     <p class="text-muted font-13 m-b-30"><b style="font-size: 30px">
                     <router-link to="/">Claim-Info</router-link></b> 
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                     <a href="#" class="btn btn-lg btn-info"> <span class="glyphicon glyphicon-plus"></span>
                     <router-link to="/add-claim">Add-Claim</router-link></a>


                    </p>
                      
          


                <router-view></router-view>

                   

 
 



        </div>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  
  $('.dropdown').on('click', function(){

    $(".dropdown").addClass("open");
     

  });

</script>

  <script type="text/javascript" src="{{asset('js/app.js')}}" ></script>


 <style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css');

 

.tile {
  width:160px;
  height:180px;
  border-radius:4px;
  box-shadow: 2px 2px 4px 0 rgba(0,0,0,0.15);
  margin-top:20px;
  margin-left:20px;
  float:left;
}

.tile.wide {
  width: 340px;
}

.tile .header {
  height:120px;
  background-color:#f4f4f4;
  border-radius: 4px 4px 0 0;
  color:white;
  font-weight:300;
}

.tile.wide .header .left, .tile.wide .header .right {
  width:160px;
  float:left;
}

.tile .header .count {
  font-size: 48px;
  text-align:center;
  padding:10px 0 0;
}

.tile .header .title {
  font-size: 20px;
  text-align:center;
}

.tile .body {
  height:60px;
  border-radius: 0 0 4px 4px;
  color:#333333;
  background-color:white;
}

.tile .body .title {
    text-align:center;
    font-size:20px;
    padding-top:2%;
}

.tile.wide .body .title {
  padding:4%;
}

.tile.job .header {
  background: linear-gradient(to bottom right, #609931, #87bc27);
}

.tile.job  .body {
  color: #609931;
}

.tile.resource .header {
  background: linear-gradient(to bottom right, #ef7f00, #f7b200);
}

.tile.resource  .body {
  color: #ef7f00;
}

.tile.quote .header {
  background: linear-gradient(to bottom right, #1f6abb, #4f9cf2);
}

.tile.quote  .body {
  color: #1f6abb;
}

.tile.invoice .header {
  background: linear-gradient(to bottom right, #0aa361, #1adc88);
}

.tile.invoice  .body {
  color: #0aa361;
}
 </style>
 

 

@endsection