<% include ../partials/header %>

<div class="container mt-5">
  <div class="row text-center">
    <div class="col-sm-12 col-md-5 col-lg-4">
  		<div class="card mb-3">
          <% if(!user.avatar) { %>
            <img class="card-img-top" src="/img/defaultAvatar.png" alt="user profile image">
          <% } else { %>
            <img class="card-img-top" src="<%= user.avatar  %>" alt="user profile image">
          <% } %>


        <div class="card-body">
          <div class="card-title">
            <% if (user.rating === 0) { %>
              <em class="text-muted">(Δεν έχει βαθμολογηθεί)</em>
            <% } else { %>
              <span class="fas fa-2x fa-star checked"></span>
              <span class="fa-2x <% if (user.rating <= 1) { %> far fa-star <% } else if(user.rating > 1 && user.rating <= 1.5){ %> fas fa-star-half-alt checked <% } else { %> fas fa-star checked <% } %>"></span>
              <span class="fa-2x <% if (user.rating <= 2) { %> far fa-star <% } else if(user.rating > 2 && user.rating <= 2.5){ %> fas fa-star-half-alt checked <% } else { %> fas fa-star checked <% } %>"></span>
              <span class="fa-2x <% if (user.rating <= 3) { %> far fa-star <% } else if(user.rating > 3 && user.rating <= 3.5){ %> fas fa-star-half-alt checked <% } else { %> fas fa-star checked <% } %>"></span>
              <span class="fa-2x <% if (user.rating <= 4) { %> far fa-star <% } else if(user.rating > 4 && user.rating <= 4.5){ %> fas fa-star-half-alt checked <% } else { %> fas fa-star checked <% } %>"></span>
            <% } %>
            <h1><%= user.firstName + " " + user.lastName %><i class="far fa-check-circle" style="top: 5px; color: #1da1f2"></i></h1>
            <em class="text-muted">@<%= user.username %></em><br>
          </div>
          <i class="far fa-envelope"></i><a href="mailto:<%= user.email %>">&nbsp;<%= user.email %></a><br>
            <i class="far fa-calendar-alt"></i>&nbsp;Μέλος από <%= user.createdAt.toDateString() %>
        </div>
        <% if(currentUser && user._id.equals(currentUser._id) || currentUser && currentUser.isAdmin) { %> <!-- && short-circuits -->
            <div id="profile-buttons" class="float-left pb-1">
              <% if(currentUser && user._id.equals(currentUser._id) && !currentUser.isBlocked) { %> <!-- && short-circuits -->
              <button  class="btn btn-success btn-lg" data-toggle="modal" data-target="#exampleModalLong">
                <i class="fas fa-gift"></i></button>
              <% } %>
              <a class="btn btn-warning btn-lg" href="/users/<%= user._id %>/edit">
                <i class="fas fa-user-edit"></i></a>
              <button class="btn btn-danger btn-lg" data-toggle="modal" data-target="#exampleModal">
                <i class="far fa-trash-alt"></i></button>
              <% if(currentUser && currentUser.isAdmin && !user.isAdmin && !user.isBlocked) { %>
              <form id="block-form" action="/users/<%= user._id %>/block/?_method=PUT" method="post">
                <button class="btn btn-danger btn-lg">
                  <i class="fas fa-lock"></i></button>
              </form>
              <% } else if(currentUser && currentUser.isAdmin && !user.isAdmin && user.isBlocked){ %>
                <form  id="block-form" action="/users/<%= user._id %>/unblock/?_method=PUT" method="post">
                  <button class="btn btn-success btn-lg">
                    <i class="fas fa-unlock"></i></button>
                </form>
              <% } %>
            </div>
        <% } %>
  		</div>
    </div>

    <div id="profileNav" class="col-sm-12 col-md-7 col-lg-8">
      <ul class="nav flex-column flex-md-row nav-tabs">
        <% if(currentUser && user._id.equals(currentUser._id)) { %>
        <li class="flex-md-fill text-md-center nav-item">
          <a href="/users/<%= user._id %>" class="nav-link" role="tab">Οι προσθήκες μου</a>
        </li>
        <% } else { %>
          <li class="flex-md-fill text-md-center nav-item">
            <a href="/users/<%= user._id %>" class="nav-link" role="tab">Προσθήκες</a>
          </li>
        <% } %>
        <% if(currentUser && user._id.equals(currentUser._id)) { %>
        <li class="flex-md-fill text-md-center nav-item">
          <a href="#locations" class="nav-link active" role="tab" aria-expanded="true">Οι Τοποθεσίες μου</a>
        </li>
        <% } else if(currentUser && currentUser.isAdmin) { %>
          <li class="flex-md-fill text-md-center nav-item">
            <a href="#locations" class="nav-link active" role="tab" aria-expanded="true">Τοποθεσίες</a>
          </li>
        <% } %>
      </ul>
    <div class="tab-content">
      <div class="tab-pane active mt-3" id="locations" role="tabpanel">


        <div class="table-responsive table-striped">
          <table class="table" width="100%" cellspacing="0">
            <tbody class="text-left">
              <% user.locations.forEach(function(location){ %>
                  <tr>
                    <td class="locationHover">
                      <h3><% if(location.name=="Σπίτι") { %><i class="fas fa-home"></i>&nbsp;<% } %><%= location.name %>
                        <% if(location.name!=="Σπίτι") { %>
                        <div style="float:right">
                          <button style="float: right" class="btn btn-lg open-deleteLocationModal" data-toggle="modal" data-target="#deleteLocationModal" data-delete='{"name": "<%= location.name %>", "location": "<%= location.location %>"}'><span id="bucket"><i class="far fa-trash-alt"></i></span></button>
                          <button style="float: right" class="btn btn-lg open-editLocationModal" data-toggle="modal" data-target="#editLocationModal" data-edit='{"name": "<%= location.name %>", "location": "<%= location.location %>"}'><span id="edit"><i class="fas fa-edit"></i></span></button>
                        </div>
                        <% } %>
                      </h3>
                      <h4 style="font-weight: 400"><%= location.location %></h4>
                    </td>
                  </tr>
              <% }); %>
            </tbody>
          </table>
        </div>
        <button class="btn btn-primary btn-lg btn-block" data-toggle="modal" data-target="#newLocationModal">Νέα Τοποθεσία</button>
      </div>
    </div>
  </div>
  </div>
