{"id":6042,"date":"2025-07-14T15:56:36","date_gmt":"2025-07-14T15:56:36","guid":{"rendered":"https:\/\/www.shiblymedia.net\/bussiness-card-design\/"},"modified":"2025-10-24T15:50:58","modified_gmt":"2025-10-24T15:50:58","slug":"bussiness-card-design","status":"publish","type":"page","link":"https:\/\/www.shiblymedia.net\/en\/bussiness-card-design\/","title":{"rendered":"Bussiness Card Design"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"6042\" class=\"elementor elementor-6042 elementor-5442\">\n\t\t\t\t\t\t<div class=\"elementor-section elementor-top-section elementor-element elementor-element-7a2d4586 elementor-section-full_width elementor-section-stretched elementor-section-content-middle elementor-section-height-default elementor-section-height-default\" data-id=\"7a2d4586\" data-element_type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-11c62e49\" data-id=\"11c62e49\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-39ff668b elementor-widget elementor-widget-shortcode\" data-id=\"39ff668b\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-section elementor-top-section elementor-element elementor-element-31507a14 elementor-section-full_width elementor-section-stretched elementor-section-content-middle elementor-section-height-default elementor-section-height-default\" data-id=\"31507a14\" data-element_type=\"section\" data-settings=\"{&quot;stretch_section&quot;:&quot;section-stretched&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5ee5335e\" data-id=\"5ee5335e\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5e4f8429 elementor-widget elementor-widget-html\" data-id=\"5e4f8429\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- Google Fonts (same as Arabic version for live font preview) -->\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cairo:wght@300;400;600;700&family=Tajawal:wght@300;400;700&family=Noto+Kufi+Arabic:wght@400;600&family=Almarai:wght@300;400;700&family=IBM+Plex+Sans+Arabic:wght@300;400;600&family=Markazi+Text:wght@400;600&family=Changa:wght@300;400;700&family=Mada:wght@300;400;700&family=Amiri:wght@400;700&family=Reem+Kufi:wght@400;600&family=Lalezar&family=El+Messiri:wght@400;600;700&family=Scheherazade+New:wght@400;700&family=Lateef:wght@400;700&family=Noto+Sans+Arabic:wght@300;400;600;700&family=IBM+Plex+Sans:wght@400;600&family=Roboto:wght@300;400;700&family=Poppins:wght@300;400;600;700&family=Montserrat:wght@300;400;600;700&family=Open+Sans:wght@300;400;600;700&family=Playfair+Display:wght@400;600;700&display=swap\" rel=\"stylesheet\"\/>\r\n\r\n<div id=\"business-card-form\">\r\n  <style>\r\n    #business-card-form {\r\n      direction: ltr;\r\n      max-width: 600px;\r\n      margin: 0 auto;\r\n      font-family: 'Tajawal', sans-serif;\r\n      background: #92181B;\r\n      color: #fff;\r\n      padding: 30px;\r\n      border-radius: 10px;\r\n      box-shadow: 0 2px 15px rgba(0,0,0,0.1);\r\n    }\r\n    #business-card-form h2 {\r\n      color: #fff; text-align: center; margin-bottom: 20px;\r\n    }\r\n    .form-step { display: none; }\r\n    .form-step.active { display: block; }\r\n    .form-group { margin-bottom: 15px; }\r\n    .form-group label { display: block; margin-bottom: 5px; }\r\n    .form-group input, .form-group textarea, .form-group select {\r\n      width: 100%; padding: 10px;\r\n      border: 1px solid #ccc; border-radius: 6px;\r\n      color: #000; background: #fff; box-sizing: border-box;\r\n    }\r\n    .error-message { color: yellow; margin-top: 5px; font-size: 14px; }\r\n    .form-actions { text-align: center; margin-top: 20px; }\r\n    .form-actions button {\r\n      background: #fff; color: #92181B;\r\n      padding: 10px 25px; border: none; border-radius: 5px; cursor: pointer; margin: 0 5px;\r\n    }\r\n\r\n    \/* Phone inputs *\/\r\n    .phone-input {\r\n      display: grid; grid-template-columns: 1fr 2fr;\r\n      gap: 8px; align-items: center;\r\n    }\r\n    @media (max-width: 480px) { .phone-input { grid-template-columns: 1fr; } }\r\n\r\n    \/* Last step readable on dark *\/\r\n    .form-step:last-of-type input[type=\"url\"],\r\n    .form-step:last-of-type input[type=\"text\"],\r\n    .form-step:last-of-type input[type=\"color\"],\r\n    .form-step:last-of-type textarea { color: #fff !important; }\r\n\r\n    \/* Password tooltip *\/\r\n    .password-wrapper{ position: relative; display:flex; align-items:center; gap:8px; }\r\n    .pw-info-btn{\r\n      background:#fff; color:#92181B; border:none; cursor:pointer;\r\n      width:20px; height:20px; border-radius:50%; line-height:20px;\r\n      text-align:center; font-weight:700; padding:0; font-size:12px;\r\n    }\r\n    .pw-info-btn:focus{ outline:2px solid #fff; outline-offset:2px; }\r\n    .pw-tooltip{\r\n      position:absolute; top:100%; inset-inline-start:0; transform:translateY(6px);\r\n      min-width:200px; max-width:260px; background:#fff; color:#333; border:1px solid #ddd;\r\n      border-radius:6px; padding:6px 8px; box-shadow:0 4px 12px rgba(0,0,0,.1);\r\n      z-index:14; font-size:14px; line-height:1.4; display:none;\r\n    }\r\n    .pw-tooltip.show{ display:block; }\r\n\r\n    \/* Translation wrap *\/\r\n    .translation-wrap{\r\n      margin-top:18px; padding:12px; border-radius:8px;\r\n      text-align: center;\r\n      \/*background: rgba(255,255,255,.08); border:1px dashed rgba(255,255,255,.35);*\/\r\n    }\r\n    .translation-toggle{\r\n      background:#fff; color:#92181B; border:none; border-radius:6px; cursor:pointer;\r\n      padding:8px 14px; margin-bottom:10px;\r\n    }\r\n    .translation-box{ display:none; }\r\n    .translation-box.show{ display:block;\r\n    text-align:left}\r\n    #logo-preview-wrap{\r\n  margin-top:8px;\r\n  display:flex; align-items:center; gap:10px; flex-wrap:wrap;\r\n    background: #fff !important;\r\n    justify-content: center !important;\r\n}\r\n#logo-preview{\r\n   width: 200px;\r\n            height: auto !important;\r\n            border-radius: 50% !important;\r\n            object-fit: cover;\r\n            border: 1px solid #fff;\r\n            \r\n            margin-bottom: 15px;\r\n            \r\n  \r\n\r\n}\r\n\r\n#logo-hint{\r\n  font-size:14px; opacity:.9;\r\n      display: none;\r\n}\r\n  <\/style>\r\n\r\n  <form id=\"business-card-html-form\" method=\"post\" enctype=\"multipart\/form-data\" novalidate>\r\n    <h2>Add Business Card<\/h2>\r\n    <input type=\"hidden\" name=\"translation_of\" value=\"<?= isset($_GET['translation_of']) ? intval($_GET['translation_of']) : '' ?>\">\r\n\r\n    <!-- Step 1 -->\r\n    <div class=\"form-step active\">\r\n      <div class=\"form-group\">\r\n        <label for=\"f_name\">Full Name<\/label>\r\n        <input type=\"text\" name=\"f_name\" id=\"f_name\" required>\r\n      <\/div>\r\n      \r\n          <div class=\"form-group\">\r\n        <label for=\"f_name\">Company Name<\/label>\r\n        <input type=\"text\" name=\"company_name_en\" id=\"f_name\" required>\r\n      <\/div>\r\n\r\n      <!-- Mobile E.164 -->\r\n      <div class=\"form-group\">\r\n        <label for=\"mobile_local\">Mobile Number<\/label>\r\n        <div class=\"phone-input\">\r\n          <select id=\"dial_code\" aria-label=\"Country code\">\r\n            <option value=\"+971\">\ud83c\udde6\ud83c\uddea UAE +971<\/option>\r\n            <option value=\"+966\">\ud83c\uddf8\ud83c\udde6 Saudi +966<\/option>\r\n            <option value=\"+974\">\ud83c\uddf6\ud83c\udde6 Qatar +974<\/option>\r\n            <option value=\"+965\">\ud83c\uddf0\ud83c\uddfc Kuwait +965<\/option>\r\n            <option value=\"+973\">\ud83c\udde7\ud83c\udded Bahrain +973<\/option>\r\n            <option value=\"+968\">\ud83c\uddf4\ud83c\uddf2 Oman +968<\/option>\r\n            <option value=\"+962\">\ud83c\uddef\ud83c\uddf4 Jordan +962<\/option>\r\n            <option value=\"+961\">\ud83c\uddf1\ud83c\udde7 Lebanon +961<\/option>\r\n            <option value=\"+963\" selected>\ud83c\uddf8\ud83c\uddfe Syria +963<\/option>\r\n            <option value=\"+964\">\ud83c\uddee\ud83c\uddf6 Iraq +964<\/option>\r\n            <option value=\"+20\">\ud83c\uddea\ud83c\uddec Egypt +20<\/option>\r\n            <option value=\"+212\">\ud83c\uddf2\ud83c\udde6 Morocco +212<\/option>\r\n            <option value=\"+213\">\ud83c\udde9\ud83c\uddff Algeria +213<\/option>\r\n            <option value=\"+216\">\ud83c\uddf9\ud83c\uddf3 Tunisia +216<\/option>\r\n            <option value=\"+218\">\ud83c\uddf1\ud83c\uddfe Libya +218<\/option>\r\n            <option value=\"+967\">\ud83c\uddfe\ud83c\uddea Yemen +967<\/option>\r\n            <option value=\"+970\">\ud83c\uddf5\ud83c\uddf8 Palestine +970<\/option>\r\n            <option value=\"+249\">\ud83c\uddf8\ud83c\udde9 Sudan +249<\/option>\r\n            <option value=\"+31\">\ud83c\uddf3\ud83c\uddf1 Netherlands +31<\/option>\r\n            <option value=\"+44\">\ud83c\uddec\ud83c\udde7 UK +44<\/option>\r\n            <option value=\"+49\">\ud83c\udde9\ud83c\uddea Germany +49<\/option>\r\n            <option value=\"+33\">\ud83c\uddeb\ud83c\uddf7 France +33<\/option>\r\n            <option value=\"+39\">\ud83c\uddee\ud83c\uddf9 Italy +39<\/option>\r\n            <option value=\"+34\">\ud83c\uddea\ud83c\uddf8 Spain +34<\/option>\r\n            <option value=\"+1\">\ud83c\uddfa\ud83c\uddf8 USA +1<\/option>\r\n            <option value=\"+90\">\ud83c\uddf9\ud83c\uddf7 T\u00fcrkiye +90<\/option>\r\n            <option value=\"+98\">\ud83c\uddee\ud83c\uddf7 Iran +98<\/option>\r\n          <\/select>\r\n          <input type=\"tel\" id=\"mobile_local\" inputmode=\"numeric\" placeholder=\"e.g. 555555555\" autocomplete=\"tel\">\r\n        <\/div>\r\n        <input type=\"hidden\" name=\"mobile\" id=\"mobile\">\r\n      <\/div>\r\n\r\n      <div class=\"form-group\">\r\n        <label for=\"email\">Email Address<\/label>\r\n        <input type=\"email\" name=\"email\" id=\"email\" style=\"color:#fff\" required>\r\n      <\/div>\r\n\r\n      <div class=\"form-group\">\r\n        <label for=\"position\">Job Title<\/label>\r\n        <input type=\"text\" name=\"position\" id=\"position\" required>\r\n      <\/div>\r\n\r\n      <div class=\"form-group\">\r\n        <label for=\"password\">Password<\/label>\r\n        <div class=\"password-wrapper\">\r\n          <input type=\"password\" name=\"password\" id=\"password\" required>\r\n          <button type=\"button\" class=\"pw-info-btn\" aria-label=\"Password help\" aria-expanded=\"false\" aria-controls=\"pw-tip-en\">?<\/button>\r\n          <div class=\"pw-tooltip\" id=\"pw-tip-en\" role=\"tooltip\" aria-hidden=\"true\">\r\n            This password is required so you can edit your card later. Keep it safe.\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"form-actions\">\r\n        <button type=\"button\" onclick=\"nextStep()\">Next<\/button>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Step 2 -->\r\n    <div class=\"form-step\">\r\n      <div class=\"form-group\">\r\n        <label for=\"logo2\">Company Logo<\/label>\r\n        <input type=\"file\" name=\"logo2\" id=\"logo2\">\r\n        <div id=\"logo-preview-wrap\">\r\n<img id=\"logo-preview\" class=\"contact-avatar\" alt=\"Logo preview\" style=\"display:none;\">\r\n<\/div>\r\n      <\/div>\r\n\r\n      <div class=\"form-group\">\r\n        <label for=\"address\">Address<\/label>\r\n        <input type=\"text\" name=\"address\" id=\"address\">\r\n      <\/div>\r\n\r\n      <!-- Phone E.164 -->\r\n      <div class=\"form-group\">\r\n        <label for=\"phone_local\">Phone<\/label>\r\n        <div class=\"phone-input\">\r\n          <select id=\"phone_dial_code\" aria-label=\"Country code (phone)\">\r\n            <option value=\"+963\" selected>\ud83c\uddf8\ud83c\uddfe Syria +963<\/option>\r\n            <option value=\"+971\">\ud83c\udde6\ud83c\uddea UAE +971<\/option>\r\n            <option value=\"+966\">\ud83c\uddf8\ud83c\udde6 Saudi +966<\/option>\r\n            <option value=\"+974\">\ud83c\uddf6\ud83c\udde6 Qatar +974<\/option>\r\n            <option value=\"+965\">\ud83c\uddf0\ud83c\uddfc Kuwait +965<\/option>\r\n            <option value=\"+973\">\ud83c\udde7\ud83c\udded Bahrain +973<\/option>\r\n            <option value=\"+968\">\ud83c\uddf4\ud83c\uddf2 Oman +968<\/option>\r\n            <option value=\"+962\">\ud83c\uddef\ud83c\uddf4 Jordan +962<\/option>\r\n            <option value=\"+961\">\ud83c\uddf1\ud83c\udde7 Lebanon +961<\/option>\r\n            <option value=\"+964\">\ud83c\uddee\ud83c\uddf6 Iraq +964<\/option>\r\n            <option value=\"+20\">\ud83c\uddea\ud83c\uddec Egypt +20<\/option>\r\n            <option value=\"+212\">\ud83c\uddf2\ud83c\udde6 Morocco +212<\/option>\r\n            <option value=\"+213\">\ud83c\udde9\ud83c\uddff Algeria +213<\/option>\r\n            <option value=\"+216\">\ud83c\uddf9\ud83c\uddf3 Tunisia +216<\/option>\r\n            <option value=\"+218\">\ud83c\uddf1\ud83c\uddfe Libya +218<\/option>\r\n            <option value=\"+967\">\ud83c\uddfe\ud83c\uddea Yemen +967<\/option>\r\n            <option value=\"+970\">\ud83c\uddf5\ud83c\uddf8 Palestine +970<\/option>\r\n            <option value=\"+249\">\ud83c\uddf8\ud83c\udde9 Sudan +249<\/option>\r\n            <option value=\"+31\">\ud83c\uddf3\ud83c\uddf1 Netherlands +31<\/option>\r\n            <option value=\"+44\">\ud83c\uddec\ud83c\udde7 UK +44<\/option>\r\n            <option value=\"+49\">\ud83c\udde9\ud83c\uddea Germany +49<\/option>\r\n            <option value=\"+33\">\ud83c\uddeb\ud83c\uddf7 France +33<\/option>\r\n            <option value=\"+39\">\ud83c\uddee\ud83c\uddf9 Italy +39<\/option>\r\n            <option value=\"+34\">\ud83c\uddea\ud83c\uddf8 Spain +34<\/option>\r\n            <option value=\"+1\">\ud83c\uddfa\ud83c\uddf8 USA +1<\/option>\r\n            <option value=\"+90\">\ud83c\uddf9\ud83c\uddf7 T\u00fcrkiye +90<\/option>\r\n          <\/select>\r\n          <input type=\"tel\" id=\"phone_local\" inputmode=\"numeric\" placeholder=\"e.g. 11223344\" autocomplete=\"tel\" required>\r\n        <\/div>\r\n        <input type=\"hidden\" name=\"phone\" id=\"phone\">\r\n      <\/div>\r\n\r\n      <!-- Sister Companies -->\r\n      <br><center><h4 style=\"color:#fff\"><b>Sister Companies<\/b><\/h4><\/center>\r\n      <div id=\"sister-companies\">\r\n        <div class=\"company-entry\">\r\n          <div class=\"form-group\"><label>Company Name<\/label><input type=\"text\" name=\"sister_company_name[]\"><\/div>\r\n          <div class=\"form-group\"><label>Company Address<\/label><input type=\"text\" name=\"sister_company_address[]\"style=\"color:#fff\"><\/div>\r\n          <div class=\"form-group\"><label>Website URL<\/label><input type=\"url\" name=\"sister_company_website[]\" style=\"color:#fff\"><\/div>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"form-actions\"><button type=\"button\" onclick=\"addCompany()\">+ Add Another Sister Company<\/button><\/div>\r\n\r\n      <!-- \ud83d\udd3d Arabic Translation (moved here, right after Sister Companies) -->\r\n      <div class=\"translation-wrap\">\r\n        <button class=\"translation-toggle\" type=\"button\" id=\"toggle-ar-translation\">+ Add Arabic Translation (optional)<\/button>\r\n        <div id=\"ar-translation-box\" class=\"translation-box\">\r\n          <div class=\"form-group\"><label>\u0627\u0644\u0627\u0633\u0645 \u0627\u0644\u0643\u0627\u0645\u0644 (\u0628\u0627\u0644\u0639\u0631\u0628\u064a\u0629)<\/label><input type=\"text\" name=\"ar_f_name\" placeholder=\"\u0627\u0644\u0627\u0633\u0645 \u0627\u0644\u0643\u0627\u0645\u0644\"><\/div>\r\n          \r\n            <div class=\"form-group\"><label>\u0627\u0633\u0645 \u0627\u0644\u0634\u0631\u0643\u0629 (\u0628\u0627\u0644\u0639\u0631\u0628\u064a\u0629)<\/label><input type=\"text\" name=\"ar_company_name\" placeholder=\"\u0627\u0633\u0645 \u0627\u0644\u0634\u0631\u0643\u0629\"><\/div>\r\n            \r\n          <div class=\"form-group\"><label>\u0627\u0644\u0645\u0633\u0645\u0649 \u0627\u0644\u0648\u0638\u064a\u0641\u064a (\u0628\u0627\u0644\u0639\u0631\u0628\u064a\u0629)<\/label><input type=\"text\" name=\"ar_position\" placeholder=\"\u0627\u0644\u0645\u0633\u0645\u0649 \u0627\u0644\u0648\u0638\u064a\u0641\u064a\"><\/div>\r\n          <div class=\"form-group\"><label>\u0627\u0644\u0639\u0646\u0648\u0627\u0646 (\u0628\u0627\u0644\u0639\u0631\u0628\u064a\u0629)<\/label><textarea name=\"ar_address\" rows=\"2\" placeholder=\"\u0627\u0644\u0639\u0646\u0648\u0627\u0646\"><\/textarea><\/div>\r\n\r\n          <div class=\"form-group\">\r\n            <strong>\u0627\u0644\u0634\u0631\u0643\u0627\u062a \u0627\u0644\u0634\u0642\u064a\u0642\u0629 (\u0628\u0627\u0644\u0639\u0631\u0628\u064a\u0629):<\/strong>\r\n            <div id=\"ar-sister-companies\" style=\"margin-top:8px;\">\r\n              <div class=\"company-entry\" style=\"margin-bottom:12px;\">\r\n                <input type=\"text\" name=\"ar_sister_company_name[]\" placeholder=\"\u0627\u0633\u0645 \u0627\u0644\u0634\u0631\u0643\u0629\" style=\"width:100%;padding:10px;margin:5px 0;border:1px solid #ccc;border-radius:5px;\">\r\n                <input type=\"text\" name=\"ar_sister_company_address[]\" placeholder=\"\u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0634\u0631\u0643\u0629\" style=\"width:100%;padding:10px;margin:5px 0;border:1px solid #ccc;border-radius:5px;\">\r\n                <input type=\"url\"  name=\"ar_sister_company_website[]\" placeholder=\"\u0631\u0627\u0628\u0637 \u0627\u0644\u0645\u0648\u0642\u0639\" style=\"width:100%;padding:10px;margin:5px 0;border:1px solid #ccc;border-radius:5px;color:#fff\">\r\n              <\/div>\r\n            <\/div>\r\n            <button type=\"button\" id=\"add-ar-company\" style=\"margin-top:6px;background:#fff;color:#92181B;border:none;padding:6px 10px;border-radius:5px;\">+ \u0634\u0631\u0643\u0629 \u0623\u062e\u0631\u0649<\/button>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n      <!-- \/Arabic Translation -->\r\n\r\n      <div class=\"form-actions\">\r\n        <button type=\"button\" onclick=\"prevStep()\">Back<\/button>\r\n        <button type=\"button\" onclick=\"nextStep()\">Next<\/button>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- Step 3 (final) -->\r\n    <div class=\"form-step\">\r\n      <div class=\"form-group\"><label for=\"Website\">Website<\/label><input type=\"url\" name=\"Website\" id=\"Website\"><\/div>\r\n      <div class=\"form-group\"><label for=\"facebook\">Facebook<\/label><input type=\"url\" name=\"facebook\" id=\"facebook\"><\/div>\r\n      <div class=\"form-group\"><label for=\"linkedin\">LinkedIn<\/label><input type=\"url\" name=\"linkedin\" id=\"linkedin\"><\/div>\r\n      <div class=\"form-group\"><label for=\"instagram\">Instagram<\/label><input type=\"url\" name=\"instagram\" id=\"instagram\"><\/div>\r\n      <div class=\"form-group\"><label for=\"youtube\">YouTube<\/label><input type=\"url\" name=\"youtube\" id=\"youtube\"><\/div>\r\n\r\n      <div class=\"form-group\"><label for=\"font_color\">Font Color<\/label><input type=\"color\" name=\"font_color\" id=\"font_color\" value=\"#000000\"><\/div>\r\n      <div class=\"form-group\"><label for=\"bg_color\">Background Color<\/label><input type=\"color\" name=\"bg_color\" id=\"bg_color\" value=\"#000000\"><\/div>\r\n      <div class=\"form-group\"><label for=\"bg_color2\">Secondary Background Color<\/label><input type=\"color\" name=\"bg_color2\" id=\"bg_color2\" value=\"#ffffff\"><\/div>\r\n\r\n      <div class=\"form-group\">\r\n        <label for=\"location\">Location (Latitude, Longitude)<\/label>\r\n        <input type=\"text\" name=\"location\" id=\"location\" placeholder=\"e.g. 33.5138, 36.2765\" oninput=\"autoPreviewMap()\">\r\n        <div id=\"map-loader\" style=\"display:none;text-align:center;margin-top:10px;\">\u23f3 Loading map...<\/div>\r\n        <div id=\"map-preview\" style=\"margin-top:15px;text-align:center;\"><\/div>\r\n      <\/div>\r\n\r\n      <!-- Live font preview -->\r\n      <div class=\"form-group\">\r\n        <label for=\"font_family\">Font family (live preview)<\/label>\r\n        <select name=\"font_family\" id=\"font_family\">\r\n          <option value=\"Cairo\" selected>Cairo (default)<\/option>\r\n          <option value=\"Tajawal\">Tajawal<\/option>\r\n          <option value=\"Noto Kufi Arabic\">Noto Kufi Arabic<\/option>\r\n          <option value=\"Almarai\">Almarai<\/option>\r\n          <option value=\"IBM Plex Sans Arabic\">IBM Plex Sans Arabic<\/option>\r\n          <option value=\"Markazi Text\">Markazi Text<\/option>\r\n          <option value=\"Changa\">Changa<\/option>\r\n          <option value=\"Mada\">Mada<\/option>\r\n          <option value=\"Amiri\">Amiri (Serif)<\/option>\r\n          <option value=\"Reem Kufi\">Reem Kufi<\/option>\r\n          <option value=\"Lalezar\">Lalezar (Display)<\/option>\r\n          <option value=\"El Messiri\">El Messiri<\/option>\r\n          <option value=\"Scheherazade New\">Scheherazade New<\/option>\r\n          <option value=\"Lateef\">Lateef<\/option>\r\n          <option value=\"Noto Sans Arabic\">Noto Sans Arabic<\/option>\r\n          <option value=\"IBM Plex Sans\">IBM Plex Sans (Latin)<\/option>\r\n          <option value=\"Roboto\">Roboto<\/option>\r\n          <option value=\"Poppins\">Poppins<\/option>\r\n          <option value=\"Montserrat\">Montserrat<\/option>\r\n          <option value=\"Open Sans\">Open Sans<\/option>\r\n          <option value=\"Playfair Display\">Playfair Display (Serif)<\/option>\r\n        <\/select>\r\n      <\/div>\r\n\r\n      <div id=\"font-preview\" style=\"margin-top:10px;padding:12px;border-radius:8px;background:#ffffff;color:#000;text-align:center;\">\r\n        <div style=\"font-size:18px;margin-bottom:6px;\">Font preview<\/div>\r\n        <div id=\"preview-name\" style=\"font-size:22px; font-weight:700;\">Full Name<\/div>\r\n        <div id=\"preview-position\" style=\"font-size:16px; opacity:.9;\">Job Title<\/div>\r\n      <\/div>\r\n\r\n      <div class=\"form-actions\">\r\n        <button type=\"button\" onclick=\"prevStep()\">Back<\/button>\r\n        <button type=\"submit\" name=\"submit_business_card\">Submit<\/button>\r\n      <\/div>\r\n    <\/div>\r\n  <\/form>\r\n\r\n  <!-- ======= Scripts ======= -->\r\n\r\n  <!-- Map preview -->\r\n  <script>\r\n    let mapTimeout = null;\r\n    function autoPreviewMap() {\r\n      clearTimeout(mapTimeout);\r\n      const coords = document.getElementById(\"location\").value.trim();\r\n      const mapPreview = document.getElementById(\"map-preview\");\r\n      const loader = document.getElementById(\"map-loader\");\r\n      const regex = \/^-?\\d+(\\.\\d+)?\\s*,\\s*-?\\d+(\\.\\d+)?$\/;\r\n\r\n      if (regex.test(coords)) {\r\n        loader.style.display = \"block\";\r\n        mapPreview.innerHTML = \"\";\r\n        mapTimeout = setTimeout(() => {\r\n          const [lat, lng] = coords.split(',').map(x => x.trim());\r\n          const mapURL = `https:\/\/maps.google.com\/maps?q=${lat},${lng}&hl=en&z=16&output=embed`;\r\n          mapPreview.innerHTML = `<iframe width=\"100%\" height=\"250\" frameborder=\"0\" style=\"border:0;border-radius:10px;max-width:100%;\" src=\"${mapURL}\" allowfullscreen onload=\"document.getElementById('map-loader').style.display='none';\"><\/iframe>`;\r\n        }, 1000);\r\n      } else {\r\n        loader.style.display = \"none\";\r\n        mapPreview.innerHTML = \"\";\r\n      }\r\n    }\r\n  <\/script>\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n  const fileInput = document.getElementById('logo2');\r\n  const preview   = document.getElementById('logo-preview');\r\n  if (!fileInput || !preview) return;\r\n\r\n  fileInput.addEventListener('change', function () {\r\n    const file = this.files && this.files[0];\r\n    if (!file) {\r\n      preview.style.display = 'none';\r\n      preview.removeAttribute('src');\r\n      return;\r\n    }\r\n    const url = URL.createObjectURL(file);\r\n    preview.src = url;\r\n    preview.style.display = 'block';\r\n    \/\/ \u062a\u0646\u0638\u064a\u0641 \u0627\u0644\u0631\u0627\u0628\u0637 \u0628\u0639\u062f \u0627\u0644\u062a\u062d\u0645\u064a\u0644\r\n    preview.onload = () => URL.revokeObjectURL(url);\r\n  });\r\n});\r\n<\/script>\r\n\r\n  <!-- Sync Mobile E.164 -->\r\n  <script>\r\n    function syncMobile() {\r\n      const dial = document.getElementById('dial_code');\r\n      const localEl = document.getElementById('mobile_local');\r\n      const hidden = document.getElementById('mobile');\r\n      if (!dial || !localEl || !hidden) return;\r\n      let local = (localEl.value || '').replace(\/\\D\/g, '').replace(\/^0+\/, '');\r\n      hidden.value = (dial.value || '').trim() + local;\r\n    }\r\n    document.addEventListener('input', function(e) {\r\n      if (e.target && e.target.id === 'mobile_local') { e.target.value = e.target.value.replace(\/[^\\d]\/g, ''); syncMobile(); }\r\n      if (e.target && e.target.id === 'dial_code') { syncMobile(); }\r\n    });\r\n    document.addEventListener('change', function(e) {\r\n      if (e.target && e.target.id === 'dial_code') { syncMobile(); }\r\n    });\r\n    document.addEventListener('DOMContentLoaded', syncMobile);\r\n  <\/script>\r\n\r\n  <!-- Sync Phone E.164 -->\r\n  <script>\r\n    function syncPhone() {\r\n      const dial = document.getElementById('phone_dial_code');\r\n      const localEl = document.getElementById('phone_local');\r\n      const hidden = document.getElementById('phone');\r\n      if (!dial || !localEl || !hidden) return;\r\n      let local = (localEl.value || '').replace(\/\\D\/g, '').replace(\/^0+\/, '');\r\n      hidden.value = (dial.value || '').trim() + local;\r\n    }\r\n    document.addEventListener('input', function(e) {\r\n      if (e.target && e.target.id === 'phone_local') { e.target.value = e.target.value.replace(\/[^\\d]\/g, ''); syncPhone(); }\r\n      if (e.target && e.target.id === 'phone_dial_code') { syncPhone(); }\r\n    });\r\n    document.addEventListener('change', function(e) {\r\n      if (e.target && e.target.id === 'phone_dial_code') { syncPhone(); }\r\n    });\r\n    document.addEventListener('DOMContentLoaded', syncPhone);\r\n  <\/script>\r\n\r\n  <!-- Steps + validation (same logic as AR) -->\r\n  <script>\r\n    const steps = document.querySelectorAll('.form-step');\r\n    let currentStep = 0;\r\n\r\n    function showStep(index) {\r\n      steps.forEach((step, i) => step.classList.toggle('active', i === index));\r\n      const formContainer = document.getElementById('business-card-form');\r\n      if (formContainer) formContainer.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n    }\r\n\r\n    function isStepValid(idx) {\r\n      switch (idx) {\r\n        case 0: return typeof validateStep1 === 'function' ? validateStep1() : true;\r\n        case 1: return typeof validateStep2 === 'function' ? validateStep2() : true;\r\n        case 2: return typeof validateStep3 === 'function' ? validateStep3() : true;\r\n        default: return true;\r\n      }\r\n    }\r\n\r\n    function nextStep() {\r\n      if (!isStepValid(currentStep)) return;\r\n      if (currentStep < steps.length - 1) { currentStep++; showStep(currentStep); }\r\n    }\r\n\r\n    function prevStep() {\r\n      if (currentStep > 0) { currentStep--; showStep(currentStep); }\r\n    }\r\n  <\/script>\r\n\r\n  <!-- Add sister company -->\r\n  <script>\r\n    function addCompany() {\r\n      const container = document.getElementById('sister-companies');\r\n      const entry = document.createElement('div');\r\n      entry.classList.add('company-entry');\r\n      entry.innerHTML = `\r\n        <hr>\r\n        <div class=\"form-group\"><label>Company Name<\/label><input type=\"text\" name=\"sister_company_name[]\"><\/div>\r\n        <div class=\"form-group\"><label>Company Address<\/label><input type=\"text\" name=\"sister_company_address[]\"><\/div>\r\n        <div class=\"form-group\"><label>Website URL<\/label><input type=\"url\" name=\"sister_company_website[]\" style=\"color:#fff\"><\/div>\r\n      `;\r\n      container.appendChild(entry);\r\n    }\r\n  <\/script>\r\n\r\n  <!-- Translation toggles -->\r\n  <script>\r\n    document.addEventListener('DOMContentLoaded', function(){\r\n      const toggleBtn = document.getElementById('toggle-ar-translation');\r\n      const box = document.getElementById('ar-translation-box');\r\n      const addBtn = document.getElementById('add-ar-company');\r\n      const wrap = document.getElementById('ar-sister-companies');\r\n      if (toggleBtn && box) toggleBtn.addEventListener('click', () => box.classList.toggle('show'));\r\n      if (addBtn && wrap) {\r\n        addBtn.addEventListener('click', () => {\r\n          const entry = document.createElement('div');\r\n          entry.className = 'company-entry';\r\n          entry.style.marginBottom = '12px';\r\n          entry.innerHTML = `\r\n            <hr>\r\n            <input type=\"text\" name=\"ar_sister_company_name[]\" placeholder=\"\u0627\u0633\u0645 \u0627\u0644\u0634\u0631\u0643\u0629\" style=\"width:100%;padding:10px;margin:5px 0;border:1px solid #ccc;border-radius:5px;\">\r\n            <input type=\"text\" name=\"ar_sister_company_address[]\" placeholder=\"\u0639\u0646\u0648\u0627\u0646 \u0627\u0644\u0634\u0631\u0643\u0629\" style=\"width:100%;padding:10px;margin:5px 0;border:1px solid #ccc;border-radius:5px;\">\r\n            <input type=\"url\"  name=\"ar_sister_company_website[]\" placeholder=\"\u0631\u0627\u0628\u0637 \u0627\u0644\u0645\u0648\u0642\u0639\" style=\"width:100%;padding:10px;margin:5px 0;border:1px solid #ccc;border-radius:5px;\">\r\n          `;\r\n          wrap.appendChild(entry);\r\n        });\r\n      }\r\n    });\r\n  <\/script>\r\n\r\n  <!-- Validations (EN texts) -->\r\n  <script>\r\n    function showError(input, message) {\r\n      if (!input) return;\r\n      let error = input.nextElementSibling;\r\n      if (!error || !error.classList.contains(\"error-message\")) {\r\n        error = document.createElement(\"div\");\r\n        error.className = \"error-message\";\r\n        input.parentNode.appendChild(error);\r\n      }\r\n      error.textContent = message;\r\n    }\r\n    function removeError(input) {\r\n      if (!input) return;\r\n      const error = input.nextElementSibling;\r\n      if (error && error.classList.contains(\"error-message\")) error.remove();\r\n    }\r\n    function validateStep1() {\r\n      let valid = true;\r\n      const name = document.getElementById(\"f_name\");\r\n      if (!name.value.trim()) { showError(name, \"Full name is required\"); valid = false; } else { removeError(name); }\r\n\r\n      const local  = document.getElementById(\"mobile_local\");\r\n      const mobileHidden = document.getElementById(\"mobile\");\r\n      syncMobile();\r\n      const e164 = \/^\\+\\d{6,15}$\/;\r\n      if (!local.value.trim()) {\r\n        showError(local, \"Local mobile number is required\"); valid = false;\r\n      } else if (!e164.test(mobileHidden.value)) {\r\n        showError(local, \"Invalid phone number (check country code and digits)\"); valid = false;\r\n      } else { removeError(local); }\r\n\r\n      const email = document.getElementById(\"email\");\r\n      const emailRegex = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\r\n      if (!email.value.trim()) { showError(email, \"Email is required\"); valid = false; }\r\n      else if (!emailRegex.test(email.value.trim())) { showError(email, \"Invalid email format\"); valid = false; }\r\n      else { removeError(email); }\r\n\r\n      const position = document.getElementById(\"position\");\r\n      if (!position.value.trim()) { showError(position, \"Job title is required\"); valid = false; } else { removeError(position); }\r\n\r\n      const password = document.getElementById(\"password\");\r\n      if (!password.value.trim()) { showError(password, \"Password is required\"); valid = false; } else { removeError(password); }\r\n\r\n      return valid;\r\n    }\r\n   function validateStep2() {\r\n    let valid = true;\r\n\r\n    const logo = document.getElementById(\"logo2\");\r\n    if (!logo || logo.files.length === 0) {\r\n      showError(logo, \"Please upload a logo\");\r\n      valid = false;\r\n    } else { removeError(logo); }\r\n\r\n    const address = document.getElementById(\"address\");\r\n    if (!address.value.trim()) {\r\n      showError(address, \"Address is required\");\r\n      valid = false;\r\n    } else { removeError(address); }\r\n\r\n    \/\/ \u2705 \u062a\u062d\u0642\u0642 \u0627\u0644\u0647\u0627\u062a\u0641: \u0639\u0644\u0649 \u0627\u0644\u062d\u0642\u0644 \u0627\u0644\u0638\u0627\u0647\u0631 + \u0645\u0632\u0627\u0645\u0646\u0629 + E.164\r\n    const phoneLocal  = document.getElementById(\"phone_local\"); \/\/ \u0627\u0644\u062d\u0642\u0644 \u0627\u0644\u0630\u064a \u064a\u0643\u062a\u0628 \u0641\u064a\u0647 \u0627\u0644\u0645\u0633\u062a\u062e\u062f\u0645\r\n    const phoneHidden = document.getElementById(\"phone\");       \/\/ \u0627\u0644\u062d\u0642\u0644 \u0627\u0644\u0645\u062e\u0641\u064a \u0627\u0644\u0630\u064a \u064a\u0631\u0633\u0644 \u0644\u0644\u0633\u064a\u0631\u0641\u0631\r\n    syncPhone();  \/\/ \u062a\u0623\u0643\u062f \u0645\u0646 \u062a\u062d\u062f\u064a\u062b \u0627\u0644\u0642\u064a\u0645\u0629 \u0627\u0644\u0645\u062e\u0641\u064a\u0629 \u0642\u0628\u0644 \u0627\u0644\u0641\u062d\u0635\r\n\r\n    const e164 = \/^\\+\\d{6,15}$\/;\r\n    if (!phoneLocal.value.trim()) {\r\n      showError(phoneLocal, \"Phone number is required\");\r\n      valid = false;\r\n    } else if (!e164.test(phoneHidden.value)) {\r\n      showError(phoneLocal, \"Invalid phone number (check country code and digits)\");\r\n      valid = false;\r\n    } else {\r\n      removeError(phoneLocal);\r\n    }\r\n\r\n    \/\/ (\u0627\u062e\u062a\u064a\u0627\u0631\u064a) \u0627\u0644\u062a\u0631\u0643\u064a\u0632 \u0639\u0644\u0649 \u0623\u0648\u0644 \u062d\u0642\u0644 \u0628\u0647 \u062e\u0637\u0623\r\n    if (!valid) {\r\n      const firstErr = document.querySelector('.error-message');\r\n      if (firstErr?.previousElementSibling?.focus) {\r\n        firstErr.previousElementSibling.focus();\r\n      }\r\n    }\r\n\r\n    return valid;\r\n  }\r\n    function validateStep3() {\r\n      let valid = true;\r\n      const fontColor = document.getElementById(\"font_color\");\r\n      const bgColor   = document.getElementById(\"bg_color\");\r\n      const bgColor2  = document.getElementById(\"bg_color2\");\r\n      if (!fontColor.value.trim()) { showError(fontColor, \"Font color is required\"); valid = false; } else { removeError(fontColor); }\r\n      if (!bgColor.value.trim())   { showError(bgColor, \"Background color is required\"); valid = false; } else { removeError(bgColor); }\r\n      if (!bgColor2.value.trim())  { showError(bgColor2, \"Secondary background color is required\"); valid = false; } else { removeError(bgColor2); }\r\n      return valid;\r\n    }\r\n  <\/script>\r\n\r\n  <!-- Password tooltip behavior -->\r\n  <script>\r\n    document.addEventListener('DOMContentLoaded', function () {\r\n      const infoBtn = document.querySelector('.pw-info-btn');\r\n      const tip     = document.getElementById('pw-tip-en');\r\n      if (!infoBtn || !tip) return;\r\n      function openTip(){ tip.classList.add('show'); tip.setAttribute('aria-hidden','false'); infoBtn.setAttribute('aria-expanded','true'); }\r\n      function closeTip(){ tip.classList.remove('show'); tip.setAttribute('aria-hidden','true'); infoBtn.setAttribute('aria-expanded','false'); }\r\n      infoBtn.addEventListener('click', function(e){ e.preventDefault(); tip.classList.contains('show') ? closeTip() : openTip(); });\r\n      document.addEventListener('click', function(e){ if (tip.classList.contains('show') && !tip.contains(e.target) && !infoBtn.contains(e.target)) closeTip(); });\r\n      document.addEventListener('keydown', function(e){ if (e.key === 'Escape' && tip.classList.contains('show')) { closeTip(); infoBtn.focus(); } });\r\n    });\r\n  <\/script>\r\n\r\n  <!-- Live font preview -->\r\n  <script>\r\n    const FONT_STACKS = {\r\n      \"Cairo\": \"'Cairo', sans-serif\",\r\n      \"Tajawal\": \"'Tajawal', sans-serif\",\r\n      \"Noto Kufi Arabic\": \"'Noto Kufi Arabic', sans-serif\",\r\n      \"Almarai\": \"'Almarai', sans-serif\",\r\n      \"IBM Plex Sans Arabic\": \"'IBM Plex Sans Arabic', sans-serif\",\r\n      \"Markazi Text\": \"'Markazi Text', serif\",\r\n      \"Changa\": \"'Changa', sans-serif\",\r\n      \"Mada\": \"'Mada', sans-serif\",\r\n      \"Amiri\": \"'Amiri', serif\",\r\n      \"Reem Kufi\": \"'Reem Kufi', sans-serif\",\r\n      \"Lalezar\": \"'Lalezar', cursive\",\r\n      \"El Messiri\": \"'El Messiri', sans-serif\",\r\n      \"Scheherazade New\": \"'Scheherazade New', serif\",\r\n      \"Lateef\": \"'Lateef', serif\",\r\n      \"Noto Sans Arabic\": \"'Noto Sans Arabic', sans-serif\",\r\n      \"IBM Plex Sans\": \"'IBM Plex Sans', sans-serif\",\r\n      \"Roboto\": \"'Roboto', sans-serif\",\r\n      \"Poppins\": \"'Poppins', sans-serif\",\r\n      \"Montserrat\": \"'Montserrat', sans-serif\",\r\n      \"Open Sans\": \"'Open Sans', sans-serif\",\r\n      \"Playfair Display\": \"'Playfair Display', serif\",\r\n    };\r\n    function applyFontPreview() {\r\n      const select  = document.getElementById('font_family');\r\n      const preview = document.getElementById('font-preview');\r\n      if (!select || !preview) return;\r\n      const ff = FONT_STACKS[select.value] || FONT_STACKS['Cairo'];\r\n      preview.style.fontFamily = ff;\r\n      const fc = document.getElementById('font_color')?.value || '#000000';\r\n      preview.style.color = fc;\r\n      const name = document.getElementById('f_name')?.value || 'Full Name';\r\n      const pos  = document.getElementById('position')?.value || 'Job Title';\r\n      const pnEl = document.getElementById('preview-name');\r\n      const ppEl = document.getElementById('preview-position');\r\n      if (pnEl) pnEl.textContent = name;\r\n      if (ppEl) ppEl.textContent = pos;\r\n    }\r\n    document.addEventListener('DOMContentLoaded', () => {\r\n      applyFontPreview();\r\n      const fontSel = document.getElementById('font_family');\r\n      const colorIn = document.getElementById('font_color');\r\n      const nameIn  = document.getElementById('f_name');\r\n      const posIn   = document.getElementById('position');\r\n      if (fontSel) { fontSel.addEventListener('change', applyFontPreview); fontSel.addEventListener('input', applyFontPreview); }\r\n      if (colorIn) { colorIn.addEventListener('change', applyFontPreview); colorIn.addEventListener('input', applyFontPreview); }\r\n      if (nameIn)  nameIn.addEventListener('input', applyFontPreview);\r\n      if (posIn)   posIn.addEventListener('input', applyFontPreview);\r\n    });\r\n  <\/script>\r\n\r\n  <!-- Disable Enter submit -->\r\n  <script>\r\n    document.addEventListener('DOMContentLoaded', function () {\r\n      const formEl = document.getElementById('business-card-html-form');\r\n      if (!formEl) return;\r\n      formEl.addEventListener('keydown', function (e) {\r\n        if (e.key === 'Enter') { e.preventDefault(); }\r\n      });\r\n    });\r\n  <\/script>\r\n<\/div>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Add Business Card<\/p>\n","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_joinchat":[],"footnotes":""},"class_list":["post-6042","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.shiblymedia.net\/en\/wp-json\/wp\/v2\/pages\/6042","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.shiblymedia.net\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.shiblymedia.net\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.shiblymedia.net\/en\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.shiblymedia.net\/en\/wp-json\/wp\/v2\/comments?post=6042"}],"version-history":[{"count":20,"href":"https:\/\/www.shiblymedia.net\/en\/wp-json\/wp\/v2\/pages\/6042\/revisions"}],"predecessor-version":[{"id":6515,"href":"https:\/\/www.shiblymedia.net\/en\/wp-json\/wp\/v2\/pages\/6042\/revisions\/6515"}],"wp:attachment":[{"href":"https:\/\/www.shiblymedia.net\/en\/wp-json\/wp\/v2\/media?parent=6042"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}