<?php
/**
 * Account Payment Methods Page
 * Converted from account-payment.html
 * User payment methods management
 */

$pageTitle = 'Cartzilla | Cont - Metode de Plată';
$pageDescription = 'Cartzilla - Magazin Online E-Commerce';

require_once __DIR__ . '/includes/header.php';

// Initialize classes
$auth = new Auth();

// Check if user is logged in
if (!$auth->isLoggedIn()) {
    header('Location: /cont/login?redirect=' . urlencode($_SERVER['REQUEST_URI']));
    exit;
}

$userId = $auth->getUserId();
$userData = $auth->getUser();

// For now, we'll show a placeholder since we don't have a payment_methods table yet
// This can be extended later to store payment methods in the database
$paymentMethods = []; // Placeholder - can be fetched from database later
?>

<!-- Page content -->
<main class="content-wrapper">
  <div class="container py-5 mt-n2 mt-sm-0">
    <div class="row pt-md-2 pt-lg-3 pb-sm-2 pb-md-3 pb-lg-4 pb-xl-5">

      <!-- Sidebar navigation -->
      <aside class="col-lg-3">
        <div class="offcanvas-lg offcanvas-start pe-lg-0 pe-xl-4" id="accountSidebar">
          <div class="offcanvas-header d-lg-block py-3 p-lg-0">
            <div class="d-flex align-items-center">
              <div class="h5 d-flex justify-content-center align-items-center flex-shrink-0 text-primary bg-primary-subtle lh-1 rounded-circle mb-0" style="width: 3rem; height: 3rem">
                <?php echo strtoupper(substr($userData['first_name'], 0, 1)); ?>
              </div>
              <div class="min-w-0 ps-3">
                <h5 class="h6 mb-1"><?php echo htmlspecialchars($userData['first_name'] . ' ' . $userData['last_name']); ?></h5>
                <div class="nav flex-nowrap text-nowrap min-w-0">
                  <a class="nav-link animate-underline text-body p-0" href="#bonusesModal" data-bs-toggle="modal">
                    <svg class="text-warning flex-shrink-0 me-2" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"><path d="M1.333 9.667H7.5V16h-5c-.64 0-1.167-.527-1.167-1.167V9.667zm13.334 0v5.167c0 .64-.527 1.167-1.167 1.167h-5V9.667h6.167zM0 5.833V7.5c0 .64.527 1.167 1.167 1.167h.167H7.5v-1-3H1.167C.527 4.667 0 5.193 0 5.833zm14.833-1.166H8.5v3 1h6.167.167C15.473 8.667 16 8.14 16 7.5V5.833c0-.64-.527-1.167-1.167-1.167z"/><path d="M8 5.363a.5.5 0 0 1-.495-.573C7.752 3.123 9.054-.03 12.219-.03c1.807.001 2.447.977 2.447 1.813 0 1.486-2.069 3.58-6.667 3.58zM12.219.971c-2.388 0-3.295 2.27-3.595 3.377 1.884-.088 3.072-.565 3.756-.971.949-.563 1.287-1.193 1.287-1.595 0-.599-.747-.811-1.447-.811z"/><path d="M8.001 5.363c-4.598 0-6.667-2.094-6.667-3.58 0-.836.641-1.812 2.448-1.812 3.165 0 4.467 3.153 4.713 4.819a.5.5 0 0 1-.495.573zM3.782.971c-.7 0-1.448.213-1.448.812 0 .851 1.489 2.403 5.042 2.566C7.076 3.241 6.169.971 3.782.971z"/></svg>
                    <span class="animate-target me-1"><?php echo number_format($userData['loyalty_points'] ?? 0); ?> puncte</span>
                    <span class="text-body fw-normal text-truncate">disponibile</span>
                  </a>
                </div>
              </div>
            </div>
            <button type="button" class="btn-close d-lg-none" data-bs-dismiss="offcanvas" data-bs-target="#accountSidebar" aria-label="Close"></button>
          </div>
          <div class="offcanvas-body d-block pt-2 pt-lg-4 pb-lg-0">
            <nav class="list-group list-group-borderless">
              <a class="list-group-item list-group-item-action d-flex align-items-center" href="/cont/comenzi">
                <i class="ci-shopping-bag fs-base opacity-75 me-2"></i>
                Comenzi
              </a>
              <a class="list-group-item list-group-item-action d-flex align-items-center" href="/cont/wishlist">
                <i class="ci-heart fs-base opacity-75 me-2"></i>
                Lista de dorințe
              </a>
              <a class="list-group-item list-group-item-action d-flex align-items-center pe-none active" href="/cont/plata">
                <i class="ci-credit-card fs-base opacity-75 me-2"></i>
                Metode de plată
              </a>
              <a class="list-group-item list-group-item-action d-flex align-items-center" href="/cont/recenzii">
                <i class="ci-star fs-base opacity-75 me-2"></i>
                Recenziile mele
              </a>
            </nav>
            <h6 class="pt-4 ps-2 ms-1">Gestionare cont</h6>
            <nav class="list-group list-group-borderless">
              <a class="list-group-item list-group-item-action d-flex align-items-center" href="/cont/info">
                <i class="ci-user fs-base opacity-75 me-2"></i>
                Informații personale
              </a>
              <a class="list-group-item list-group-item-action d-flex align-items-center" href="/cont/adrese">
                <i class="ci-map-pin fs-base opacity-75 me-2"></i>
                Adrese
              </a>
              <a class="list-group-item list-group-item-action d-flex align-items-center" href="/cont/notificari">
                <i class="ci-bell fs-base opacity-75 mt-1 me-2"></i>
                Notificări
              </a>
            </nav>
            <h6 class="pt-4 ps-2 ms-1">Servicii clienți</h6>
            <nav class="list-group list-group-borderless">
              <a class="list-group-item list-group-item-action d-flex align-items-center" href="/contact">
                <i class="ci-help-circle fs-base opacity-75 me-2"></i>
                Centru de ajutor
              </a>
            </nav>
            <nav class="list-group list-group-borderless pt-3">
              <a class="list-group-item list-group-item-action d-flex align-items-center" href="/api/auth.php?action=logout">
                <i class="ci-log-out fs-base opacity-75 me-2"></i>
                Deconectare
              </a>
            </nav>
          </div>
        </div>
      </aside>

      <!-- Payment methods content -->
      <div class="col-lg-9">
        <div class="ps-lg-3 ps-xl-0">
          <h1 class="h2 pb-2 pb-md-3">Metode de plată</h1>

          <!-- Payment methods (Grid) -->
          <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3 g-md-4 g-lg-3 g-xl-4">
            <?php if (empty($paymentMethods)): ?>
            <div class="col-12">
              <div class="alert alert-info">
                <p class="mb-0">Nu aveți metode de plată salvate. Adăugați o metodă de plată pentru a plăti mai rapid la checkout.</p>
              </div>
            </div>
            <?php else: ?>
            <?php foreach ($paymentMethods as $method): ?>
            <div class="col">
              <div class="card h-100">
                <div class="card-body pb-3">
                  <div class="d-flex align-items-start justify-content-between mb-4">
                    <img src="assets/img/payment-methods/<?php echo htmlspecialchars($method['type']); ?>.svg" class="m-n3" width="100" alt="<?php echo htmlspecialchars($method['type']); ?>">
                    <?php if ($method['is_primary']): ?>
                    <span class="badge text-bg-info rounded-pill">Principală</span>
                    <?php endif; ?>
                  </div>
                  <div class="h6 mb-1"><?php echo htmlspecialchars($method['masked_number']); ?></div>
                  <div class="text-body fs-xs">Expirare <?php echo htmlspecialchars($method['expiration']); ?></div>
                </div>
                <div class="card-footer d-flex gap-3 bg-transparent border-0 pt-0 pb-4">
                  <button type="button" class="btn btn-sm btn-outline-secondary">Editează</button>
                  <button type="button" class="btn btn-sm btn-outline-secondary">Șterge</button>
                </div>
              </div>
            </div>
            <?php endforeach; ?>
            <?php endif; ?>
            
            <div class="col">
              <div class="card border-0 h-100">
                <span class="position-absolute top-0 start-0 w-100 h-100 border border-dashed border-secondary border-opacity-25 rounded d-none-dark"></span>
                <span class="position-absolute top-0 start-0 w-100 h-100 border border-dashed border-light border-opacity-25 rounded d-none d-block-dark"></span>
                <div class="card-body position-relative z-2 nav align-items-center justify-content-center py-5">
                  <a class="nav-link animate-underline stretched-link min-w-0 fs-base px-0" href="#addPaymentModal" data-bs-toggle="modal">
                    <i class="ci-plus fs-lg ms-n2 me-2"></i>
                    <span class="animate-target text-truncate">Adaugă metodă de plată</span>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>

