@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">
            <div class='breadcrumbs'>
                <div class='inner'>
                    <ul class='cf'>
                        <li>
                            <a class="active">
                                <span>1</span>
                                <span>TiPO</span>
                            </a>
                        </li>
                        <li>
                            <a class="active">
                                <span >2</span>
                                <span>DESTINATÁRIO</span>
                            </a>
                        </li>
                        <li>
                            <a class="active">
                                <span>3</span>
                                <span>IDENTIFICAÇÃO</span>
                            </a>
                        </li>
                        <li>
                            <a class="active">
                                <span>4</span>
                                <span>CONCLUSAO</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <h2>Demanda recebida. Anote seus dados para consultar</h2>
            </div>
            <div class="col-md-12">
                <div class="jumbotron">
                    <h3>Data: <span class="text-info">{{ $demand->created_at->format('d/m/Y H:i:s') }}</span></h3>
                    <h3>Protocolo: <span class="text-info">{{ $demand->protocol }}</span></h3>
                    <h3>Chave de acesso: <span class="text-info">{{ $demand->password }}</span></h3>
                    <hr>
                    <p>
                        Guarde esses dados com segurança. <br>
                        Consulte seu chamado em: <a href="/ouvidoria/consultar">Consulte sua manifestação</a>
                    </p>
                </div>
            </div>
        </div>

        <div class="row" style="margin: 20px">
            <div class="col-md-6 col-md-offset-3">
                <a href="/ouvidoria/consultar">
                    <img src="/front/ouvidoria/linkConsultaManifestacao.webp" alt="">
                </a>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            $('#closePerson').change(function() {
                if(this.checked) {
                    $('.f1.form').fadeOut(300,function () {
                        $('.f1.alert').fadeIn(300)
                    })
                }else{
                    $('.f1.alert').fadeOut(300,function () {
                        $('.f1.form').fadeIn(300)
                    })
                }
            });
        });
    </script>
    <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