<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Connexion | Motorbike</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Bootstrap -->
  <link rel="stylesheet" href="<?php echo base_url('assets/bower_components/bootstrap/dist/css/bootstrap.min.css') ?>">
  <link rel="stylesheet" href="<?php echo base_url('assets/bower_components/font-awesome/css/font-awesome.min.css') ?>">
  <link rel="stylesheet" href="<?php echo base_url('assets/dist/css/AdminLTE.min.css') ?>">

  <!-- Google Font -->
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">

  <style>
    body {
      font-family: 'Poppins', sans-serif;
      background: linear-gradient(135deg, #e9ecef, #dee2e6);
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .login-card {
      display: flex;
      width: 720px;
      max-width: 95%;
      background: #fff;
      border-radius: 15px;
      overflow: hidden;
      box-shadow: 0 6px 20px rgba(0,0,0,0.15);
      animation: fadeIn 0.8s ease;
    }

    /* Partie gauche : image moto */
    .login-image {
      flex: 1;
      background: url('https://lh3.googleusercontent.com/p/AF1QipN4iewRbD9iIfbsvyPTD2SGUkxyi952uG30pHD9=s1360-w1360-h1020') center/cover no-repeat;
      /* Alternative possible :
         https://images.unsplash.com/photo-1520975661595-6453be3f7070?auto=format&fit=crop&w=1000&q=80
         (casque de moto)
      */
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      text-align: center;
    }

    .login-image::after {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.55);
    }

    .login-image h1 {
      position: relative;
      z-index: 1;
      font-size: 1.8em;
      font-weight: 600;
      color: #ffcc00;
    }

    .login-image p {
      position: relative;
      z-index: 1;
      font-size: 1em;
      max-width: 250px;
      margin: 10px auto 0;
      line-height: 1.4;
      color: #eee;
    }

    /* Partie droite : formulaire */
    .login-form {
      flex: 1;
      padding: 35px 30px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .login-form h2 {
      font-weight: 600;
      margin-bottom: 25px;
      color: #007bff;
      text-align: center;
    }

    .input-group {
      margin-bottom: 15px;
    }

    .input-group .form-control {
      border-radius: 30px;
      padding: 10px 20px;
      box-shadow: none;
      border: 1px solid #ccc;
    }

    .input-group-addon {
      border-radius: 30px 0 0 30px;
      background-color: #f8f9fa;
      border: 1px solid #ccc;
      border-right: none;
      color: #007bff;
    }

    .btn-primary {
      border-radius: 30px;
      background-color: #007bff;
      border: none;
      padding: 10px 20px;
      font-weight: 600;
      transition: 0.3s;
    }

    .btn-primary:hover {
      background-color: #0056b3;
    }

    .checkbox label {
      font-weight: 400;
      color: #555;
    }

    .alert {
      border-radius: 10px;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @media (max-width: 768px) {
      .login-card {
        flex-direction: column;
        width: 90%;
      }
      .login-image {
        height: 160px;
      }
      .login-form {
        padding: 25px;
      }
    }
  </style>
</head>

<body>
  <div class="login-card">

    <!-- Image + message -->
    <div class="login-image">
      <div>
        <h1>Bienvenue chez Motorbike</h1>
        <p>Gérez vos avances et opérations avec passion pour la moto.</p>
      </div>
    </div>

    <!-- Formulaire -->
    <div class="login-form">
      <h2>Connexion</h2>

      <?php if (session()->getFlashdata('error')): ?>
        <div class="alert alert-danger">
          <?= session()->getFlashdata('error') ?>
        </div>
      <?php endif; ?>

      <form action="<?= base_url('login') ?>" method="post">
        <div class="input-group">
          <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
          <input type="email" class="form-control" name="email" placeholder="Email" required>
        </div>

        <div class="input-group">
          <span class="input-group-addon"><i class="fa fa-lock"></i></span>
          <input type="password" class="form-control" name="password" placeholder="Mot de passe" required>
        </div>

        <div class="checkbox">
          <label><input type="checkbox"> Se souvenir de moi</label>
        </div>

        <button type="submit" class="btn btn-primary btn-block">Se connecter</button>
      </form>
    </div>

  </div>

  <script src="<?php echo base_url('assets/bower_components/jquery/dist/jquery.min.js') ?>"></script>
  <script src="<?php echo base_url('assets/bower_components/bootstrap/dist/js/bootstrap.min.js') ?>"></script>
</body>
</html>