<!-- Add payment method modal -->
<div class="modal fade" id="addPaymentModal" data-bs-backdrop="static" tabindex="-1" aria-labelledby="addPaymentModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="addPaymentModalLabel">Adaugă metodă de plată nouă</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <ul class="nav nav-tabs mb-3" role="tablist">
          <li class="nav-item" role="presentation">
            <button type="button" class="nav-link active" id="card-tab" data-bs-toggle="tab" data-bs-target="#card-tab-pane" role="tab" aria-controls="card-tab-pane" aria-selected="true">
              <i class="ci-credit-card fs-base opacity-75 ms-n2 me-2"></i>
              Card
            </button>
          </li>
          <li class="nav-item" role="presentation">
            <button type="button" class="nav-link" id="paypal-tab" data-bs-toggle="tab" data-bs-target="#paypal-tab-pane" role="tab" aria-controls="paypal-tab-pane" aria-selected="false">
              <img src="assets/img/payment-methods/paypal-icon.svg" class="me-2" width="14" alt="PayPal">
              PayPal
            </button>
          </li>
        </ul>

        <div class="tab-content">
          <div class="tab-pane fade show active" id="card-tab-pane" role="tabpanel" aria-labelledby="card-tab">
            <form class="needs-validation" novalidate>
              <div class="mb-3">
                <label for="card-number" class="form-label">Număr card</label>
                <div class="position-relative" data-input-format='{"creditCard": true}'>
                  <input type="text" class="form-control form-icon-end" id="card-number" style="background-image: none" placeholder="XXXX XXXX XXXX XXXX" required>
                  <span class="position-absolute d-flex top-50 end-0 translate-middle-y fs-5 text-body-tertiary me-3" data-card-icon></span>
                </div>
              </div>
              <div class="mb-3">
                <label for="card-name" class="form-label">Nume pe card</label>
                <input type="text" class="form-control" id="card-name" placeholder="Nume complet" required>
              </div>
              <div class="row mb-4">
                <div class="col-7">
                  <label for="card-expiration" class="form-label">Data expirării</label>
                  <input type="text" class="form-control" id="card-expiration" data-input-format='{"date": true, "datePattern": ["m", "y"]}' placeholder="MM/AA" required>
                </div>
                <div class="col-5">
                  <label for="card-cvc" class="form-label">CVC</label>
                  <input type="text" class="form-control" id="card-cvc" data-input-format='{"numericOnly": true, "blocks": [3]}' placeholder="XXX" required>
                </div>
              </div>
              <div class="d-flex gap-3">
                <button type="reset" class="btn btn-secondary w-100" data-bs-dismiss="modal" data-bs-target="#addPaymentModal">Anulează</button>
                <button type="submit" class="btn btn-primary w-100">Adaugă card</button>
              </div>
            </form>
          </div>

          <div class="tab-pane fade" id="paypal-tab-pane" role="tabpanel" aria-labelledby="paypal-tab">
            <form class="needs-validation" novalidate>
              <div class="mb-4">
                <label for="paypal-email" class="form-label">Email asociat cu PayPal</label>
                <input type="email" class="form-control" id="paypal-email" placeholder="Adresă email" required>
                <div class="invalid-feedback">Vă rugăm să furnizați o adresă de email validă!</div>
              </div>
              <div class="d-flex gap-3">
                <button type="reset" class="btn btn-secondary w-100" data-bs-dismiss="modal" data-bs-target="#addPaymentModal">Anulează</button>
                <button type="submit" class="btn btn-primary w-100">Continuă</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<?php require_once __DIR__ . '/includes/footer.php'; ?>

