<link rel="stylesheet" type="text/css" href="/templates/widgets/widget-phone.css">
<script src="/libraries/jquery-ui/1.11.3/jquery-ui.min.js"></script>
<a href="#" id="widget-phone-icon">
  <i class="fa fa-phone"></i>
</a>
<div id="widget-phone-bg">
  <div id="widget-phone-box">
    <a href="#" id="widget-phone-close">
      <i class="fa fa-times"></i>
    </a>
    <div id="widget-phone-tabs">
      <ul>
        <li class="active" tab="widget-phone-now">
          <i class="fa fa-phone"></i> Zadzwoń do mnie teraz
        </li>
<!--        <li tab="widget-phone-later">
          <i class="fa fa-clock-o"></i> Zadzwoń do mnie później
        </li>
        <li tab="widget-phone-message">
          <i class="fa fa-comments-o"></i> Zostaw wiadomość
        </li>-->
      </ul>
    </div>
    <div id="widget-phone-box-content">
      <div id="widget-phone-now" class="tab active">
        <div id="widget-phone-alert">Dziękujemy za kontakt. Wkrótce oddzwonimy.</div>
        <p>Podaj swój numer telefonu a oddzwonimy do Ciebie</p>
        <div class="form-group">
          <i class="fa fa-phone"></i>
          <input type="text" class="form-control" name="widget-phone-input" id="widget-phone-input">
        </div>
        <div class="form-group">
          <button type="button" class="btn btn-success">Zadzwoń do mnie teraz</button>
        </div>
      </div>
      <div id="widget-phone-later" class="tab">
        b
      </div>
      <div id="widget-phone-message" class="tab">
        c
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  $(document).ready( function() 
  {
    setTimeout(function() {
      $( '#widget-phone-icon' ).show( 'fade' );
    }, 2000 );
    
    $( 'body' ).on( 'click', '#widget-phone-icon', function()
    {
      $( this ).hide( 'fade' );
      $( '#widget-phone-bg' ).show( 'fade' );
    });
    
    $( 'body' ).on( 'click', '#widget-phone-close', function()
    {
      $( '#widget-phone-bg' ).hide( 'fade' );
      $( '#widget-phone-box-content .tab.active *' ).show();
      $( '#widget-phone-box-content .tab.active #widget-phone-alert' ).hide();
      $( '#widget-phone-icon' ).show( 'fade' );
    });
    
    $( 'body' ).on( 'click', '#widget-phone-tabs li', function()
    {
      var tab = $( this ).attr( 'tab' );
      $( '#widget-phone-box-content .tab' ).removeClass( 'active' );
      $( '#widget-phone-box-content #' + tab ).addClass( 'active' );
    });
    
    $( 'body' ).on( 'click', '#widget-phone-now button', function()
    {
      var phone = $( '#widget-phone-now #widget-phone-input' ).val();
      if ( $.trim( phone ) == '' )
      {
        $( '#widget-phone-box' ).effect( "bounce", { direction: 'left', distance: 25, times: 2 }, 500 );
        $( '#widget-phone-now #widget-phone-input' ).addClass( 'error' ).focus();
        return false;
      }
      else
      {
        $.ajax(
        {
          type: 'POST',
          cache: false,
          url: 'ajax.php',
          data: 
          {
            a: 'widget-phone-now',
            phone: phone
          },
          beforeSend: function() 
          {
            $( '#widget-phone-now #widget-phone-input' ).removeClass( 'error' );
            $( '#widget-phone-now button' ).attr( 'disabled', 'disabled' );
            $( '#widget-phone-now button' ).html( 'Trwa wysyłanie...' );
          },
          success: function( data ) 
          {
            $( '#widget-phone-now button' ).removeAttr( 'disabled' );
            
            response = jQuery.parseJSON( data );

            $( '.jqibox' ).remove();

            if ( response.status === 'ok' )
            {
              $( '#widget-phone-now *' ).hide();
              $( '#widget-phone-now #widget-phone-alert' ).show().addClass( 'good' ).html( 'Dziękujemy za kontakt. Wkrótce oddzwonimy.' );
            }
            else
            {
              $( '#widget-phone-now *' ).hide();
              $( '#widget-phone-now #widget-phone-alert' ).show().addClass( 'bad' ).html( 'Wystąpił błąd.<br />Spróbuj ponownie.' );
            }
          }
        });
      }
    });
  });
</script>