@extends('layouts.back')

@section('titulo', 'Planos')

@section('page_header','Painel')

@section('breadcrumbs')
@if(isset($item->id))
@breadcrumbs(["itens" => ["Planos" => route('planos.index'), "Editar plano #" . $item->id => ""]])
@else
@breadcrumbs(["itens" => ["Planos" => route('planos.index'), "Criar plano" => "" ]])
@endif
@endsection

@section('content')
    <div class="row">
        <div class="col-lg-12">

            @component('components.outros.botoes-padroes-topo', ['route' => 'planos', 'item' => $item])
            @endcomponent

            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">{{isset($item->id) ? 'Editar Plano' : 'Novo Plano'}}</h4>
                </div>
                <div class="card-body">

                    @component('components.outros.alerta-erros', compact('errors'))
                    @endcomponent

                    <form action="{{isset($item->id) ? route('planos.update', $item->id) : route('planos.store')}}" method="post" class="form-horizontal form-bordered" enctype="multipart/form-data" id="form-principal">
                        @csrf
                        {{ $item->id ? method_field('PATCH') : "" }}

                        <div class="tabs">
                            <ul class="nav nav-tabs nav-tabs-custom" role="tablist">
                                @if($item->id)
                                    <li class="nav-item">
                                        <a class="nav-link" data-toggle="tab" href="#detalhes" role="tab">
                                            <span class="d-none d-md-block"><i class="fa fa-exclamation-circle text-danger {{$errors->has('*') ? '' : 'd-none'}} error-alert"></i> Detalhes</span><span class="d-block d-md-none"><i class="mdi mdi-home-variant h5"></i></span>
                                        </a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link active" data-toggle="tab" href="#recursos" role="tab">
                                            <span class="d-none d-md-block">Recursos</span><span class="d-block d-md-none"><i class="mdi mdi-phone-log h5"></i></span>
                                        </a>
                                    </li>
                                @else
                                    <li class="nav-item">
                                        <a class="nav-link active" data-toggle="tab" href="#detalhes" role="tab">
                                            <span class="d-none d-md-block"><i class="fa fa-exclamation-circle text-danger {{$errors->has('*') ? '' : 'd-none'}} error-alert"></i> Detalhes</span><span class="d-block d-md-none"><i class="mdi mdi-home-variant h5"></i></span>
                                        </a>
                                    </li>
                                @endif
                            </ul>

                            <div class="tab-content">

                                <div id="detalhes" class="tab-pane p-3 {{ $item->id ? '' : 'active' }}" role="tabpanel">

                                    <div>
                                        <div class="form-group">
                                            <label class="col-md-12 control-label" for="nome">Nome <span class="required">*</span></label>
                                            <div class="col-md-12">
                                                <input type="text" class="form-control" name="nome" id="nome" minlength="3" maxlength="80" value="{{old('nome', $item->nome)}}" required placeholder="Ex: Contas Free">
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="col-md-12 control-label" for="descricao">Descrição </label>
                                            <div class="col-md-12">
                                                <input type="text" class="form-control" name="descricao" id="descricao" maxlength="500" value="{{old('descricao', $item->descricao)}}">
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="form-group col-md-6">
                                                <label class="col-md-12 control-label" for="periodicidade">Periodicidade <span class="required">*</span></label>
                                                <div class="col-md-12">
                                                    <select name="periodicidade" id="periodicidade" class="form-control">
                                                        <option value="null"> -- Selecionar Periodicidade --</option>
                                                            @foreach(["single" => "Apenas uma cobrança", "weekly" => "Cobrança Semanal",
                                                            "biweekly" => "Cobrança Quinzenal", "monthly" => "Cobrança Mensal",
                                                            "bimonthly" => "Cobrança Bimestral", "quarterly" => "Cobrança Trimestral",
                                                            "biannual" => "Cobrança Semestral", "yearly" => "Cobrança Anual"] as $chave => $valor)
                                                                <option value="{{ $chave }}" {{$item->periodicidade ? $item->periodicidade == $chave ? "selected" : "" : ""}} {{old('periodicidade') ? old('periodicidade') == $chave ? "selected" : "" : ""}}>{{ $valor }}</option>
                                                            @endforeach
                                                    </select>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="form-group col-md-6">
                                                <label class="col-md-12 control-label" for="gratuito">Gratuíto </label>
                                                    <div class="col-md-12">
                                                        <select class="form-control" name="gratuito" id="gratuito">
                                                            <option value="0" {{$item->gratuito ? "" : "selected"}}>Não</option>
                                                            <option value="1" {{$item->gratuito ? "selected" : ""}}>Sim</option>
                                                        </select>
                                                    </div>
                                            </div>
                                            <div class="form-group col-md-6">
                                            <label class="col-md-12 control-label" for="preco">Preço <span id="span-preco-required" class="{{"gratuito == 0" ? "required" : ""}}">{{$item->gratuito == 0 ? "*" : ""}}</span></label>
                                                <div class="col-md-12">
                                                    <div class="input-group">
                                                        <span style="padding-right:10px; margin:auto;">R$ </span>
                                                        <input type="text" class="form-control valor-mask-money" maxlength="13" name="preco" id="preco" {{$item->gratuito == 1 ? "disabled" : ""}} value="{{old('preco', $item->preco)}}">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="form-group col-md-6">
                                                <label class="col-md-12 control-label" for="desconto">Desconto </label>
                                                <div class="col-md-12">
                                                    <div class="input-group">
                                                        <input type="text" class="form-control valor-mask-money" maxlength="6" name="desconto" id="desconto" value="{{old('desconto', $item->desconto)}}">
                                                        <span style="padding-left:10px; margin:auto;"> %</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label class="col-md-12 control-label" for="data_desconto">Data do Desconto</label>
                                                <div class="col-md-12">
                                                    <input class="form-control" type="date" value="{{old('data_desconto', $item->data_desconto)}}" id="data_desconto" name="data_desconto">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row">
                                            <div class="form-group col-md-6">
                                                <label class="col-md-12 control-label" for="dias_desconto">Dias de desconto</label>
                                                <div class="col-md-12">
                                                    <div class="input-group">
                                                        <input type="number" class="form-control" step="1" min="0" name="dias_desconto" id="dias_desconto" value="{{old('dias_desconto', $item->dias_desconto)}}">
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="form-group col-md-6">
                                                <label class="col-md-12 control-label" for="carencia_em_dias">Carência em dias</label>
                                                <div class="col-md-12">
                                                    <div class="input-group">
                                                        <input type="number" class="form-control" step="1" min="0" name="carencia_em_dias" id="carencia_em_dias" value="{{old('carencia_em_dias', $item->carencia_em_dias)}}">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <div class="custom-control custom-checkbox">
                                                    <input type="checkbox" class="custom-control-input" id="ativo" name="ativo" {{$item->ativo == 1 ? "checked" : "" }}>
                                                    <label class="custom-control-label" for="ativo"> Plano Ativo</label>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <div class="col-md-12">
                                                <div class="custom-control custom-checkbox">
                                                    @php
                                                    $destaque = App\Plano::where('destaque', 1)->first();
                                                    @endphp
                                                    @if(($destaque != null) && ($destaque->id != $item->id))
                                                    <input type="checkbox" class="custom-control-input" id="destaque" disabled>
                                                    <label class="custom-control-label" for="destaque">O Plano <strong>{{$destaque->nome}}</strong> já está marcado como destaque.</label>
                                                    @else
                                                    <input type="checkbox" class="custom-control-input" id="destaque" name="destaque" {{$item->destaque == 1 ? "checked" : "" }}>
                                                    <label class="custom-control-label" for="destaque">Utilizar este Plano como destaque na página principal.</label>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>

                                        <button type="submit" class="btn btn-success waves-effect waves-light">Salvar</button>
                                        <a href="{{route('planos.index')}}" class="btn btn-secondary waves-effect">Cancelar</a>

                                    </div>

                                </div>

                                <div id="recursos" class="tab-pane {{ $item->id ? 'active' : 'hidden' }}">

                                    <div class="col-md-4 m-t-30 m-b-30">
                                        <div class="text-center">
                                            <button type="button" class="btn btn-primary waves-effect waves-light" data-toggle="modal" data-target=".bs-example-modal-lg" id="adicionar-recurso"><i class="fa fa-plus-circle" aria-hidden="true"></i> Adicionar Recurso</button>
                                        </div>
                                    </div>
                                    <table class="table table-hover table-striped mb-none" width="100%">
                                        <thead>
                                            <tr>
                                                <th>#</th>
                                                <th>Nome</th>
                                                <th>Descrição do Recurso para este Plano</th>
                                                <th>Preço do Recurso para este Plano</th>
                                                <th>Ordem</th>
                                                <th>Ação</th>
                                            </tr>
                                        </thead>
                                        <tbody id="recursos_plano">
                                        </tbody>
                                        <tfoot>
                                                <td colspan="5"><p>Adicione recursos clicando em 'Adicionar'.<br> As alterações nos recursos são salvas automaticamente.</p></td>
                                            </tr>
                                        </tfoot>
                                    </table>

                                    <button type="submit" class="btn btn-success waves-effect waves-light">Salvar</button>
                                    <a href="{{route('planos.index')}}" class="btn btn-secondary waves-effect">Cancelar</a>

                                </div>
                            </div>

                        </div>

                    </form>
                </div>
            </div>
        </div>
        <!--  Modal content for the above example -->
        <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title mt-0" id="myLargeModalLabel">Adicionar recurso</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    </div>
                    <div class="modal-body">
                        <form id="recurso-form" action="{{route('adicionar-recurso-plano')}}"  class="form-horizontal mb-lg" method="post" onSubmit="adicionarRecurso()" novalidate>
                            @csrf
                            <input type="hidden" id="plano_id" name="plano_id" value="{{$item->id}}">
                            <div class="form-group">
                                <label class="col-md-12 control-label">Selecione um dos Recursos abaixo para este Plano: </label>
                                <div class="col-md-12">
                                @if(count($recursos)>0)
                                    <select name="recurso_id" class="form-control">
                                        @foreach($recursos as $recurso)
                                            <option value="{{$recurso->id}}" data-preco="{{$recurso->preco}}" data-descricao="{{$recurso->descricao}}">{{$recurso->nome}}</option>
                                        @endforeach
                                    </select>
                                    <p style="padding: 10px 0px 0px 10px;">Ou <a href="{{route('recursos.create')}}" target="_blank">clique aqui </a>para cadastrar um novo Recurso.</p>
                                    <hr>
                                    <label class="col-md-12 control-label" for="descricao_recurso">Descrição para este Recurso</label>
                                    <input type="text" class="form-control" name="descricao_recurso" id="descricao_recurso" value="" placeholder="Ex: 100M/mês">
                                    <div class="input-group">
                                        <label class="col-md-12 control-label m-t-20" for="preco_recurso">Preço para este Recurso </label>
                                        <span style="padding-right:10px; margin:auto;">R$ </span>
                                        <input type="text" class="form-control valor-mask-money" name="preco_recurso" id="preco_recurso" value="" placeholder="Ex: R$ 20,00">
                                    </div>
                                    <label class="col-md-12 control-label m-t-20" for="ordem">Ordem para este Recurso <span class="required">*</span></label>
                                    <input type="number" class="form-control" min="0" name="ordem" id="ordem" value="{{$item->getUltimaOrdemRecurso()}}">
                                </div>
                                @else
                                    <p>Nenhum recurso disponível até o momento, <a href="{{route('recursos.create')}}">clique aqui </a>para cadastrar.</p>
                                </div>
                                @endif
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-success" onClick="adicionarRecurso()">Adicionar</button>
                        <button class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </div>

    {{--<div id="adicionar-recurso-form" class="modal-block modal-block-primary mfp-hide" style="background: white; padding: 10px; width: 80%; margin: auto;">
        <section class="panel">
            <header class="panel-heading">
                <h2 class="panel-title">Adicionar recurso</h2>
            </header>
            <div class="panel-body">

                <form id="recurso-form" action="{{route('adicionar-recurso-plano')}}"  class="form-horizontal mb-lg" method="post" onSubmit="adicionarRecurso()" novalidate>
                    @csrf
                    <input type="hidden" id="plano_id" name="plano_id" value="{{$item->id}}">
                    <div class="form-group">
                        <label class="col-md-12 control-label">Selecione os Recursos para este Plano: </label>
                        <div class="col-md-12">
                        @if(count($recursos)>0)
                            <select name="recurso_id" class="form-control">
                                @foreach($recursos as $recurso)
                                <option value="{{$recurso->id}}">{{$recurso->nome}}</option>
                                @endforeach
                            </select>
                            <hr>
                            <label class="col-md-3 control-label" for="valor_do_recurso">Valor para este Recurso </label>
                            <input type="text" class="form-control" name="valor_do_recurso" id="valor_do_recurso" value="" placeholder="Ex: 100M/mês">
                        </div>
                        @else
                            <p>Nenhum recurso disponível até o momento, <a href="{{route('recursos.create')}}">clique aqui </a>para cadastrar.</p>
                        </div>
                        @endif
                    </div>
                </form>

            </div>
            <footer class="panel-footer">
                <div class="row">
                    <div class="col-md-12 text-right">
                        <button class="btn btn-primary modal-confirm" onClick="adicionarRecurso()">Adicionar</button>
                        <button class="btn btn-default modal-dismiss">Cancelar</button>
                    </div>
                </div>
            </footer>
        </section>
    </div>--}}

