@extends('layouts.dashboard')
@section('title', 'Identificação')
@section('title-dashboard')
Identificação
@endsection
@section('pg-home')
@endsection
@section('content')
@parent
<style>
/*
 * CSS Background Grid Lines by Jason Delia
 * http://codepen.io/jasonadelia/pen/DnrAe
 */
 .card-id:after,
 .card-id header:before {
  background-color: #333;
  background-image: 
  linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent), 
  linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, .05) 25%, rgba(255, 255, 255, .05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, .05) 75%, rgba(255, 255, 255, .05) 76%, transparent 77%, transparent);
  height:100%;
  background-size:50px 50px;
}

.card-id {
  position:relative;
  height:300px;
  width:550px;
  margin:0 auto;
  background:#ECECEC;
  border: solid 1px #c1d4ec;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  background: #FFF url(rib-back.png) repeat-x bottom;
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff), to(#eaedf1));
  background: -moz-linear-gradient(#ffffff, #eaedf1);
}

.card-id:hover img {
  -webkit-filter:invert(100%);
  filter:invert(100%);

  border:5px solid rgba(0, 0, 0, .5);
  box-shadow:0 0 3px rgba(255, 255, 255, .25);
}

/* card-id stripe */
.card-id:before {
  position:absolute;
  z-index:2;
  content:'';
  left:50%;
  top:-70px;
  margin: 0 0 0 -40px;
  height:100px;
  width:80px;
  background: rgb(255, 255, 255);
  background-image: 
  linear-gradient(left, rgba(255,255,255, .4) 0%, rgba(255,255,255, .1) 50%,rgba(255,255,255, .4) 100%),
  linear-gradient(bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 40%),
  linear-gradient(top, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, 0) 40%)
  ;
  border-radius:6px;
  box-shadow:0 0 0 1px rgba(255, 255, 255);
  opacity:.5;
}

/* card-id stripe clip */
.card-id:after {
  position:absolute;
  content:'';
  z-index:2;
  height:20px;
  width:20px;
  top:-55px;
  left:50%;
  margin:0 0 0 -10px;
  border-radius:50%;
  box-shadow:
  0 0 0 5px rgba(255, 255, 255, .6),
  0 0 10px rgba(0, 0, 0, .7),
  inset 2px 2px 2px rgba(0, 0, 0, .5)
  ;
}

.card-id header {
  position:relative;
  background:#013979;
  height:90px;
  width:100%;
  border-top-left-radius:20px;
  border-top-right-radius:20px;
  border-bottom:1px solid #2263cc;
  padding:35px 20px;
  opacity:.9;
}

/* top gradient */
.card-id header:after {
  position:absolute;
  content:'';
  left:1px;
  top:1px;
  width:100%;
  height:10px;
  background:
  linear-gradient(bottom, rgba(255,255,255, .1) 0%, rgba(255,255,255,.05) 70%, rgba(255,255,255,0) 100%);
}

/* card-id hole */
.card-id header:before {
    background-color: #eff3f8;
    position:absolute;
    z-index:1;
    content:'';
    left:50%;
    top:22px;
    margin: 0 0 0 -50px;
    height:15px;
    width:100px;
    border-radius:25px;
    box-shadow:
    inset 1px 1px 0 1px rgba(0, 0, 0, .3),
    inset -1px -1px 0 0 rgba(255, 255, 255, .5)
    ;
}

.card-id header h1 {
  color:#fff;
  line-height:70%;
  font-size:24px;
  text-shadow:-1px -1px 1px rgba(0, 0, 0, .5);
  text-align: center;
}

.card-id article {
  padding:30px;
}

.card-id article img {
  border:5px solid #fff;
  box-shadow:0 0 3px rgba(0, 0, 0, .25);
  float:left;
  margin-right:30px;
  width:190px;
  height:250px;
  transition:all .3s ease-in-out;
}