</div>



<!-- Show Points Modal -->
<% if(currentUser && user._id.equals(currentUser._id) && !currentUser.isBlocked) { %> <!-- && short-circuits -->
  <div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLongTitle">Οι πόντοι μου</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="container">
              <div class="row">
                  <div class="col">
                      <div class="<%= findColor(currentUser.points) %>" >
                          <span class="progress-left">
                              <span class="progress-bar"></span>
                          </span>
                          <span class="progress-right">
                              <span class="progress-bar"></span>
                          </span>
                          <div class="progress-value"><%= currentUser.points %></div>
                      </div>
                  </div>
              </div>
          </div>
        </div>
        <div class="modal-footer justify-content-center">
          <button id="decline" type="button" class="btn btn-light" data-dismiss="modal">Κλείσιμο</button>
          <% if(currentUser.points >= 2000) { %>
          <a class="btn btn-success" href="/users/<%= user._id %>/redeem">
            <i class="fas fa-gift"></i>
              Εξαργύρωση
          </a>
          <% } %>
        </div>
      </div>
    </div>
  </div>
<% } %>

<!-- Delete User Modal -->
<% if(currentUser && user._id.equals(currentUser._id) || currentUser && currentUser.isAdmin) { %>
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModal" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLongTitle">Διαγραφή Λογαριασμού</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="container">
              <div class="row">
                  <div class="col">
                    <% if(currentUser && user._id.equals(currentUser._id)) { %>
                      <h5>Προσοχή!</h5><h6>Με τη διαγραφή του MyFuel λογαριασμού σου, θα χάσεις τα αποκλειστικά για εγγεγραμένους χρήστες προνόμια.</h6>
                    <% } else if(currentUser && currentUser.isAdmin) { %>
                      <h5>Προσοχή!</h5><h6>Η διαγραφή του χρήστη είναι οριστική.</h6>
                    <% } %>
                  </div>
              </div>
          </div>
        </div>
        <div class="modal-footer justify-content-center">
          <button id="decline" type="button" class="btn btn-light" data-dismiss="modal">Άκυρο</button>
          <form id="delete-form" action="/users/<%= user._id %>?_method=DELETE" method="post">
            <button class="btn btn-danger">
              <i class="far fa-trash-alt"></i>
                Διαγραφή</button>
          </form>
        </div>
      </div>
    </div>
  </div>
<% } %>

