<?php

require_once __DIR__ . '/db.php';
require_once __DIR__ . '/includes/functions.php';
require_once __DIR__ . '/includes/settings_helpers.php';

session_start();
if (empty($_SESSION['authenticated'])) {
    header('Location: signin.php');
    exit();
}

settings_ensure_tables($conn);
$org = settings_get_current_org($conn);
$orgId = (int) ($org['id'] ?? 0);
$orgName = $_SESSION['org_name'] ?? ($org['organisation_name'] ?? 'demo');
$displayName = $_SESSION['username'] ?? $orgName;
$userEmail = payroll_current_user_email();
$showPromo = (($_GET['promo'] ?? '') === 'tds');
$flash = settings_flash_message();
$errors = [];

$subject = '';
$message = '';
$contactNumber = '';
$criticality = 'None';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $subject = trim((string) ($_POST['subject'] ?? ''));
    $message = trim((string) ($_POST['message'] ?? ''));
    $contactNumber = trim((string) ($_POST['contact_number'] ?? ''));
    $criticality = trim((string) ($_POST['criticality'] ?? 'None'));
    $attachmentPath = null;

    if ($subject === '') {
        $errors[] = 'Subject is required.';
    }
    if ($message === '') {
        $errors[] = 'Please explain how we can help you today.';
    }
    if ($contactNumber !== '' && !preg_match('/^[0-9+\-\s]{7,20}$/', $contactNumber)) {
        $errors[] = 'Contact Number is invalid.';
    }

    if (isset($_FILES['attachment']) && !empty($_FILES['attachment']['name'])) {
        if ((int) ($_FILES['attachment']['error'] ?? UPLOAD_ERR_OK) === UPLOAD_ERR_OK) {
            $uploadDir = __DIR__ . '/uploads/support';
            if (!is_dir($uploadDir)) {
                mkdir($uploadDir, 0777, true);
            }
            $safeName = time() . '_' . preg_replace('/[^A-Za-z0-9._-]/', '_', (string) $_FILES['attachment']['name']);
            $targetPath = $uploadDir . '/' . $safeName;
            if (move_uploaded_file($_FILES['attachment']['tmp_name'], $targetPath)) {
                $attachmentPath = 'uploads/support/' . $safeName;
            } else {
                $errors[] = 'Attachment upload failed.';
            }
        } else {
            $errors[] = 'Attachment upload failed.';
        }
    }

    if (!$errors) {
        $saved = settings_add_support_request(
            $conn,
            $orgId,
            $subject,
            $message,
            $attachmentPath,
            $contactNumber,
            $criticality,
            $displayName,
            $userEmail
        );

        if ($saved) {
            settings_set_flash('success', 'Support request submitted successfully.');
            header('Location: support.php');
            exit();
        }

        $errors[] = 'Unable to submit support request right now.';
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Support | Payroll</title>
<link rel="stylesheet" href="dashboard.css">
<link rel="stylesheet" href="assets/font-inter.css">
<link rel="stylesheet" href="assets/fontawesome/css/all.min.css">
<style>
  body.support-page{background:#f4f6fb;}
  .support-page .dash-topbar{background:#f5f6fb;}
  .support-page .sidebar-footer{padding:0 10px;}
  .support-link--active{display:inline-flex;align-items:center;gap:8px;color:#7fb3ff;font-weight:700;text-decoration:none;}
  .support-link--active i{font-size:12px;}
  .support-shell{padding:28px 32px 40px;}
  .support-hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.8fr);gap:20px;align-items:stretch;margin-bottom:24px;}
  .hero-card,.hero-meta{background:#fff;border:1px solid #e5e7eb;border-radius:22px;box-shadow:0 10px 24px rgba(15,23,42,.06);}
  .hero-card{padding:28px 30px;}
  .hero-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#eaf2ff;color:#2563eb;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;}
  .hero-card h1{margin:16px 0 10px;font-size:34px;line-height:1.1;color:#0f172a;}
  .hero-card p{margin:0;color:#5b6475;font-size:15px;line-height:1.7;max-width:760px;}
  .hero-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px;}
  .hero-link{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px;border-radius:10px;border:1px solid #dbe3f0;background:#fff;color:#334155;text-decoration:none;font-weight:700;}
  .hero-link.primary{background:#2f6fed;border-color:#2f6fed;color:#fff;}
  .hero-meta{padding:22px;display:grid;gap:14px;}
  .hero-meta-card{padding:16px 18px;border:1px solid #e9edf5;border-radius:16px;background:#fbfcff;}
  .hero-meta-card span{display:block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#7b8798;margin-bottom:8px;}
  .hero-meta-card strong{display:block;font-size:16px;color:#0f172a;}
  .support-body{display:grid;grid-template-columns:minmax(0,1fr) 410px;gap:24px;}
  .support-panel{background:#fff;border:1px solid #e5e7eb;border-radius:22px;padding:28px 30px;box-shadow:0 10px 24px rgba(15,23,42,.06);}
  .panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px;}
  .panel-head h2{margin:0 0 8px;font-size:28px;color:#0f172a;}
  .panel-head p{margin:0;color:#5b6475;font-size:15px;line-height:1.7;max-width:660px;}
  .support-tabs{display:flex;gap:14px;margin-bottom:20px;}
  .support-tab{padding:10px 18px;border-radius:999px;border:1px solid #d7dee9;background:#fff;color:#1f2937;text-decoration:none;font-size:15px;}
  .support-tab.active{border-color:#3b82f6;color:#2563eb;box-shadow:inset 0 0 0 1px #3b82f6;}
  .record-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border:1px solid #f3dcc0;background:#fff7ed;border-radius:12px;margin-bottom:24px;color:#7c2d12;}
  .record-banner a{color:#3b82f6;text-decoration:none;}
  .support-form label{display:block;font-size:16px;font-weight:500;margin-bottom:10px;color:#111827;}
  .support-form input[type="text"],.support-form textarea,.support-form select{width:100%;border:1px solid #d6dbe5;border-radius:12px;padding:14px 16px;font-size:15px;outline:none;}
  .support-form input[type="text"]:focus,.support-form textarea:focus,.support-form select:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.12);}
  .support-form textarea{min-height:220px;resize:vertical;}
  .field-block{margin-bottom:26px;}
  .phone-field{display:grid;grid-template-columns:50px 1fr;align-items:stretch;max-width:420px;}
  .phone-prefix{border:1px solid #d6dbe5;border-right:none;border-radius:12px 0 0 12px;background:#f8fafc;display:flex;align-items:center;justify-content:center;color:#6b7280;}
  .phone-field input{border-radius:0 12px 12px 0 !important;}
  .submit-btn{background:#3b82f6;color:#fff;border:none;border-radius:10px;padding:13px 20px;font-size:15px;font-weight:700;cursor:pointer;}
  .support-sidecards{display:flex;flex-direction:column;gap:18px;}
  .side-card{border:1px solid #e5e7eb;border-radius:18px;padding:24px 26px;background:#fff;}
  .side-card.topline{border-top:3px solid #3b82f6;}
  .side-card h3{margin:0 0 10px;font-size:17px;line-height:1.45;}
  .side-card p{margin:0 0 18px;color:#374151;line-height:1.55;}
  .side-card a{color:#2563eb;text-decoration:none;font-size:15px;font-weight:500;}
  .alert-err,.alert-ok{margin:0 0 18px;padding:14px 16px;border-radius:12px;}
  .alert-err{background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;}
  .alert-ok{background:#ecfdf5;border:1px solid #a7f3d0;color:#047857;}
  .alert-err ul{margin:8px 0 0 20px;}
  .promo-modal{position:fixed;inset:0;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;padding:24px;z-index:40;}
  .promo-card-modal{width:min(1120px,100%);background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 30px 70px rgba(15,23,42,.28);}
  .promo-header{padding:26px 34px 18px;text-align:center;border-bottom:1px solid #e5e7eb;position:relative;}
  .promo-header h2{margin:0 0 10px;font-size:22px;}
  .promo-header p{margin:0;color:#4b5563;font-size:15px;line-height:1.6;}
  .promo-close{position:absolute;right:22px;top:20px;color:#6b7280;text-decoration:none;font-size:24px;}
  .promo-content{display:grid;grid-template-columns:410px 1fr;gap:36px;padding:0 0 0 0;}
  .promo-visual{background:linear-gradient(180deg,#f3f4ff 0%,#fbfbfe 100%);padding:38px 26px;display:flex;align-items:center;justify-content:center;}
  .promo-phone{width:200px;background:#1f2341;border-radius:26px;padding:22px 16px;box-shadow:0 20px 50px rgba(37,99,235,.16);position:relative;}
  .promo-phone .bar{height:12px;border-radius:999px;background:#5b6697;margin-bottom:18px;width:90px;}
  .promo-menu{border:2px solid #f6b62e;border-radius:18px;overflow:hidden;box-shadow:0 18px 40px rgba(15,23,42,.2);position:absolute;left:-18px;top:124px;width:236px;}
  .promo-menu-head{background:#2e3554;color:#dfe6fb;padding:16px 18px;display:flex;justify-content:space-between;align-items:center;}
  .promo-menu-list div{padding:14px 18px;background:#1f2341;color:#d7def8;font-size:16px;}
  .promo-menu-list div.active{background:#4e8df0;color:#fff;}
  .promo-copy{padding:34px 34px 20px 0;}
  .promo-copy ul{margin:0;padding-left:0;list-style:none;}
  .promo-copy li{display:grid;grid-template-columns:18px 1fr;gap:12px;margin-bottom:28px;}
  .promo-copy li::before{content:"";width:9px;height:9px;border-radius:50%;background:#cbd5e1;margin-top:9px;}
  .promo-copy strong{display:block;font-size:17px;color:#1f2937;margin-bottom:6px;}
  .promo-copy p{margin:0;color:#4b5563;line-height:1.55;font-size:15px;}
  .promo-note{margin-top:8px;padding:18px 20px;border-radius:14px;background:#fff4db;color:#7c4a03;display:flex;gap:14px;align-items:flex-start;max-width:560px;}
  .promo-actions{display:flex;justify-content:center;gap:28px;padding:20px 30px 28px;border-top:1px solid #e5e7eb;}
  .enable-btn{background:#3b82f6;color:#fff;text-decoration:none;padding:11px 18px;border-radius:10px;font-weight:700;}
  .cancel-link{color:#2563eb;text-decoration:none;padding:11px 0;}
  @media (max-width: 1180px){
    .support-shell{padding:22px 18px 32px;}
    .support-hero{grid-template-columns:1fr;}
    .support-body{grid-template-columns:1fr;}
    .promo-content{grid-template-columns:1fr;}
    .promo-copy{padding:24px 26px 0;}
  }
  @media (max-width: 720px){
    .support-shell{padding:18px 14px 28px;}
    .hero-card,.support-panel,.hero-meta,.side-card{border-radius:18px;}
    .hero-card,.support-panel{padding:22px 18px;}
    .hero-card h1,.panel-head h2{font-size:28px;}
    .panel-head{flex-direction:column;}
    .record-banner{flex-direction:column;align-items:flex-start;}
    .support-tabs{flex-wrap:wrap;}
  }
</style>
</head>
<body class="dash-page support-page">
<div class="dash-layout">
  <aside class="dash-sidebar">
    <div class="sidebar-brand">
      <img src="images/b2l_mobitech_pvt_ltd_logo.jpg" class="logo" alt="B2L Mobitech Pvt Ltd">
    </div>
    <div class="sidebar-scroll">
      <div class="sidebar-section">
        <div class="getting-started">
          <div class="gs-top">
            <i class="fa-solid fa-rocket-launch"></i>
            <span>Getting Started</span>
          </div>
          <div class="progress-bar">
            <div class="progress-fill"></div>
          </div>
        </div>
      </div>
      <nav class="sidebar-nav">
        <a class="nav-item" href="dashboard.php"><i class="fa-solid fa-gauge-high"></i><span>Dashboard</span></a>
        <a class="nav-item" href="employees.php"><i class="fa-solid fa-users"></i><span>Employees</span></a>
        <a class="nav-item" href="payruns.php"><i class="fa-solid fa-money-bill-wave"></i><span>Pay Runs</span></a>
        <a class="nav-item" href="form16.php"><i class="fa-regular fa-file-lines"></i><span>Form 16</span></a>
        <a class="nav-item" href="loans.php"><i class="fa-solid fa-hand-holding-dollar"></i><span>Loans</span></a>
        <a class="nav-item" href="giving.php"><i class="fa-solid fa-gift"></i><span>Giving</span></a>
        <a class="nav-item" href="documents.php"><i class="fa-regular fa-folder-open"></i><span>Documents</span></a>
        <a class="nav-item" href="reports.php"><i class="fa-solid fa-chart-pie"></i><span>Reports</span></a>
        <a class="nav-item" href="settings.php"><i class="fa-solid fa-gear"></i><span>Settings</span></a>
      </nav>
    </div>
    <div class="sidebar-footer">
      <a class="support-link support-link--active" href="support.php">Contact Support <i class="fa-solid fa-angle-right"></i></a>
    </div>
    <div class="support-tile">
      <div class="support-title">Track TDS Liabilities and Generate Form 24Q</div>
      <a class="support-action" href="support.php?promo=tds">View Details</a>
    </div>
  </aside>

  <main class="dash-main">
    <header class="dash-topbar">
      <div class="search-box">
        <i class="fa-solid fa-magnifying-glass search-icon"></i>
        <input type="text" placeholder="Search in Employee">
      </div>
      <div class="topbar-actions">
        <span class="trial">Need help with payroll setup? <a href="subscriptions.php" class="upgrade-link">Upgrade</a></span>
        <a class="pill ghost" href="settings.php"><span class="pill-label"><?php echo htmlspecialchars($orgName); ?></span><i class="fa-solid fa-angle-down"></i></a>
        <a class="top-icon top-link" href="employees.php"><i class="fa-solid fa-users"></i></a>
        <a class="top-icon top-link" href="settings.php"><i class="fa-solid fa-gear"></i></a>
        <span class="avatar"><?php echo strtoupper(substr((string) $orgName, 0, 1)); ?></span>
      </div>
    </header>

    <section class="support-shell">
      <div class="support-hero">
        <div class="hero-card">
          <span class="hero-eyebrow"><i class="fa-solid fa-headset"></i> Payroll Support</span>
          <h1>Contact Support</h1>
          <p>Raise a request, attach screenshots or files, and give our team the context they need to help you quickly without breaking the rest of your payroll workflow.</p>
          <div class="hero-actions">
            <a class="hero-link" href="settings.php"><i class="fa-solid fa-arrow-left"></i><span>Back to Settings</span></a>
            <a class="hero-link primary" href="support.php?promo=tds"><i class="fa-solid fa-file-invoice-dollar"></i><span>View TDS Help</span></a>
          </div>
        </div>
        <div class="hero-meta">
          <div class="hero-meta-card">
            <span>Organisation</span>
            <strong><?php echo htmlspecialchars($orgName); ?></strong>
          </div>
          <div class="hero-meta-card">
            <span>Requested By</span>
            <strong><?php echo htmlspecialchars($displayName); ?></strong>
          </div>
          <div class="hero-meta-card">
            <span>Reply Email</span>
            <strong><?php echo htmlspecialchars($userEmail); ?></strong>
          </div>
        </div>
      </div>

      <div class="support-body">
      <section class="support-panel">
        <div class="panel-head">
          <div>
            <h2>Connect with Our Team</h2>
            <p>Share the issue, business impact and any supporting file so we can respond with the right fix faster.</p>
          </div>
        </div>
        <div class="support-tabs">
          <a class="support-tab active" href="support.php">Contact Support</a>
          <a class="support-tab" href="support.php">Request a Demo</a>
          <a class="support-tab" href="support.php">Schedule a Call</a>
        </div>

        <div class="record-banner">
          <div><i class="fa-solid fa-sparkles"></i> Record a quick video to show the problem to our support team.</div>
          <a href="support.php">Start recording</a>
        </div>

        <?php if (!empty($flash['message'])): ?>
          <div class="alert-ok"><?php echo htmlspecialchars($flash['message']); ?></div>
        <?php endif; ?>
        <?php if ($errors): ?>
          <div class="alert-err">
            <div>Please fix the following:</div>
            <ul>
              <?php foreach ($errors as $error): ?>
                <li><?php echo htmlspecialchars($error); ?></li>
              <?php endforeach; ?>
            </ul>
          </div>
        <?php endif; ?>

        <form class="support-form" method="POST" enctype="multipart/form-data">
          <div class="field-block">
            <label>Subject</label>
            <input type="text" name="subject" value="<?php echo htmlspecialchars($subject); ?>">
          </div>

          <div class="field-block">
            <label>How can we help you today?</label>
            <textarea name="message"><?php echo htmlspecialchars($message); ?></textarea>
          </div>

          <div class="field-block">
            <label>Attachments</label>
            <input type="file" name="attachment">
          </div>

          <div class="field-block">
            <label>Contact Number</label>
            <div class="phone-field">
              <div class="phone-prefix"><i class="fa-solid fa-phone"></i></div>
              <input type="text" name="contact_number" value="<?php echo htmlspecialchars($contactNumber); ?>">
            </div>
          </div>

          <div class="field-block" style="max-width:420px;">
            <label>How critical is your request?</label>
            <select name="criticality">
              <?php foreach (['None', 'Low', 'Medium', 'High', 'Urgent'] as $level): ?>
                <option value="<?php echo htmlspecialchars($level); ?>" <?php echo $criticality === $level ? 'selected' : ''; ?>>
                  <?php echo htmlspecialchars($level); ?>
                </option>
              <?php endforeach; ?>
            </select>
          </div>

          <button class="submit-btn" type="submit">Submit Request</button>
        </form>
      </section>

      <aside class="support-sidecards">
        <div class="side-card topline">
          <h3>Need help with processing POI?</h3>
          <p>Refer the POI help document</p>
          <a href="poi_settings.php">View Help Document</a>
        </div>
        <div class="side-card topline">
          <h3>Do your employees need help with POI?</h3>
          <p>Download and share this POI ebook to help them submit POI on time.</p>
          <a href="poi_settings.php"><i class="fa-solid fa-download"></i> Download E-book</a>
        </div>
        <div class="side-card">
          <h3>B2L Mobitech's Training &amp; Certification Program</h3>
          <p>Learn from our experts to make the most of B2L Mobitech and apply your newly acquired skills to the organisations you manage.</p>
          <a href="support.php">Register Now <i class="fa-solid fa-arrow-up-right-from-square"></i></a>
        </div>
      </aside>
      </div>
    </section>
  </main>
</div>

<?php if ($showPromo): ?>
  <div class="promo-modal">
    <div class="promo-card-modal">
      <div class="promo-header">
        <a class="promo-close" href="support.php">&times;</a>
        <h2>Record Challans and Generate Form 24Q</h2>
        <p>Introducing TDS Liabilities and Challans to help you deal with all the processes involved<br>in generating your Form 24Q seamlessly in B2L Mobitech.</p>
      </div>
      <div class="promo-content">
        <div class="promo-visual">
          <div class="promo-phone">
            <div class="bar"></div>
            <div class="bar" style="width:130px;"></div>
            <div class="bar" style="width:150px;margin-top:318px;"></div>
            <div class="promo-menu">
              <div class="promo-menu-head">
                <span><i class="fa-solid fa-file-invoice-dollar"></i> Taxes &amp; Forms</span>
                <i class="fa-solid fa-caret-down"></i>
              </div>
              <div class="promo-menu-list">
                <div class="active">TDS Liabilities</div>
                <div>Challans</div>
                <div>Form 24Q</div>
                <div>Form 16</div>
              </div>
            </div>
          </div>
        </div>
        <div class="promo-copy">
          <ul>
            <li>
              <div>
                <strong>TDS Liabilities</strong>
                <p>View the TDS details of the amount you are liable to pay the Government for all your employees in B2L Mobitech.</p>
              </div>
            </li>
            <li>
              <div>
                <strong>Challans</strong>
                <p>Record challans and associate them with your employees' TDS liabilities automatically.</p>
              </div>
            </li>
            <li>
              <div>
                <strong>Form 24Q</strong>
                <p>Based on your TDS liabilities and challan payments, generate your Form 24Q on time every quarter.</p>
              </div>
            </li>
          </ul>
          <div class="promo-note">
            <i class="fa-solid fa-circle-info"></i>
            <div>You can track TDS challan payments and Form 24Q from April 2025 onwards</div>
          </div>
        </div>
      </div>
      <div class="promo-actions">
        <a class="enable-btn" href="tax_details.php">Enable</a>
        <a class="cancel-link" href="support.php">Cancel</a>
      </div>
    </div>
  </div>
<?php endif; ?>
</body>
</html>
