<div class="form-group row">
    <label class="col-sm-2 col-form-label" for="smsApiKey">api key</label>
    <div class="col-sm-10">
        <input type="text" name="sms_settings[api_key]" class="form-control" id="smsApiKey"
               placeholder="api key را وارد کنید" value="{{ $settings['api_key'] ?? '' }}"/>
    </div>
</div>
<div class="form-group row">
    <label class="col-sm-2 col-form-label" for="smsNumber">شماره</label>
    <div class="col-sm-10">
        <input type="text" name="sms_settings[number]" class="form-control" id="smsNumber"
               placeholder="شماره ای که قصد ارسال پیامک از آن دارید را وارد کنید"
               value="{{ $settings['number'] ?? '' }}"/>
    </div>
</div>
<div class="form-group row">
    <label class="col-sm-2 col-form-label">
        استفاده از پترن
        <small class="form-text text-primary d-inline" data-toggle="modal" data-target="#smsPatternsModal"
               style="cursor: pointer">(راهنما)</small>
    </label>
    <div class="col-sm-10 p-1 pl-2">
        <input type="checkbox" id="usePatterns" name="sms_settings[send_by_patterns]"
               @if(!empty($settings['send_by_patterns'])) checked @endif data-plugin="switchery" data-size="small"
               data-color="#1AB394" data-secondary-color="#ED5565" value="1"/>
    </div>
</div>
<div class="row mb-2" id="patternsSection" @if(empty($settings['send_by_patterns'])) style="display:none" @endif>
    <div class="col-sm-3">
        <h5>تیکت جدید</h5>
        <input type="text" class="form-control mb-1" name="sms_settings[patterns][ticketCreate][code]"
               value="{{ $settings['patterns']['ticketCreate']['code'] ?? '' }}" placeholder="کد پترن">
        <textarea class="form-control mb-1" name="sms_settings[patterns][ticketCreate][text]" placeholder="متن پترن"
                  rows="5">{{ $settings['patterns']['ticketCreate']['text'] ?? '' }}</textarea>
        <code onclick="copyTextToClipboard('{:ticketId}')"
              class="pattern-code badge badge-primary font-13 font-weight-medium">{:ticketId}</code>
        <code onclick="copyTextToClipboard('{:ticketSubject}')"
              class="pattern-code badge badge-primary font-13 font-weight-medium">{:ticketSubject}</code>
    </div>
    <div class="col-sm-3">
        <h5>پاسخ پشتیبانان</h5>
        <input type="text" class="form-control mb-1" name="sms_settings[patterns][staffReply][code]"
               value="{{ $settings['patterns']['staffReply']['code'] ?? '' }}" placeholder="کد پترن">
        <textarea class="form-control mb-1" name="sms_settings[patterns][staffReply][text]" placeholder="متن پترن"
                  rows="5">{{ $settings['patterns']['staffReply']['text'] ?? '' }}</textarea>
        <code onclick="copyTextToClipboard('{:ticketId}')"
              class="pattern-code badge badge-primary font-13 font-weight-medium">{:ticketId}</code>
        <code onclick="copyTextToClipboard('{:ticketSubject}')"
              class="pattern-code badge badge-primary font-13 font-weight-medium">{:ticketSubject}</code>
    </div>
    <div class="col-sm-3">
        <h5>پاسخ کاربران</h5>
        <input type="text" class="form-control mb-1" name="sms_settings[patterns][userReply][code]"
               value="{{ $settings['patterns']['userReply']['code'] ?? '' }}" placeholder="کد پترن">
        <textarea class="form-control mb-1" name="sms_settings[patterns][userReply][text]" placeholder="متن پترن"
                  rows="5">{{ $settings['patterns']['userReply']['text'] ?? '' }}</textarea>
        <code onclick="copyTextToClipboard('{:ticketId}')"
              class="pattern-code badge badge-primary font-13 font-weight-medium">{:ticketId}</code>
        <code onclick="copyTextToClipboard('{:ticketSubject}')"
              class="pattern-code badge badge-primary font-13 font-weight-medium">{:ticketSubject}</code>
    </div>
    <div class="col-sm-3">
        <h5>ثبت نام</h5>
        <input type="text" class="form-control mb-1" name="sms_settings[patterns][userRegister][code]"
               value="{{ $settings['patterns']['userRegister']['code'] ?? '' }}" placeholder="کد پترن">
        <textarea class="form-control mb-1" name="sms_settings[patterns][userRegister][text]" placeholder="متن پترن"
                  rows="5">{{ $settings['patterns']['userRegister']['text'] ?? '' }}</textarea>
        <code onclick="copyTextToClipboard('{:code}')"
              class="pattern-code badge badge-primary font-13 font-weight-medium">{:code}</code>
    </div>