.card-id article h2 {
  color:#515355;
  float:left;
  margin:0 5px 15px 0;
  font-weight:normal;
  padding:0 0 8px 0;
  width:450px;
}

.card-id article .area {
  position:relative;
  height:170px;
  width:470px;
  float:left;
  overflow-y:scroll;
}

.card-id article .area h3 {
  margin:0;
  color:#5F6163;
  font-size:20px
}

.card-id article .area ul {
  margin:5px 0 30px 0;
  padding:0;
  list-style:none;
}

.card-id article .area ul li {
  margin:20px 0 0 0;
  font-size:16px;
  color:#94957F;
  text-shadow:0 0 1px rgba(0, 0, 0, .3);
}

.card-id article .area ul li .bar {
  position:relative;
  width:280px;
  height:15px;
  display:inline-block;
  border-radius:50px;
  float:right;
  margin:0 15px 0 0;

  opacity:.9;

  background-color:#CACACA;
  box-shadow: inset 0 2px 2px rgba(0, 0, 0, .35);
}

.card-id article .area ul li .bar:before {
  position:absolute;
  left:0;
  width:0;
  height:15px;
  background: rgb(254,213,121);
  box-shadow:
  inset 0 4px 4px rgba(255, 255, 255, .3),
  inset 0 -2px 3px rgba(0, 0, 0, .05),
  0 1px 0 0px #D29D40
  ;
  display:inline-block;
  border-radius:50px;
  content:'';
  z-index:-1;
}

.card-id article .area ul li .bar.percent-100:before {width:280px;}
.card-id article .area ul li .bar.percent-90:before {width:260px;}
.card-id article .area ul li .bar.percent-80:before {width:240px;}
.card-id article .area ul li .bar.percent-70:before {width:220px;}
.card-id article .area ul li .bar.percent-60:before {width:200px;}
.card-id article .area ul li .bar.percent-50:before {width:180px;}

.card-id article .area ul li:before {
  content:'\2605';
  margin-right:5px;
}

.card-id article .area::-webkit-scrollbar {
  width: 10px;
}

.card-id article .area::-webkit-scrollbar-track {
  background-color: rgba(217, 217, 217, .5);
  border-radius:50px;
}

.card-id article .area::-webkit-scrollbar-thumb {
  background: rgba(184, 184, 184, .5);
  box-shadow:
  inset 1px 1px 0 rgba(0, 0, 0, 0.10),
  inset 0 -1px 0 rgba(0, 0, 0, 0.07)
  ;
  border-radius:50px;
}
.form-id {
    height: 50px;
    font-size: 25px!important;
    text-align: center!important;
}
.id-acess {
    margin-top: 25px;
    margin-bottom: 30px;
}
</style>
<div class='card-id'>
    <header>
      <h1>IDENTIFIQUE-SE</h1>
  </header>
  {!! Form::open(['route' => 'idetificacaoVerificar', 'class' => 'horizontal-form', 'files' => true]) !!}
  <div class="form-body">
    <div class="col-md-8 col-md-offset-2">
        {{-- {!! Form::label('codigo_acesso', 'Código de Acesso', ['class' => 'col-md-12 control-label text-left   margin-left-15px']) !!} --}}
        <div class="form-group pdv-border id-acess {{ $errors->has('codigo_acesso') ? 'has-error' : ''}}">
            {!! Form::password('codigo_acesso', ['class' => 'form-control form-id', 'required' => 'required', 'placeholder' => 'Código de Acesso', 'autofocus']) !!}
            {!! $errors->first('codigo_acesso', '<p class="help-block">:message</p>') !!}
        </div>
    </div>
    <div class="col-md-8 col-md-offset-4">
        <button type="button" class="btn btn-primary btn-lg"><i class="fa fa-search"></i> Verificar</button>
        {{-- <button type="submit" class="btn blue-steel"><i class="fa fa-search"></i> Verificar</button> --}}
    </div>
</div>
{!! Form::close() !!}

</div>
@endsection