<div class="row">
  <div class="col-md-12 mt-2">
    <div class="row">
      <div class="col-md-3 offset-md-9">
        <% if(menuPermission?.create_status) { %>
          <a href="/manage-project/add" class="btn btn-sm btn-info m-1 p-2 w-100 float-right mb-2">
            <i class="fas fa-plus"></i> Projekt hinzufügen
          </a>
          <% } %>
      </div>
    </div>

    <div class="card card-info">
      <div class="card-header">
        <h3 class="card-title">
          <%= page_title %>
        </h3>
      </div>

      <div class="card-body table-responsive">
        <table class="table table-hover table-head-fixed datatable123">
          <thead>
            <tr>
              <th>#</th>
              <th>Projektname</th>
              <th>Projektbild</th>
              <th>Standort</th>
              <!-- <th>Zeitraum</th> -->
              <!-- <th>Beschreibung</th> -->
              <!-- <th>Zugewiesener Auftragnehmer</th> -->
              <th>Auftragnehmer</th>
              <th>Projektmanager</th>
              <th>Manufacturing</th>
              <!-- <th>Produkte</th> -->
              <th>Status</th>
              <th data-orderable="false">Aktionen</th>
            </tr>
          </thead>
          <tbody>
            <% if (projects.length> 0) { let index = ((page - 1) * limit) + 1; %>
              <% projects.forEach(function(data) { %>
                <tr>
                  <td>
                    <%= index++ %>
                  </td>
                  <td>
                    <%= data?.project_name || '' %>
                  </td>
                  <td>
                    <% if (data?.project_image) { %>
                      <img src="/<%= data.project_image %>" alt="Projektbild"
                        style="max-width: 100px; border-radius: 6px;" />
                      <% } else { %>
                        ---
                        <% } %>
                  </td>

                  <td>
                    <%= data?.location || '' %>
                  </td>
                  <!-- <td>
                    <%= data?.timeframe || '' %>
                  </td> -->
                  <!-- <td class="text-wrap text-break">
                    <%= data?.project_description || '' %>
                  </td> -->
                  <td>
                    <%= data?.contractor_name || '' %>
                  </td>
                  <td>

                    <% if(data?.manager_name){ %>

                      <span class="badge bg-info">

                        <%= data.manager_name %>

                      </span>

                      <% } else { %>

                        <span class="badge bg-danger">

                          Not Assigned

                        </span>

                        <% } %>

                  </td>
                  <td>

                    <% if(data?.manufacturing_name){ %>

                      <span class="badge bg-success">

                        <%= data.manufacturing_name %>

                      </span>

                      <% } else { %>

                        <span class="badge bg-danger">

                          Not Assigned

                        </span>

                        <% } %>

                  </td>
                  <!-- <td>
                    <% if (data?.product_names) { %>
                      <%= data.product_names %>
                        <% } else { %>
                          <em class="text-muted">Keine Produkte</em>
                          <% } %>
                  </td> -->
                  <td>
                    <% if (data?.status===0 || data?.status==='0' ) { %>
                      <span class="badge bg-danger">Inaktiv</span>
                      <% } %>

                        <% if (data?.status===1 || data?.status==='1' ) { %>
                          <span class="badge bg-success">Aktiv</span>
                          <% } %>

                            <% if (data?.status===2 || data?.status==='2' ) { %>
                              <span class="badge bg-info">Abgeschlossen</span>
                              <% } %>
                  </td>
                  <td>
                    <% if(menuPermission?.read_status) { %>
                      <a class="btn btn-info btn-sm" href="/manage-project/details/<%= data.id %>" data-toggle="tooltip"
                        title="Details">
                        <i class="far fa-eye"></i>
                      </a>
                      <% } %>

                        <!-- <% if(menuPermission?.update_status) { %>
                          <a class="btn btn-primary btn-sm" href="/manage-project/edit/<%= data.id %>"
                            data-toggle="tooltip" title="Bearbeiten">
                            <i class="fas fa-pencil-alt"></i>
                          </a>
                          <% } %> -->
                        <% if (menuPermission?.update_status) { %>
                          <a class="btn btn-primary btn-sm <%= (data?.status === 2 || data?.status === '2') ? 'disabled' : '' %>"
                            href="<%= (data?.status === 2 || data?.status === '2') ? 'javascript:void(0);' : '/manage-project/edit/' + data.id %>"
                            data-toggle="tooltip"
                            title="<%= (data?.status === 2 || data?.status === '2') ? 'Abgeschlossene Projekte können nicht bearbeitet werden' : 'Bearbeiten' %>">
                            <i class="fas fa-pencil-alt"></i>
                          </a>
                          <% } %>

                            <!-- <% if(menuPermission?.delete_status) { %>
                              <a class="btn btn-danger btn-sm"
                                onclick="deleteDataFunc('<%= data.id %>', 'manage-project/delete/<%= data.id %>')"
                                data-toggle="tooltip" title="Löschen">
                                <i class="fas fa-trash"></i>
                              </a>
                              <% } %> -->

                            <% if(menuPermission?.delete_status) { %>
                              <a class="btn btn-danger btn-sm <%= (data?.status === 2 || data?.status === '2') ? 'disabled' : '' %>"
                                <%=(data?.status===2 || data?.status==='2' ) ? '' :
                                `onclick="deleteDataFunc('${data.id}', 'manage-project/delete/${data.id}')" ` %>
                                data-toggle="tooltip"
                                title="<%= (data?.status===2 || data?.status==='2' )
                                  ? 'Abgeschlossene Projekte können nicht gelöscht werden' : 'Löschen' %>">
                                  <i class="fas fa-trash"></i>
                              </a>
                              <% } %>
                                <% if(user.user_role==1){ %>

                                  <button class="btn btn-warning btn-sm" onclick="openAssignManagerModal(
'<%= data.id %>',
'<%= data.manager_name || "" %>'
)" title="Assign Manager">

                                    <i class="fas fa-user-plus"></i>

                                  </button>

                                  <% } %>

                                    <% if(user.user_role==3){ %>

                                      <button class="btn btn-success btn-sm" onclick="openAssignManufacturingModal(
'<%= data.id %>',
'<%= data.manufacturing_name || "" %>'
)" title="Assign Manufacturing">

                                        <i class="fas fa-industry"></i>

                                      </button>

                                      <% } %>
                  </td>
                </tr>
                <% }); %>
                  <% } else { %>
                    <tr>
                      <td colspan="9" class="text-center text-danger">Keine Projekte gefunden.</td>
                    </tr>
                    <% } %>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="assignManagerModal" tabindex="-1">

  <div class="modal-dialog modal-dialog-centered">

    <div class="modal-content" style="border:none; box-shadow:none;">

      <form method="POST" action="/manage-project/assign-manager">

        <div class="modal-header" style="background-color: #21880C;">

          <h4 style="color: white;">Assign Project Manager</h4>

          <!-- <button type="button" class="close" data-dismiss="modal">
            <span>&times;</span>
          </button> -->

        </div>

        <div class="modal-body">

          <input type="hidden" name="project_id" id="project_id">

          <div class="form-group">

            <label>Current Manager</label>

            <input type="text" id="current_manager" class="form-control" readonly>

          </div>

          <div class="form-group">

            <label>Select Manager</label>

            <select name="assigned_manager_id" class="form-control" required>

              <option value="">Select Manager</option>

              <% managers.forEach(function(manager){ %>

                <option value="<%= manager.id %>">
                  <%= manager.name %>
                </option>

                <% }) %>

            </select>

          </div>

        </div>

        <div class="modal-footer">

          <button type="button" class="btn btn-secondary" data-dismiss="modal">
            Close
          </button>

          <button class="btn btn-success" type="submit">
            Assign
          </button>

        </div>

      </form>

    </div>

  </div>

