anchor.diff:                  <%= link_to 'Inscribir', users_inscribe_path(:offer_id => @offer.id), {:type => "button", :class => "btn btn-dealhunter medium full-width rounded-borders-btn", :method => :post, } %>
               <% else %>
                   <%= link_to 'Desinscribir', users_unsubscribe_path(:clients_offers_id => clients_offer.first.id, :offer_id => @offer.id), {:type => "button", :class => "btn btn-dealhunter medium full-width rounded-borders-btn", :method => :post, } %>
  +                <% if clients_offer.first.attributes["participated"].blank? %>
  +                    <% first_game = true %>
  +                    <% path = first_game ? first_games_index_path : second_games_index_path %>
  +                    <%= link_to 'Jugar!', path, {:type => "button",:style => "margin-top:5px; background-color:rgb(0,100,100)", :class => "btn btn-dealhunter medium full-width rounded-borders-btn", :method => :post, } %>
  +                <% end %>
  +                <br>
  +                <br>
               <% end %>
  -            <br>
  -            <br>
  -
   
           <% end %>
   
  
positive.code: 
  <script type="text/javascript">
      <% unless current_user.client.address.nil? || @offer.branch.address.nil? %>
          var a = getDistanceFromLatLonInKm(<%=current_user.client.address.latitude%>, <%=current_user.client.address.longitude%>, <%=@offer.branch.address.latitude%>, <%=@offer.branch.address.longitude%>);
          var d = document.getElementById("distance");
          d.innerHTML = "A " + Math.round(a*100)/100 + " kilómetros de tu ubicación.";
      <% end %>
      function getDistanceFromLatLonInKm(lat1,lon1,lat2,lon2) {
          var R = 6371000; // Radius of the earth in m
          var dLat = deg2rad(lat2-lat1);  // deg2rad below
          var dLon = deg2rad(lon2-lon1);
          var a =
                          Math.sin(dLat/2) * Math.sin(dLat/2) +
                                  Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *
                                          Math.sin(dLon/2) * Math.sin(dLon/2)
                  ;
          var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
          var d = R * c; // Distance in m
          return d;
      }
      function deg2rad(deg) {
          return deg * (Math.PI/180)
      }
  </script>
  
