@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 href="/ouvidoria" class="active">
                                <span>1</span>
                                <span>TiPO</span>
                            </a>
                        </li>
                        <li>
                            <a href="/ouvidoria/abre/{{ $type->slug }}" 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>
                                <span>4</span>
                                <span>CONCLUSAO</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <h2>{{ $type->name }} / {{ $secretariat->name }}</h2>
                <p>Abra seu chamado</p>
            </div>
        </div>
        <div class="row demand-index-open-2">
            @if (count($errors) > 0)
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
            <form action="/ouvidoria/abre/{{ $type->slug }}/destino/{{ $secretariat->slug }}" method="POST">
                {{ csrf_field() }}
                <div class="person">
                    <div class="title">
                        <span><i class="fa fa-user"></i> IDENTIFICAÇÃO</span>
                    </div>
                    <div class="content">
                        <div class="row f1">
                            <div class="col-md-12">
                                <label for="closePerson">Nâo desejo me identificar</label>
                                <input id="closePerson" name="anonymous" type="checkbox">
                            </div>
                        </div>
                        <div class="row f1 alert" style="display: none">
                            <div class="col-md-12">
                                <span class="alert alert-warning">
                                    <i class="fa fa-info-circle"></i>
                                    Caso não se identificar, não irá receber emails sobre o andamento do seu chamado, mas ainda assim irá poder consultar usando seu protocolo.
                                </span>
                            </div>
                        </div>
                        <div class="row f1 form">
                            <div class="form-group col-md-3">
                                <label for="person[name]">Nome <span class="text-danger">*</span></label>
                                <input id="person[name]" type="text" class="form-control" name="person[name]" value="">
                            </div>

                            <div class="form-group col-md-3">
                                <label for="person[email]">E-mail <span class="text-danger">*</span></label>
                                <input id="person[email]" type="text" class="form-control" name="person[email]" value="">
                            </div>

                            <div class="form-group col-md-3">
                                <label for="person[phone]">Telefone</label>
                                <input id="person[phone]" type="text" class="form-control phone" name="person[phone]" value="">
                            </div>

                            <div class="form-group col-md-3">
                                <label for="person[gender]">Sexo</label><br>

                                <label for="M">Masc.</label>
                                <input id="M" type="radio" name="person[gender]" value="M"> |

                                <label for="F">Fem.</label>
                                <input id="F" type="radio" name="person[gender]" value="F">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="demand">
                    <div class="title">
                        <span><i class="fa fa-info-circle"></i> SUA DEMANDA</span>
                    </div>
                    <div class="content">
                        <div class="row f1 form2">
                            <div class="form-group col-md-12">
                                <label for="demand[subject]">Assunto <span class="text-danger">*</span></label>
                                <input id="demand[subject]" type="text" class="form-control" name="demand[subject]" value="" required autocomplete="off">
                            </div>
                            <div class="form-group col-md-12">
                                <label for="demand[text]">Descreva aqui <span class="text-danger">*</span></label>
                                <p>Descreva o melhor possível para que possamos entender sua demanda e atende-la o mais rápido.</p>
                                <textarea id="demand[text]" class="form-control" name="demand[text]]" required autocomplete="off"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <a href="/ouvidoria/abre/{{ $type->slug }}/">
                        <button type="button" class="btn btn-lg"><i class="fa fa-backward"></i> VOLTAR</button>
                    </a>
                    <button class="btn btn-lg btn-primary pull-right"><i class="fa fa-save"></i> CADASTRAR MEU CHAMADO</button>
                </div>
            </form>
        </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