@extends('layouts.app', ['activePage' => 'escritorio.index', 'titlePage' => __('Escritorio virtual')])

@section('content')


<div class="content">
    <div class="container-fluid">
        @include('layouts.alerts')
        @include('mask.format_mask')

         <div class="row">
        @include('cards.cardUser')
         </div>

      <div class="row">
        <div class="col-md-12">
            <div class="card">
              <div class="card-header card-header-info">
                <h4 class="card-title ">Escritorio virtutal</h4>
                <p class="card-category"> Seus recebimentos serão concluidas até as 22:00hs apos a confirmação de seus doaacao</p>
              </div>
              <div class="card-body">
                <div class="row">
                  <div class="col-12 text-right">
                    @if ($true == '[]')
                    @elseif ($true != '[]')
                    <a href="" data-toggle="modal" data-target="#modelRecompromisso" class="btn btn-sm btn-info"><i class="material-icons">swap_horiz</i> Recompromisso</a>
                    @endif
                    @if ($pagamento == '[]')
                    <a href="" data-toggle="modal" data-target="#modelDoacao" class="btn btn-sm btn-info"><i class="material-icons">add</i> Nova doação</a>
                    @elseif ($pagamento != '[]')
                    <button type="button" class="btn btn-sm btn-info" data-toggle="popover" title="Pagamento pedente" data-content="Só e permitido apos o pagamento do anterior"><i class="material-icons">add</i> Nova doação</a></button>
                    @endif
                </div>
                </div>
                <div class="table-responsive">
                  <table class="table">
                    <thead class=" text-center">
                        <th class="text-center" scope="col">Nº</th>
                        <th class="text-center" scope="col">Tipo</th>
                        <th class="text-center" scope="col">Data</th>
                        <th class="text-center" scope="col">Valor</th>
                        <th class="text-center" scope="col">Vencimento</th>
                        <th class="text-center" scope="col">Status</th>
                        <th class="text-center" scope="col">Ações</th>
                    </thead>
                    <tbody>
                    @foreach ($pagamento as $aporte)
                    <tr>
                        <td class="text-center">
                            {{ formatCodigo($aporte->id) }}
                        </td>
                        <td class="text-center">
                            Doação
                        </td>
                        <td class="text-center">
                            {{ $aporte->data_hora_registro->format('d/m/Y') }}
                        </td>
                        <td class="text-center">
                            {{ formatMoney($aporte->valor_areceber) }}
                        </td>
                        <td class="text-center text-danger">
                            <span id="demo" class="label label-success"></span>
                        </td>
                        <td class="text-center">
                                <span class="badge badge-pill badge-{{ $aporte->CorStatus() }}"> {{ $aporte->descricaoStatus() }} </span>
                        </td>
                        <td class="text-center">
                            <a href="" data-toggle="modal" data-target="#modelPagamento{{ $aporte->id }}" class="btn btn-sm btn-info"><i class="material-icons">redeem</i> Doar</a>

                       <!-- Modal Pagamento-->
                       <div class="modal fade" id="modelPagamento{{ $aporte->id }}">
                            <div class="modal-dialog modal-ms ">
                                  <div class="modal-content "> {{-- cor do card para deixa padrão basta remover text-whirh e bg-primary  --}}
                                    <form action="{{ route('doacao-store') }}" method="post">
                                            {{ csrf_field() }}
                                <!-- Modal Header -->
                                        <div class="modal-header">
                                            <h4 class="modal-title">Confirmar doação</h4>
                                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                        </div>

                                <!-- Modal body  urpay-feito-pra-voce -->
                                    <div class="modal-body">
                                        <div class="row">
                                            <div class="col-md-12"
                                                <div class="card  mb-3" style="max-width: 540px;">
                                                    <div class="row no-gutters">
                                                        <div class="col-md-4">
                                                            <i><img style="width:150px" src="{{ asset('material') }}/img/logoCliente/bancon.png"></i>
                                                        </div>
                                                        <div class="col-md-8">
                                                        <div class="card-body">
                                                            <h3 class="card-title text-center"><b>{{ $aporte->usuarioRecebimento()->first()->name }}</b></h3>
                                                            <p class="card-text">Para confirma sua doação informe o RASH da tranferencia no campo a baixo.</p>

                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-sm-12">
                                                <div class="form-group">
                                                <input class="form-control text-center" name="rashConfirmacao" id="input-rash" type="text" placeholder="HASH de confirmação" value="{{ old('rashConfirmacao') }}" />
                                                <input class="form-control text-center" name="rash" id="input-rash" type="hidden" placeholder="HASH de confirmação" value="{{ $aporte->id }}" />
                                                </div>
                                            </div>
                                        </div>

                            <!-- Modal footer -->
                                    {{--  <div class="modal-footer">  --}}
                                        <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
                                        <button type="submit" class="btn btn-success block">Confirmar</button>
                                    {{--  </div>  --}}
                                    </form>
                                </div>
                            </div>
                        </div>
                    </td>
                     </tr>
                     @endforeach
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
        </div>
      </div>
    </div>