</div>


<x-modal id="smsPatternsModal" title="راهنمای استفاده از پترن‌ها" size="modal-lg">
    <h4>ارسال توسط پترن چیست؟</h4>
    <p>باتوجه به اینکه بسیاری از کاربران امروزه پیامک های تبلیغاتی خود را مسدود می‌کنند این امکان وجود دارد که پیامک های
        ارسالی شما (مانند پیامک های اطلاع رسانی تیکت ها و...) توسط کاربر دریافت نشود(بلاک شود).</p>
    <p>
        برای اینکه کاربران که پیامک‌های تبلیغاتی خود را مسدود کرده‌اند قادر به دریافت پیامک‌های ارسالی باشند می‌بایست یک
        خط خدماتی تهیه کنید.
        باتوجه به اینکه روند دریافت خطوط خدماتی پیچیده و طولانی می‌باشد و همچنین خطوط خدماتی تنها به افراد حقوقی اعطا
        می‌گردد
        برخی از سامانه های پیامکی جهت رفع این مورد اقدام به ارائه خدمات تحت
        عنوان «ارسال توسط پترن» و یا «ارسال از خطوط خدماتی اشتراکی» می‌کنند.
        توسط این قابلیت کاربران سامانه‌های پیامکی قادر خواهند بود تا با تعریف کردن الگو(پترن)هایی در سامانه های پیامکی
        خود از این قابلیت بهره‌مند شوند.
        توجه داشته باشید پترن‌ها می‌بایست مطابق قوانین سامانه پیامکی تعریف شده و به تایید آنها برسند.
    </p>
    <h4>چگونه می‌شود از این قابلیت در پاترونیک استفاده کرد؟</h4>
    <p>
        جهت استفاده از امکانات ارسال با پترن می‌بایست پترن‌های خود را در سامانه‌هایی که پنل آنها کاوه نگار است ثبت کنید
        و پس از تایید شدن پترن‌ها می‌بایست اطلاعات پترن‌ها اعم از کد پترن و متن پترن(مطابق راهنما) در بخش های مربوطه
        وارد کنید.
    </p>
    <h4>راهنمای عمومی تنظیمات پترن‌ها</h4>
    <p>
        پس از فعالسازی گزینه «استفاده از پترن» قسمت مربوطه برای وارد کردن تنظیمات نمایش داده خواهد شد.
        هر پترن شامل یک کد و متن می‌باشد که در سامانه پیامکی شما در جدول مربوطه و در ستون‌های «کد پترن» و «متن پترن»
        نمایش داده می‌شوند.
        در پاترونیک 4 نوع پترن تعریف شده است و بدیهی است که جهت کارکرد صحیح سامانه پر کردن تمام 4 قسمت مربوطه به همراه
        کد و متن الزامی می‌باشد.
        پس از اضافه کردن پترن‌ها در سامانه پیامکی و تایید شدن آنها ، «کد پترن» و «متن پترن» را وارد کنید.
    </p>
    <h4>راهنمای قراردان متغیر در متن پترن‌ها</h4>
    <div>
        شما می‌توانید در متن پترن ها تنها از متغیرهایی که در پایین هر قسمت در مستطیل‌های آبی ذکر شده است استفاده کنید.
        فلذا پیش از تعریف متن پترن‌ها در سامانه پیامکی به متغیرهای موجود برای هر پترن دقت کنید.
        <strong class="text-pink">با کلیک بروی کادر متغیرها می‌توانید آنها را کپی کنید.</strong>
        باتوجه به استاندارد سامانه کاوه نگار برای تعریف متغیرها در متن پترن شما می‌بایست متغیر هارا با عبارت %token تعریف کنید.
        در حال حاضر کاوه نگار تنها مجوز استفاده از نهایتا ۳ عدد متغیر در متن پیامک را می‌دهد که به ترتیب باید %token,%token2,%token3 باشند.
        لزومی به استفاده از هر ۳ توکن ندارید و میتوانید باتوجه به نیاز خود تعداد توکن‌ها را انتخاب کنید.
        مثلا برای تعریف پترن پیامک تایید شماره همراه می‌توان از مثال زیر استفاده کرد:
        <br/>
        <span class="text-pink">
                کاربر گرامی کد تایید شما %token می‌باشد
            </span>
        <br>
        <h5>متن پترن‌ها را به چه شکل باید ذخیره کنیم تا متغیرهای داخل آن شناسایی شوند؟</h5>
        <p> پس از آنکه پترن در سامانه پیامکی تایید شد برای قرار دادن متن پترن در پاترونیک متغیرهای خود را با روش زیر
            جایگزین کنید:
        </p>
        <ul class="pl-3">
            <li>متغیرهای متن پترن‌ها در پاترونیک به صورت <code>{:var}</code> تعریف می‌شوند</li>
            <li>متغیرهای موجود در متن سامانه پیامکی را با فرمت ذکر شده با متغیرهای پاترونیک جایگزین کنید</li>
        </ul>
        <strong>مثال</strong>
        <p>
            به عنوان نمونه برای پترن ثبت‌نام کاربران تنها یک متغیر با نام code موجود می‌باشد که همان کد تایید ارسالی به
            شماره همراه کاربر است.
            پس برای نمونه‌ای که در بخش پیشین ذکر شده بود متن پترن در پاترونیک به صورت زیر است:
            <br>
            <span class="text-pink">کاربر گرامی کد تایید شما {:code} می‌باشد</span>
        </p>
        <h4>مثال‌هایی از متن پترن‌ها</h4>
        <div>
            <div class="bg-dark rounded text-white p-2 mb-1">
                <p class="mb-1">متن پترن در سامانه پیامکی: پشتیبان محترم برای تیکت با شناسه %token یک پاسخ جدید
                    دریافت شد.</p>
                <p class="mb-0">متن پترن در پاترونیک: پشتیبان محترم برای تیکت با شناسه {:ticketId} یک پاسخ جدید دریافت
                    شد.</p>
            </div>
            <div class="bg-dark rounded text-white p-2">
                <p class="mb-1">متن پترن در سامانه پیامکی: کاربر گرامی تیکت شما با شناسه %token و موضوع
                    %token2 پاسخ جدیدی دریافت کرد.</p>
                <p class="mb-0">متن پترن در پاترونیک: کاربر گرامی تیکت شما با شناسه {:ticketId} و موضوع {:ticketSubject}
                    پاسخ جدیدی دریافت کرد.</p>
            </div>
        </div>
        <div class="alert alert-warning mt-1">
            اگر توکن حاوی خط جدید،فاصله، UnderLine یا جداکننده باشد کاوه نگار پیامک را ارسال نمیکند.بنابراین چنانچه از متغیر «موضوع تیکت» استفاده کرده‌اید برای اینکه ارسال پیامک دچار ایراد نشود تمامی فاصله‌ها با نیم فاصله جایگزین می‌شوند.
        </div>
    </div>
</x-modal>