<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://www.springframework.org/security/tags" prefix="sec" %>
<html>
<head>
  <title><spring:message code="label.addCar"/></title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .container {
      margin-top: 50px;

    }

    .form-container {
      background-color: #f8f9fa;
      padding: 20px;
      border: 1px solid #ced4da;
      border-radius: 5px;
    }

    .table-container {
      background-color: #f8f9fa;
      padding: 20px;
      border: 1px solid #ced4da;
      border-radius: 5px;
    }

    .centered-table {
      margin: 0 auto;
    }
  </style>
</head>
<body>
<header data-bs-theme="dark">
  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="/">Car Dealer Shop</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav me-auto mb-2 mb-md-0">
          <sec:authorize access="isAnonymous()">
            <li class="nav-item">
              <a class="nav-link" href="/login"><spring:message code="label.login"/></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="/register"><spring:message code="label.register"/></a>
            </li>
          </sec:authorize>
          <sec:authorize access="hasAnyRole('ROLE_USER', 'ROLE_ADMIN')">
            <li class="nav-item">
              <a class="nav-link" href="/appCars"><spring:message code="label.addCar"/></a>
            </li>
          </sec:authorize>
          <li class="nav-item">
            <a class="nav-link" href="/appCarList"><spring:message code="label.carheader"/></a>
          </li>
          <sec:authorize access="hasRole('ROLE_ADMIN')">
            <li class="nav-item">
              <a class="nav-link" href="/appUsers"><spring:message code="label.addAppUser"/></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="appUserRole"><spring:message code="label.role"/></a>
            </li>
          </sec:authorize>
          <sec:authorize access="hasRole('ROLE_USER')">
            <li class="nav-item">
              <a class="nav-link" href="/exampleOne"><spring:message code="label.example"/> 1</a>
            </li>
          </sec:authorize>
          <sec:authorize access="hasRole('ROLE_STUDENT')">
            <li class="nav-item">
              <a class="nav-link" href="exampleThree"><spring:message code="label.example"/> 3</a>
            </li>
          </sec:authorize>
        </ul>
        <form class="d-flex" role="search">
          <!-- Search bar removed -->
        </form>
        <ul class="navbar-nav ms-auto">
          <li class="nav-item">
            <a class="nav-link" href="?lang=pl">pl</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="?lang=en">en</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="?lang=de">de</a>
          </li>
          <sec:authorize access="isAuthenticated()">
            <li class="nav-item">
              <a class="nav-link" href="javascript:formSubmit()">Logout</a>
            </li>
          </sec:authorize>
        </ul>
      </div>
    </div>
  </nav>
</header>


<div class="container">
  <h1><spring:message code="label.carinfo"/></h1>

  <div class="form-container">
    <form:form method="post" action="addAppCar" modelAttribute="appCar">
      <table>
        <tr>
          <td><form:hidden path="id"/></td>
        </tr>
        <tr>
          <td><form:label path="brandName"><spring:message code="label.brandName"/></form:label></td>
          <td><form:input path="brandName" /></td>
          <td><form:errors path="brandName"/></td>
        </tr>
        <tr>
          <td><form:label path="modelName"><spring:message code="label.modelName"/></form:label></td>
          <td><form:input path="modelName" /></td>
          <td><form:errors path="modelName"/></td>
        </tr>
        <tr>
          <td><form:label path="bodyType"><spring:message code="label.bodyType"/></form:label></td>
          <td><form:input path="bodyType" /></td>
          <td><form:errors path="bodyType"/></td>
        </tr>
        <tr>
          <td><form:label path="productionYear"><spring:message code="label.productionYear"/></form:label></td>
          <td><form:input path="productionYear" /></td>
          <td><form:errors path="productionYear"/></td>
        </tr>
        <tr>
          <td><form:label path="carColor"><spring:message code="label.carColor"/></form:label></td>
          <td><form:input path="carColor" /></td>
          <td><form:errors path="carColor"/></td>
        </tr>
        <tr>
          <td><form:label path="fuelType"><spring:message code="label.fuelType"/></form:label></td>
          <td><form:input path="fuelType" /></td>
          <td><form:errors path="fuelType"/></td>
        </tr>
        <tr>
          <td><form:label path="engineSize"><spring:message code="label.engineSize"/></form:label></td>
          <td><form:input path="engineSize" /></td>
          <td><form:errors path="engineSize"/></td>
        </tr>
        <tr>
          <td><form:label path="mileage"><spring:message code="label.mileage"/></form:label></td>
          <td><form:input path="mileage" /></td>
          <td><form:errors path="mileage"/></td>
        </tr>
        <tr>
          <td><form:label path="power"><spring:message code="label.power"/></form:label></td>
          <td><form:input path="power" /></td>
          <td><form:errors path="power"/></td>
        </tr>
        <tr>
          <td><form:label path="vin"><spring:message code="label.Vin"/></form:label></td>
          <td><form:input path="vin" /></td>
          <td><form:errors path="vin"/></td>
        </tr>
        <tr>
          <td><form:label path="price"><spring:message code="label.price"/></form:label></td>
          <td><form:input path="price" /></td>
          <td><form:errors path="price"/></td>
        </tr>
        <tr>
          <td><form:label path="picture"><spring:message code="label.picture"/></form:label></td>
          <td><form:input path="picture" /></td>
          <td><form:errors path="picture"/></td>
        </tr>
        <tr>
          <td colspan="2">
            <c:if test="${appCar.id==0}">
              <input type="submit" value="<spring:message code='label.addCar'/>" class="btn btn-primary"/>
            </c:if>
            <c:if test="${appCar.id!=0}">
              <input type="submit" value="<spring:message code='label.editCar'/>" class="btn btn-primary"/>
            </c:if>
          </td>
        </tr>
      </table>
    </form:form>
  </div>
  <h3><spring:message code="label.carList"/></h3>

  <div class="table-container">
    <c:if test="${!empty appCarList}">
      <table class="table centered-table">
        <tr>
          <th><spring:message code="label.brandName"/></th>
          <th><spring:message code="label.modelName"/></th>
          <th><spring:message code="label.bodyType"/></th>
          <th><spring:message code="label.productionYear"/></th>
          <th><spring:message code="label.carColor"/></th>
          <th><spring:message code="label.fuelType"/></th>
          <th><spring:message code="label.engineSize"/></th>
          <th><spring:message code="label.mileage"/></th>
          <th><spring:message code="label.power"/></th>
          <th><spring:message code="label.Vin"/></th>
          <th><spring:message code="label.price"/></th>
        </tr>
        <c:forEach items="${appCarList}" var="appCar">
          <tr>
            <td>${appCar.brandName} </td>
            <td>${appCar.modelName} </td>
            <td>${appCar.bodyType}</td>
            <td>${appCar.productionYear}</td>
            <td>${appCar.carColor} </td>
            <td>${appCar.fuelType} </td>
            <td>${appCar.engineSize}</td>
            <td>${appCar.mileage}</td>
            <td>${appCar.power}</td>
            <td>${appCar.vin}</td>
            <td>${appCar.price}</td>
            <td><a href="delete2/${appCar.id}">delete</a></td>
            <td><a href="appCars?appCarId=${appCar.id}">edit</a></td>
          </tr>
        </c:forEach>
      </table>
    </c:if>
  </div>
</div>
<script>
  function formSubmit() {
    document.getElementById("logoutForm").submit();
  }
</script>

<!-- csrf for log out-->
<form action="/logout" method="post" id="logoutForm">
  <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" />
</form>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
