<?php
// views/partials/paystack-modal.php

require_once __DIR__ . '/../../src/Helpers/Language.php';
?>

<div id="paystackModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm p-4 animate-fade-in">
  <div class="bg-white rounded-3xl max-w-lg w-full overflow-hidden shadow-2xl relative border border-gray-100" dir="<?= Language::dir() ?>">
    
    <!-- Paystack Modal Header -->
    <div class="bg-gradient-to-r from-teal-900 via-teal-950 to-emerald-950 text-white p-6 relative">
      <button onclick="closeModal('paystackModal')" class="absolute top-4 right-4 text-teal-300 hover:text-white font-bold text-xl">
        &times;
      </button>
      <div class="flex items-center gap-2 mb-2">
        <span class="bg-emerald-500 text-teal-950 text-[10px] font-black px-2.5 py-0.5 rounded-full uppercase tracking-wider">
          Secured by Paystack
        </span>
      </div>
      <h2 class="text-lg font-extrabold" id="paystackCourseTitle"><?= Language::t('paymentModalTitle') ?></h2>
      <p class="text-xs text-teal-200 mt-1">Official Academy Admission Checkout</p>
    </div>

    <!-- Details Body -->
    <div class="p-6 space-y-5">
      <div class="bg-teal-50/60 p-4 rounded-2xl border border-teal-100 flex items-center justify-between">
        <div>
          <span class="text-xs text-gray-500 block uppercase font-bold tracking-wider">Total Tuition</span>
          <span class="text-2xl font-black text-teal-900" id="paystackAmountDisplay">₦0</span>
        </div>
        <div class="text-right">
          <span class="text-[11px] text-gray-500 block">Currency Option</span>
          <span class="text-xs font-bold text-amber-600 font-mono"><?= Language::currency() ?></span>
        </div>
      </div>

      <!-- Payment Channels List -->
      <div class="space-y-2">
        <span class="text-xs font-bold text-gray-700 block">Supported Paystack Channels</span>
        <div class="grid grid-cols-3 gap-2">
          <div class="border border-gray-200 p-2.5 rounded-xl text-center text-xs font-semibold text-gray-600 bg-gray-50">
            💳 <?= Language::t('cardPayment') ?>
          </div>
          <div class="border border-gray-200 p-2.5 rounded-xl text-center text-xs font-semibold text-gray-600 bg-gray-50">
            🏦 <?= Language::t('bankTransfer') ?>
          </div>
          <div class="border border-gray-200 p-2.5 rounded-xl text-center text-xs font-semibold text-gray-600 bg-gray-50">
            📱 <?= Language::t('ussd') ?>
          </div>
        </div>
      </div>

      <div id="paystackAlert" class="hidden p-3 rounded-xl text-xs font-bold bg-red-50 text-red-700 border border-red-200"></div>

      <!-- Actions -->
      <div class="flex items-center gap-3 pt-2">
        <button onclick="closeModal('paystackModal')" class="w-1/3 bg-gray-100 hover:bg-gray-200 text-gray-700 font-bold py-3 rounded-xl text-xs transition-all">
          <?= Language::t('cancel') ?>
        </button>
        <button id="paystackSubmitBtn" onclick="executePaystackPayment()" class="w-2/3 bg-emerald-600 hover:bg-emerald-700 text-white font-extrabold py-3 rounded-xl text-xs shadow-lg transition-all flex items-center justify-center gap-2">
          <span>🔒</span>
          <span><?= Language::t('payNow') ?></span>
        </button>
      </div>
    </div>

  </div>
</div>
