@extends('layouts.front.app')

@section('content')
  <section class="container content">
    <div class="container dark-grey-text mt-5">
      <!-- Menu Superior -->
      <div class="container h-100">
          <!-- MenuSuperior-->
          @include('layouts.front.menu-superior')
          <!--/.MenuSuperior-->
      </div>
      <!-- /.Menu Superior -->
      <!-- Heading -->
      <nav aria-label="breadcrumb">
          <ol class="breadcrumb blue-grey lighten-4">
              <li><a href="{{ route('home') }}"> <i class="fa fa-home"></i> Home</a><i class="fas fa-angle-double-right mx-2"
                  aria-hidden="true"></i></li>
              <li class="breadcrumb-item"><a class="black-text" href="{{ route('checkout.view', $pedido_id) }}">Pagamento</a><i class="fas fa-angle-double-right mx-2" aria-hidden="true"></i></li>
              <li class="active">Cielo</li>

          </ol>
      </nav>
      <!-- Botão para crédito -->
      <div class="text-center">
        <a href="" class="btn btn-default btn-rounded mb-4 waves-effect waves-light" data-toggle="modal" data-target="#modalCredito">Pagar com Crédito Cielo</a>
      </div>
      <!-- /.Botão para crédito -->
      <!-- Modal Credito-->
      <div class="modal fade pt-5" id="modalCredito" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                  <!--Modal: Contact form-->
        <div class="modal-dialog cascading-modal" role="document">
          <form action="{{ route('cielo.store') }}" class="form-horizontal" method="post">
            <!--Content-->
            <div class="modal-content">
        
                <!--Header-->
                <div class="modal-header primary-color white-text">
                    <h4 class="title">
                        <i class="fas fa-credit-card"></i> Pagar com crédito</h4>
                    <button type="button" class="close waves-effect waves-light" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <!--Body-->
                <div class="modal-body">
        
                    
                    <!-- Material input name -->
                    <div class="paymentWrap">
                        <label for="materialFormNameModalEx1">Escolha a bandeira</label>
                        <div class="paymentBtnGroup btn-group-justified" data-toggle="buttons">
                            @if (config('cielo.credito.visa'))
                                <label class="btn paymentMethod active">
                                    <div class="method visa cartao_visa"></div>
                                    <input type="radio" name="tipo_cartao_credito" class="cartao_visa" value="visa" checked>
                                </label>
                            @endif
                            @if (config('cielo.credito.master'))
                                <label class="btn paymentMethod">
                                    <div class="method master-card cartao_master"></div>
                                    <input type="radio" name="tipo_cartao_credito" class="cartao_master" value="master">
                                </label>
                            @endif
                            @if (config('cielo.credito.amex'))
                                <label class="btn paymentMethod">
                                    <div class="method amex cartao_amex"></div>
                                    <input type="radio" name="tipo_cartao_credito" class="cartao_amex" value="amex">
                                </label>
                            @endif
                            @if (config('cielo.credito.elo'))
                                <label class="btn paymentMethod">
                                    <div class="method elo cartao_elo"></div>
                                    <input type="radio" name="tipo_cartao_credito" class="cartao_elo" value="elo">
                                </label>
                            @endif
                            @if (config('cielo.credito.discover'))
                                <label class="btn paymentMethod">
                                    <div class="method discover cartao_discover"></div>
                                    <input type="radio" name="tipo_cartao_credito" class="cartao_discover" value="discover">
                                </label>
                            @endif
                            @if (config('cielo.credito.diners'))
                                <label class="btn paymentMethod">
                                    <div class="method diners cartao_diners"></div>
                                    <input type="radio" name="tipo_cartao_credito" class="cartao_diners" value="diners">
                                </label>
                            @endif
                            @if (config('cielo.credito.aura'))
                                <label class="btn paymentMethod">
                                    <div class="method aura cartao_aura"></div>
                                    <input type="radio" name="tipo_cartao_credito" class="cartao_aura" value="aura">
                                </label>
                            @endif
                            @if (config('cielo.credito.jcb'))
                                <label class="btn paymentMethod">
                                    <div class="method jcb cartao_jcb"></div>
                                    <input type="radio" name="tipo_cartao_credito" class="cartao_jcb" value="jcb">
                                </label>
                            @endif
                        </div>
                    </div>

                    <!-- Material input name -->
                    <div class="md-form form-sm">
                        <i class="fas fa-user-tie prefix"></i>
                        <input type="text" id="materialFormNameModalEx1" class="form-control form-control-sm">
                        <label for="materialFormNameModalEx1">Titular (como está no cartão)</label>
                    </div>
                    <!-- Material input email -->
                    <div class="md-form form-sm">
                        <i class="fa fa-lock prefix"></i>
                        @php
                            $preco_valido = $total;
                        @endphp
                        <label for="parcela" class="parcela">Quantidade de parcelas</label>
                        <select name="parcela" id="parcela" class="form-control text-center txtuppercase parcela">
                            <option value="1"></option>
                            @for($p = 1 ; $p <= @config('payees.parcels') ; $p++)
                                @if (round($preco_valido / $p, 2) > config('payees.parcel_min') )
                                    <option value="{{ $p }}" data-parcelas="{{ $p }}">{{ $p }} de {{ config('cart.currency_symbol') }} {{ number_format(round($preco_valido/$p,2), 2, ',', '.') }}</option>
                                @endif
                            @endfor
                        </select>
                        <input type="hidden" name="qtde_parcelas">
                    </div>
        
                    <!-- Material input subject -->
                    <div class="md-form form-sm">
                        <i class="fa fa-tag prefix"></i>
                        <input type="text" id="materialFormSubjectModalEx1" class="form-control form-control-sm">
                        <label for="materialFormSubjectModalEx1">Subject</label>
                    </div>
        
                    <!-- Material textarea message -->
                    <div class="md-form form-sm">
                        <i class="fa fa-pencil-alt prefix"></i>
                        <textarea type="text" id="materialFormMessageModalEx1" class="md-textarea form-control"></textarea>
                        <label for="materialFormMessageModalEx1">Your message</label>
                    </div>
        
                    <div class="text-center mt-4 mb-2">
                        <button class="btn btn-primary">Send
                            <i class="fa fa-send ml-2"></i>
                        </button>
                    </div>
        
                </div>
            </div>
            <!--/.Content-->
          </form>
        </div>
        <!--/Modal: Contact form-->
      </div>
      <!-- /.Modal Credito-->

      <!-- Botão para crédito -->
      <div class="text-center">
        <a href="" class="btn btn-default btn-rounded mb-4 waves-effect waves-light" data-toggle="modal" data-target="#modalDebito">Pagar com Débito Cielo</a>
      </div>
      <!-- /.Botão para crédito -->
      <!-- Modal Credito-->
      <div class="modal fade pt-5" id="modalDebito" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                  <!--Modal: Contact form-->
        <div class="modal-dialog cascading-modal" role="document">
        
            <!--Content-->
            <div class="modal-content">
        
                <!--Header-->
                <div class="modal-header primary-color white-text">
                    <h4 class="title">
                        <i class="far fa-credit-card"></i> Pagar com débito</h4>
                    <button type="button" class="close waves-effect waves-light" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <!--Body-->
                <div class="modal-body">
        
                    <!-- Material input name -->
                    <div class="md-form form-sm">
                        <i class="fa fa-envelope prefix"></i>
                        <input type="text" id="materialFormNameModalEx1" class="form-control form-control-sm">
                        <label for="materialFormNameModalEx1">Your name</label>
                    </div>
        
                    <!-- Material input email -->
                    <div class="md-form form-sm">
                        <i class="fa fa-lock prefix"></i>
                        <input type="password" id="materialFormEmailModalEx1" class="form-control form-control-sm">
                        <label for="materialFormEmailModalEx1">Your email</label>
                    </div>
        
                    <!-- Material input subject -->
                    <div class="md-form form-sm">
                        <i class="fa fa-tag prefix"></i>
                        <input type="text" id="materialFormSubjectModalEx1" class="form-control form-control-sm">
                        <label for="materialFormSubjectModalEx1">Subject</label>
                    </div>
        
                    <!-- Material textarea message -->
                    <div class="md-form form-sm">
                        <i class="fa fa-pencil-alt prefix"></i>
                        <textarea type="text" id="materialFormMessageModalEx1" class="md-textarea form-control"></textarea>
                        <label for="materialFormMessageModalEx1">Your message</label>
                    </div>
        
                    <div class="text-center mt-4 mb-2">
                        <button class="btn btn-primary">Send
                            <i class="fa fa-send ml-2"></i>
                        </button>
                    </div>
        
                </div>
            </div>
            <!--/.Content-->
        </div>
        <!--/Modal: Contact form-->
      </div>
      <!-- /.Modal Credito-->
    </div>
  </section>
