<?php
// Merchant/create.php — minimalist editorial redesign
if (session_status() === PHP_SESSION_NONE) session_start();
include_once($_SERVER["DOCUMENT_ROOT"].'/includes/db.php');

// ── h() helper: htmlspecialchars uchun qisqartma ──
if (!function_exists('h')) {
    function h($s) { return htmlspecialchars((string)$s, ENT_QUOTES, 'UTF-8'); }
}

if (!isset($_SESSION['user_id'])) {
    header('Location: https://' . $_SERVER['HTTP_HOST'] . '/login'); exit;
}

$user_id = (int)$_SESSION['user_id'];

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $merchant_type = isset($_POST['merchant_type']) ? (int)$_POST['merchant_type'] : 0;
    if (!in_array($merchant_type,[1,2,3])) {
        $_SESSION['message']="Iltimos, kassa turini tanlang!"; $_SESSION['message_type']='error';
        header("Location: https://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']); exit;
    }
    // Kassa rejimi: 'inpay' (foiz bilan, klassik) yoki 'byok' (o'z Click/Payme kalitlaringiz).
    // Donat (type=3) doim 'inpay' rejimida — donat uchun BYOK ma'no bermaydi.
    $kassa_mode = ($merchant_type === 3) ? 'inpay' : ($_POST['kassa_mode'] ?? '');
    if (!in_array($kassa_mode, ['inpay','byok'], true)) {
        $_SESSION['message']="Iltimos, kassa rejimini tanlang!"; $_SESSION['message_type']='error';
        header("Location: https://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']); exit;
    }
    $userPlan       = inpay_user_plan($user_id);
    $maxMerchants   = inpay_user_merchant_limit($user_id);     // null = cheksiz
    $totalMerchants = inpay_user_active_merchant_count($user_id);
    if (!is_null($maxMerchants) && $totalMerchants >= $maxMerchants) {
        $_SESSION['message']=strtoupper($userPlan)." tarifda faqat {$maxMerchants} ta kassa yaratish mumkin! Tarifni yuqoriga ko'taring.";
        $_SESSION['message_type']='error'; header("Location: https://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']); exit;
    }
    $name=trim($_POST['business_name']); $desc=trim($_POST['description']);
    $website=trim($_POST['website']); $monthly=(int)($_POST['monthly_turnover']??0);
    $terms=isset($_POST['accepted_terms'])?1:0;
    if ($merchant_type==1 && empty($website)) {
        $_SESSION['message']="Website uchun havola majburiy!"; $_SESSION['message_type']='error';
        header("Location: https://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']); exit;
    }
    $promo_code=trim($_POST['promo_code']??''); $referred_by_user_id=null;
    if ($promo_code!=='') {
        $ps=$conn->prepare("SELECT id FROM users WHERE promo_code=? LIMIT 1");
        $ps->bind_param("s",$promo_code); $ps->execute(); $pr=$ps->get_result();
        if ($pr->num_rows>0) {
            $puid=(int)$pr->fetch_assoc()['id'];
            if ($puid===$user_id) { $_SESSION['message']="O'zingizning promo kodingizni ishlatib bo'lmaydi!"; $_SESSION['message_type']='error'; $ps->close(); header("Location: https://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']); exit; }
            $referred_by_user_id=$puid;
        } else { $_SESSION['message']="Promo kod topilmadi!"; $_SESSION['message_type']='error'; $ps->close(); header("Location: https://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']); exit; }
        $ps->close();
    }
    if (!isset($_FILES['logo'])||$_FILES['logo']['error']!==UPLOAD_ERR_OK) { $_SESSION['message']="Logo yuklashda xatolik."; $_SESSION['message_type']='error'; header("Location: https://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']); exit; }
    $mime=mime_content_type($_FILES['logo']['tmp_name']);
    if (!in_array($mime,['image/jpeg','image/png'])) { $_SESSION['message']="Faqat JPG yoki PNG qabul qilinadi."; $_SESSION['message_type']='error'; header("Location: https://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']); exit; }
    $ch=curl_init("https://cdn.inpay.uz/api/upload_logo/");
    $cf=new CURLFile($_FILES['logo']['tmp_name'],$mime,$_FILES['logo']['name']);
    curl_setopt_array($ch,[CURLOPT_POST=>1,CURLOPT_POSTFIELDS=>['file'=>$cf],CURLOPT_RETURNTRANSFER=>true,CURLOPT_HTTPHEADER=>["X-API-KEY: SUPER_SECRET_KEY_123"]]);
    $response=curl_exec($ch);
    if (curl_errno($ch)) { $_SESSION['message']="CDN bilan aloqa yo'q: ".curl_error($ch); $_SESSION['message_type']='error'; header("Location: https://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']); exit; }
    curl_close($ch);
    $result=json_decode($response,true);
    if (!$result||($result['status']??'')!=='success') { $_SESSION['message']="CDN xatolik: ".($result['message']??'nomalum'); $_SESSION['message_type']='error'; header("Location: https://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']); exit; }
    $logo_url=$result['path']??''; $site_ip=$_SERVER['SERVER_ADDR']??'0.0.0.0';

    if ($merchant_type === 3) {
        // Donat → darhol tasdiqlash + merchant_id (5→10 raqam) + merchant_token (32-belgi hex)
        $merchant_id_val = null;
        for ($digits = 5; $digits <= 10; $digits++) {
            $min = ($digits === 1) ? 0 : (int)pow(10, $digits - 1);
            $max = (int)pow(10, $digits) - 1;
            for ($try = 0; $try < 50; $try++) {
                $num  = random_int($min, $max);
                $cand = (string)$num;
                if (strlen($cand) < $digits) { $cand = str_pad($cand, $digits, '0', STR_PAD_LEFT); }
                $chk = $conn->prepare("SELECT 1 FROM merchant_requests WHERE merchant_id=? LIMIT 1");
                $chk->bind_param("s", $cand); $chk->execute();
                $taken = $chk->get_result()->num_rows > 0; $chk->close();
                if (!$taken) { $merchant_id_val = $cand; break 2; }
            }
        }
        if (!$merchant_id_val) { $merchant_id_val = (string)random_int(1000000000, 9999999999); }

        $merchant_token_val = null;
        for ($i = 0; $i < 8; $i++) {
            $cand = bin2hex(random_bytes(16)); // 32 hex chars
            $chk = $conn->prepare("SELECT 1 FROM merchant_requests WHERE merchant_token=? LIMIT 1");
            $chk->bind_param("s", $cand); $chk->execute();
            $taken = $chk->get_result()->num_rows > 0; $chk->close();
            if (!$taken) { $merchant_token_val = $cand; break; }
        }
        if (!$merchant_token_val) { $merchant_token_val = bin2hex(random_bytes(16)); }

        $stmt = $conn->prepare("INSERT INTO merchant_requests
            (user_id,business_name,description,website,logo_path,accepted_terms,site_ip,merchant_type,status,active_merchant,is_active,merchant_id,merchant_token,referred_by_user_id,kassa_mode)
            VALUES (?,?,?,?,?,?,?,?,'approved','on',1,?,?,?,?)");
        $stmt->bind_param(
            "issssisissis",
            $user_id,$name,$desc,$website,$logo_url,$terms,$site_ip,$merchant_type,
            $merchant_id_val,$merchant_token_val,$referred_by_user_id,$kassa_mode
        );

        if ($stmt->execute()) {
            $new_id = $stmt->insert_id;
            $_SESSION['message'] = "Donat kassangiz tayyor va darhol faollashtirildi. ID: {$merchant_id_val} · Token: {$merchant_token_val}".($referred_by_user_id?" · Promo kod qo'llandi.":"");
            $_SESSION['message_type'] = 'success';

            $ntitle = "Donat kassa faollashtirildi";
            $nmsg   = "✅ Sizning donat kassangiz tasdiqlandi va darhol ishga tushdi. Merchant ID: {$merchant_id_val}, Token: {$merchant_token_val}";
            $ns = $conn->prepare("INSERT INTO notifications (user_id,title,message) VALUES (?,?,?)");
            $ns->bind_param("iss",$user_id,$ntitle,$nmsg); $ns->execute(); $ns->close();
        } else {
            $_SESSION['message'] = "Xatolik: ".$stmt->error;
            $_SESSION['message_type'] = 'error';
        }
        $stmt->close();
    } else {
        $stmt=$conn->prepare("INSERT INTO merchant_requests (user_id,business_name,description,website,logo_path,accepted_terms,site_ip,merchant_type,referred_by_user_id,kassa_mode) VALUES (?,?,?,?,?,?,?,?,?,?)");
        $stmt->bind_param("issssisiis",$user_id,$name,$desc,$website,$logo_url,$terms,$site_ip,$merchant_type,$referred_by_user_id,$kassa_mode);
        if ($stmt->execute()) {
            $mode_note = ($kassa_mode === 'byok')
                ? " BYOK rejimi tanlangan — tasdiqlangach Click/Payme kalitlaringizni sozlaysiz."
                : "";
            $_SESSION['message']="So'rov yuborildi! Admin tekshiruvdan o'tkazadi.".($referred_by_user_id?" Promo kod qo'llandi!":"").$mode_note;
            $_SESSION['message_type']='success';
        }
        else { $_SESSION['message']="Xatolik: ".$stmt->error; $_SESSION['message_type']='error'; }
        $stmt->close();
    }
    header('Location: https://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']); exit;
}

$userPlan       = inpay_user_plan($user_id);
$maxMerchants   = inpay_user_merchant_limit($user_id);     // null = cheksiz
$totalMerchants = inpay_user_active_merchant_count($user_id);
$canCreateMore  = is_null($maxMerchants) ? true : ($totalMerchants < $maxMerchants);

// ── BYOK & inPAY actual pricing fetch (cheapest active plans) ──
$byok_cheapest = null; $byok_plans_count = 0;
try {
    $r = $conn->query("
        SELECT slug, name, byok_tx_quota, byok_price_month, duration_months
          FROM pricing_plans
         WHERE mode='byok' AND is_active=1 AND byok_price_month > 0
         ORDER BY byok_price_month ASC LIMIT 1
    ");
    if ($r) $byok_cheapest = $r->fetch_assoc();
    $r2 = $conn->query("SELECT COUNT(*) FROM pricing_plans WHERE mode='byok' AND is_active=1");
    if ($r2) $byok_plans_count = (int)$r2->fetch_row()[0];
} catch (Throwable $e) { /* table may not exist on fresh installs */ }

// inPAY (classic) commission rate — from currency_settings UZS
$inpay_commission = 5.0;
try {
    $r = $conn->query("SELECT commission_rate FROM currency_settings WHERE code='UZS' LIMIT 1");
    if ($r && ($row = $r->fetch_assoc())) $inpay_commission = (float)$row['commission_rate'];
} catch (Throwable $e) { /* ignore */ }

include_once($_SERVER["DOCUMENT_ROOT"].'/business/includes/head.php');
?>
<style>
/* MERCHANT CREATE — editorial minimalist */
.mc-page { background: var(--bg); min-height: 100vh; }
.mc-wrap { max-width: 760px; margin: 0 auto; padding: 48px 24px 96px; }

.mc-back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .82rem; color: var(--text-muted); text-decoration: none;
  margin-bottom: 24px; transition: color .15s;
}
.mc-back-link:hover { color: var(--text); }

.mc-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; padding-bottom: 24px;
  border-bottom: 1px solid var(--line); margin-bottom: 36px;
  animation: mcUp .35s ease;
}
.mc-head-text h1 {
  font-family: var(--font-display); font-size: 2rem; font-weight: 700;
  letter-spacing: -.035em; color: var(--text); line-height: 1.1;
}
.mc-head-text p {
  font-size: .92rem; color: var(--text-muted); margin-top: 8px;
  max-width: 420px; line-height: 1.55;
}
.mc-plan {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-radius: 100px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: .78rem; color: var(--text-muted); white-space: nowrap;
}
.mc-plan-name {
  font-family: var(--font-display); font-weight: 700; color: var(--accent);
  letter-spacing: .02em; text-transform: uppercase; font-size: .72rem;
}
.mc-plan-divider { width: 1px; height: 12px; background: var(--line-2); }
.mc-plan-count { font-weight: 600; color: var(--text); }

.mc-alert {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 18px; border-radius: var(--radius-lg);
  margin-bottom: 28px; font-size: .88rem; line-height: 1.5;
  animation: mcUp .3s ease;
}
.mc-alert i { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.mc-alert.success {
  background: var(--success-bg); border: 1px solid var(--accent-line);
  color: var(--success);
}
.mc-alert.error {
  background: var(--danger-bg); border: 1px solid var(--danger);
  color: var(--danger);
}

/* Limit reached */
.mc-limit {
  text-align: center; padding: 64px 32px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-xl);
}
.mc-limit-icon {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--surface-2); display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 22px; color: var(--text-soft); margin-bottom: 18px;
}
.mc-limit h3 {
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 700;
  color: var(--text); margin-bottom: 10px; letter-spacing: -.02em;
}
.mc-limit p {
  font-size: .9rem; color: var(--text-muted); line-height: 1.6;
  margin-bottom: 24px; max-width: 380px; margin-left: auto; margin-right: auto;
}
.mc-upgrade-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--text); color: var(--bg);
  padding: 12px 22px; border-radius: 100px;
  font-size: .86rem; font-weight: 600; text-decoration: none;
  transition: opacity .15s;
}
.mc-upgrade-btn:hover { opacity: .85; color: var(--bg); }

/* Section label */
.mc-section-label {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px; animation: mcUp .35s ease;
}
.mc-section-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--text); color: var(--bg);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .72rem; font-weight: 700; font-family: var(--font-display);
}
.mc-section-num.muted { background: var(--surface-2); color: var(--text-soft); border: 1px solid var(--line); }
.mc-section-text {
  font-size: .82rem; font-weight: 600; color: var(--text);
  letter-spacing: -.005em;
}
.mc-section-hint {
  font-size: .78rem; color: var(--text-soft); margin-left: 4px;
}

/* Type selector */
.mc-types {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-bottom: 36px;
}
.mc-type {
  position: relative;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 22px 18px;
  cursor: pointer; transition: all .18s ease;
  text-align: left; display: flex; flex-direction: column; gap: 8px;
}
.mc-type:hover {
  border-color: var(--line-2); transform: translateY(-1px);
  box-shadow: var(--shadow-1);
}
.mc-type.active {
  border-color: var(--accent); background: var(--accent-bg);
}
.mc-type input { display: none; }
.mc-type-icon {
  width: 38px; height: 38px; border-radius: var(--radius);
  background: var(--surface-2); display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 18px; color: var(--text); transition: all .18s;
}
.mc-type.active .mc-type-icon {
  background: var(--accent); color: #fff;
}
.mc-type-name {
  font-family: var(--font-display); font-size: .94rem; font-weight: 700;
  color: var(--text); letter-spacing: -.015em;
}
.mc-type-desc {
  font-size: .78rem; color: var(--text-muted); line-height: 1.5;
}
.mc-type-check {
  position: absolute; top: 14px; right: 14px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: none; align-items: center; justify-content: center;
  font-size: 11px;
}
.mc-type.active .mc-type-check { display: inline-flex; }

/* Form */
.mc-form {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-xl); padding: 32px;
  display: none; animation: mcUp .35s ease;
}
.mc-form.show { display: block; }
.mc-form-section + .mc-form-section { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); }
.mc-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.mc-field { display: flex; flex-direction: column; gap: 6px; }
.mc-field.full { grid-column: 1 / -1; }
.mc-field.hidden { display: none; }

.mc-flbl {
  display: flex; align-items: center; gap: 6px;
  font-size: .78rem; font-weight: 600; color: var(--text);
}
.mc-flbl-req { color: var(--danger); font-weight: 700; }

.mc-input, .mc-textarea {
  width: 100%; background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 11px 14px; font-size: .9rem; color: var(--text);
  font-family: var(--font-body); outline: none;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.mc-input:focus, .mc-textarea:focus {
  border-color: var(--accent); background: var(--surface);
  box-shadow: 0 0 0 3px var(--accent-bg);
}
.mc-input::placeholder, .mc-textarea::placeholder { color: var(--text-soft); }
.mc-textarea { min-height: 92px; resize: vertical; line-height: 1.55; }

.mc-fhint {
  font-size: .74rem; color: var(--text-soft);
  display: flex; align-items: center; gap: 5px;
}
.mc-fcount { margin-left: auto; font-variant-numeric: tabular-nums; }

/* Logo drop */
.mc-drop {
  display: flex; align-items: center; gap: 16px;
  padding: 16px; border: 1px dashed var(--line-2);
  border-radius: var(--radius); background: var(--bg);
  cursor: pointer; transition: all .18s;
}
.mc-drop:hover { border-color: var(--accent); background: var(--accent-bg); }
.mc-drop.over { border-color: var(--accent); background: var(--accent-bg); }
.mc-drop.has-file { border-style: solid; border-color: var(--accent-line); background: var(--accent-bg); }
.mc-drop-thumb {
  width: 56px; height: 56px; border-radius: var(--radius-sm);
  background: var(--surface-2); display: inline-flex;
  align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden; color: var(--text-soft);
  font-size: 22px;
}
.mc-drop-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mc-drop-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.mc-drop-title { font-size: .84rem; font-weight: 600; color: var(--text); }
.mc-drop-sub { font-size: .74rem; color: var(--text-soft); }
.mc-drop-name {
  font-size: .82rem; color: var(--text); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Terms */
.mc-terms {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--accent-line);
  background: var(--accent-bg); border-radius: var(--radius);
  margin-top: 28px;
}
.mc-terms input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.mc-terms label { font-size: .82rem; color: var(--text); line-height: 1.55; cursor: pointer; }
.mc-terms a { color: var(--accent-strong); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Note */
.mc-note {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 14px; padding: 12px 14px;
  border-radius: var(--radius); font-size: .78rem;
  color: var(--text-muted); line-height: 1.55;
  background: var(--surface-2);
}
.mc-note i { color: var(--text-soft); flex-shrink: 0; margin-top: 2px; }

/* Submit */
.mc-submit-row { margin-top: 28px; display: flex; gap: 12px; align-items: center; }
.mc-submit {
  flex: 1; background: var(--text); color: var(--bg);
  border: none; padding: 14px 24px; border-radius: var(--radius);
  font-size: .92rem; font-weight: 600; font-family: var(--font-body);
  cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; gap: 8px;
  transition: opacity .15s, transform .12s;
}
.mc-submit:hover { opacity: .88; }
.mc-submit:active { transform: translateY(1px); }
.mc-submit:disabled { opacity: .5; cursor: not-allowed; }
.mc-submit i { font-size: 14px; }

@keyframes mcUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ── Mode selector (BYOK vs inPAY) ── */
.mc-modes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-bottom: 18px; animation: mcUp .35s ease;
}
/* ─── Premium Mode Cards (BYOK gold / inPAY blue) ─── */
.mc-mode {
  position: relative; cursor: pointer;
  background: var(--surface, #fff);
  border: 1.5px solid var(--line, #e5e7eb);
  border-radius: 18px;
  padding: 26px 24px 20px;
  display: flex; flex-direction: column; gap: 12px;
  overflow: hidden;
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s, border-color .2s, background .2s;
  user-select: none;
}
.mc-mode::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--mode-accent-grad, transparent);
  opacity: 0; transition: opacity .25s;
}
.mc-mode:hover {
  transform: translateY(-3px);
  border-color: var(--mode-accent-solid, var(--line-2, #d1d5db));
  box-shadow: 0 14px 32px -10px rgba(0,0,0,.13);
}
.mc-mode:hover::before { opacity: 1; }

/* BYOK — gold */
.mc-mode[data-mode="byok"] {
  --mode-accent-grad: linear-gradient(90deg, #fbbf24, #f59e0b, #d97706);
  --mode-accent-solid: #d97706;
  --mode-accent-bg: linear-gradient(180deg, #fffbeb 0%, #fef9e7 100%);
}
.mc-mode[data-mode="byok"].active {
  background: var(--mode-accent-bg);
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245,158,11,.18), 0 14px 32px -10px rgba(217,119,6,.18);
}
.mc-mode[data-mode="byok"].active::before { opacity: 1; }

/* inPAY — blue */
.mc-mode[data-mode="inpay"] {
  --mode-accent-grad: linear-gradient(90deg, #60a5fa, #3b82f6, #2563eb);
  --mode-accent-solid: #2563eb;
  --mode-accent-bg: linear-gradient(180deg, #eff6ff 0%, #ebf2ff 100%);
}
.mc-mode[data-mode="inpay"].active {
  background: var(--mode-accent-bg);
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59,130,246,.18), 0 14px 32px -10px rgba(37,99,235,.15);
}
.mc-mode[data-mode="inpay"].active::before { opacity: 1; }

/* Decorative icon */
/* ── Mode selector — minimal, editorial ── */
.mc-modes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-bottom: 30px; animation: mcUp .35s ease;
}

.mc-mode {
  position: relative;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 14px;
  padding: 18px 20px 16px;
  cursor: pointer; user-select: none;
  display: flex; flex-direction: column;
  transition: border-color .2s, box-shadow .2s, background .2s, transform .15s;
}
.mc-mode:hover {
  border-color: var(--line-2, #cbd5e1);
  box-shadow: 0 4px 14px -6px rgba(15,23,42,.08);
}

/* Variant accents */
.mc-mode[data-mode="byok"]  { --m-accent:#b45309; --m-bg:#fffbeb; --m-soft:#fef3c7; --m-border:#fde68a; }
.mc-mode[data-mode="inpay"] { --m-accent:#1d4ed8; --m-bg:#eff6ff; --m-soft:#dbeafe; --m-border:#bfdbfe; }

.mc-mode.active {
  border-color: var(--m-accent);
  background: var(--m-bg);
}
.mc-mode[data-mode="byok"].active  { box-shadow: 0 0 0 3px rgba(245,158,11,.14), 0 10px 28px -12px rgba(180,83,9,.22); }
.mc-mode[data-mode="inpay"].active { box-shadow: 0 0 0 3px rgba(59,130,246,.14), 0 10px 28px -12px rgba(29,78,216,.22); }

/* Top row */
.mc-mode-top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.mc-mode-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 100px;
  font-size: .66rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  line-height: 1; white-space: nowrap;
}
.mc-mode-badge i { font-size: 10px; }
.mc-mode[data-mode="byok"]  .mc-mode-badge { background: var(--m-soft); color: var(--m-accent); border: 1px solid var(--m-border); }
.mc-mode[data-mode="inpay"] .mc-mode-badge { background: var(--m-soft); color: var(--m-accent); border: 1px solid var(--m-border); }

.mc-mode-check {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--m-accent); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  opacity: 0; transform: scale(.5);
  transition: opacity .15s, transform .25s cubic-bezier(.34,1.56,.64,1);
}
.mc-mode.active .mc-mode-check { opacity: 1; transform: scale(1); }

/* Icon block */
.mc-mode-ic {
  width: 40px; height: 40px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; color: #fff; margin-bottom: 14px;
}
.mc-mode[data-mode="byok"]  .mc-mode-ic { background: linear-gradient(135deg, #f59e0b, #b45309); }
.mc-mode[data-mode="inpay"] .mc-mode-ic { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }

/* Title + subtitle */
.mc-mode-title {
  font-family: var(--font-display, inherit);
  font-size: 1.05rem; font-weight: 700;
  color: var(--text, #0f172a);
  letter-spacing: -.02em; line-height: 1.25;
  margin: 0 0 3px;
}
.mc-mode-sub {
  font-size: .8rem; color: var(--text-muted, #64748b);
  line-height: 1.45; margin: 0;
}

/* Divider */
.mc-mode-div {
  height: 1px; background: var(--line, #e5e7eb);
  margin: 16px 0 12px;
}
.mc-mode.active .mc-mode-div { background: var(--m-border); }

/* Price block */
.mc-mode-price-row { display: flex; flex-direction: column; gap: 1px; margin-bottom: 14px; }
.mc-mode-price-label {
  font-size: .66rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-soft, #94a3b8);
  margin-bottom: 4px;
}
.mc-mode-price {
  font-family: var(--font-display, inherit);
  font-weight: 800; letter-spacing: -.025em;
  line-height: 1.1;
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
}
.mc-mode-price-amount {
  font-size: 1.8rem; color: var(--m-accent, #0f172a);
}
.mc-mode-price-unit {
  font-size: .8rem; font-weight: 600;
  color: var(--text-muted, #64748b);
}
.mc-mode-price-hint {
  font-size: .72rem; color: var(--text-soft, #94a3b8);
  margin-top: 3px;
}

/* Details button */
.mc-mode-more {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .78rem; font-weight: 600;
  color: var(--m-accent, #64748b);
  background: none; border: none; padding: 4px 0;
  cursor: pointer; align-self: flex-start;
  margin-top: auto;
  font-family: inherit;
  transition: gap .15s;
}
.mc-mode-more:hover { gap: 9px; }
.mc-mode-more i { font-size: 11px; }

/* ── Info modal (yumshoq, batafsil) ── */
.mc-info-modal { position: fixed; inset: 0; z-index: 9998; display: none; }
.mc-info-modal.open { display: block; animation: mcFade .2s ease; }
.mc-info-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, .42);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.mc-info-box {
  position: relative;
  width: min(560px, calc(100vw - 24px));
  max-height: min(86vh, 720px);
  margin: 7vh auto 0;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 32px 80px -16px rgba(15, 23, 42, .35);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: mcInfoUp .3s cubic-bezier(.34,1.56,.64,1);
}
.mc-info-box * { box-sizing: border-box; }

.mc-info-head {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 22px;
  border-bottom: 1px solid #f1f5f9;
  flex-shrink: 0;
}
.mc-info-modal[data-variant="byok"]  .mc-info-head { background: linear-gradient(180deg, #fffbeb, #fff); }
.mc-info-modal[data-variant="inpay"] .mc-info-head { background: linear-gradient(180deg, #eff6ff, #fff); }

.mc-info-h-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; color: #fff; flex-shrink: 0;
}
.mc-info-modal[data-variant="byok"]  .mc-info-h-icon { background: linear-gradient(135deg, #f59e0b, #b45309); }
.mc-info-modal[data-variant="inpay"] .mc-info-h-icon { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }

.mc-info-h-text { flex: 1; min-width: 0; }
.mc-info-h-text h2 {
  font-family: var(--font-display, inherit);
  font-size: 1.15rem; font-weight: 700;
  color: #0f172a; letter-spacing: -.02em;
  margin: 0 0 2px; line-height: 1.2;
}
.mc-info-h-text p { font-size: .82rem; color: #64748b; margin: 0; }

.mc-info-close {
  width: 32px; height: 32px; border-radius: 50%;
  background: #f1f5f9; border: 1px solid #e5e7eb;
  color: #64748b; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; transition: .15s; flex-shrink: 0;
}
.mc-info-close:hover { background: #fef2f2; color: #dc2626; border-color: #fecaca; }

.mc-info-body { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 24px; }
.mc-info-lead { font-size: .92rem; color: #334155; line-height: 1.65; margin: 0 0 22px; }

.mc-info-section + .mc-info-section { margin-top: 24px; }
.mc-info-h {
  font-size: .7rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: #94a3b8; margin: 0 0 12px;
  font-family: inherit;
}

.mc-info-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.mc-info-list li { display: flex; gap: 12px; align-items: flex-start; }
.mc-info-list li > i {
  width: 32px; height: 32px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
}
.mc-info-modal[data-variant="byok"]  .mc-info-list li > i { background: #fef3c7; color: #92400e; }
.mc-info-modal[data-variant="inpay"] .mc-info-list li > i { background: #dbeafe; color: #1e40af; }

.mc-info-list li > div { flex: 1; min-width: 0; }
.mc-info-list li b { display: block; font-weight: 700; color: #0f172a; font-size: .92rem; margin-bottom: 2px; line-height: 1.4; }
.mc-info-list li span { display: block; font-size: .82rem; color: #64748b; line-height: 1.5; }

.mc-info-price {
  display: flex; align-items: baseline; gap: 8px;
  padding: 16px 18px; border-radius: 12px;
  background: #f8fafc; border: 1px solid #e2e8f0;
  flex-wrap: wrap;
}
.mc-info-modal[data-variant="byok"]  .mc-info-price { background: #fffbeb; border-color: #fde68a; }
.mc-info-modal[data-variant="inpay"] .mc-info-price { background: #eff6ff; border-color: #bfdbfe; }

.mc-info-price-num { font-family: var(--font-display, inherit); font-size: 1.8rem; font-weight: 800; letter-spacing: -.025em; line-height: 1; }
.mc-info-modal[data-variant="byok"]  .mc-info-price-num { color: #92400e; }
.mc-info-modal[data-variant="inpay"] .mc-info-price-num { color: #1e3a8a; }
.mc-info-price-unit { font-size: .82rem; font-weight: 600; color: #64748b; }
.mc-info-price-note { margin-left: auto; font-size: .76rem; color: #64748b; text-align: right; line-height: 1.4; }

.mc-info-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.mc-info-steps li { display: flex; gap: 12px; align-items: baseline; font-size: .88rem; color: #334155; line-height: 1.5; }
.mc-info-steps li b { display: inline-block; min-width: 18px; font-weight: 800; color: #94a3b8; font-family: var(--font-display, inherit); }

.mc-info-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-info-chip {
  display: inline-flex; align-items: center;
  padding: 5px 11px; border-radius: 100px;
  background: #f1f5f9; color: #334155;
  font-size: .75rem; font-weight: 600;
  border: 1px solid #e2e8f0;
}

.mc-info-tip {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; margin-top: 14px;
  background: #fffbeb; border: 1px solid #fde68a;
  border-radius: 10px; font-size: .82rem;
  color: #78350f; line-height: 1.55;
}
.mc-info-tip i { color: #b45309; flex-shrink: 0; margin-top: 1px; }
.mc-info-tip a { color: #b45309; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.mc-info-modal[data-variant="inpay"] .mc-info-tip { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.mc-info-modal[data-variant="inpay"] .mc-info-tip i { color: #2563eb; }
.mc-info-modal[data-variant="inpay"] .mc-info-tip a { color: #1d4ed8; }

.mc-info-foot {
  display: flex; gap: 10px; align-items: center; justify-content: flex-end;
  padding: 14px 22px; border-top: 1px solid #f1f5f9; flex-shrink: 0;
}
.mc-info-btn-secondary {
  padding: 10px 18px; border-radius: 10px;
  background: #f1f5f9; color: #64748b;
  border: 1px solid #e5e7eb; font-family: inherit;
  font-size: .84rem; font-weight: 600;
  cursor: pointer; transition: .15s;
}
.mc-info-btn-secondary:hover { background: #e2e8f0; color: #0f172a; }
.mc-info-btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 20px; border-radius: 10px;
  color: #fff; border: none; font-family: inherit;
  font-size: .86rem; font-weight: 600;
  cursor: pointer; transition: .15s;
}
.mc-info-modal[data-variant="byok"]  .mc-info-btn-primary { background: linear-gradient(135deg, #f59e0b, #b45309); }
.mc-info-modal[data-variant="inpay"] .mc-info-btn-primary { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.mc-info-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -4px rgba(0,0,0,.2); }

body.mc-info-open { overflow: hidden; }

@keyframes mcFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mcInfoUp { from { opacity: 0; transform: translateY(20px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 560px) {
  .mc-info-box { width: 100vw; max-height: 92vh; margin: 8vh 0 0; border-radius: 18px 18px 0 0; }
  .mc-info-foot { flex-direction: column-reverse; gap: 8px; }
  .mc-info-foot > * { width: 100%; justify-content: center; }
}

@media (max-width: 760px) {
  .mc-wrap { padding: 28px 18px 80px; }
  .mc-head-text h1 { font-size: 1.55rem; }
  .mc-types { grid-template-columns: 1fr; }
  .mc-modes { grid-template-columns: 1fr; }
  .mc-form-grid { grid-template-columns: 1fr; }
  .mc-form { padding: 22px; }
}
</style>

<body class="mc-page">
<?php include_once($_SERVER["DOCUMENT_ROOT"].'/business/includes/nav.php'); ?>

<div class="mc-wrap">

  <a href="https://<?= $_SERVER['HTTP_HOST'] ?>/merchant" class="mc-back-link">
    <i class="bi bi-arrow-left"></i> Kassalar
  </a>

  <div class="mc-head">
    <div class="mc-head-text">
      <h1>Kassa qo'shish</h1>
      <p>Yangi kassa yarating va to'lovlarni qabul qilishni boshlang. Tasdiqlash 3-5 ish kuni davomida.</p>
    </div>
    <div class="mc-plan">
      <span class="mc-plan-name"><?= strtoupper($userPlan) ?></span>
      <span class="mc-plan-divider"></span>
      <span class="mc-plan-count"><?= $totalMerchants ?>/<?= $maxMerchants ?></span>
    </div>
  </div>

  <?php if (isset($_SESSION['message'])): ?>
    <div class="mc-alert <?= $_SESSION['message_type']??'success' ?>">
      <i class="bi bi-<?= ($_SESSION['message_type']??'success')==='success'?'check-circle-fill':'exclamation-circle-fill' ?>"></i>
      <div><?= htmlspecialchars($_SESSION['message']); unset($_SESSION['message'],$_SESSION['message_type']); ?></div>
    </div>
  <?php endif; ?>

  <?php if (!$canCreateMore): ?>
    <div class="mc-limit">
      <div class="mc-limit-icon"><i class="bi bi-lock"></i></div>
      <h3>Kassa limiti tugadi</h3>
      <p><strong><?= strtoupper($userPlan) ?></strong> tarifda <strong><?= $maxMerchants ?></strong> ta kassa mumkin. Hozirda <strong><?= $totalMerchants ?></strong> ta mavjud — yangisini yaratish uchun tarifni yuqorilang.</p>
      <a href="https://<?= $_SERVER['HTTP_HOST'] ?>/pricing" class="mc-upgrade-btn">
        <i class="bi bi-arrow-up-circle"></i> Tarifni yuqorilash
      </a>
    </div>
  <?php else: ?>

    <div class="mc-section-label">
      <span class="mc-section-num">1</span>
      <span class="mc-section-text">Kassa turini tanlang</span>
    </div>
    <div class="mc-types">
      <?php foreach([
          1=>['icon'=>'globe2','name'=>'Veb-sayt',     'desc'=>"Sayt orqali to'lov qabul qilish"],
          2=>['icon'=>'robot', 'name'=>'Telegram',     'desc'=>"Bot orqali to'lovlar qabuli"],
          3=>['icon'=>'heart', 'name'=>'Donat',        'desc'=>"Xayriya va qo'llab-quvvatlash"]
      ] as $tv=>$tp): ?>
        <div class="mc-type" data-type="<?= $tv ?>">
          <input type="radio" name="merchant_type_select" value="<?= $tv ?>">
          <div class="mc-type-check"><i class="bi bi-check"></i></div>
          <span class="mc-type-icon"><i class="bi bi-<?= $tp['icon'] ?>"></i></span>
          <div class="mc-type-name"><?= $tp['name'] ?></div>
          <div class="mc-type-desc"><?= $tp['desc'] ?></div>
        </div>
      <?php endforeach; ?>
    </div>

    <!-- ── STEP 2: Kassa rejimi (BYOK vs inPAY) ── -->
    <div class="mc-section-label" id="modeSection" style="display:none;">
      <span class="mc-section-num muted" id="modeNum">2</span>
      <span class="mc-section-text">Kassa rejimini tanlang</span>
      <span class="mc-section-hint">— pul qaerga tushishini va qanday to'lashingizni belgilaydi</span>
    </div>

    <div class="mc-modes" id="modesGrid" style="display:none;">

  <!-- VARIANT 1: BYOK -->
  <div class="mc-mode" data-mode="byok" tabindex="0" role="button" aria-label="BYOK rejimini tanlash">
    <div class="mc-mode-top">
      <div class="mc-mode-badge"><i class="bi bi-stars"></i> Tavsiya</div>
      <div class="mc-mode-check"><i class="bi bi-check2"></i></div>
    </div>
    <div class="mc-mode-ic"><i class="bi bi-key-fill"></i></div>
    <h3 class="mc-mode-title">O'z biznesingiz orqali</h3>
    <p class="mc-mode-sub">Click/Payme kalitlaringiz · BYOK</p>
    <div class="mc-mode-div"></div>
    <div class="mc-mode-price-row">
      <?php if ($byok_cheapest): ?>
        <span class="mc-mode-price-label"><?= h($byok_cheapest['name']) ?> dan</span>
        <div class="mc-mode-price">
          <span class="mc-mode-price-amount"><?= number_format((float)$byok_cheapest['byok_price_month'], 0, '.', ' ') ?></span>
          <span class="mc-mode-price-unit">so'm/oy</span>
        </div>
        <span class="mc-mode-price-hint"><?= number_format((int)$byok_cheapest['byok_tx_quota']) ?> tx · <?= (int)$byok_cheapest['duration_months'] ?> oy</span>
      <?php else: ?>
        <span class="mc-mode-price-label">Boshlanish narxi</span>
        <div class="mc-mode-price">
          <span class="mc-mode-price-amount">—</span>
          <span class="mc-mode-price-unit">/pricing da</span>
        </div>
      <?php endif; ?>
    </div>
    <button type="button" class="mc-mode-more" onclick="event.stopPropagation(); openInfoModal('byok');">
      Batafsil <i class="bi bi-arrow-right"></i>
    </button>
  </div>

  <!-- VARIANT 2: inPAY -->
  <div class="mc-mode" data-mode="inpay" tabindex="0" role="button" aria-label="inPAY rejimini tanlash">
    <div class="mc-mode-top">
      <div class="mc-mode-badge"><i class="bi bi-lightning-charge-fill"></i> Klassik</div>
      <div class="mc-mode-check"><i class="bi bi-check2"></i></div>
    </div>
    <div class="mc-mode-ic"><i class="bi bi-lightning-charge-fill"></i></div>
    <h3 class="mc-mode-title">inPAY orqali</h3>
    <p class="mc-mode-sub">Bizning hisob, foiz bilan</p>
    <div class="mc-mode-div"></div>
    <div class="mc-mode-price-row">
      <span class="mc-mode-price-label">Komissiya</span>
      <div class="mc-mode-price">
        <span class="mc-mode-price-amount"><?= rtrim(rtrim(number_format($inpay_commission, 2, '.', ''), '0'), '.') ?>%</span>
        <span class="mc-mode-price-unit">har tranzaksiyadan</span>
      </div>
      <span class="mc-mode-price-hint">Oylik to'lov yo'q</span>
    </div>
    <button type="button" class="mc-mode-more" onclick="event.stopPropagation(); openInfoModal('inpay');">
      Batafsil <i class="bi bi-arrow-right"></i>
    </button>
  </div>

</div>

    <div class="mc-mode-note" id="modeNote" style="display:none;">
      <i class="bi bi-info-circle"></i>
      <span><b>Variant 1 (BYOK):</b> kassa tasdiqlangach, sozlamalarda Click va Payme merchant kabinetingizdan olgan kalitlarni kiritasiz. Pul to'g'ridan-to'g'ri sizga kelganidan inPAY hech qachon mablag'ingizni ushlab turmaydi.</span>
    </div>

    <!-- ── STEP 3: Ma'lumotlar (oldingi STEP 2) ── -->
    <div class="mc-section-label" id="detailsSection" style="display:none;">
      <span class="mc-section-num muted" id="step3Num">3</span>
      <span class="mc-section-text">Kassa ma'lumotlari</span>
      <span class="mc-section-hint" id="step3Hint">— rejim tanlagandan keyin</span>
    </div>

    <form method="POST" enctype="multipart/form-data" id="createForm">
      <input type="hidden" name="merchant_type" id="mt_input" value="">
      <input type="hidden" name="kassa_mode"    id="km_input" value="">
      <div class="mc-form" id="mainForm">

        <div class="mc-form-section">
          <div class="mc-form-grid">
            <div class="mc-field">
              <label class="mc-flbl">Kassa nomi <span class="mc-flbl-req">*</span></label>
              <input type="text" name="business_name" class="mc-input" maxlength="20" placeholder="Masalan: Orzu Market" required id="bnInput">
              <div class="mc-fhint"><span>Brendning qisqa nomi</span><span class="mc-fcount" id="bnCount">0/20</span></div>
            </div>
            <div class="mc-field" id="websiteGroup">
              <label class="mc-flbl">Website <span class="mc-flbl-req" id="wsReq" style="display:none">*</span></label>
              <input type="url" name="website" id="wsInput" class="mc-input" placeholder="https://example.com">
              <div class="mc-fhint"><span id="wsHint">Ixtiyoriy</span></div>
            </div>
          </div>

          <div class="mc-form-grid" style="margin-top:18px;">
            <div class="mc-field full">
              <label class="mc-flbl">Tavsif</label>
              <textarea name="description" class="mc-textarea" maxlength="140" placeholder="Kassangiz nima uchun ishlatiladi — qisqacha yozing." id="dsInput"></textarea>
              <div class="mc-fhint"><span>Mijozlar to'lov sahifasida ko'radi</span><span class="mc-fcount" id="dsCount">0/140</span></div>
            </div>
          </div>
        </div>

        <div class="mc-form-section">
          <div class="mc-field">
            <label class="mc-flbl">Logotip <span class="mc-flbl-req">*</span></label>
            <div id="dropZone" class="mc-drop">
              <div class="mc-drop-thumb" id="dzThumb"><i class="bi bi-image"></i></div>
              <div class="mc-drop-text">
                <span class="mc-drop-title" id="dzTitle">Faylni tashlang yoki bosib tanlang</span>
                <span class="mc-drop-sub" id="dzSub">JPG yoki PNG · 500×500 px tavsiya etiladi</span>
              </div>
            </div>
            <input type="file" id="logoInput" name="logo" accept="image/jpeg,image/png" required hidden>
          </div>
        </div>

        <div class="mc-terms">
          <input type="checkbox" name="accepted_terms" id="terms" required>
          <label for="terms">
            <a href="#" onclick="event.preventDefault(); openContractModal()">Vositachilik shartnomasi</a>ni o'qib chiqdim va barcha shartlarga roziman.
          </label>
        </div>

        <div class="mc-note">
          <i class="bi bi-clock-history"></i>
          <span>So'rov yuborilgandan so'ng admin 3-5 ish kuni ichida tekshiruvdan o'tkazadi. Aniq va to'g'ri ma'lumot kiriting.</span>
        </div>

        <div class="mc-submit-row">
          <button type="submit" class="mc-submit" id="submitBtn">
            <i class="bi bi-send"></i> So'rov yuborish
          </button>
        </div>

      </div>
    </form>

  <?php endif; ?>
</div>

<!-- ── Vositachilik shartnomasi modal ── -->
<div class="mc-cmodal" id="contractModal" aria-hidden="true">
  <div class="mc-cmodal-backdrop" onclick="closeContractModal()"></div>
  <div class="mc-cmodal-box" role="dialog" aria-labelledby="contractModalTitle">
    <div class="mc-cmodal-head">
      <div class="mc-cmodal-h-text">
        <i class="bi bi-file-earmark-text"></i>
        <h3 id="contractModalTitle">Vositachilik shartnomasi</h3>
      </div>
      <div class="mc-cmodal-h-acts">
        <a href="/documents/contract_merchant.pdf" download class="mc-cmodal-icon-btn" title="PDF yuklab olish" aria-label="PDF yuklab olish"><i class="bi bi-download"></i></a>
        <button type="button" class="mc-cmodal-close" onclick="closeContractModal()" aria-label="Yopish"><i class="bi bi-x-lg"></i></button>
      </div>
    </div>
    <div class="mc-cmodal-body">
      <iframe id="contractFrame" src="" title="Vositachilik shartnomasi" loading="lazy"></iframe>
    </div>
    <div class="mc-cmodal-foot">
      <button type="button" class="mc-cmodal-btn primary" onclick="acceptContract()"><i class="bi bi-check2-circle"></i> Tanishdim</button>
    </div>
  </div>
</div>

<!-- ── BYOK Info Modal ── -->
<div class="mc-info-modal" id="byokInfoModal" data-variant="byok" aria-hidden="true">
  <div class="mc-info-backdrop" onclick="closeInfoModal('byok')"></div>
  <div class="mc-info-box" role="dialog" aria-labelledby="byokInfoTitle">
    <div class="mc-info-head">
      <div class="mc-info-h-icon"><i class="bi bi-key-fill"></i></div>
      <div class="mc-info-h-text">
        <h2 id="byokInfoTitle">O'z biznesingiz orqali</h2>
        <p>BYOK — Click/Payme kalitlaringiz</p>
      </div>
      <button type="button" class="mc-info-close" onclick="closeInfoModal('byok')" aria-label="Yopish"><i class="bi bi-x-lg"></i></button>
    </div>
    <div class="mc-info-body">
      <p class="mc-info-lead">
        Click va Payme merchant kabinetlaringizdagi kalitlarni inPAY ga kiritasiz. Mijozlar to'lovni inPAY interfeysida amalga oshiradi, ammo pul <b>to'g'ridan-to'g'ri sizning bank hisobingizga</b> tushadi.
      </p>

      <section class="mc-info-section">
        <h3 class="mc-info-h">Imkoniyatlar</h3>
        <ul class="mc-info-list">
          <li><i class="bi bi-bank2"></i>
            <div><b>Pul to'g'ridan-to'g'ri sizga</b>
              <span>inPAY mablag'ingizni ushlab turmaydi — bevosita bank hisobingizga keladi</span></div></li>
          <li><i class="bi bi-percent"></i>
            <div><b>Foizsiz, oylik obuna</b>
              <span>Har tranzaksiyadan emas — bir martalik oylik to'lov</span></div></li>
          <li><i class="bi bi-receipt-cutoff"></i>
            <div><b>Soliq chekingiz sizda</b>
              <span>Buxgalteriya va soliq hisoboti sizning yuridik shaxsingiz nomidan chiqadi</span></div></li>
          <li><i class="bi bi-graph-up-arrow"></i>
            <div><b>Mustaqil aylanma</b>
              <span>Sizning aylanmangiz inPAY balansiga ta'sir qilmaydi</span></div></li>
        </ul>
      </section>

      <section class="mc-info-section">
        <h3 class="mc-info-h">Narx</h3>
        <div class="mc-info-price">
          <?php if ($byok_cheapest): ?>
            <span class="mc-info-price-num"><?= number_format((float)$byok_cheapest['byok_price_month'], 0, '.', ' ') ?></span>
            <span class="mc-info-price-unit">so'm/oy</span>
            <span class="mc-info-price-note">
              <b><?= h($byok_cheapest['name']) ?></b><br>
              <?= number_format((int)$byok_cheapest['byok_tx_quota']) ?> tranzaksiya · <?= (int)$byok_cheapest['duration_months'] ?> oy
            </span>
          <?php else: ?>
            <span class="mc-info-price-num">—</span>
            <span class="mc-info-price-unit">Tarif kelishilgan</span>
          <?php endif; ?>
        </div>
        <?php if ($byok_plans_count > 1): ?>
          <div class="mc-info-tip">
            <i class="bi bi-stars"></i>
            <span>Jami <b><?= $byok_plans_count ?> ta</b> BYOK tarifi mavjud — kichik biznesdan korporativgacha. <a href="/pricing#byok" target="_blank">Barcha tariflarni ko'rish →</a></span>
          </div>
        <?php endif; ?>
      </section>

      <section class="mc-info-section">
        <h3 class="mc-info-h">Qanday ishlaydi</h3>
        <ol class="mc-info-steps">
          <li><b>1.</b> So'rovni yuborasiz va admin tasdiqlaydi (3–5 ish kuni)</li>
          <li><b>2.</b> Sozlamalardan Click/Payme kalitlaringizni kiritasiz</li>
          <li><b>3.</b> Kassani saytingiz yoki botingizga ulaysiz</li>
          <li><b>4.</b> Pul to'g'ridan-to'g'ri sizning bank hisobingizga tushadi</li>
        </ol>
      </section>
    </div>
    <div class="mc-info-foot">
      <button type="button" class="mc-info-btn-secondary" onclick="closeInfoModal('byok')">Yopish</button>
      <button type="button" class="mc-info-btn-primary" onclick="selectFromModal('byok')">
        <i class="bi bi-check2-circle"></i> Bu rejimni tanlash
      </button>
    </div>
  </div>
</div>

<!-- ── inPAY Info Modal ── -->
<div class="mc-info-modal" id="inpayInfoModal" data-variant="inpay" aria-hidden="true">
  <div class="mc-info-backdrop" onclick="closeInfoModal('inpay')"></div>
  <div class="mc-info-box" role="dialog" aria-labelledby="inpayInfoTitle">
    <div class="mc-info-head">
      <div class="mc-info-h-icon"><i class="bi bi-lightning-charge-fill"></i></div>
      <div class="mc-info-h-text">
        <h2 id="inpayInfoTitle">inPAY orqali</h2>
        <p>Klassik · bizning hisob raqamlarimiz</p>
      </div>
      <button type="button" class="mc-info-close" onclick="closeInfoModal('inpay')" aria-label="Yopish"><i class="bi bi-x-lg"></i></button>
    </div>
    <div class="mc-info-body">
      <p class="mc-info-lead">
        Mijozlar to'lovi avval <b>inPAY hisobiga</b> tushadi, har tranzaksiyadan <b><?= rtrim(rtrim(number_format($inpay_commission, 2, '.', ''), '0'), '.') ?>% komissiya</b> ushlab qolinadi, qolgan summa siz ko'rsatgan bank hisobiga o'tkaziladi. Hech qanday Click yoki Payme shartnomasi kerak emas.
      </p>

      <section class="mc-info-section">
        <h3 class="mc-info-h">Imkoniyatlar</h3>
        <ul class="mc-info-list">
          <li><i class="bi bi-clock-history"></i>
            <div><b>5 daqiqada ishga tushadi</b>
              <span>Tasdiq darrov keladi — kalit, shartnoma yoki kutish yo'q</span></div></li>
          <li><i class="bi bi-shield-check"></i>
            <div><b>Shartnoma kerak emas</b>
              <span>Click va Payme bilan inPAY o'zi shartnoma qilgan</span></div></li>
          <li><i class="bi bi-cash-coin"></i>
            <div><b>Oylik to'lov yo'q</b>
              <span>Faqat tranzaksiya foizi — sotuv bo'lmasa, hech narsa to'lamaysiz</span></div></li>
          <li><i class="bi bi-credit-card-2-back"></i>
            <div><b>Barcha mashhur usullar</b>
              <span>Karta, Click, Payme, Uzum, Anor, Alif, Paynet va boshqalar</span></div></li>
        </ul>
      </section>

      <section class="mc-info-section">
        <h3 class="mc-info-h">Komissiya</h3>
        <div class="mc-info-price">
          <span class="mc-info-price-num"><?= rtrim(rtrim(number_format($inpay_commission, 2, '.', ''), '0'), '.') ?>%</span>
          <span class="mc-info-price-unit">har tranzaksiyadan</span>
          <span class="mc-info-price-note">Oylik abonentlik yo'q<br>Sotuv bo'lganda to'laysiz</span>
        </div>
      </section>

      <section class="mc-info-section">
        <h3 class="mc-info-h">To'lov usullari</h3>
        <div class="mc-info-chips">
          <span class="mc-info-chip">Bank kartasi</span>
          <span class="mc-info-chip">Click</span>
          <span class="mc-info-chip">Payme</span>
          <span class="mc-info-chip">Uzum</span>
          <span class="mc-info-chip">Anor</span>
          <span class="mc-info-chip">Alif</span>
          <span class="mc-info-chip">Paynet</span>
        </div>
      </section>

      <section class="mc-info-section">
        <h3 class="mc-info-h">Qanday ishlaydi</h3>
        <ol class="mc-info-steps">
          <li><b>1.</b> So'rovni yuborasiz va admin tasdiqlaydi</li>
          <li><b>2.</b> Kassa kalitlarini saytingiz yoki botingizga ulaysiz</li>
          <li><b>3.</b> Mijoz to'lovi inPAY hisobiga tushadi</li>
          <li><b>4.</b> Foiz ushlanib, qolgan summa sizning bank hisobingizga o'tkaziladi</li>
        </ol>
      </section>
    </div>
    <div class="mc-info-foot">
      <button type="button" class="mc-info-btn-secondary" onclick="closeInfoModal('inpay')">Yopish</button>
      <button type="button" class="mc-info-btn-primary" onclick="selectFromModal('inpay')">
        <i class="bi bi-check2-circle"></i> Bu rejimni tanlash
      </button>
    </div>
  </div>
</div>

<style>
.mc-cmodal { position: fixed; inset: 0; z-index: 9999; display: none; }
.mc-cmodal.open { display: block; animation: mcCmodalFade .2s ease; }
.mc-cmodal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.mc-cmodal-box {
  position: relative;
  width: min(960px, calc(100vw - 32px));
  height: min(86vh, 760px);
  margin: 7vh auto 0;
  background: var(--surface, #fff);
  border-radius: 18px;
  border: 1px solid var(--line, #e5e7eb);
  box-shadow: 0 24px 80px rgba(15, 23, 42, .25);
  display: flex; flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  animation: mcCmodalUp .25s cubic-bezier(.34,1.56,.64,1);
}
.mc-cmodal-box * { box-sizing: border-box; }
.mc-cmodal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 18px;
  border-bottom: 1px solid var(--line, #e5e7eb);
  background: var(--surface, #fff);
  flex-shrink: 0;
}
.mc-cmodal-h-text { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.mc-cmodal-h-text i { font-size: 18px; color: var(--accent, #6366f1); flex-shrink: 0; }
.mc-cmodal-h-text h3 { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text, #0f172a); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-cmodal-h-acts { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.mc-cmodal-close, .mc-cmodal-icon-btn {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface-2, #f1f5f9); border: 1px solid var(--line, #e5e7eb);
  color: var(--text-muted, #64748b); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; transition: .15s; padding: 0; flex-shrink: 0;
  text-decoration: none;
}
.mc-cmodal-icon-btn:hover { background: var(--accent-bg, #eef2ff); color: var(--accent, #6366f1); border-color: var(--accent, #6366f1); }
.mc-cmodal-close:hover { background: var(--danger-bg, #fee2e2); color: var(--danger, #ef4444); border-color: var(--danger, #ef4444); }
.mc-cmodal-body { flex: 1; min-height: 0; background: #fafafa; }
.mc-cmodal-body iframe { width: 100%; height: 100%; border: 0; display: block; }
.mc-cmodal-foot {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; padding: 12px 18px;
  border-top: 1px solid var(--line, #e5e7eb);
  background: var(--surface, #fff);
  flex-shrink: 0;
}
.mc-cmodal-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; padding: 9px 16px;
  border-radius: 9px;
  font-size: .85rem; font-weight: 600; line-height: 1;
  cursor: pointer; transition: .15s;
  text-decoration: none; font-family: inherit;
  border: 1px solid transparent;
  white-space: nowrap; flex-shrink: 0;
}
.mc-cmodal-btn.ghost {
  background: var(--surface-2, #f1f5f9); color: var(--text-muted, #64748b);
  border-color: var(--line, #e5e7eb);
}
.mc-cmodal-btn.ghost:hover { background: var(--surface, #fff); color: var(--text, #0f172a); border-color: var(--line-2, #cbd5e1); }
.mc-cmodal-btn.primary {
  background: var(--accent, #10b981); color: #fff;
  border-color: var(--accent, #10b981);
}
.mc-cmodal-btn.primary:hover { background: var(--accent-strong, #059669); border-color: var(--accent-strong, #059669); }
.mc-cmodal-btn i { font-size: 14px; }
@keyframes mcCmodalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mcCmodalUp { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 640px) {
  .mc-cmodal-box { width: 100vw; height: 100vh; margin: 0; border-radius: 0; }
  .mc-cmodal-head { padding: 12px 14px; }
  .mc-cmodal-h-text h3 { font-size: .92rem; }
  .mc-cmodal-foot { padding: 10px 14px; }
  .mc-cmodal-foot .mc-cmodal-btn { padding: 11px 18px; }
}
body.mc-cmodal-open { overflow: hidden; }
</style>

<script>
    
    // ── Info modallar ──
function openInfoModal(variant) {
  const m = document.getElementById(variant + 'InfoModal');
  if (!m) return;
  m.classList.add('open');
  m.setAttribute('aria-hidden', 'false');
  document.body.classList.add('mc-info-open');
}
function closeInfoModal(variant) {
  const m = document.getElementById(variant + 'InfoModal');
  if (!m) return;
  m.classList.remove('open');
  m.setAttribute('aria-hidden', 'true');
  document.body.classList.remove('mc-info-open');
}
function selectFromModal(variant) {
  closeInfoModal(variant);
  setTimeout(() => setKassaMode(variant), 150); // modal yopilgandan keyin
}
document.addEventListener('keydown', e => {
  if (e.key !== 'Escape') return;
  const open = document.querySelector('.mc-info-modal.open');
  if (open) {
    open.classList.remove('open');
    open.setAttribute('aria-hidden', 'true');
    document.body.classList.remove('mc-info-open');
  }
});
    
function openContractModal() {
  const modal = document.getElementById('contractModal');
  const frame = document.getElementById('contractFrame');
  // iframe src faqat birinchi ochilganda — keyingisida cache'da
  if (!frame.dataset.loaded) {
    frame.src = '/documents/contract_merchant.pdf#toolbar=0&navpanes=0&zoom=page-width';
    frame.dataset.loaded = '1';
  }
  modal.classList.add('open');
  modal.setAttribute('aria-hidden', 'false');
  document.body.classList.add('mc-cmodal-open');
}
function closeContractModal() {
  const modal = document.getElementById('contractModal');
  modal.classList.remove('open');
  modal.setAttribute('aria-hidden', 'true');
  document.body.classList.remove('mc-cmodal-open');
}
function acceptContract() {
  const cb = document.getElementById('terms');
  if (cb) cb.checked = true;
  closeContractModal();
}
document.addEventListener('keydown', e => {
  if (e.key === 'Escape') {
    const m = document.getElementById('contractModal');
    if (m && m.classList.contains('open')) closeContractModal();
  }
});
</script>

<?php include_once($_SERVER["DOCUMENT_ROOT"].'/business/includes/footer.php'); ?>

<script>
const typeCards   = document.querySelectorAll('.mc-type');
const modeCards   = document.querySelectorAll('.mc-mode');
const mainForm    = document.getElementById('mainForm');
const mtInput     = document.getElementById('mt_input');
const kmInput     = document.getElementById('km_input');
const wsInput     = document.getElementById('wsInput');
const wsGroup     = document.getElementById('websiteGroup');
const wsReq       = document.getElementById('wsReq');
const wsHint      = document.getElementById('wsHint');
const modeSection = document.getElementById('modeSection');
const modesGrid   = document.getElementById('modesGrid');
const modeNote    = document.getElementById('modeNote');
const modeNum     = document.getElementById('modeNum');
const detailsSec  = document.getElementById('detailsSection');
const step3Num    = document.getElementById('step3Num');
const step3Hint   = document.getElementById('step3Hint');

function setKassaMode(mode){
  kmInput.value = mode;
  modeCards.forEach(m => m.classList.toggle('active', m.dataset.mode === mode));
  if (modeNote) {
    modeNote.style.display = (mode === 'byok') ? 'flex' : 'none';
  }
  // Reveal step 3 (details form)
  if (detailsSec) detailsSec.style.display = 'flex';
  if (step3Num)  step3Num.classList.remove('muted');
  if (step3Hint) step3Hint.style.display = 'none';
  mainForm.classList.add('show');
  setTimeout(() => mainForm.scrollIntoView({behavior:'smooth', block:'start'}), 120);
}

typeCards.forEach(card => {
  card.addEventListener('click', function(){
    typeCards.forEach(c => c.classList.remove('active'));
    this.classList.add('active');
    const t = this.dataset.type;
    mtInput.value = t;

    // Website / Telegram require mode selection; Donat skips it (always inpay).
    if (t === '3') {
      // Donat → hide mode selector, force inpay, jump straight to details
      if (modeSection) modeSection.style.display = 'none';
      if (modesGrid)   modesGrid.style.display   = 'none';
      if (modeNote)    modeNote.style.display    = 'none';
      modeCards.forEach(m => m.classList.remove('active'));
      kmInput.value = 'inpay';
      // Reveal details
      if (detailsSec) detailsSec.style.display = 'flex';
      if (step3Num)  { step3Num.classList.remove('muted'); step3Num.textContent = '2'; }
      if (step3Hint) step3Hint.style.display = 'none';
      mainForm.classList.add('show');
    } else {
      // Website / Telegram → show mode selector, hide details until mode chosen
      if (modeSection) modeSection.style.display = 'flex';
      if (modesGrid)   modesGrid.style.display   = 'grid';
      if (modeNum)    modeNum.classList.remove('muted');
      if (step3Num)  { step3Num.textContent = '3'; step3Num.classList.add('muted'); }
      if (step3Hint) step3Hint.style.display = 'inline';
      // Hide details until mode is chosen
      if (kmInput.value === '') {
        if (detailsSec) detailsSec.style.display = 'none';
        mainForm.classList.remove('show');
      } else {
        // Mode already chosen — keep form visible
        if (detailsSec) detailsSec.style.display = 'flex';
        if (step3Num)  step3Num.classList.remove('muted');
        if (step3Hint) step3Hint.style.display = 'none';
        mainForm.classList.add('show');
      }
    }

    // Website field visibility
    if (t === '1') {
      wsGroup.classList.remove('hidden');
      wsInput.required = true;
      wsReq.style.display = 'inline';
      wsHint.textContent = 'Majburiy';
    } else if (t === '2') {
      wsGroup.classList.remove('hidden');
      wsInput.required = false;
      wsReq.style.display = 'none';
      wsHint.textContent = 'Ixtiyoriy';
    } else {
      wsGroup.classList.add('hidden');
      wsInput.required = false;
      wsInput.value = '';
    }

    // Scroll to mode section for type 1/2, or to form for type 3
    const target = (t === '3') ? mainForm : modeSection;
    if (target) setTimeout(() => target.scrollIntoView({behavior:'smooth', block:'start'}), 120);
  });
});

modeCards.forEach(card => {
  card.addEventListener('click', function(){
    setKassaMode(this.dataset.mode);
  });
});

// Counters
const bnInput = document.getElementById('bnInput');
const bnCount = document.getElementById('bnCount');
const dsInput = document.getElementById('dsInput');
const dsCount = document.getElementById('dsCount');
if (bnInput) bnInput.addEventListener('input', () => bnCount.textContent = bnInput.value.length + '/20');
if (dsInput) dsInput.addEventListener('input', () => dsCount.textContent = dsInput.value.length + '/140');

// Drop zone
const dz = document.getElementById('dropZone');
const li = document.getElementById('logoInput');
const dzTitle = document.getElementById('dzTitle');
const dzSub = document.getElementById('dzSub');
const dzThumb = document.getElementById('dzThumb');

function setLogo(file) {
  if (!file) return;
  if (!file.type.startsWith('image/')) { alert('Faqat rasm fayli yuklang'); return; }
  const dt = new DataTransfer();
  dt.items.add(file);
  li.files = dt.files;
  dzTitle.textContent = file.name;
  dzSub.textContent = (file.size/1024).toFixed(1) + ' KB · tayyor';
  dz.classList.add('has-file');
  const reader = new FileReader();
  reader.onload = e => { dzThumb.innerHTML = '<img src="'+e.target.result+'" alt="">'; };
  reader.readAsDataURL(file);
}
if (dz) {
  dz.addEventListener('click', () => li.click());
  li.addEventListener('change', () => { if (li.files.length) setLogo(li.files[0]); });
  dz.addEventListener('dragover', e => { e.preventDefault(); dz.classList.add('over'); });
  dz.addEventListener('dragleave', () => dz.classList.remove('over'));
  dz.addEventListener('drop', e => {
    e.preventDefault();
    dz.classList.remove('over');
    if (e.dataTransfer.files[0]) setLogo(e.dataTransfer.files[0]);
  });
}

// Submit guard
const cf = document.getElementById('createForm');
if (cf) cf.addEventListener('submit', function(e){
  if (!mtInput.value) {
    e.preventDefault();
    alert('Iltimos, kassa turini tanlang!');
    window.scrollTo({top: 0, behavior: 'smooth'});
    return;
  }
  // Donat (type=3) doesn't require mode selection (server forces 'inpay').
  if (mtInput.value !== '3' && !kmInput.value) {
    e.preventDefault();
    alert("Iltimos, kassa rejimini tanlang (Variant 1 yoki Variant 2)!");
    if (modeSection) modeSection.scrollIntoView({behavior:'smooth', block:'start'});
    return;
  }
  document.getElementById('submitBtn').disabled = true;
  document.getElementById('submitBtn').innerHTML = '<i class="bi bi-arrow-clockwise"></i> Yuborilmoqda...';
});
</script>
</body>
</html>
