{{-- /
<main class="content-main">
  <div class="container-main">
    <div class="row row-blocks">
      <div class="col-lg-8 col-blocks">
        <h2 class="section-title">Contratar IPABX Virtual i360</h2>

        <div class="block-main text-left">
          <div class="block-main-title">Plano Escolhido</div>

          <div class="block-main-content block-main-plan">
            <div class="row row-blocks mb-3">
              <div class="col-lg-6 col-blocks col-one custom align-self-bottom text-left">
                <div class="form">
                  <span class="form-title">Selecione abaixo seu plano:</span>

                  <input type="hidden" name="service_id" value="{{ $service->id }}" />

                  <div class="form-group mb-0">
                    <select class="selectpicker" id="plan" name="plan" data-width="100%" data-actions-box="false" title="Plano {{ $service->title }}">
                      @foreach($services as $option)
                      <option @if($option->id == $service->id) selected @endif value="{{ $option->slug }}">Plano {{ $option->title }}</option>
                      @endforeach
                    </select>
                  </div>
                </div>
                {{-- /form --}}
              </div>
              {{-- /col --}}

              <div class="col-lg-3 col-blocks col-three custom align-self-end text-left text-lg-right mt-3 mt-lg-0">
                <span class="text">Valor do<br/> plano mensal:</span> <div class="block-value">R$ {{ $service->present->value }}</div>
              </div>
              {{-- /col --}}
            </div>
            {{-- /row --}}

            <div class="block-main-description">
              <p>
                {!! nl2br($service->subtitle) !!}
              </p>
            </div>
            {{-- /block-main-description --}}

            {!! $service->present->description !!}

            {{-- /list-main --}}
          </div>
          {{-- /block-main-content --}}
        </div>
        {{-- /block-main --}}

        <div class="block-main text-left">
          <div class="block-main-title">Número Virtual POPs</div>

          <div class="block-main-content">
            <div class="block-main-description">
              <p>
                Receba ligações com um número próprio.<br/>
                Todos  os números contratados são definidos automaticamente.
              </p>
            </div>
            {{-- /block-main-description --}}

            <div class="block first">
              <div class="row row-blocks">
                <div class="col-lg-6 col-blocks col-one align-self-top text-left">
                  <div class="block-text">
                    <div class="block-text-title">Cidade:</div>
                    CNs11, 31, 51 (Teutônia, Estrela, Lajeado, Santa Cruz do Sul e Venâncio Aires e 54)
                    <span class="obs">*Cortesia até 1 número</span>
                  </div>
                  {{-- /block-text --}}
                </div>
                {{-- /col --}}

                <div class="col-lg-3 col-blocks col-two align-self-top text-left">
                  <span class="text">Quantidade:</span>

                  <div class="actions">
                    <button class="minus button-counter">-</button>
                    <input type="text" class="display-value" data-value="10.00" data-step="1" value="0" min="0" max="20">
                    <button class="plus button-counter">+</button>
                  </div>
                  {{-- /actions --}}
                </div>
                {{-- /col --}}

                <div class="col-lg-3 col-blocks col-three align-self-top text-right text-lg-center mt-1 mt-lg-0">
                  <div class="block-value">R$ 00,00</div>
                </div>
                {{-- /col --}}
              </div>
              {{-- /row --}}

              <div class="block-add">
                <a href="javascript:void(0);" class="block-link" title="Inserir um número virtual de outra localidade">
                  <i class="icon fas fa-plus-circle mr-1"></i> Inserir um número virtual de outra localidade
                </a>
              </div>
              {{-- /block-add --}}
            </div>
            {{-- /block --}}
          </div>
          {{-- /block-main-content --}}
        </div>
        {{-- /block-main --}}

        <div class="block-main text-left">
          <div class="block-main-title">Número 0800</div>

          <div class="block-main-content">
            <div class="block-main-description">
              <p>
                Minutagem para consumo compartilhado entre ramais.<br/>
                Quantidade de canais proporcionais à quanridade de ramais contratados.
              </p>
            </div>
            {{-- /block-main-description --}}

            <div class="block first">
              <div class="row row-blocks">
                <div class="col-lg-6 col-blocks col-one align-self-top text-left">
                  <label class="custom-control">
                    <input type="radio" name="plan">
                    <span class="checkmark"></span>

                    <span class="custom-control-title upper">Basic</span>
                    0800 - 100 Minutos: <strong>R$ 49,90</strong><br/>
                    Tarifa Fixo e Móvel - Consumo Excedente: <strong>R$ 0,25</strong>
                  </label>
                </div>
                {{-- /col --}}

                <div class="col-lg-3 col-blocks col-two align-self-top text-left">
                  <span class="text">Quantidade:</span>

                  <div class="actions">
                    <button class="minus button-counter">-</button>
                    <input type="text" class="display-value" data-value="10.00" data-step="1" value="0" min="0" max="20">
                    <button class="plus button-counter">+</button>
                  </div>
                  {{-- /actions --}}
                </div>
                {{-- /col --}}

                <div class="col-lg-3 col-blocks col-three align-self-top text-right text-lg-center mt-1 mt-lg-0">
                  <div class="block-value">R$ 00,00</div>
                </div>
                {{-- /col --}}
              </div>
              {{-- /row --}}
            </div>
            {{-- /block --}}

            <div class="block">
              <div class="row row-blocks">
                <div class="col-lg-6 col-blocks col-one align-self-top text-left">
                  <label class="custom-control">
                    <input type="radio" name="plan">
                    <span class="checkmark"></span>

                    <span class="custom-control-title upper">Advanced Ilimitado</span>
                    0800 - 100 Minutos: <strong>R$ 49,90</strong><br/>
                    Tarifa Fixo e Móvel - Consumo Excedente: <strong>R$ 0,25</strong>
                  </label>
                </div>
                {{-- /col --}}

                <div class="col-lg-3 col-blocks col-two align-self-top text-left">
                  <span class="text">Quantidade:</span>

                  <div class="actions">
                    <button class="minus button-counter">-</button>
                    <input type="text" class="display-value" data-value="10.00" data-step="1" value="0" min="0" max="20">
                    <button class="plus button-counter">+</button>
                  </div>
                  {{-- /actions --}}
                </div>
                {{-- /col --}}

                <div class="col-lg-3 col-blocks col-three align-self-top text-right text-lg-center mt-1 mt-lg-0">
                  <div class="block-value">R$ 00,00</div>
                </div>
                {{-- /col --}}
              </div>
              {{-- /row --}}
            </div>
            {{-- /block --}}
          </div>
          {{-- /block-main-content --}}
        </div>
        {{-- /block-main --}}
      </div>
      {{-- /col --}}

      <div class="col-lg-4 col-blocks mt-4 mt-lg-0">
        <div class="block-resume text-center">
          <div class="block-resume-title">Resumo</div>

          <div class="block-resume-content text-left">
            <table class="table">
              <tr>
                <td>
                  Plano {{ $service->title }}
                </td>

                <td>
                  <strong>R$ {{ $service->present->value }}</strong>
                </td>
              </tr>

              <tr>
                <td>
                  Número Virtual
                </td>

                <td>
                  <strong>R$ 00,00</strong>
                </td>
              </tr>

              <tr>
                <td>
                  Número 0800
                </td>

                <td>
                  <strong>R$ 00,00</strong>
                </td>
              </tr>

              <tr>
                <td>
                  Adicionais<br/>

                  <table class="table custom">
                    <tr>
                      <td>
                        <small>• iCloud 100GB</small>
                      </td>
                    </tr>

                    <tr>
                      <td>
                        <small>• Gravação Ura</small>
                      </td>
                    </tr>
                  </table>
                <td>
                  <strong>R$ 00,00</strong>

                  <table class="table custom">
                    <tr>
                      <td>
                        <small>R$ 00,00</small>
                      </td>
                    </tr>

                    <tr>
                      <td>
                        <small>R$ 00,00</small>
                      </td>
                    </tr>
                  </table>
                </td>
              </tr>
            </table>
            {{-- /table --}}
          </div>
          {{-- /block-resume-content --}}

          <div class="block-amount text-center">
            Total a pagar: <strong>R$ 230,90</strong>
          </div>
          {{-- /block-amount --}}
        </div>
        {{-- /block-resume --}}
      </div>
      {{-- /col-blocks --}}
    </div>
    {{-- /row --}}

    <div class="block-actions">
      <div class="row row-blocks">
        <div class="col-lg-8 col-blocks">
          <div class="row">
            <div class="col-6 align-self-center text-left">
              <a href="{{ route('home') }}#section-plans" class="btn btn-gray" title="Voltar">Voltar</a>
            </div>
            {{-- /col --}}

            <div class="col-6 align-self-center text-right">
              <a href="javascript:void(0);" class="btn btn-primary" title="Continuar">Continuar</a>
            </div>
            {{-- /col --}}
          </div>
          {{-- /row --}}
        </div>
        {{-- /col --}}
      </div>
      {{-- /row --}}
    </div>
    {{-- /block-actions --}}
  </div>
  {{-- /container-main --}}
</main>
--}}