@endsection

@push('footer_imports_end')
    <script src="{{asset('js/validations/adm/valida.generico.js')}}"></script>
    <script src="{{asset('js/validations/adm/valida.planos.js')}}"></script>
@endpush

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

        $(function() {

            @if($item->id)
                carregarRecursosPlano({{$item->id}});
                $('#nome').attr('disabled', true);
                $('#periodicidade').attr('disabled', true);
                $('#gratuito').attr('disabled', true);
                $('#preco').attr('disabled', true);
                $('#desconto').attr('disabled', true);
                $('#data_desconto').attr('disabled', true);
                $('#dias_desconto').attr('disabled', true);
                $('#carencia_em_dias').attr('disabled', true);
            @else
                tratarCamposValorDependendoTipoPlano();
            @endif
        });

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

        $('#gratuito').on('change', function() {
            tratarCamposValorDependendoTipoPlano();
        });

        $('select[name="recurso_id"]').on('change', function() {
            preencheInformacoesRecursoSelecionado();
        });

        $('#adicionar-recurso').on('click', function() {
            preencheInformacoesRecursoSelecionado();
        });

        function adicionarRecurso() {

            var ordem = $("#ordem").val();
            if(ordem == "") {
                alerta("Ops", "Preencha a ordem para este recurso!", "danger");
            }
            else {
                var form = document.getElementById('recurso-form');
                var url = form.action;
                $.ajax({
                    url: url,
                    type: "POST",
                    data: new FormData(form),
                    contentType: false,
                    cache: false,
                    processData:false,
                    success: function(data)
                    {
                        data = JSON.parse(data);
                        if(data['success'] == false) {
                            alerta("Ops!", data['message'], "error");
                        }
                        else {
                            alerta("Feito!", "Recurso adicionado!", "success");
                            $.magnificPopup.close();
                            carregarRecursosPlano({{$item->id}});
                        }
                    },
                    error: function(xhr, error, data){
                        var err = xhr.responseJSON.errors.plano_id;
                        if(err !== undefined) {
                            alerta("Ops!", err, "error");
                        } else {
                            alerta("Aparentemente você está sem internet.");
                        }
                    }
                });
            }
        }

        function removerRecurso(id_plano, id_recurso){
            $.ajax({
                type: "GET",
                url: "/admin/excluir-recurso-plano/" + id_plano + "/" + id_recurso,
                context: this,
                success: function(data){
                    linhas = $("#recursos_plano>tr");
                    e = linhas.filter( function (i, elemento){
                        return elemento.cells[0].textContent == id_recurso;
                    });
                    if (e)
                        e.remove();
                        alerta("Feito!", "Recurso removido!", "success");

                    //atribui última ordem + 1
                    $('#ordem').val(data['ordem']);
                },
                error: function(){
                    alerta("Erro!", "Erro ao remover o recurso!", "danger");
                }
            });

        }

        function editarRecurso(id_plano, id_recurso){
            console.log('entrou no editar');

        }

        function carregarRecursosPlano(id) {
            $('#recursos_plano').html("");
            $.getJSON('/admin/carregar-recursos-plano/'+id, function(recursos){
                for(i=0;i<recursos.length;i++){
                    let preco_recurso = recursos[i].pivot.preco_recurso;
                    if(preco_recurso == null){
                        preco_recurso = '0,00';
                    } else {
                        preco_recurso = preco_recurso.toLocaleString('pt-br', {style: 'currency', currency: 'BRL'});
                    }
                    if (recursos[i].pivot.descricao_recurso == null){
                        recursos[i].pivot.descricao_recurso = '';
                    }
                    var linha = "<tr>" +
                                    "<td>"     + recursos[i].id                      + "</td>" +
                                    "<td>"     + recursos[i].nome                    + "</td>" +
                                    "<td>"     + recursos[i].pivot.descricao_recurso + "</td>" +
                                    "<td>"    + preco_recurso                        + "</td>" +
                                    "<td class='ordem-recurso'>" + recursos[i].pivot.ordem + "</td>" +
                                    "<td>"     +
                                        '<button type="button" class="btn btn-sm btn-danger m-r-5" onclick="removerRecurso(' + [id, recursos[i].id ]+ ')"> <i class="fa fa-trash-o" aria-hidden="true"></i></button>' +
                                        // '<button type="button" class="btn btn-sm btn-secondary" onclick="editarRecurso(' + [id, recursos[i].id ]+ ')"> <i class="fa fa-pencil" aria-hidden="true"></i></button>' +
                                    "</td>"    +
                                "</tr>" ;

                    $('#recursos_plano').append(linha);
                }
                incrementarOrdem();
            });

        }

        function tratarCamposValorDependendoTipoPlano() {

            let tipo = $('#gratuito').val();
            let $preco = $('#preco');
            let $desconto = $('#desconto');

            if(tipo == 0){

                $preco.attr('required', 'required');
                $preco.attr('disabled', false);
                $desconto.attr('disabled', false);
                $('#span-preco-required').addClass('required');
                $('#span-preco-required').html("*");

            }
            else{

                $preco.removeAttr('required', false);
                $preco.attr('disabled', true);
                $desconto.attr('disabled', true);

                //limpa os campos
                $preco.val(0);
                $desconto.val(0);

                $('#span-preco-required').removeClass('required');
                $('#span-preco-required').html("");
            }

        }

        function preencheInformacoesRecursoSelecionado() {

            let $select = $('select[name="recurso_id"]');
            let $descricao_recurso = $('#descricao_recurso');
            let $preco_recurso = $('#preco_recurso');

            let descricao = $select.find('option:selected').data('descricao');
            let preco     = $select.find('option:selected').data('preco');

            $descricao_recurso.val('');
            $descricao_recurso.val(descricao);

            $preco_recurso.val(0);
            $preco_recurso.val(preco);

        }

        function incrementarOrdem() {
            let ultimaOrdem = $('#recursos_plano').find('.ordem-recurso:last').text();
            $('#ordem').val(parseInt(ultimaOrdem) + 1);
        }

    </script>
@endpush