<!-- New Location Modal -->
<div class="modal fade" id="newLocationModal" tabindex="-1" role="dialog" aria-labelledby="exampleModal" aria-hidden="true">
  <div class="modal-dialog" style="min-width: 100%; margin: 1.75rem auto;" role="document">
    <div class="modal-content" style="width: 80%; margin: 0 auto">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Νέα Τοποθεσία</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="container text-left">
          <form class="" action="/users/<%= user._id %>/locations/new" method="post">
            <div class="form-row">
              <div class="form-group col-lg-4 col-md-4 col-sm-4">
                <div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
                  <label for="newLocation">Τοποθεσία</label>
                  <input type="text" id="pac-input1" class="form-control" name="newLocation" placeholder="--νέα τοποθεσία--" required>
                </div>
              </div>
              <div class="form-group col-lg-4 col-md-4 col-sm-4">
                <div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
                  <label for="newLocationName">Όνομα</label>
                  <input class="form-control" name="newLocationName" type="text" placeholder="--όνομα τοποθεσίας--" required>
                </div>
              </div>
              <div class="form-group col-lg-4 col-md-4 col-sm-4">
                <div class="features-icons-item mx-auto mb-0 mb-lg-3">
                  <label style="color: #f8f9fa;">blah</label>
                  <button type="submit" class="btn btn-primary btn-block">Προσθήκη νέας τοποθεσίας</button>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
      <div class="modal-footer justify-content-center">
        <button id="decline" type="button" class="btn btn-light" data-dismiss="modal">Άκυρο</button>
      </div>
    </div>
  </div>
</div>

<!-- Delete Location Modal -->
<div class="modal fade" id="deleteLocationModal" tabindex="-1" role="dialog" aria-labelledby="exampleModal" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Διαγραφή Τοποθεσίας</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="container">
            <div class="row">
                <div class="col">
                  <h5>Είστε σίγουροι;</h5>
                </div>
            </div>
        </div>
      </div>
      <div class="modal-footer justify-content-center">
        <button id="decline" type="button" class="btn btn-light" data-dismiss="modal">Άκυρο</button>
        <form id="doDelete" action="/users/<%= user._id %>/locations?_method=DELETE&deleteLocation=<%=  %>" method="post">
          <button type="submit" class="btn btn-danger" name="<%=  %>">Διαγραφή</button>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- Edit Location Modal -->
<div class="modal fade" id="editLocationModal" tabindex="-1" role="dialog" aria-labelledby="exampleModal" aria-hidden="true">
  <div class="modal-dialog" style="min-width: 100%; margin: 1.75rem auto;" role="document">
    <div class="modal-content" style="width: 80%; margin: 0 auto">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Επεξεργασία Τοποθεσίας</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="container text-left">
          <form id="doEdit" class="" action="" method="post">
            <div class="form-row">
              <div class="form-group col-lg-4 col-md-4 col-sm-4">
                <div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
                  <label for="editLocation">Τοποθεσία</label>
                  <input type="text" id="pac-input2" class="form-control" name="editLocation" placeholder="--νέα τοποθεσία--" value="" required>
                </div>
              </div>
              <div class="form-group col-lg-4 col-md-4 col-sm-4">
                <div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
                  <label for="editLocationName">Όνομα</label>
                  <input class="form-control" name="editLocationName" type="text" placeholder="--όνομα τοποθεσίας--" value="" required>
                </div>
              </div>
              <div class="form-group col-lg-4 col-md-4 col-sm-4">
                <div class="features-icons-item mx-auto mb-0 mb-lg-3">
                  <label style="color: #f8f9fa;">blah</label>
                  <button type="submit" class="btn btn-primary btn-block">Ενημέρωση</button>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>
      <div class="modal-footer justify-content-center">
        <button id="decline" type="button" class="btn btn-light" data-dismiss="modal">Άκυρο</button>
      </div>
    </div>
  </div>
</div>


<% if(currentUser && currentUser.type=="user" && !currentUser.isBlocked) { %>
<p>
  <a id="newButton" href="/posts/new" class="btn btn-success btn-lg"><i class="fas fa-2x fa-plus"></i></a>
</p>
<% } %>


