@extends('templates.landing-page')

@section('menu-cadastro')
	active
@endsection

@section('styles')
  <!-- Add fancyBox -->
  <link rel="stylesheet" href="{{ asset('admin-lte/fancybox/jquery.fancybox.css?v=2.1.7') }}" type="text/css" media="screen" />
  <!-- Optionally add helpers - button, thumbnail and/or media -->
  <link rel="stylesheet" href="{{ asset('admin-lte/fancybox/helpers/jquery.fancybox-buttons.css?v=1.0.5') }}" type="text/css" media="screen" />
  <link rel="stylesheet" href="{{ asset('admin-lte/fancybox/helpers/jquery.fancybox-thumbs.css?v=1.0.7') }}" type="text/css" media="screen" />
  <link rel="stylesheet" href="{{ asset('landing-page/css/cadastro.css') }}">
@endsection

@section('conteudo')
<section class="section-padding">
	<div class="container">
		<div class="row">
			<div class="col-sm-12">
        <!-- <h1 class="title">Compre aqui seu domínio personalizado</h1> -->
				<div class="content form-horizontal text-right">
          <label>
              <div class="input-group">
                 <input name="dominio" id="dominio" type="text" class="form-control" {{empty($dominio) ? '' : "value=".$dominio.""}} placeholder="Digite o domínio">
                 <span class="input-group-btn">
                      <button class="btn btn-info" style="margin:0" id="pesquisar" type="button"><b>Pesquisar</b></button>
                 </span>
              </div>
          </label>
          <!-- <label>Domínio</label>
          <input type="text" id="dominio" name="dominio"  class="form-control">
         	{!! Form::label('dominio', 'Domínio') !!} 
        	{!! Form::text('dominio', null, ['class'=>'form-control']) !!} -->
				</div>
			</div>
      <a class="various fancybox.ajax" data-fancybox-type="ajax" id="confirmarcompra" href="{{ url('/confirmarcompradominio') }}"></a>
      <div class="container">
          <table class="table">
            <thead>
              <tr id="thead" class="alert-success">
                <th>Domínio</th>
                <th>Preço</th>
                <th>Período</th>
              </tr>
            </thead>
            <tbody id="resultado">
            </tbody>
          </table>
      </div>
		</div>
	</div>
</section>
@endsection
@section('scripts')
    
    <!-- Add fancyBox -->
    <script type="text/javascript" src="{{ asset('admin-lte/fancybox/jquery.fancybox.pack.js?v=2.1.7') }}"></script>
    <script type="text/javascript" src="{{ asset('admin-lte/fancybox/helpers/jquery.fancybox-buttons.js?v=1.0.5') }}"></script>
    <script type="text/javascript" src="{{ asset('admin-lte/fancybox/helpers/jquery.fancybox-media.js?v=1.0.6') }}"></script>
    <script type="text/javascript" src="{{ asset('admin-lte/fancybox/helpers/jquery.fancybox-thumbs.js?v=1.0.7') }}"></script>
    <script src="{{ asset('landing-page/js/bootbox.min.js') }}"></script>
    <script type="text/javascript">
        var domain = '';
        var price = '';
        var period = ''; 
        function confirmarCompra(tr_dominio)
        {
            domain = $(tr_dominio).data('dominio');
            price = $(tr_dominio).data('price');
            period = $(tr_dominio).data('period');
            confirmarcompra.click();
        }

        $(document).ready(function(){
            $('#confirmarcompra').click(function(e){
                e.preventDefault(); 
                $.ajax({
                  type: "POST",
                  cache: false,
                  url: this.href,
                  data: {
                    domain_register: domain,
                    price: price,
                    period: period,
                    _token: "{{ csrf_token() }}"
                  },
                  success: function (data) {
                    // $(".fancybox").fancybox();
                    $.fancybox(data, {
                        maxWidth    : 800,
                        maxHeight   : 600,
                        fitToView   : false,
                        width       : '50%',
                        height      : 'auto',
                        autoSize    : false,
                        closeClick  : false,
                        openEffect  : 'elastic',
                        closeEffect : 'fade'
                    });
                  } 
                }); 
            });


            @if (session('sucesso'))
            swal({
                title: "Sucesso!",
                text: "{{session('sucesso')}}",
                type: "success",
                timer: 2000,   
                showConfirmButton: false})
            @endif

            @if (session('erro'))
            swal({
                title: "Erro!",
                text: "{{session('erro')}}",
                type: "error",
                timer: 2000,   
                showConfirmButton: false})
            @endif

            // DOMÍNIO
            $('#dominio-propio').click(function(){
                $('#dominio').prop('disabled', false);
                $('#pesquisar').prop('disabled', false);
            });
            $('#subdominio').click(function(){
                $('#dominio').prop('disabled', true);
                $('#pesquisar').prop('disabled', true);
            });

            $('.table').hide();
            $('#pesquisar').click(function(){
                $('#loading').attr('class', 'loading');
                $('#resultado').html('');
                $.ajax({
                    method: 'POST',
                    url: "{{ url('/listarsugestoes') }}",
                    data: {
                        domain: $('#dominio').val(),
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(data){
                      data = $.parseJSON(data);
                      console.log(data);
                      if (data.ok == true)
                      {
                        $.each(data.data.domains, function(i, item) {
                          $('#resultado').append('<tr class="tr-dominio" data-dominio="'+ item.domain +'" data-price="'+ item.price +'" data-period="'+ item.period +'" onclick="confirmarCompra(this);"><td>'+ item.domain +'</td><td>R$ '+ item.price +',00</td><td>'+ item.period +' ano</td><tr>');
                          $('#acao').show();
                        });
                      }else
                      {
                        bootbox.alert('Ocorreu um erro ao fazer verificação');
                      }
                      $('.table').show();
                      $('#loading').attr('class', '');
                    }
                });
            });
            if($("#dominio").val() != ""){
              $('#pesquisar').click(); 
            }
        });
    </script>
@stop