<?php 
// ডাটাবেজ কানেকশন এখানে সরাসরি যোগ করে পরীক্ষা করুন
$host = 'localhost';
$db   = 'bestseba_bdtop';
$user = 'bestseba_bdtop';
$pass = 'bestseba_bdtop';
$charset = 'utf8mb4';

$dsn = "mysql:host=$host;dbname=$db;charset=$charset";
try {
     $pdo = new PDO($dsn, $user, $pass);
} catch (\PDOException $e) {
     throw new \PDOException($e->getMessage(), (int)$e->getCode());
}

$rateFile = "api_key/smart.txt"; 
$currentRate = file_exists($rateFile) ? trim(file_get_contents($rateFile)) : "0";

include_once("header.php"); 
?>

<link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<style>
  :root {
      --primary: #6C3FAA;
      --primary-dark: #4B2A7A;
      --accent: #FF9F43;
      --bg-light: #F8F5FD;
      --card-bg: #FFFFFF;
      --text-dark: #1E1135;
      --text-muted: #6C6A7A;
      --border: #E2DEF0;
      --success: #10B981;
      --shadow-sm: 0 4px 15px rgba(108, 63, 170, 0.08);
      --shadow-md: 0 8px 25px rgba(108, 63, 170, 0.12);
      --shadow-lg: 0 12px 40px rgba(108, 63, 170, 0.2);
      --radius: 24px;
      --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  }

  * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
  }

  body {
      font-family: 'Hind Siliguri', sans-serif;
      background: linear-gradient(135deg, #F5F0FF 0%, #EDE4FB 100%);
      min-height: 100vh;
      color: var(--text-dark);
  }

  .premium-container {
      max-width: 1000px;
      margin: 0 auto;
      padding: 2rem 1.5rem;
  }

  /* Hero Header */
  .hero-header {
      background: linear-gradient(135deg, #7B4DC7 0%, #542E90 100%);
      border-radius: var(--radius);
      padding: 2rem 2rem;
      color: white;
      margin-bottom: 2rem;
      box-shadow: var(--shadow-lg);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 1rem;
      position: relative;
      overflow: hidden;
  }
  .hero-header::after {
      content: '';
      position: absolute;
      width: 180px;
      height: 180px;
      background: rgba(255,255,255,0.05);
      border-radius: 50%;
      top: -50px;
      right: -50px;
  }
  .hero-left {
      position: relative;
      z-index: 1;
  }
  .hero-title {
      font-size: 1.8rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 0.3rem;
  }
  .hero-subtitle {
      opacity: 0.8;
      font-size: 0.95rem;
  }
  .hero-actions {
      display: flex;
      gap: 12px;
      position: relative;
      z-index: 1;
  }
  .charge-badge {
      background: rgba(255,255,255,0.15);
      backdrop-filter: blur(10px);
      padding: 10px 20px;
      border-radius: 50px;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 8px;
      border: 1px solid rgba(255,255,255,0.2);
  }
  .btn-list {
      background: white;
      color: var(--primary);
      padding: 10px 20px;
      border-radius: 50px;
      font-weight: 700;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: var(--transition);
      box-shadow: var(--shadow-sm);
  }
  .btn-list:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
      color: var(--primary-dark);
  }

  /* Glass Card */
  .glass-card {
      background: var(--card-bg);
      border-radius: var(--radius);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-sm);
      padding: 2rem;
  }

  /* Mode Switch */
  .mode-switch-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;
      background: #F8F5FD;
      padding: 12px 25px;
      border-radius: 50px;
      width: fit-content;
      margin: 0 auto 2rem;
      border: 1px solid var(--border);
  }
  .mode-label {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--text-muted);
  }
  .mode-label.active {
      color: var(--primary);
      font-weight: 700;
  }
  .mode-switch {
      position: relative;
      width: 60px;
      height: 30px;
      background: linear-gradient(135deg, var(--primary), var(--primary-dark));
      border-radius: 50px;
      cursor: pointer;
      border: none;
      transition: var(--transition);
  }
  .mode-switch::after {
      content: '';
      position: absolute;
      width: 24px;
      height: 24px;
      background: white;
      border-radius: 50%;
      top: 3px;
      left: 4px;
      transition: var(--transition);
  }
  .mode-switch.off {
      background: #D1CAE0;
  }
  .mode-switch.off::after {
      left: 31px;
  }

  /* Upload Zone */
  .upload-zone {
      border: 2px dashed var(--border);
      background: #FAF8FE;
      padding: 3rem 2rem;
      border-radius: 20px;
      text-align: center;
      cursor: pointer;
      transition: var(--transition);
      margin-bottom: 1.5rem;
  }
  .upload-zone:hover {
      border-color: var(--primary);
      background: #F4EEFF;
      box-shadow: var(--shadow-sm);
  }
  .upload-icon {
      font-size: 3.5rem;
      color: var(--primary);
      margin-bottom: 1rem;
      animation: float 3s ease-in-out infinite;
  }
  @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-10px); }
  }
  .upload-title {
      font-weight: 700;
      font-size: 1.2rem;
      color: var(--text-dark);
      margin-bottom: 0.5rem;
  }
  .upload-subtitle {
      color: var(--text-muted);
      font-size: 0.95rem;
  }

  /* Image Cards */
  .img-card-wrapper {
      display: flex;
      gap: 20px;
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: 2rem;
  }
  .img-card {
      background: white;
      border-radius: 16px;
      padding: 15px;
      text-align: center;
      width: 160px;
      border: 1px solid var(--border);
      box-shadow: var(--shadow-sm);
      transition: var(--transition);
  }
  .img-card:hover {
      box-shadow: var(--shadow-md);
      border-color: var(--primary);
  }
  .img-preview {
      width: 100%;
      height: 90px;
      object-fit: contain;
      border-radius: 10px;
      margin-bottom: 8px;
  }

  /* Floating Input */
  .floating-group {
      position: relative;
      margin-bottom: 1.5rem;
  }
  .floating-input {
      width: 100%;
      padding: 16px 20px;
      font-size: 1rem;
      background: white;
      border: 1px solid var(--border);
      border-radius: 12px;
      outline: none;
      transition: var(--transition);
      font-family: 'Hind Siliguri', sans-serif;
  }
  .floating-input:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 4px rgba(108,63,170,0.1);
      background: white;
  }
  .floating-label {
      position: absolute;
      left: 20px;
      top: 16px;
      color: var(--text-muted);
      font-size: 1rem;
      pointer-events: none;
      transition: all 0.3s ease;
  }
  .floating-input:focus ~ .floating-label,
  .floating-input:not(:placeholder-shown) ~ .floating-label {
      top: -10px;
      left: 15px;
      font-size: 12px;
      color: var(--primary);
      background: white;
      padding: 0 6px;
      font-weight: 600;
  }

  /* Submit Button */
  .btn-premium {
      background: linear-gradient(135deg, #7B4DC7, #542E90);
      border: none;
      color: white;
      padding: 16px 50px;
      border-radius: 14px;
      font-size: 1.1rem;
      font-weight: 700;
      width: 100%;
      max-width: 450px;
      cursor: pointer;
      transition: var(--transition);
      box-shadow: 0 8px 20px rgba(108,63,170,0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin: 0 auto;
      font-family: 'Hind Siliguri', sans-serif;
  }
  .btn-premium:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 25px rgba(108,63,170,0.4);
      background: linear-gradient(135deg, #8A5ED4, #6337A0);
  }
  .btn-premium:disabled {
      opacity: 0.6;
      cursor: not-allowed;
  }

  @media (max-width: 768px) {
      .hero-header { padding: 1.5rem; }
      .hero-title { font-size: 1.3rem; }
      .glass-card { padding: 1.2rem; }
  }
</style>

<div class="premium-container">
  
  <!-- Hero Header -->
  <div class="hero-header">
      <div class="hero-left">
          <h1 class="hero-title">
              <i class="fa fa-id-card"></i> স্মার্ট মেকার
          </h1>
          <p class="hero-subtitle">স্মার্ট কার্ড তৈরি করার অটোমেটেড সিস্টেম</p>
      </div>
      <div class="hero-actions">
          <div class="charge-badge">
              <i class="fa fa-coins"></i> চার্জ: <?php echo $currentRate; ?> টাকা
          </div>
          <a href="smart_list.php" class="btn-list">
              <i class="fa fa-list-check"></i> ফাইল লিস্ট
          </a>
      </div>
  </div>

  <!-- Main Card -->
  <div class="glass-card">
      
      <!-- Mode Switch -->
      <div class="mode-switch-wrapper">
          <span class="mode-label" id="manualLabel">ম্যানুয়াল</span>
          <div class="mode-switch" id="apiModeSwitch"></div>
          <span class="mode-label active" id="autoLabel">অটোমেটিক (API)</span>
      </div>

      <!-- Upload Zone -->
      <div id="frmHtmlToPdfmake">
          <label class="upload-zone w-100" id="pdf_upload_label" for="pdf">
              <div id="drop_content">
                  <div class="upload-icon" id="drop_icon">
                      <i class="fa fa-cloud-arrow-up"></i>
                  </div>
                  <h4 class="upload-title" id="drop_title">পিডিএফ (PDF) ফাইল আপলোড করুন</h4>
                  <p class="upload-subtitle" id="drop_subtitle">ফাইলটি ড্র্যাগ করুন অথবা ক্লিক করুন</p>
              </div>
          </label>
          <input id="pdf" type="file" name="pdf" accept="application/pdf" hidden>
      </div>

      <!-- Form -->
      <form id="smartCardForm" class="mt-4">
          <div id="mainFormInputs">
              <!-- Image Previews -->
              <div class="text-center mb-4">
                  <div class="img-card-wrapper">
                      <div class="img-card">
                          <img class="img-preview" id="imageUrl1_url" src="https://cdn-icons-png.flaticon.com/512/3135/3135715.png">
                          <label class="fw-bold small text-muted">ছবি</label>
                          <input class="form-control form-control-sm mt-1" type="file" id="imageUrl1" name="imageUrl1" accept="image/*">
                      </div>
                      <div class="img-card">
                          <img class="img-preview" id="imageUrl2_url" src="https://cdn-icons-png.flaticon.com/512/2089/2089363.png">
                          <label class="fw-bold small text-muted">স্বাক্ষর</label>
                          <input class="form-control form-control-sm mt-1" type="file" id="imageUrl2" name="imageUrl2" accept="image/*">
                      </div>
                  </div>
              </div>
              
              <input type="hidden" name="imageUrl1_api" id="imageUrl1_api">
              <input type="hidden" name="imageUrl2_api" id="imageUrl2_api">

              <!-- Form Fields -->
              <div class="row" style="display: flex; flex-wrap: wrap; gap: 15px;">
                  <div style="flex: 1 1 250px;">
                      <div class="floating-group">
                          <input type="text" id="nid" name="nid" class="floating-input" placeholder=" " required>
                          <label class="floating-label">NID নম্বর</label>
                      </div>
                  </div>
                  <div style="flex: 1 1 250px;">
                      <div class="floating-group">
                          <input type="text" id="pin" name="pin" class="floating-input" placeholder=" ">
                          <label class="floating-label">PIN নম্বর</label>
                      </div>
                  </div>
              </div>

              <div class="row" style="display: flex; flex-wrap: wrap; gap: 15px;">
                  <div style="flex: 1 1 250px;">
                      <div class="floating-group">
                          <input type="text" id="nameBangla" name="nameBangla" class="floating-input" placeholder=" ">
                          <label class="floating-label">নাম (বাংলা)</label>
                      </div>
                  </div>
                  <div style="flex: 1 1 250px;">
                      <div class="floating-group">
                          <input type="text" id="nameEnglish" name="nameEnglish" class="floating-input" placeholder=" ">
                          <label class="floating-label">Name (English)</label>
                      </div>
                  </div>
                  <div style="flex: 1 1 250px;">
                      <div class="floating-group">
                          <input type="text" id="fatherName" name="fatherName" class="floating-input" placeholder=" ">
                          <label class="floating-label">পিতার নাম</label>
                      </div>
                  </div>
                  <div style="flex: 1 1 250px;">
                      <div class="floating-group">
                          <input type="text" id="motherName" name="motherName" class="floating-input" placeholder=" ">
                          <label class="floating-label">মাতার নাম</label>
                      </div>
                  </div>
              </div>

              <div class="row" style="display: flex; flex-wrap: wrap; gap: 15px;">
                  <div style="flex: 1 1 200px;">
                      <div class="floating-group">
                          <input type="text" id="dob" name="dob" class="floating-input" placeholder=" ">
                          <label class="floating-label">জন্ম তারিখ</label>
                      </div>
                  </div>
                  <div style="flex: 1 1 200px;">
                      <div class="floating-group">
                          <input type="text" id="birthPlace" name="birthPlace" class="floating-input" placeholder=" ">
                          <label class="floating-label">জন্মস্থান</label>
                      </div>
                  </div>
                  <div style="flex: 1 1 200px;">
                      <div class="floating-group">
                          <input type="text" id="bloodGroup" name="bloodGroup" class="floating-input" placeholder=" ">
                          <label class="floating-label">রক্তের গ্রুপ</label>
                      </div>
                  </div>
                  <div style="flex: 1 1 200px;">
                      <div class="floating-group">
                          <input type="text" id="gender" name="gender" class="floating-input" placeholder=" ">
                          <label class="floating-label">লিঙ্গ</label>
                      </div>
                  </div>
                  <div style="flex: 1 1 200px;">
                      <div class="floating-group">
                          <input type="text" id="issueDate" name="issueDate" class="floating-input" value="<?php echo date('d M Y'); ?>" placeholder=" ">
                          <label class="floating-label">ইস্যু তারিখ</label>
                      </div>
                  </div>
              </div>

              <div class="floating-group">
                  <textarea id="fulAddress" name="fulAddress" class="floating-input" rows="3" placeholder=" " style="height: auto;"></textarea>
                  <label class="floating-label">ঠিকানা (বাংলায়)</label>
              </div>

              <div class="text-center mt-4">
                  <button class="btn-premium" type="submit" id="submitBtn">
                      <i class="fa fa-print"></i> কার্ড তৈরি করুন
                  </button>
              </div>
          </div>
      </form>
  </div>
</div>

<?php include_once("footer.php"); ?>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script type="text/javascript">
  $('.nav-item').removeClass('active');
  $('.dashborad').addClass('active');

  const ui = {
      pdfInput: document.getElementById('pdf'),
      uploadLabel: document.getElementById('pdf_upload_label'),
      apiSwitch: document.getElementById('apiModeSwitch'),
      form: document.getElementById('smartCardForm'),
      formContainer: document.getElementById('mainFormInputs'),
      uploadContainer: document.getElementById('frmHtmlToPdfmake'),
      inputs: {
           img1: document.getElementById('imageUrl1'), img2: document.getElementById('imageUrl2'),
           prev1: document.getElementById('imageUrl1_url'), prev2: document.getElementById('imageUrl2_url'),
           api1: document.getElementById('imageUrl1_api'), api2: document.getElementById('imageUrl2_api'),
           nid: document.getElementById('nid')
      }
  };

  // Mode Toggle Logic
  function toggleMode() {
      if(!ui.apiSwitch.classList.contains('off')) {
          $(ui.uploadContainer).slideDown();
          $(ui.formContainer).slideUp();
          document.getElementById('autoLabel').classList.add('active');
          document.getElementById('manualLabel').classList.remove('active');
      } else {
          $(ui.uploadContainer).slideUp();
          $(ui.formContainer).slideDown();
          document.getElementById('manualLabel').classList.add('active');
          document.getElementById('autoLabel').classList.remove('active');
      }
  }
  
  ui.apiSwitch.addEventListener('click', function() {
      this.classList.toggle('off');
      toggleMode();
  });
  
  $(document).ready(toggleMode);

  // PDF Upload & API call
  function handlePdf(file) {
      Swal.fire({ 
          title: 'প্রসেসিং হচ্ছে...', 
          allowOutsideClick: false, 
          confirmButtonColor: '#6C3FAA',
          didOpen: () => Swal.showLoading() 
      });
      const fd = new FormData();
      fd.append('pdf', file);
      
      fetch('api_proxy_smart.php', { method: 'POST', body: fd })
      .then(r => r.json())
      .then(d => {
          if (d.success) {
              fillData(d.data);
              Swal.close();
              $(ui.formContainer).slideDown();
              $(ui.uploadContainer).slideUp();
              ui.apiSwitch.classList.add('off');
              toggleMode();
          } else { throw new Error(d.message); }
      })
      .catch(e => Swal.fire('ব্যর্থ', 'তথ্য পাওয়া যায়নি', 'error'));
  }

  function fillData(data) {
      document.getElementById('nid').value = data.nationalId || '';
      document.getElementById('nameBangla').value = data.nameBangla || '';
      document.getElementById('nameEnglish').value = data.nameEnglish || '';
      document.getElementById('fatherName').value = data.fatherName || '';
      document.getElementById('motherName').value = data.motherName || '';
      document.getElementById('dob').value = data.dateOfBirth || '';
      document.getElementById('fulAddress').value = data.address || '';
      if(data.userIMG) ui.inputs.prev1.src = data.userIMG;
      if(data.signIMG) ui.inputs.prev2.src = data.signIMG;
  }

  ui.pdfInput.addEventListener('change', e => { if(e.target.files[0]) handlePdf(e.target.files[0]); });

  // Image Preview
  ui.inputs.img1.addEventListener('change', function() {
      if(this.files[0]) {
          const reader = new FileReader();
          reader.onload = e => ui.inputs.prev1.src = e.target.result;
          reader.readAsDataURL(this.files[0]);
      }
  });
  
  ui.inputs.img2.addEventListener('change', function() {
      if(this.files[0]) {
          const reader = new FileReader();
          reader.onload = e => ui.inputs.prev2.src = e.target.result;
          reader.readAsDataURL(this.files[0]);
      }
  });

  // Final Submit
  ui.form.addEventListener('submit', e => {
      e.preventDefault();
      let btn = document.getElementById('submitBtn');
      btn.disabled = true;
      btn.innerHTML = '<i class="fa fa-spinner fa-spin"></i> প্রসেসিং...';
      let formData = new FormData(ui.form);

      $.ajax({
          url: 'smart_bn.php',
          type: 'POST',
          data: formData,
          contentType: false,
          processData: false,
          success: function() {
              Swal.fire({
                  title: 'সফল!', 
                  text: 'কার্ড তৈরি হয়েছে', 
                  icon: 'success',
                  confirmButtonColor: '#6C3FAA'
              }).then(() => window.location.href = 'smart_list.php');
          },
          error: function() {
              btn.disabled = false;
              btn.innerHTML = '<i class="fa fa-print me-2"></i> কার্ড তৈরি করুন';
              Swal.fire('Error', 'সার্ভার সমস্যা', 'error');
          }
      });
  });
</script>