<!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;700&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;
      overflow: hidden;
    }

    .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;
      position: relative;
    backdrop-filter: blur(8px);
    }
    .login-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(135deg, #ffffffaa, #e0e7ffaa, #dbeafeaa);
    background-size: 300% 300%;
    animation: gradientFlow 10s ease infinite;
}

@keyframes gradientFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

    /* Partie gauche : image moto */
    .login-image {
      flex: 1;
      background: url('https://lh3.googleusercontent.com/p/AF1QipN4iewRbD9iIfbsvyPTD2SGUkxyi952uG30pHD9=s1360-w1360-h1020') center/cover no-repeat;
      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); }
    }

    /* Animation de chargement */
    .loading-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #007bff, #0056b3);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      animation: overlayFadeIn 0.5s ease;
    }

    .loading-overlay.active {
      display: flex;
    }

    .loading-content {
      text-align: center;
      color: white;
    }

    .loading-logo {
      font-size: 3.5em;
      font-weight: 700;
      color: #ffcc00;
      margin-bottom: 30px;
      animation: logoReveal 1.2s ease-in-out;
      letter-spacing: 3px;
    }

    .motorcycle-icon {
      font-size: 4em;
      margin-bottom: 20px;
      animation: bikeRide 1.5s ease-in-out infinite;
    }

    .loading-text {
      font-size: 1.2em;
      margin-top: 20px;
      opacity: 0;
      animation: textFadeIn 0.8s ease 0.5s forwards;
    }

    .loading-spinner {
      width: 60px;
      height: 60px;
      border: 4px solid rgba(255, 255, 255, 0.3);
      border-top: 4px solid #ffcc00;
      border-radius: 50%;
      margin: 30px auto;
      animation: spin 1s linear infinite;
    }

    @keyframes overlayFadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    @keyframes logoReveal {
      0% {
        opacity: 0;
        transform: scale(0.5) rotateY(-90deg);
      }
      50% {
        transform: scale(1.1) rotateY(0deg);
      }
      100% {
        opacity: 1;
        transform: scale(1) rotateY(0deg);
      }
    }

    @keyframes bikeRide {
      0%, 100% { transform: translateX(-20px) rotate(-2deg); }
      50% { transform: translateX(20px) rotate(2deg); }
    }

    @keyframes textFadeIn {
      to {
        opacity: 1;
      }
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    @media (max-width: 768px) {
      .login-card {
        flex-direction: column;
        width: 90%;
      }
      .login-image {
        height: 160px;
      }
      .login-form {
        padding: 25px;
      }
      .loading-logo {
        font-size: 2.5em;
      }
      .motorcycle-icon {
        font-size: 3em;
      }
    }
    /* Fond de vagues animées */
.animated-bg {
    position: fixed;
    inset: 0;
    background: linear-gradient(to top, #cce7ff, #f8f9fa); /* bleu clair + blanc */
    overflow: hidden;
    z-index: -1;
}

/* Vague SVG */
.wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">\
<path fill="%23cce7ff" fill-opacity="0.5" d="M0,160L60,165.3C120,171,240,181,360,176C480,171,600,149,720,138.7C840,128,960,128,1080,138.7C1200,149,1320,171,1380,181.3L1440,192L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>\
</svg>') repeat-x;
    animation: waveMove 12s linear infinite;
}

@keyframes waveMove {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

  </style>
</head>

<body>
<div class="animated-bg">
    <div class="wave"></div>
</div>


  <!-- Overlay de chargement -->
  <div class="loading-overlay" id="loadingOverlay">
    <div class="loading-content">
      <div class="motorcycle-icon">🏍️</div>
      <div class="loading-logo">MOTORBIKE</div>
      <div class="loading-spinner"></div>
      <div class="loading-text">Démarrage en cours...</div>
    </div>
  </div>


  <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" id="loginForm">
        <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>

  <script>
    document.getElementById('loginForm').addEventListener('submit', function(e) {
      // Afficher l'animation de chargement
      document.getElementById('loadingOverlay').classList.add('active');
      
      // Le formulaire se soumettra normalement
      // L'animation reste visible pendant le traitement côté serveur
    });

    // Si vous voulez tester l'animation en local sans backend
    // décommentez cette fonction et appelez testAnimation()
    function testAnimation() {
      document.getElementById('loadingOverlay').classList.add('active');
      setTimeout(function() {
        alert('Animation terminée ! En production, vous seriez redirigé vers le dashboard.');
        document.getElementById('loadingOverlay').classList.remove('active');
      }, 2500);
    }
  </script>
</body>
</html>