{%load static%}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
      }

      .container-fluid {
        height: 75%;
        display: flex;
        flex-direction: row;
      }

      .col-coloring {
        background-color: lightgray;
      }

      .bottom-row {
        background-color: #333;
        color: white;
        height: 20%;
      }

      .header {
        background-color: #333;
        color: white;
        justify-content: space-evenly;
        height: 5%;
        width: 100%;
      }
      .viewlinker {
        text-decoration: none;
        color: black;
      }
      .hovering {
      }
      .hovering:hover {
        background-color: grey;
      }
    </style>
    <title>Company</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css"
    />
  </head>
  <body>
    <script>
      var currentURL = window.location.href;
      var urlSplit = currentURL.split("/");
      var indexCompany = urlSplit.indexOf("company");
      var gameid = urlSplit[indexCompany + 1];
      var url =
        "ws://" + window.location.host + "/mygame/company/" + gameid + "/";
      var socket = new WebSocket(url);

      socket.onmessage = function (event) {
        if (event.data === "nextRound") {
          document.getElementById("nextRoundForm").submit();
        } else if (event.data === "endGame") {
          document.getElementById("endGameForm").submit();
        } else {
          var timerDiv = document.getElementById("timer");
          timerDiv.innerHTML = event.data;
        }
      };

      socket.onopen = function () {
        console.log("Socket opened");
      };

      socket.onclose = function () {
        console.log("Socket closed");
      };

      socket.onerror = function (error) {
        console.log("Socket error:");
      };
    </script>
    <div
      class="header row align-items-center text-center justify-content-evenly g-0"
    >
      <div class="col-md">{{company.name}}</div>
      <div class="col-md">
        <form
          action="{% url 'companyEvent' gameid=game.id username=user.username eventnumber=0%}"
          method="get"
        >
          {% csrf_token %}
          <input
            class="btn btn-primary"
            type="submit"
            value="E-Mails"
            id="viewgamerules"
            name="action"
          />
        </form>
      </div>
      <div class="col-md">Money: {{company.money}}</div>
      <div class="col-md">
        Customer Satisfaction: {{company.customersatisfaction}}
      </div>
      <div class="col-md">
        Worker Satisfaction: {{company.workersatisfaction}}
      </div>
      <div class="col-md">Round: {{game.currentRound}}/{{game.maxRounds}}</div>
      {% if game.running == True%}
      <div class="timer col-md" id="timer">Timer:</div>
      {% else %}
      <div class="col-md">Game didn't start yet</div>
      {%endif%}
    </div>
    <form
      id="nextRoundForm"
      action="{% url 'companyEvent' gameid=game.id username=user.username eventnumber=0%}"
      method="get"
      style="display: none"
    >
      {% csrf_token %}
    </form>
    <form
      id="endGameForm"
      action="{% url 'standings' gameid=game.id username=user.username%}"
      method="get"
      style="display: none"
    >
      {% csrf_token %}
    </form>

    <!-- Zeile für den oberen Inhalt -->
    <div class="container-fluid g-0">
      <div class="col-md-4 col-coloring overflow-y-auto">
        <div class="row justify-content-evenly g-0">
          <div class="col-md-6 p-3">
            <!-- Inhalt links Zeile 1 -->
            <h1
              class="text-center font-weight-bold border-bottom border-2 border-primary p-3 shadow rounded"
            >
              Workers
            </h1>
            {%for worker in company.workers.all%}
            <a
              class="viewlinker"
              href="{% url 'companyWorker' gameid=game.id username=user.username workerid=worker.id %}"
            >
              <div
                class="card border-primary mb-3 shadow-lg"
                style="max-width: 540px"
              >
                <div class="row g-0">
                  <div class="col-md-4 align-self-center">
                    <img
                      src="{% static 'mygame/images/worker01.png' %}"
                      class="img-thumbnail"
                      alt="worker"
                    />
                  </div>
                  <div class="col-md-8">
                    <div class="card-body">
                      <h5 class="card-title justify-content-evenly">
                        {{worker.name}} {%if worker.sick == True%}
                        <p class="text-danger">[sick]</p>
                        {%elif worker.status == 2%}
                        <p class="text-success">[working]</p>
                        {%elif worker.status == 3%}
                        <p class="text-warning">[training]</p>
                        {%endif%}
                      </h5>
                      <div
                        class="progress mb-2"
                        role="progressbar"
                        aria-label="worker-happyness"
                        aria-valuenow="0"
                        aria-valuemin="0"
                        aria-valuemax="100"
                      >
                        {%if worker.happyness > 55 %}
                        <div
                          class="progress-bar overflow-visible text-dark bg-success"
                          style="width: {{worker.happyness}}%"
                        >
                          happyness
                        </div>
                        {% else%}
                        <div
                          class="progress-bar overflow-visible text-dark bg-danger"
                          style="width: {{worker.happyness}}%"
                        >
                          happyness
                        </div>
                        {%endif%}
                      </div>
                      <div class="row">
                        <div class="col-md-6">
                          <div
                            class="progress"
                            role="progressbar"
                            aria-label="worker-experience"
                            aria-valuenow="0"
                            aria-valuemin="0"
                            aria-valuemax="100"
                          >
                            <div
                              class="progress-bar overflow-visible text-dark"
                              style="width: {{worker.attributes.experience}}%"
                            >
                              experience
                            </div>
                          </div>
                          <div
                            class="progress"
                            role="progressbar"
                            aria-label="worker-reliability"
                            aria-valuenow="0"
                            aria-valuemin="0"
                            aria-valuemax="100"
                          >
                            <div
                              class="progress-bar overflow-visible text-dark"
                              style="width: {{worker.attributes.reliability}}%"
                            >
                              reliability
                            </div>
                          </div>
                          <div
                            class="progress"
                            role="progressbar"
                            aria-label="worker-python"
                            aria-valuenow="0"
                            aria-valuemin="0"
                            aria-valuemax="100"
                          >
                            <div
                              class="progress-bar overflow-visible text-dark"
                              style="width: {{worker.attributes.python}}%"
                            >
                              python
                            </div>
                          </div>
                        </div>

                        <div class="col-md-6">
                          <div
                            class="progress"
                            role="progressbar"
                            aria-label="worker-javascript"
                            aria-valuenow="0"
                            aria-valuemin="0"
                            aria-valuemax="100"
                          >
                            <div
                              class="progress-bar overflow-visible text-dark"
                              style="width: {{worker.attributes.javascript}}%"
                            >
                              javascript
                            </div>
                          </div>
                          <div
                            class="progress"
                            role="progressbar"
                            aria-label="worker-cpp"
                            aria-valuenow="0"
                            aria-valuemin="0"
                            aria-valuemax="100"
                          >
                            <div
                              class="progress-bar overflow-visible text-dark"
                              style="width: {{worker.attributes.cpp}}%"
                            >
                              cpp
                            </div>
                          </div>
                          <div
                            class="progress"
                            role="progressbar"
                            aria-label="worker-management"
                            aria-valuenow="0"
                            aria-valuemin="0"
                            aria-valuemax="100"
                          >
                            <div
                              class="progress-bar overflow-visible text-dark"
                              style="width: {{worker.attributes.management}}%"
                            >
                              management
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a>
            {%endfor%}
          </div>
          <div class="col-md-6 p-3">
            <!-- Inhalt links Zeile 2 -->
            <h1
              class="text-center font-weight-bold border-bottom border-2 border-primary p-3 shadow rounded"
            >
              Orders
            </h1>
            {%for order in company.orders.all%}
            <a
              class="viewlinker"
              href="{% url 'companyOrder' gameid=game.id username=user.username orderid=order.id %}"
            >
              <!-- Quelle Bild https://pixabay.com/de/vectors/ausr%C3%BCstung-symbol-service-aufbau-1674891/-->

              <div
                class="card border-primary mb-3 shadow-lg"
                style="
                  max-width: 540px;
                  background-image: url('{%static 'mygame/images/order.png'%}');
                  background-size: cover;
                  background-position: center;
                  background-repeat: no-repeat;
                "
              >
                <div class="row g-0">
                  <div class="col-md-12">
                    <div class="card-body">
                      <h5
                        class="card-title border-bottom font-weight-bold fs-4"
                      >
                        {{order.name}}
                      </h5>
                      <div class="card-text fs-5">
                        <p>Model: {{order.engineeringModel}}</p>
                        <p>Profit: {{order.profit}}</p>
                        <p>Rounds left: {{order.maxRounds}}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a>

            {%endfor%}
          </div>
        </div>
      </div>
      <div class="col-md-4 overflow-y-auto g-0">
        <!-- Inhalt mittlerer Block -->
        <div>{% block content %}{% endblock %}</div>
      </div>
      <div class="col-md-4 col-coloring overflow-y-auto">
        <div class="row g-0">
          <div class="col-md-6 p-3">
            <!-- Inhalt rechts Zeile 1 -->
            <h1
              class="text-center font-weight-bold border-bottom border-2 border-primary p-3 shadow rounded fs-2"
            >
              Workermarket
            </h1>
            {%for worker in company.workermarket.all%}
            <a
              class="viewlinker"
              href="{% url 'companyWorker' gameid=game.id username=user.username workerid=worker.id %}"
            >
              <div
                class="card border-primary mb-3 shadow-lg"
                style="max-width: 540px"
              >
                <div class="row g-0">
                  <div class="col-md-4 align-self-center">
                    <img
                      src="{% static 'mygame/images/worker01.png' %}"
                      class="img-thumbnail"
                      alt="worker"
                    />
                  </div>
                  <div class="col-md-8">
                    <div class="card-body">
                      <h5 class="card-title">{{worker.name}}</h5>
                      <div class="row"><p>{{worker.skilledModels}}</p></div>
                      <div class="row">
                        <div class="col-md-6">
                          <div
                            class="progress"
                            role="progressbar"
                            aria-label="worker-experience"
                            aria-valuenow="0"
                            aria-valuemin="0"
                            aria-valuemax="100"
                          >
                            <div
                              class="progress-bar overflow-visible text-dark"
                              style="width: {{worker.attributes.experience}}%"
                            >
                              experience
                            </div>
                          </div>
                          <div
                            class="progress"
                            role="progressbar"
                            aria-label="worker-reliability"
                            aria-valuenow="0"
                            aria-valuemin="0"
                            aria-valuemax="100"
                          >
                            <div
                              class="progress-bar overflow-visible text-dark"
                              style="width: {{worker.attributes.reliability}}%"
                            >
                              reliability
                            </div>
                          </div>
                          <div
                            class="progress"
                            role="progressbar"
                            aria-label="worker-python"
                            aria-valuenow="0"
                            aria-valuemin="0"
                            aria-valuemax="100"
                          >
                            <div
                              class="progress-bar overflow-visible text-dark"
                              style="width: {{worker.attributes.python}}%"
                            >
                              python
                            </div>
                          </div>
                        </div>

                        <div class="col-md-6">
                          <div
                            class="progress"
                            role="progressbar"
                            aria-label="worker-javascript"
                            aria-valuenow="0"
                            aria-valuemin="0"
                            aria-valuemax="100"
                          >
                            <div
                              class="progress-bar overflow-visible text-dark"
                              style="width: {{worker.attributes.javascript}}%"
                            >
                              javascript
                            </div>
                          </div>
                          <div
                            class="progress"
                            role="progressbar"
                            aria-label="worker-cpp"
                            aria-valuenow="0"
                            aria-valuemin="0"
                            aria-valuemax="100"
                          >
                            <div
                              class="progress-bar overflow-visible text-dark"
                              style="width: {{worker.attributes.cpp}}%"
                            >
                              cpp
                            </div>
                          </div>
                          <div
                            class="progress"
                            role="progressbar"
                            aria-label="worker-management"
                            aria-valuenow="0"
                            aria-valuemin="0"
                            aria-valuemax="100"
                          >
                            <div
                              class="progress-bar overflow-visible text-dark"
                              style="width: {{worker.attributes.management}}%"
                            >
                              management
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a>
            {%endfor%}
          </div>
          <div class="col-md-6 p-3">
            <!-- Inhalt rechts Zeile 2 -->
            <h1
              class="text-center font-weight-bold border-bottom border-2 border-primary p-3 shadow rounded fs-2"
            >
              Ordermarket
            </h1>
            {%for order in game.ordermarket.all%}
            <a
              class="viewlinker"
              href="{% url 'companyOrder' gameid=game.id username=user.username orderid=order.id %}"
            >
              <!-- Quelle Bild https://pixabay.com/de/vectors/ausr%C3%BCstung-symbol-service-aufbau-1674891/-->
              <div
                class="card border-primary mb-3 shadow-lg"
                style="
                  max-width: 540px;
                  background-image: url('{%static 'mygame/images/order.png'%}');
                  background-size: cover;
                  background-position: center;
                  background-repeat: no-repeat;
                "
              >
                <div class="row g-0">
                  <div class="col-md-12">
                    <div class="card-body">
                      <h5
                        class="card-title border-bottom font-weight-bold fs-4"
                      >
                        {{order.name}}
                      </h5>
                      <div class="card-text fs-5">
                        <p>estimated profit: {{order.profit}}</p>
                        <p>max. rounds: {{order.maxRounds}}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </a>

            {%endfor%}
          </div>
        </div>
      </div>
    </div>

    <!-- Zeile für den unteren Inhalt -->
    <div class="bottom-row text-center">
      <h1>Actions</h1>
      <div class="row g-0">
        {%for action in company.actions.all%}
        <div class="col-md-3">
          <a
            class="viewlinker"
            href="{% url 'companyAction' gameid=game.id username=user.username actionid=action.id%}"
          >
            <div class="text-light border border-white p-1 m-1 rounded">
              {{action.name}}
            </div>
          </a>
        </div>

        {%endfor%}
      </div>
    </div>

    <!-- Bootstrap einbinden -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.min.js"></script>
  </body>
</html>
