<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX File Upload with Progress</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
body {
  font-family: 'Poppins', sans-serif;
  background: #f4f6f8;
  padding: 40px;
}

.upload-container {
  width: 400px;
  margin: auto;
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  padding: 20px;
  text-align: center;
}

.file-label {
  display: inline-block;
  padding: 12px 20px;
  border: 2px dashed #007bff;
  color: #007bff;
  border-radius: 10px;
  cursor: pointer;
  transition: 0.3s;
}

.file-label:hover {
  background: #007bff;
  color: white;
}

#file-input {
  display: none;
}

.progress-bar-container {
  width: 100%;
  height: 15px;
  background: #e9ecef;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 20px;
  display: none;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #00c6ff, #0072ff);
  transition: width 0.4s ease;
}

button {
  background: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  margin-top: 20px;
  cursor: pointer;
  font-size: 16px;
  transition: 0.3s;
}

button:disabled {
  background: #a8c7ff;
  cursor: not-allowed;
}

button:hover:enabled {
  background: #0056d2;
}

#status {
  margin-top: 15px;
  font-weight: 500;
}
</style>
</head>
<body>

<div class="upload-container">
  <h3><i class="fa-solid fa-cloud-arrow-up"></i> Upload Excel File</h3>
  <label for="file-input" class="file-label"><i class="fa-solid fa-folder-open"></i> Choose File</label>
  <input type="file" id="file-input" name="file" accept=".xls,.xlsx,.csv">
  <div class="progress-bar-container">
    <div class="progress-bar" id="progress-bar"></div>
  </div>
  <button id="upload-btn" disabled><i class="fa-solid fa-upload"></i> Upload</button>
  <div id="status"></div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('#file-input').on('change', function() {
  if (this.files.length > 0) {
    $('#upload-btn').prop('disabled', false);
  } else {
    $('#upload-btn').prop('disabled', true);
  }
});

$('#upload-btn').on('click', function() {
  const file = $('#file-input')[0].files[0];
  if (!file) return alert('Please select a file.');

  const formData = new FormData();
  formData.append('file', file);

  $('.progress-bar-container').show();
  $('#progress-bar').width('0%');
  $('#status').text('Uploading...');

  $.ajax({
    xhr: function() {
      const xhr = new window.XMLHttpRequest();
      xhr.upload.addEventListener('progress', function(e) {
        if (e.lengthComputable) {
          const percent = Math.round((e.loaded / e.total) * 100);
          $('#progress-bar').width(percent + '%');
        }
      });
      return xhr;
    },
    url: 'upload.php',
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    success: function(response) {
      $('#status').text(response);
      $('#upload-btn').prop('disabled', true);
      $('#progress-bar').width('100%');
    },
    error: function() {
      $('#status').text('Error uploading file.');
    }
  });
});
</script>
</body>
</html>
