@extends('layouts.site')

@section('title', 'Gens - Editar Plano')

@section('content')

<section class="page-header">
</section>

<section class="section-header">
    <div class="container container-header">
        <h2>{{$assinatura->cliente->razao_social}}</h2>
        @component('components.site.breadbrumb', ["itens" => ["Minhas Assinaturas" => "minhas-assinaturas", "Alterar Plano" => "",]])
        @endcomponent
    </div>
</section>

<section class="contact-info-one pricing-one pricing-one__home-two">
    <div class="container">
        <img src="{{asset('site/assets/images/shapes/contact-info-shape-1-1.png')}}" class="contact-info-one__bg-shape-1" alt="">
        <div class="block-title text-center" style="margin-bottom: 40px;">
            <div class="block-title__line"></div>
            <h3>Edite o Plano Atual</h3>
            <p>Para alterar seu Plano Atual escolha uma nova opção e insira seus dados de cobrança.</p>
        </div>

        <form method="POST" action="{{route('salvar-novo-plano', $assinatura->id)}}" class="comment-form__wrap" id="formPayment">

            @csrf

            <div class="row checkout-form">
                <div class="col-lg-8 offset-lg-2 col-md-8 offset-md-2">

                    @if ($errors->any())
                        <div class="col-md-12" style="margin-bottom:0px;">
                            <div class="alert alert-danger col-lg-12 col-md-12">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                @foreach ($errors->all() as $error)
                                <p style="margin:auto;"><strong class="msg-info">Atenção! </strong>{!! $error !!}</p>
                                @endforeach
                            </div>
                        </div>
                    @endif

                    @if(session('mensagem'))
                        <div class="col-md-12" style="margin-bottom:0px;">
                            <div class="alert alert-success col-lg-12 col-md-12">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                    <p style="margin:auto;"><strong class="msg-info">Feito!</strong>{!!session('mensagem')!!}</p>
                            </div>
                        </div>
                    @endif

                    <div class="comment-form white-form">
                        <div class="">
                            <div class="title_pagamento">
                                <h4>Plano:</h4>
                                <div class="row">
                                    <div class="col-sm-7">
                                        <div class="form-group">
                                            {{--<select class="form-control" name="plano_id" id="plano_id" onchange="getPrecoPlano(this)">
                                                @foreach($planos as $plano)
                                                <option value="{{$plano}}" {{$assinatura->plano_id == $plano->id ? 'selected' : ''}}>{{$assinatura->plano_id == $plano->id ? $plano->nome .' (Plano Atual)' : $plano->nome}}</option>
                                                @endforeach
                                            </select>--}}
                                            <select class="form-control" name="plano_id" id="plano_id">
                                                @foreach($planos as $plano)
                                                <option value="{{$plano->id}}" {{$assinatura->plano_id == $plano->id ? 'selected' : ''}}>{{$assinatura->plano_id == $plano->id ? $plano->nome .' (Plano Atual)' : $plano->nome}}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @component('components.galaxpay.form-pagamento')
                            @endcomponent
                            <div class="col-lg-12 text-right checkout-form">
                                <button type="submit" class="thm-btn comment-form__btn btn-gensino-01">Confirmar Dados</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</section>

@component('components.site.fale-conosco')
@endcomponent

@endsection

@push('footer_imports_end')
    <!-- select2 js -->
    <script src="{{asset('plugins/select2/js/select2.min.js')}}"></script>
@endpush

@push('js')
<script type="text/javascript">

    //gerando TOKEN automaticamente
    $.ajaxSetup({
        headers:{
            'X-CSRF-TOKEN':"{{ csrf_token()}}"
        }
    });

    //Parametros Pagseguro
    var amount = {{$assinatura->plano->preco}};
    console.log('amount inicial: '+amount);

    function getPrecoPlano(plano){
        var plano = plano.value;
        plano = $.parseJSON(plano);
        amount = plano.preco;
        console.log('amount depois: '+amount);
        getInstallments();
    }

</script>

<script src="{{asset('site/assets/js/checkout-transparente-galaxpay.js') }}"></script>
@endpush