@extends('_layouts.web')
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

@section('content')
    <div class="main-content">

        <h3>Requisitos para Trámites</h3>

        <div class="spacer"></div>
        <div class="spacer"></div>

        <p class="subtitle">En esta sección encontrará los requisitos para la realización de sus trámites de tránsito.
            Haga clic en los títulos para
            expandir la información.</p>

        <div class="spacer"></div>
        <div class="spacer"></div>

        <div class="accordion">
            @foreach($tramites as $requisito)
                <h5>
                    <label>{{$requisito->tramite}}</label>
                    <i class="fa fa-caret-right"></i>
                </h5>
                <div class="accordion-content" style="display: none;">
                    <ul>
                        @foreach($requisito->requisitos as $doc)
                            <li>
                                {{$doc->nombre}}
                            </li>
                        @endforeach
                    </ul>
                </div>

            @endforeach
        </div>

    </div>

    <div class="sidebar">
        @include('_includes.banner-app')

        @include('_includes.banner-servicios-digitales')

        @include('_includes.banner-contacto')

        @include('_includes.banner-simit')

        @include('_includes.banner-tarifas')
    </div>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
@endsection