</div>

<!-- Modal contrato-->
<div class="modal fade" id="modelDoacao">
    <div class="modal-dialog modal-ms ">
        <div class="modal-content">
            <form action="{{ route('app-escritorio.store') }}" ; method="post" id="frm_usu">
            {{ csrf_field() }}
       <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Novo aporte</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

        <!-- Modal body -->
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <label class="text-center"><b>A moeda ultilizada pela Montreal e a URPAY. click aqui para criar sua urpay</b></label>
                    </div>
                </div>
                <div class="row">
                    <table class="table">
                        <tbody>
                        @foreach ($doacoes as $doacao)
                            <tr>
                            <td>
                                <div class="form-check">
                                    <label class="form-check-label">
                                        <input class="form-check-input" type="checkbox" value="{{ $doacao->id }}" name="doacao">
                                        <span class="form-check-sign">
                                        <span class="check"></span>
                                        </span>
                                    </label>
                                </div>
                            </td>
                            <td> Doa {{ $doacao->descricao }}  recebe R$ {{ $doacao->valor_retorno }}</td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

       <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
                <button type="submit" class="btn btn-info block">Doar</button>
            </div>
            </form>
        </div>
    </div>
</div>


<!-- Modal recompromisso-->
<div class="modal fade" id="modelRecompromisso">
    <div class="modal-dialog modal-ms ">
        <div class="modal-content">
            <form action="{{ route('app-escritorio.store') }}" ; method="post" id="frm_usu">
            {{ csrf_field() }}
       <!-- Modal Header -->
            <div class="modal-header">
                <h4 class="modal-title">Recompromisso</h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

        <!-- Modal body -->
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <label class="text-center"><b>Seus recompromisso em aberto</b></label>
                    </div>
                </div>
                <div class="row">
                    <table class="table">
                        <tbody>
                        @foreach ($true as $doacao)
                            <tr>
                            <td>
                                <div class="form-check">
                                    <label class="form-check-label">
                                        <input class="form-check-input" type="checkbox" value="{{ $doacao->id }}" name="doacao">
                                        <span class="form-check-sign">
                                        <span class="check"></span>
                                        </span>
                                    </label>
                                </div>
                            </td>
                            <td> Recompromisso pedente R$ {{ formatMoney($doacao->aporte()->first()->valor_doado) }} o retorno é de R$ {{ formatMoney($doacao->aporte()->first()->valor_retorno) }}</td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

       <!-- Modal footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Cancelar</button>
                <button type="submit" class="btn btn-info block">Recompromissar</button>
            </div>
            </form>
        </div>
    </div>
</div>



@endsection

@push('js')

    <script>
        $(document).ready(function() {
            // Javascript -- assets/js/demos.js
            md.initDashboardPageCharts();
        });
    </script>

    <script type="text/javascript">
        $('.block').on('click', function (e){
            e.preventDefault();

            var form = $(this).closest('form');
            var action = form.attr('action');

            $(this).html('<i class="fa fa-refresh fa-spin"></i> Aguarde...').attr({
            disabled: 'disabled'
            });
            form.submit();
        })
    </script>

    <script type="text/javascript">
        $(function () {
            $('.example-popover').popover({
                container: 'body'
            })
            })
    </script>
    <script type="text/javascript">
        $(function () {
            $('[data-toggle="popover"]').popover()
          })
    </script>



              <!-- Display the countdown timer in an element -->
    <p id="demo"></p>

    <script>
    // Set the date we're counting down to
    var countDownDate = new Date("{{ $hora_limite }}").getTime();
   // date('Y-m-d  H:i:s', strtotime('+1 Hours'));
   // Date("2019-10-20 18:20:00")
    // Update the count down every 1 second
    var x = setInterval(function() {

    // Get today's date and time
    var now = new Date().getTime();

    // Find the distance between now and the count down date
    var distance = countDownDate - now;

    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);

    // Display the result in the element with id="demo"
    // função com o dia document.getElementById("demo").innerHTML = days + "d " + hours + "h "
    //+ minutes + "m " + seconds + "s ";

    document.getElementById("demo").innerHTML = hours + "h "
    + minutes + "m " + seconds + "s ";

    // If the count down is finished, write some text
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = "o contrato expirou";
    }
    }, 1000);
    </script>

 @endpush