@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>
                                <span>2</span>
                                <span>DESTINATÁRIO</span>
                            </a>
                        </li>
                        <li>
                            <a>
                                <span>3</span>
                                <span>IDENTIFICAÇÃO</span>
                            </a>
                        </li>
                        <li>
                            <a>
                                <span>4</span>
                                <span>CONCLUSAO</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 text-center">
                @foreach(\App\Models\TypeDemand::all() as $type)
                    <div class="col-md-2">
                        <a href="/ouvidoria/abre/{{ $type->slug }}">
                            <div class="demand-index-box text-uppercase v-center" style="background-color: {{ $type->color }};">
                                <span style="">{{ $type->name }}</span>
                            </div>
                        </a>
                    </div>
                @endforeach
            </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>
    <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