negative.code: <div class="container" id="main-content">
  <div class="row">
  <section class="span8 rounded-borders light-shadowed">
  <div class="wrapper-padding">
  <% if !session[:flash].nil? %>
      <% if !session[:flash][:notice].nil? %>
          <div class="alert" id="login-alert">
            <%= session[:flash][:notice] %>
          </div>
      <% end %>
  <% end %>
  <header class="rounded-borders-btn" style="
  padding: 1px 10px;
  ">
    <h2> <%= @offer.name %> </h2>
  
    <h3> <%= @offer.branch.company.name %> / <%= @offer.branch.name %> </h3>
    <script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
    <script type="text/javascript">stLight.options({publisher: "a8967170-80ac-4677-9f17-a0a60edb39f5", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>
    <script src="https://apis.google.com/js/platform.js" async defer></script>
    {lang: 'es'}
  
  </header>
  
  <hr>
  
  <!--end share-btns-->
  
  <article class="slider-wrapper theme-default">
    <div id="slider" class="nivoSlider">
      <% unless @offer.photo.nil? %>
          <img class="carrousel-big-photo" src="<%= @offer.photo %>"
               style="height: 100%; width: 100%;" alt=""/>
      <% end %>
    </div>
  </article>
  
  <article class="tabs-wrapper">
    <ul id="myTab" class="nav nav-tabs 3tabs">
      <li class="active"><a href="#detalles" data-toggle="tab">Detalles</a></li>
      <li><a href="#mapas" data-toggle="tab">Mapa</a></li>
      <% if @user.company? %>
          <li><a href="#clients" data-toggle="tab">Inscriptos</a></li>
  
      <% end %>
      <li><a href="#results" data-toggle="tab">Resultados</a></li>
  
    </ul>
  
    <div class="tab-content">
      <div class="tab-pane active" id="detalles">
        <h5> Descripción </h5>
  
        <p> <%= @offer.description %></p>
  
        <h5> Fechas </h5>
  
        <p>
          <b>Fecha de inicio:</b>
          <%= @offer.start_date.strftime("%d/%m/%y") %>
        </p>
  
        <p>
          <b>Fecha de finalización:</b>
          <%= @offer.end_date.strftime("%d/%m/%y") %>
        </p>
  
        <h5> Distancia </h5>
  
        <p id="distance"></p>
  
        <h5> Inscripciones </h5>
  
        <p> <%= @offer.clients.count %> clientes inscriptos </p>
  
        <h5> Áreas de Interés </h5>
        <ul>
          <% @offer.titles.each do |title| %>
              <li> <%= title.name %></li>
          <% end %>
        </ul>
  
  
      </div>
  
      <div class="tab-pane" id="mapas" align="center">
  
        <%= gmaps("map_options" => {
                "center_on_user" => true,
                "auto_adjust" => true,
                "auto_zoom" => false,
                "frameborder" => true},
                  "markers" => {
                          "data" => @json
                  })
  
        %>
        <% content_for :scripts do %>
  
            <script type="text/javascript">
                $().ready(function () {
  
                    function getDistanceFromLatLonInKm(lat1, lon1, lat2, lon2) {
                        var R = 6371000; // Radius of the earth in m
                        var dLat = deg2rad(lat2 - lat1);  // deg2rad below
                        var dLon = deg2rad(lon2 - lon1);
                        var a =
                                        Math.sin(dLat / 2) * Math.sin(dLat / 2) +
                                        Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *
                                        Math.sin(dLon / 2) * Math.sin(dLon / 2)
                                ;
                        var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
                        var d = R * c; // Distance in m
                        return d;
                    }
  
                    function deg2rad(deg) {
                        return deg * (Math.PI / 180)
                    }
  
                    Gmaps.map.geolocationSuccess = function () {
                        Gmaps.map.createMarker({Lat: Gmaps.map.userLocation.lat(),
                            Lng: Gmaps.map.userLocation.lng(),
                            rich_marker: null,
                            marker_picture: ""
                        });
                        var user_id = "<%= current_user.id %>";
                        $.ajax({
                            url: "http://localhost:3000/users/" + user_id + "/address",
                            data: {
                                lat: Gmaps.map.userLocation.lat(),
                                lng: Gmaps.map.userLocation.lng()
                            },
                            type: "POST",
                            beforeSend: function (xhr) {
                                xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))
                            }
                        });
                        var origin = new google.maps.LatLng(Gmaps.map.userLocation.lat(), Gmaps.map.userLocation.lng());
                        var distance;
  
                        for (var i = 0; i < Gmaps.map.markers.length; i++) {
                            distance = getDistanceFromLatLonInKm(Gmaps.map.userLocation.lat(), Gmaps.map.userLocation.lng(), Gmaps.map.markers[i].lat, Gmaps.map.markers[i].lng) / 1000;
                            Gmaps.map.markers[i].infowindow.content = Gmaps.map.markers[i].infowindow.content + Math.round(distance * 100) / 100 + " kms"
                        }
  
                    }
  
                })
            </script>
        <% end %>
      </div>
  
      <div class="tab-pane" id="clients">
        <h5> Los clientes que se han inscripto son: </h5>
        <ul>
          <% @offer.clients.each do |client| %>
              <li> >   <%= "#{client.user.email} - #{client.first_name} #{client.last_name} " %></li>
          <% end %>
        </ul>
  
  
      </div>
  
      <div class="tab-pane" id="results">
        <% if @offer.end_date < Date.current %>
            <table class="table table-striped">
              <thead>
              <tr>
                <th>
                  Inscripto
                </th>
                <th>
                  Posición
                </th>
  
              </tr>
  
              </thead>
              <tbody>
              <% @offer.clients.each do |client| %>
                  <tr>
                    <td>
                      <%= "#{client.user.email} - #{client.first_name} #{client.last_name} " %>
                    </td>
                    <td>
                      <% @offer_clients.each do |offer_client| %>
                          <% if client.id == offer_client.client_id %>
                              <% if !offer_client.participated %>
                                  No Participó
                              <% else %>
                                  <%= offer_client.position %>
                              <% end %>
                          <% end %>
  
                      <% end %>
                    </td>
  
                  </tr>
              <% end %>
              </tbody>
            </table>
        <% else %>
            <ul>La oferta todavía no ha finalizado.</ul>
        <% end %>
  
        <% if @user.company? %>
            <ul>
              <%= link_to 'Editar resultados', offers_results_path(:id => @offer.id) %>
            </ul>
        <% end %>
  
      </div>
  
  
    </div>
  
  </article>
  <!--end tabs-wrapper-->
  
  </div>
  
  </section>
  <!--end main content section-->
  