<div id="map"></div>

<script>
  $(document).on("click", ".open-deleteLocationModal", function () {
       var nameToDelete = $(this).data('delete').name;
       var locationToDelete = $(this).data('delete').location;
       $("#doDelete").attr("action","/users/<%= user._id %>/locations?_method=DELETE&deleteLocation="+locationToDelete+"&deleteLocationName="+nameToDelete);
       $("#doDelete button").attr("name",locationToDelete);
  });
</script>

<script>
  $(document).on("click", ".open-editLocationModal", function () {
       var nameToEdit = $(this).data("edit").name;
       var locationToEdit = $(this).data("edit").location;
       $("#doEdit").attr("action","/users/<%= user._id %>/locations/edit?editLocation="+locationToEdit+"&editLocationName="+nameToEdit);
       $('#doEdit input[name="editLocation"]').attr("value",locationToEdit);
       $('#doEdit input[name="editLocationName"]').attr("value",nameToEdit);
  });
</script>


<script>
  function initMap() {
    var lat = <%= user.addressLat %>;
    var lng = <%= user.addressLng %>;
    var center = {lat: lat, lng: lng };
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 11,
        center: center,
        scrollwheel: true // false an DEN thelo na kanei zoom
    });
    var geocoder = new google.maps.Geocoder;

    var input = document.getElementById('pac-input1');
    var autocomplete = new google.maps.places.Autocomplete(input, {fields: ['place_id', 'name', 'types']});
    autocomplete.bindTo('bounds', map);
    autocomplete.addListener('place_changed', function() {
       var place = autocomplete.getPlace();
       $("input[name='newLocation']").val(place.name);
    });

    var input = document.getElementById('pac-input2');
    var autocomplete = new google.maps.places.Autocomplete(input, {fields: ['place_id', 'name', 'types']});
    autocomplete.bindTo('bounds', map);
    autocomplete.addListener('place_changed', function() {
       var place = autocomplete.getPlace();
       $("input[name='editLocation']").val(place.name);
    });

  }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=<%= process.env.GEOCODER_API_KEY %>&language=el&region=GR&libraries=places&callback=initMap&fbclid=IwAR2jO4fZa0RL2LeJN4J9QIBZBM3U5Ionjzah-r0WFG4qEndyw7GsFfJwJzE"></script>


<% include ../partials/footer %>

<% function findTimestamp(date) { %>
<% var seconds = Math.ceil((Date.now() - date) / 1000); %>
<% if( seconds < 60) return "τώρα"; %>
<% if( seconds < 120) return "πριν ένα λεπτό"; %>
<% if( seconds < 3600) return "πριν "+Math.floor(seconds/60)+" λεπτά"; %>
<% if( seconds < 7200) return "πριν μία ώρα"; %>
<% if( seconds < 86400) return "πριν "+Math.floor(seconds/3600)+" ώρες"; %>
<% if( seconds < 172800) return "πριν μία μέρα"; %>
<% if( seconds < 604800) return "πριν "+Math.floor(seconds/86400)+" μέρες"; %>
<% if( seconds < 1209600) return "πριν μία εβδομάδα"; %>
<% if( seconds < 2629744) return "πριν "+Math.floor(seconds/604800)+" εβδομάδες"; %>
<% if( seconds < 5259488) return "πριν ένα μήνα" %>
<% if( seconds < 31556926) return "πριν "+Math.floor(seconds/2629744)+" μήνες"; %>
<% if( seconds < 63113852) return "πριν ένα χρόνο" %>
<% return "πάνω από πριν ένα χρόνο" %>
<% } %>

<% function findColor(points) { %>
<% if( points < 200) return "progress zero"; %>
<% if( points < 400) return "progress ten"; %>
<% if( points < 600) return "progress twenty"; %>
<% if( points < 800) return "progress thirty"; %>
<% if( points < 1000) return "progress fourty"; %>
<% if( points < 1200) return "progress fifty"; %>
<% if( points < 1400) return "progress sixty"; %>
<% if( points < 1600) return "progress seventy"; %>
<% if( points < 1800) return "progress eighty"; %>
<% if( points < 2000) return "progress ninety"; %>
<% if( points >= 2000) return "progress hundred"; %>
<% } %>