</div>

<div class="modal fade" id="assignManufacturingModal" tabindex="-1">

  <div class="modal-dialog modal-dialog-centered">

    <div class="modal-content">

      <form method="POST" action="/manage-project/assign-manufacturing">

        <div class="modal-header bg-success">

          <h4 style="color:white">
            Assign Manufacturing
          </h4>

        </div>

        <div class="modal-body">

          <input type="hidden" name="project_id" id="manufacturing_project_id">

          <div class="form-group">

            <label>
              Current Manufacturing
            </label>

            <input type="text" id="current_manufacturing" class="form-control" readonly>

          </div>

          <div class="form-group">

            <label>
              Select Manufacturing
            </label>

            <select name="assigned_manufacturing_id" class="form-control" required>

              <option value="">
                Select Manufacturing
              </option>

              <% manufacturings.forEach(function(user){ %>

                <option value="<%= user.id %>">

                  <%= user.name %>

                </option>

                <% }) %>

            </select>

          </div>

        </div>

        <div class="modal-footer">

          <button type="button" class="btn btn-secondary" data-dismiss="modal">
            Close
          </button>

          <button class="btn btn-success" type="submit">
            Assign
          </button>

        </div>

      </form>

    </div>

  </div>

</div>

<script>
  function openAssignManagerModal(
    projectId,
    managerName
  ) {

    $("#project_id").val(
      projectId
    );

    $("#current_manager").val(
      managerName
    );

    $("#assignManagerModal").modal(
      "show"
    );

  }

  function openAssignManufacturingModal(
    projectId,
    manufacturingName
  ) {

    $("#manufacturing_project_id").val(
      projectId
    );

    $("#current_manufacturing").val(
      manufacturingName
    );

    $("#assignManufacturingModal").modal(
      "show"
    );

  }
</script>

<!-- DataTables German language and init -->
<script>
  $(document).ready(function () {
    if (!$.fn.DataTable.isDataTable('.datatable123')) {
      $(".datatable123").DataTable({
        paging: true,
        lengthChange: true,
        searching: true,
        ordering: true,
        info: true,
        autoWidth: false,
        language: {
          decimal: ",",
          thousands: ".",
          emptyTable: "Keine Daten in der Tabelle vorhanden",
          info: "Zeige _START_ bis _END_ von _TOTAL_ Einträgen",
          infoEmpty: "Keine Einträge verfügbar",
          infoFiltered: "(gefiltert von _MAX_ Einträgen)",
          lengthMenu: "_MENU_ Einträge Zeige",
          loadingRecords: "Lade...",
          processing: "Verarbeite...",
          search: "Suche:",
          zeroRecords: "Keine passenden Einträge gefunden",
          paginate: {
            first: "Erste",
            last: "Letzte",
            next: "Nächste",
            previous: "Zurück"
          },
          aria: {
            sortAscending: ": aktivieren, um Spalte aufsteigend zu sortieren",
            sortDescending: ": aktivieren, um Spalte absteigend zu sortieren"
          }
        }
      });
    }
  });
</script>