@extends('layouts.master')
@section('content')
    <div class="container ouvidoria">
        <div class="row" style="margin-bottom: 30px">
            <div class="secHeader">
                <div class="secIcons">
                    {{--<img src="/front/img/icons/place.png" class="v2">--}}
                </div>
                <div class="secSubTitle">
                    <span class="v2"> <b class="tss">OUVIDORIA MUNICIPAL</b> </span>
                </div>
            </div>
        </div>
        <div class="row demand-index-open-2">
            <div class="person">
                <div class="title">
                    <span><i class="fa fa-search"></i> CONSULTA DE PROTOCOLO</span> <br>
                    <small>Tenha em mãos o protocolo e sua chave de acesso.</small>
                </div>
                @if($request->all())
                <div class="row" style="margin-top: 30px">
                    <div class="jumbotron">
                        <h3 class="text-info">Nenhuma demanda encontrada com esses dados</h3>
                    </div>
                </div>
                @endif
                <div class="row text-center" style="margin-top: 30px">
                    <a href="/ouvidoria" class="btn btn-lg btn-default">ABRIR UM CHAMADO</a>
                </div>
                <div class="content" style="margin-top: 30px">
                    <div class="row">
                        <div class="jumbotron">
                            <h3>Digite seus dados de acesso para localizar a demanda.</h3>
                            <table class="table">
                                <tbody>
                                <form action="/ouvidoria/consultar" method="GET">
                                    {{ csrf_field() }}
                                    <tr>
                                        <td><h3>Protocolo</h3></td>
                                        <td><h3><input type="text" name="p" placeholder="digite seu protocolo"></h3></td>
                                    </tr>
                                    <tr>
                                        <td><h3>Chave de acesso</h3></td>
                                        <td><h3><input type="text" name="c" placeholder="digite sua chave"></h3></td>
                                    </tr>
                                    <tr>
                                        <td></td>
                                        <td>
                                            <button class="btn btn-lg btn-default"><i class="fa fa-search"></i> CONSULTAR</button>
                                        </td>
                                    </tr>

                                </form>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <style>
        ul {
            list-style: none;
        }

        .cf {
        &:before, &:after { content: ' '; display: table; }
        &:after { clear: both; }
        }

        .title {
            padding: 50px 0;
            font-size: 24px;
            text-align: center;
        }

        .inner {
            max-width: 820px;
            margin: 0 auto;
        }

        .breadcrumbs {
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
            background-color: #6a944a;
        }

        .breadcrumbs ul {
            border-left: 1px solid #ddd;
            border-right: 1px solid #ddd;
        }

        .breadcrumbs li {
            float: left;
            width: 20%;
        }

        .breadcrumbs a {
            position: relative;
            display: block;
            padding: 20px;
            padding-right: 0 !important; /* important overrides media queries */
            font-size: 13px;
            font-weight: bold;
            text-align: center;
            color: #6a944a;
            cursor: pointer;
        }

        .breadcrumbs a:hover {
            background: #eee;
        }

        .breadcrumbs a.active {
            color: #777;
            background-color: #fafafa;
        }

        .breadcrumbs a span:first-child {
            display: inline-block;
            width: 22px;
            height: 22px;
            padding: 2px;
            margin-right: 5px;
            border: 2px solid #aaa;
            border-radius: 50%;
            background-color: #fff;
        }

        .breadcrumbs a.active span:first-child {
            color: #fff;
            border-color: #777;
            background-color: #777;
        }

        .breadcrumbs a:before,
        .breadcrumbs a:after {
            content: '';
            position: absolute;
            top: 0;
            left: 100%;
            z-index: 1;
            display: block;
            width: 0;
            height: 0;
            border-top: 32px solid transparent;
            border-bottom: 32px solid transparent;
            border-left: 16px solid transparent;
        }

        .breadcrumbs a:before {
            margin-left: 1px;
            border-left-color: #d5d5d5;
        }

        .breadcrumbs a:after {
            border-left-color: #f5f5f5;
        }

        .breadcrumbs a:hover:after {
            border-left-color: #eee;
        }

        .breadcrumbs a.active:after {
            border-left-color: #fafafa;
        }

        .breadcrumbs li:last-child a:before,
        .breadcrumbs li:last-child a:after {
            display: none;
        }

        @media (max-width: 720px) {
            .breadcrumbs a {
                padding: 15px;
            }
            .breadcrumbs a:before,
            .breadcrumbs a:after {
                border-top-width: 26px;
                border-bottom-width: 26px;
                border-left-width: 13px;
            }
        }

        @media (max-width: 620px) {
            .breadcrumbs a {
                padding: 10px;
                font-size: 12px;
            }
            .breadcrumbs a:before,
            .breadcrumbs a:after {
                border-top-width: 22px;
                border-bottom-width: 22px;
                border-left-width: 11px;
            }
        }

        @media (max-width: 520px) {
            .breadcrumbs a {
                padding: 5px;
            }
            .breadcrumbs a:before,
            .breadcrumbs a:after {
                border-top-width: 16px;
                border-bottom-width: 16px;
                border-left-width: 8px;
            }
            .breadcrumbs li a span:first-child {
                display: block;
                margin: 0 auto;
            }
            .breadcrumbs li a span:last-child {
                display: none;
            }
        }
    </style>
@endsection