@endsection

@section('js')
    <script type="text/javascript">
        $(document).ready(function () {
            $('#cielo_credito').prop( "checked", true )
            $('#div_debito').on('click', function(){
                $('#cielo_debito').prop( "checked", true )
                $('#cielo_credito').prop( "checked", false )
                $('.numero_cartao').mask('9999 9999 9999 9999');
                $('.validade').mask('99/9999')
                $('.cvv').mask('999')
            })

            $('#div_credito').on('click', function(){
                $('#cielo_credito').prop( "checked", true )
                $('#cielo_debito').prop( "checked", false )
            })

            /*$('.txtuppercase').keyup(function() {
                $(this).val($(this).val().toUpperCase())
            });*/

            $('.numero_cartao').mask('9999 9999 9999 9999')
            $('.validade').mask('99/9999')
            $('.cvv').mask('999')
            /*$('.nome_cartao').on('keyup', function(){
                $(this).val($(this).val().toUpperCase())
            })*/

            $('div.master-card').on('click', function(){
                $('input[value=master]').attr('checked', true)
                $('input[value=amex]').removeAttr('checked')
                $('input[value=aura]').removeAttr('checked')
                $('input[value=discover]').removeAttr('checked')
                $('input[value=diners]').removeAttr('checked')
                $('input[value=elo]').removeAttr('checked')
                $('input[value=jcb]').removeAttr('checked')
                $('input[value=visa]').removeAttr('checked')
                $('.numero_cartao').attr('placeholder', '0000 0000 0000 0000')
                $('.numero_cartao').mask('9999 9999 9999 9999')
                $('.cvv').attr('placeholder', '000')
                $('.cvv').mask('999')
            })

            $('div.visa').on('click', function(){
                $('input[value=visa]').attr('checked', true)
                $('input[value=amex]').removeAttr('checked')
                $('input[value=aura]').removeAttr('checked')
                $('input[value=discover]').removeAttr('checked')
                $('input[value=diners]').removeAttr('checked')
                $('input[value=elo]').removeAttr('checked')
                $('input[value=jcb]').removeAttr('checked')
                $('input[value=master]').removeAttr('checked')
                $('.numero_cartao').attr('placeholder', '0000 0000 0000 0000')
                $('.numero_cartao').mask('9999 9999 9999 9999')
                $('.cvv').attr('placeholder', '000')
                $('.cvv').mask('999')
            })

            $('div.elo').on('click', function(){
                $('input[value=elo]').attr('checked', true)
                $('input[value=amex]').removeAttr('checked')
                $('input[value=aura]').removeAttr('checked')
                $('input[value=discover]').removeAttr('checked')
                $('input[value=diners]').removeAttr('checked')
                $('input[value=jcb]').removeAttr('checked')
                $('input[value=master]').removeAttr('checked')
                $('input[value=visa]').removeAttr('checked')
                $('.numero_cartao').attr('placeholder', '0000 0000 0000 0000')
                $('.numero_cartao').mask('9999 9999 9999 9999')
                $('.cvv').attr('placeholder', '000')
                $('.cvv').mask('999')
            })

            $('div.diners').on('click', function(){
                $('input[value=diners]').attr('checked', true)
                $('input[value=amex]').removeAttr('checked')
                $('input[value=aura]').removeAttr('checked')
                $('input[value=discover]').removeAttr('checked')
                $('input[value=elo]').removeAttr('checked')
                $('input[value=jcb]').removeAttr('checked')
                $('input[value=master]').removeAttr('checked')
                $('input[value=visa]').removeAttr('checked')
                $('.numero_cartao').attr('placeholder', '0000 0000 0000 0000')
                $('.numero_cartao').mask('9999 9999 9999 9999')
                $('.cvv').attr('placeholder', '000')
                $('.cvv').mask('999')
            })

            $('div.discover').on('click', function(){
                $('input[value=discover]').attr('checked', true)
                $('input[value=amex]').removeAttr('checked')
                $('input[value=aura]').removeAttr('checked')
                $('input[value=diners]').removeAttr('checked')
                $('input[value=elo]').removeAttr('checked')
                $('input[value=jcb]').removeAttr('checked')
                $('input[value=master]').removeAttr('checked')
                $('input[value=visa]').removeAttr('checked')
                $('.numero_cartao').attr('placeholder', '0000 0000 0000 0000')
                $('.numero_cartao').mask('9999 9999 9999 9999')
                $('.cvv').attr('placeholder', '000')
                $('.cvv').mask('999')
            })

            $('div.jcb').on('click', function(){
                $('input[value=jcb]').attr('checked', true)
                $('input[value=master]').removeAttr('checked')
                $('input[value=amex]').removeAttr('checked')
                $('.numero_cartao').attr('placeholder', '0000 0000 0000 0000')
                $('.numero_cartao').mask('9999 9999 9999 9999')
                $('.cvv').attr('placeholder', '000')
                $('.cvv').mask('999')
            })

            $('div.aura').on('click', function(){
                $('input[value=aura]').attr('checked', true)
                $('input[value=master]').removeAttr('checked')
                $('input[value=amex]').removeAttr('checked')
                $('.numero_cartao').attr('placeholder', '0000 0000 0000 0000')
                $('.numero_cartao').mask('9999 9999 9999 9999')
                $('.cvv').attr('placeholder', '000')
                $('.cvv').mask('999')
            })

            $('div.amex').on('click', function(){
                $('input[value=amex]').attr('checked', true)
                $('input[value=master]').removeAttr('checked')
                $('input[value=visa]').removeAttr('checked')
                $('.numero_cartao').attr('placeholder', '0000 000000 00000')
                $('.numero_cartao').mask('9999 999999 99999')
                $('.cvv').attr('placeholder', '0000')
                $('.cvv').mask('0000')
            })

        });
    </script>
@endsection