@extends('template')

@section('content')
<!-- BEGIN PAGE CONTENT BODY -->
<div class="page-content">
    <div class="container-fluid">
        <!-- BEGIN PAGE BREADCRUMBS -->
        <ul class="page-breadcrumb breadcrumb">
            <li>
                <a href="{{ route('dashboard') }}">Dashboard</a>
                <i class="fa fa-circle"></i>
            </li>
            <li>
                <span>Comprar</span>
            </li>
        </ul>
        <!-- END PAGE BREADCRUMBS -->
        <!-- BEGIN PAGE CONTENT INNER -->
        <div class="page-content-inner">
            <div class="portfolio-content portfolio-1">
                <div id="js-filters-juicy-projects" class="cbp-l-filters-button">
                    <div data-filter="*" class="cbp-filter-item-active cbp-filter-item btn dark btn-outline uppercase"> Todos
                        <div class="cbp-filter-counter"></div>
                    </div>
                    @foreach($tipos as $tipo)
                    <div data-filter=".tipo_{{$tipo->id}}" class="cbp-filter-item btn dark btn-outline uppercase"> {{$tipo->tipo_servico}}
                        <div class="cbp-filter-counter"></div>
                    </div>
                    @endforeach
                </div>
            </div>
            <div class="portlet light portlet-fit ">

                <div class="portlet-body">
                    <div id="js-grid-juicy-projects" class="cbp pricing-content-1 ">
                        <div class="row">
                            @foreach($servicos as $servico)
                            <div class="col-md-3 cbp-item {{ str_replace(',', ' ', $servico->tipo ) }}">

                                <div class="cbp-caption">
                                    <div class="cbp-caption-defaultWrap">

                                        <div class="price-column-container border-active">
                                            <div class="price-table-head bg-blue-madison">
                                                <h2 class="no-margin">{{ $servico->nome }}</h2>
                                            </div>
                                            <div class="arrow-down border-top-blue-madison"></div>
                                            <div class="price-table-pricing">
                                                <!-- <img style="margin-bottom: 30px !important" src="{{ asset($servico->photo) }}" alt=""> -->
                                                <h3>
                                                    <sup class="price-sign">R$</sup>{{ formatMoney($servico->mensalidade) }}
                                                </h3>
                                                <p>por mês</p>
                                            </div>
                                            @if($servico->destaque == 1)
                                            <div class="price-ribbon">Popular</div>
                                            @endif
                                            <div class="price-table-content">
                                                @foreach(explode(',', $servico->servicos) as $key => $serv)
                                                <div class="row mobile-padding">
                                                    <div class="col-xs-3 text-right mobile-padding">
                                                        <i class="icon-check"></i>
                                                    </div>
                                                    <div class="col-xs-9 text-left mobile-padding">{{ $serv }}</div>
                                                </div>
                                                @endforeach
                                            </div>
                                            <div class="arrow-down arrow-grey"></div>
                                            <div class="price-table-footer">
                                                <!-- <button type="button" class="btn grey-salsa btn-outline sbold uppercase">Sign Up</button> -->

                                                <div class="cbp-l-caption-body">
                                                    <a href="{{ $servico->nome }}" class="cbp-singlePage btn blue-madison btn-outline sbold uppercase" rel="nofollow">Tenho Interesse</a>
                                                </div>

                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- END PAGE CONTENT INNER -->
    </div>
</div>
<!-- END PAGE CONTENT BODY -->
@endsection

@section('js-script')
<meta name="csrf-token" content="{{ csrf_token() }}">
<script>
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
</script>
<link href="{{ asset('assets/pages/css/pricing.min.css') }}" rel="stylesheet" type="text/css" />
<link href="{{  asset('assets/global/plugins/cubeportfolio/css/cubeportfolio.css') }}" rel="stylesheet" type="text/css" />
<link href="{{  asset('assets/pages/css/portfolio.min.css') }}" rel="stylesheet" type="text/css" />
<script src="{{ asset('assets/global/plugins/cubeportfolio/js/jquery.cubeportfolio.js') }}" type="text/javascript"></script>
<script src="{{ asset('assets/pages/scripts/portfolio-1.js') }}" type="text/javascript"></script>
@endsection