@extends('layouts.front.app')
@section('og')
<link href="{{ asset('css/jquery-ui.min.css') }}" rel="stylesheet">
@endsection
@section('content')
@php
$periodo = \App\Periodo::where('excluido', false)->get();
@endphp
<section class="container content">
  @include('layouts.errors-and-messages')
  <div class="container dark-grey-text">
    <!-- 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') }}" class="opera-text"> <i class="fa fa-home"></i> Home</a><i class="fas fa-angle-double-right mx-2 opera-text"
          aria-hidden="true"></i></li>
          @if(isset($products->id))
          <li> <a href="{{ route('checkout.view', $products->id) }}" class="opera-text"> Checkout</a><i class="fas fa-angle-double-right mx-2"
            aria-hidden="true"></i></li>
            @else
            <li> <a href="/cart" class="opera-text"> Carrinho</a><i class="fas fa-angle-double-right mx-2 opera-text"
              aria-hidden="true"></i></li>
              @endif
              <li class="active opera-text"> Configura Entrega</li>
            </ol>
          </nav>
          <form action="{{ route('checkout.finaliza') }}" method="post" class="form">
            <div class="row escolha-endereco">
              {{ csrf_field() }}

              <div class="form-group col-md-12">
                <ul class="nav nav-tabs" id="myTab" role="tablist">
                  <li class="nav-item @if(request()->input('tab') === 'retirarLoja') active @endif">
                    <a class="nav-link @if(request()->input('tab') === 'retirarLoja') active @endif" id="retirarLoja-tab" data-toggle="tab" href="#retirarLoja" role="tab" aria-controls="retirarLoja"
                      aria-selected="true">RETIRAR NA LOJA</a>
                    </li>
                    <li class="nav-item @if(((request()->input('tab') === 'entregaEndereco') && $addresses->count() > 0)) active @endif">
                      <a class="nav-link @if(((request()->input('tab') === 'entregaEndereco') && $addresses->count() > 0) || (request()->input('address_id'))) active @endif" id="entregaEndereco-tab" data-toggle="tab" href="#entregaEndereco" role="tab" aria-controls="entregaEndereco"
                        aria-selected="false">ENTREGAR no ENDEREÇO</a>
                      </li>
                      {{-- <li class="nav-item @if(((request()->input('tab') === 'novoEndereco') || $addresses->count() === 0) || request()->input('address_id')) active @endif">
                        <a class="nav-link @if(((request()->input('tab') === 'novoEndereco') || $addresses->count() === 0) || request()->input('address_id')) active @endif" id="novoEndereco-tab" data-toggle="tab" href="#novoEndereco" role="tab" aria-controls="novoEndereco"
                          aria-selected="false">ENTREGAR EM OUTRO ENDEREÇO</a>
                        </li> --}}
                      </ul>
                      <div class="col-lg-12 jumbotron">
                        <div class="card tab-content customer-order-list">
                          <div role="tabpanel" class="tab-pane @if(request()->input('tab') === 'retirarLoja') active @endif" id="retirarLoja">
                            <div class="card-body">
                              <div class="header h3">1) Escolha se deseja retirar em nossa loja</div>
                              <div class="custom-control custom-radio">
                                <input type="radio" class="custom-control-input" id="retirar" name="entrega" value="retirar" required>
                                <label class="custom-control-label" for="retirar">RETIRAR PESSOALMENTE NA LOJA.</label>
                              </div>
                            </div>
                          </div>
                          <div role="tabpanel" class="tab-pane @if(((request()->input('tab') === 'entregaEndereco') && $addresses->count() > 0) || (request()->input('address_id'))) active @endif" id="entregaEndereco">
                            <div class="card-body">
                              <div class="header h3">1) Escolha onde deseja que seja entregue</div>
                              @if($addresses && ($addresses->count() > 0))
                              <table class="table">
                                <tbody>
                                  <tr>
                                    <td></td>
                                    <td>Indentificação</td>
                                    <td>Logradouro</td>
                                    @if(isset($address->province))
                                    <td>Província</td>
                                    @endif
                                    <td>UF</td>
                                    <td>Cidade</td>
                                    <td>CEP</td>
                                    <td>País</td>
                                    <td>FRETE</td>
                                  </tr>
                                </tbody>
                                <tbody>
                                  @foreach($addresses->sortByDesc('id') as $address)
                                  <tr>
                                    <td>
                                      {{--  <input type="radio" name="entrega" value="{{ $address->id }}" @if($frete->valorFrete(str_replace(['.', '-'], '', $address->zip)) === 0.0) disabled @endif >  --}}
                                      <div class="custom-control custom-radio">
                                        <input type="radio" class="custom-control-input" id="entrega_{{ $address->id }}" name="entrega" value="{{ $address->id }}" @if($frete->valorFrete(str_replace(['.', '-'], '', $address->zip)) === 0.0) disabled @endif @if(intval(request()->input('address_id')) === $address->id) checked @endif required>
                                        <label class="custom-control-label" for="entrega_{{ $address->id }}"></label>
                                      </div>
                                    </td>
                                    <td>{{ $address->alias }}</td>
                                    <td>{{ $address->address_1 }}</td>
                                    @if(isset($address->province))
                                    <td>{{ $address->province->name }}</td>
                                    @endif
                                    <td>{{ $address->state_code }}</td>
                                    @if($address->cidade !== null)
                                    <td>{{ ($address->cidade->nome_municipio) ?? null }}</td>
                                    @else
                                    <td></td>
                                    @endif
                                    <td>{{ $address->zip }} </td>
                                    @if($frete->valorFrete(str_replace(['.', '-'], '', $address->zip)) === 0.0)
                                    <td colspan="2" class="text-danger h5">Não temos entrega neste endereço</td>
                                    @else
                                    <td>{{ $address->country->name }}</td>
                                    <td>{{ config('cart.currency_symbol') }}{{ $frete->valorFrete(str_replace(['.', '-'], '', $address->zip)) }}</td>
                                    @endif
                                  </tr>
                                  @endforeach
                                </tbody>
                              </table>
                              @endif
                              <input type="radio" class="custom-control-input" id="cadastrar_endereco" name="entrega" value="retirar" data-href="{{ route('customer.address.create', auth()->user()->id) }}" required>
                              <a href="{{ route('customer.address.create', auth()->user()->id) }}" class="btn btn-primary">CADASTRAR NOVO ENDEREÇO</a>
                            </div>

                          </div>
                        </div>
                      </div>
                      <div class="btn-group text-center w-100" role="group" aria-label="Próxima etapa">
                        <button type="button" class="btn btn-info text-dark btn-cart" data-href="{{ route('cart.index') }}">VOLTAR</button>
                        <button type="button" class="btn btn-success text-dark ativa-periodo">Selecionar Período</button>
                      </div>
                    </div>
                  </div>

                  <div class="row escolha-periodo">
                    <div class="form-group col-md-12">
                      <div class="col-lg-12 jumbotron">
                        <div class="card card-body">
                          <div class="header h3">2) Escolha a data e o período da entrega</div>
                          <div class="col-md-5">
                            <div id="datepicker"></div>
                            {{-- <div>
                              <h5>Atenção!</h5>
                              <p>Por ocasião do feriado de Corpus Christy, não abriremos no dia 20/06/2019 (nem teremos entrega).</p>
                            </div> --}}
                          </div>
                          <div class="col-md-7 p-3">

                            <input type="hidden" name="hora_entrega_manha" value="10:00">
                            <input type="hidden" name="hora_entrega_tarde" value="16:30">
                            <ul class="data_entrega hidden">
                              <li id="dataEntrega" class="font-italic">Clique em cima do dia em que deseja a entrega</li>
                              <li id="tituloPeriodo"> Escolha abaixo o <strong>período de entrega</strong> desejado:
                                <ul class="list-unstyled horario-entrega">

                                </ul>
                              </li>
                            </ul>
                          </div>
                          <input type="hidden" name="data_entrega" id="data_entrega">
                        </div>
                      </div>
                      <div class="btn-group text-center w-100" role="group">
                        <button type="button" class="btn btn-info text-dark ativa-endereco">Voltar para o endereço</button>
                        <button type="button" class="btn btn-success text-dark ativa-cartao">Preencha o Cartão</button>
                      </div>
                    </div>
                  </div>

                  <div class="row escolha-cartao">
                    <div class="form-group col-md-12">
                      <div class="col-lg-12 jumbotron">
                        <div class="card card-body">
                          <div class="header h3">3) Cartão da Mensagem e Assinatura</div>
                          <div class="col-lg-12 text-left">
                            <label for="entrega_para">Entregar para: <span class="red-text">*</span></label>
                            {!! Form::text('entrega_para', '', ['class' => 'form-control text-left', 'required' => true]) !!}
                          </div>
                          <div class="col-lg-12">
                            <label for="mensagem">Mensagem (Escreva aqui a mensagem que será entregue junto com o presente):</label>
                          </div>
                          <div class="col-lg-12">
                            {!! Form::textarea('mensagem', '', ['class' => 'form-control']) !!}
                          </div>
                          <div class="col-lg-12">
                            <label for="anonimo" class="mr-4">Anônimo
                              {!! Form::radio('assinado', 'anonimo', true, ['class' => 'form-control', 'id' => 'anonimo', 'required' => true, 'checked' => 'checked']) !!}
                            </label>
                            <label for="assinado" class="ml-4">Com a assinatura:
                              {!! Form::radio('assinado', 'assinado', false, ['class' => 'form-control', 'id' => 'assinado', 'required' => true]) !!}
                            </label>
                            {!! Form::text('assinatura', 'anonimo', ['class' => 'form-control hidden', 'id'=>'assinatura']) !!}
                          </div>
                        </div>
                      </div>
                      <div class="btn-group text-center w-100" role="group" aria-label="Enviar formulario">
                        <button type="button" class="btn btn-info text-dark ativa-periodo w-50">Voltar para o período</button>
                        <button type="submit" class="btn btn-success text-dark w-50">Continuar</button>
                      </div>
                    </div>
                  </div>
                </form>
              </div>
            </section>
            <!-- /.content -->
            @endsection
            @section('js')
            <script src="{{ asset('js/jquery-ui.min.js') }}"></script>
            <script type="text/javascript">

              $(document).ready(function () {
                $('.btn-cart').on('click', function(){
                  location.href = $(this).data('href')
                })

                $('#cadastrar_endereco').on('click', function(){
                  window.location.href = $(this).data('href');
                })
                $('.escolha-endereco').show()
                $('.escolha-periodo').hide()
                $('.escolha-cartao').hide()
                $('.data_entrega').hide()
                $('input[name=assinatura]').hide()

                $('.ativa-endereco').on('click', function(){
                  $('.escolha-endereco').show()
                  $('.escolha-periodo').hide()
                  $('.escolha-cartao').hide()
                })
                $('.ativa-periodo').on('click', function(){
                  let entrega = $('input[name=entrega]:checked').val()
                  if(!entrega) {
                    $('.modal-body').html('Selecione o local de entrega, informe um novo endereço ou selecione para retirar em nossa loja, para prosseguir')
                    $('#modalPrincial').addClass('p-5')
                    $('div.modal-dialog').addClass('modal-notify modal-warning')
                    $('div.modal-footer>button.btn').removeClass('btn-secondary')
                    $('div.modal-footer>button.btn').addClass('btn-warning')
                    $('#modalPrincial').modal( 'show' )
                  } else {
                    $('.escolha-endereco').hide()
                    $('.escolha-periodo').show()
                    $('.escolha-cartao').hide()
                  }
                })
                $('.ativa-cartao').on('click', function(){
                  let periodo = $('input[name=horario_entrega]:checked').val()
                  if(!periodo) {
                    $('.modal-body').html('Selecione o período da entrega para prosseguir')
                    $('#modalPrincial').addClass('p-5')
                    $('div.modal-dialog').addClass('modal-notify modal-warning')
                    $('#modalPrincial').modal( 'show' )
                  } else {
                    $('.escolha-endereco').hide()
                    $('.escolha-periodo').hide()
                    $('.escolha-cartao').show()
                  }
                })
                $('input[name=assinado]').on('click', function(){
                  console.log($(this).val())
                  let assinado = $(this).val()
                  if(assinado === 'anonimo') {
                    $('input[name=assinatura]').hide()
                    $('input[name=assinatura]').removeAttr('required')
                    $('input[name=assinatura]').val('anonimo')
                  } else {
                    $('input[name=assinatura]').show()
                    $('input[name=assinatura]').attr('required', true)
                  }
                })
                function noSundays(date) {
                  return [date.getDay() != 0, ''];
                }
                $( "#datepicker" ).datepicker({
                  showButtonPanel: false,
                  showOtherMonths: true,
                  selectOtherMonths: true,
                  minDate: new Date(),
                  dateFormat: "dd/mm/yy",
                  dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado'],
                  dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
                  dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
                  monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
                  monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],
                  nextText: 'Próximo',
                  prevText: 'Anterior',
                  weekHeader: 'Semana',
                  currentText: 'Hoje',
                  beforeShowDay: noSundays,
                  altField: "#data_entrega",
                  altFormat: "yy-mm-dd"
                });
                function inserePeriodo()
                {
                  $('.horario-entrega').html("") /*limpa o campo dos horários, para carregar novos horários*/
                  let data_entrega = $( "#datepicker" ).datepicker( "getDate" ) /*Captura a data da entrega selecionada no calendário*/
                  let hora_entrega_manha = parseInt($('input[name=hora_entrega_manha]').val()) /*Captura a data */
                  let hora_entrega_tarde = parseInt($('input[name=hora_entrega_tarde]').val())
                  let li_entrega_manha = '<li><label for="horario_entrega_tarde"><input type="radio" name="horario_entrega" value="manha"> MANHÃ 8:00 ÀS 13:00 - R$ 0.00</label></li>'
                  let li_entrega_tarde = '<li><label for="horario_entrega_manha"><input type="radio" name="horario_entrega" value="tarde"> TARDE 13:00 ÀS 19:00 - R$ 0.00</label></li>'

                  let options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }

                  let agora = new Date();
                  let options_calculo = { day: 'numeric' }
                  let dia_agora = agora.toLocaleDateString('pt-BR', options_calculo)
                  let dia_entrega = data_entrega.toLocaleDateString('pt-BR', options_calculo)
                  let diff_dias = (dia_entrega - dia_agora)

                  let seconds = Math.abs((data_entrega - (agora)) / 1000);
                  let minutes = Math.floor(seconds / 60);
                  let hours = Math.floor(seconds / 3600);
                  let days = Math.floor(seconds / 86400);

                  hours = hours-(days*24);
                  minutes = minutes-(days*24*60)-(hours*60);
                  seconds = seconds-(days*24*60*60)-(hours*60*60)-(minutes*60);
                  // get total seconds between the times
                  console.log({'Data entrega': data_entrega, 'Data local': agora, 'Diferença (dias)': days, 'Em horas': hours, 'Em minutos': minutes, 'Dia (entrega - agora)': diff_dias, 'Horas' : hours, 'Hora a tarde' : hora_entrega_tarde, 'Entrega Manhã?': hours < hora_entrega_manha, 'Entrega a Tarde?' : hours < hora_entrega_tarde});

                  if (diff_dias === 0 && days === 0) {
                    let entregaManha = hours < hora_entrega_manha
                    let entregaTarde = hours < hora_entrega_tarde
                    if (!entregaManha && !entregaTarde){
                      $( '.data_entrega' ).show()
                      $( "#dataEntrega" ).html("<strong>Não existe horário disponível para esta data</strong>")
                      $('#tituloPeriodo').hide()
                    } else if (entregaManha) {
                      $( '.data_entrega' ).show()
                      $( "#dataEntrega" ).html("Data de Entrega Selecionada: <strong>" + data_entrega.toLocaleDateString('pt-BR', options) + "</strong>")
                      $('.horario-entrega').html(li_entrega_manha + li_entrega_tarde)
                      $('#tituloPeriodo').show()
                    } else if (entregaTarde) {
                      $( '.data_entrega' ).show()
                      $( "#dataEntrega" ).html("Data de Entrega Selecionada: <strong>" + data_entrega.toLocaleDateString('pt-BR', options) + "</strong>")
                      $('.horario-entrega').html(li_entrega_tarde)
                      $('#tituloPeriodo').show()
                    } else if (entregaManha && entregaTarde) {
                      $( '.data_entrega' ).show()
                      $( "#dataEntrega" ).html("Data de Entrega Selecionada: <strong>" + data_entrega.toLocaleDateString('pt-BR', options) + "</strong>")
                      $('.horario-entrega').html(li_entrega_manha + li_entrega_tarde)
                      $('#tituloPeriodo').show()
                    }
                  } else {
                    $( '.data_entrega' ).show()
                    $( "#dataEntrega" ).html("Data de Entrega Selecionada: <strong>" + data_entrega.toLocaleDateString('pt-BR', options) + "</strong>")
                    $('.horario-entrega').html(li_entrega_manha + li_entrega_tarde)
                    $('#tituloPeriodo').show()
                  }
                }
                inserePeriodo()
                $( "#datepicker" ).on('change', function(){
                  inserePeriodo()
                });

                $('.retirar').on('click', function() {
                  $('#enderecoCadastrado').removeClass('in').attr('aria-expanded', false)
                  $('#novoEndereco').removeClass('in').attr('aria-expanded', false)
                });
                $('.no-endereco').on('click', function() {
                  $('#retirarLoja').removeClass('in').attr('aria-expanded', false)
                  $('#novoEndereco').removeClass('in').attr('aria-expanded', false)
                });
                $('.novo-endereco').on('click', function() {
                  $('#retirarLoja').removeClass('in').attr('aria-expanded', false)
                  $('#enderecoCadastrado').removeClass('in').attr('aria-expanded', false)
                });

                $('#anonimo').on('click', function(){
                  $("#nome_remetente").hide()
                  $("#nome_remetente").addClass('hidden')
                });

                $('#assinado').on('click', function(){
                  $("#nome_remetente").show()
                  $("#nome_remetente").removeClass('hidden')
                });
              })
            </script>
            @endsection