@extends('backend.master')
@section('title')
    এসএমএস রুম
@endsection
@section('body')
    @if(Auth::user()->user_type == 0 || Auth::user()->user_type == 1 || Auth::user()->user_type == 4 || (Auth::user()->user_type == 2 && strpos(Auth::user()->permission, 'n') !== false) || (Auth::user()->user_type == 2 && strpos(Auth::user()->permission, 'v') !== false) || (Auth::user()->user_type == 2 && strpos(Auth::user()->permission, 'w') !== false) || (Auth::user()->user_type == 2 && strpos(Auth::user()->permission, 'x') !== false) || (Auth::user()->user_type == 2 && strpos(Auth::user()->permission, 'X') !== false) || (Auth::user()->user_type == 2 && strpos(Auth::user()->permission, 'Y') !== false) || (Auth::user()->user_type == 5 && strpos(Auth::user()->permission, 'n') !== false))
        <!-- start page title -->
        <div class="row">
            <div class="col-12">
                <div class="page-title-box d-flex align-items-center justify-content-between">
                    <h4 class="mb-0 font-size-18">এসএমএস রুম</h4>
                    <div class="page-title-right">
                        <ol class="breadcrumb m-0">
                            <ol class="breadcrumb m-0">
                                <li class="breadcrumb-item"><a href="{{ route('sms.index') }}">এসএমএস রুম</a></li>
                                <li class="breadcrumb-item active">এসএমএস রুম</li>
                            </ol>
                        </ol>
                    </div>
                </div>
            </div>
        </div>
        <!-- end page title -->
        <div class="row">
            <div class="col-md-7  col-sm-12">
                <div class="card">
                    <div class="card-body">
                        <h5 class="text-center">এসএমএস সেন্ড করুন</h5>
                        {{ Form::open(['route'=>'sms.store','method'=>'POST', 'class'=>'needs-validation', 'novalidate']) }}
                        <div class="form-group row mb-2">
                            <label for="sms_type" class="col-form-label">এসএমএস টাইপ<span class="required">*</span></label>
                            <select class="form-control select2" name="sms_type" id="sms_type">
                                <option style="color: red" value="">&mdash; চিহ্নিত করুন &mdash;</option>
                                @if(Auth::user()->user_type == 0 || Auth::user()->user_type == 1 || (Auth::user()->user_type == 2 && strpos(Auth::user()->permission, 'u') !== false))
                                    <option value="1">Static SMS</option>
                                @endif
                                @if(Auth::user()->user_type == 0 || Auth::user()->user_type == 1 || (Auth::user()->user_type == 2 && strpos(Auth::user()->permission, 'v') !== false))
                                    <option value="2">Active Citizen</option>
                                @endif
                                @if(Auth::user()->user_type == 0 || Auth::user()->user_type == 1 || (Auth::user()->user_type == 2 && strpos(Auth::user()->permission, 'w') !== false))
                                    <option value="3">Trade Licences</option>
                                @endif
                                @if(Auth::user()->user_type == 0 || Auth::user()->user_type == 1 || (Auth::user()->user_type == 2 && strpos(Auth::user()->permission, 'x') !== false))
                                    <option value="4">Tax</option>
                                @endif
                                @if(Auth::user()->user_type == 0 || Auth::user()->user_type == 1 || (Auth::user()->user_type == 2 && strpos(Auth::user()->permission, 'X') !== false))
                                    <option value="5">Selected Council</option>
                                @endif
                                @if(Auth::user()->user_type == 0 || Auth::user()->user_type == 1 || (Auth::user()->user_type == 2 && strpos(Auth::user()->permission, 'Y') !== false))
                                    <option value="6">Employee</option>
                                @endif
                                @if(Auth::user()->user_type == 4 || (Auth::user()->user_type == 5 && strpos(Auth::user()->permission, 'n') !== false))
                                    <option value="7">Water Client</option>
                                @endif
                                @if(Auth::user()->user_type == 4 || (Auth::user()->user_type == 5 && strpos(Auth::user()->permission, 'n') !== false))
                                    <option value="8">Water Bill</option>
                                @endif
                            </select>
                        </div>
                        <div class="active_citizenDiv" style="display: none">
                            <div class="form-group row mb-2">
                                <label for="active_citizen" class="col-form-label">Citizen send type<span class="required">*</span></label>
                                <select class="form-control select2" name="active_citizen" required disabled id="active_citizen">
                                    <option style="color: red" value="">&mdash; চিহ্নিত করুন &mdash;</option>
                                    <option value="1">All</option>
                                    <option value="2">Word Wise</option>
                                </select>
                            </div>
                            <div class="form-group row mb-2">
                                <label for="citizen_tag_value" class="col-form-label"> Available Tag</label>
                                <select class="form-control select2" name="citizen_tag_value" disabled id="citizen_tag_value">
                                    <option style="color: red" value="">&mdash; চিহ্নিত করুন &mdash;</option>
                                    <option value="{bangla_name}">নাম (বাংলায়)</option>
                                    <option value="{english_name}">নাম (ইংরেজিতে)</option>
                                    <option value="{national_id}">এনআইডি</option>
                                    <option value="{birth_registration}">জন্ম নিবন্ধন</option>
                                    <option value="{date_of_birth}">জন্ম তারিখ</option>
                                    <option value="{gender}">লিঙ্গ</option>
                                    <option value="{en_father_name}">পিতার নাম (ইংরেজিতে)</option>
                                    <option value="{bn_father_name}">পিতার নাম (বাংলায়)</option>
                                    <option value="{en_mother_name}">মাতার নাম (ইংরেজিতে)</option>
                                    <option value="{bn_mother_name}">মাতার নাম (বাংলায়)</option>
                                    <option value="{en_Husband_name}">স্বামীর নাম (ইংরেজিতে)</option>
                                    <option value="{bn_Husband_name}">স্বামীর নাম (বাংলায়)</option>
                                    <option value="{p_en_address}">ঠিকানা (ইংরেজিতে)</option>
                                    <option value="{p_bn_address}">ঠিকানা (বাংলায়)</option>
                                    <option value="{p_en_word}">ওয়ার্ড (ইংরেজিতে)</option>
                                    <option value="{p_bn_word}">ওয়ার্ড (বাংলায়)</option>
                                    <option value="{p_en_post}">পোস্ট অফিস (ইংরেজিতে)</option>
                                    <option value="{p_bn_post}">পোস্ট অফিস (বাংলায়)</option>
                                    <option value="{p_en_code}">পোস্ট কোড (ইংরেজিতে)</option>
                                    <option value="{p_bn_code}">পোস্ট কোড (বাংলায়)</option>
                                    <option value="{p_en_upazila}">উপজেলা (ইংরেজিতে)</option>
                                    <option value="{p_bn_upazila}">উপজেলা (বাংলায়)</option>
                                    <option value="{p_en_district}">জেলা (ইংরেজিতে)</option>
                                    <option value="{p_bn_district}">জেলা (বাংলায়)</option>
                                    <option value="{phone}">মোবাইল</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group row mb-2 wordDiv" style="display: none">
                            <label for="word" class="col-form-label">Word<span class="required">*</span></label>
                            <select class="form-control select2" name="word" required disabled id="word">
                                <option style="color: red" value="">&mdash; চিহ্নিত করুন &mdash;</option>
                                @foreach(words() as $word)
                                    <option value="{{ $word->number }}">{{ NumToBn($word->number) }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="trade_licencesDiv"  style="display: none">
                            <div class="form-group row mb-2">
                                <label for="trade_licences" class="col-form-label">Trade Licences send type<span class="required">*</span></label>
                                <select class="form-control select2" name="trade_licences" disabled required id="trade_licences">
                                    <option style="color: red" value="">&mdash; চিহ্নিত করুন &mdash;</option>
                                    <option value="1">Active Licences</option>
                                    <option value="2">Payment Due</option>
                                </select>
                            </div>
                            <div class="form-group row mb-2">
                                <label for="trade_tag_value" class="col-form-label"> Available Tag</label>
                                <select class="form-control select2" name="trade_tag_value" disabled id="trade_tag_value">
                                    <option style="color: red" value="">&mdash; চিহ্নিত করুন &mdash;</option>
                                    <option value="{bn_owname}">মালিকের নাম</option>
                                    <option value="{owner_address}">মালিকের ঠিকানা</option>
                                    <option value="{ecom_name}">প্রতিষ্ঠানের নাম</option>
                                    <option value="{ecom_address}">প্রতিষ্ঠানের ঠিকানা</option>
                                    <option value="{phone}">মোবাইল</option>
                                    <option value="{fiscal_year}">অর্থবছর</option>
                                    <option value="{license_issue_date}">ইস্যু তারিখ ও সময়</option>
                                    <option value="{amount}">সর্বমোট টাকা</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group row mb-2 static_smsDiv" style="display: none">
                            <label for="number" class="col-form-label">মোবাইল নাম্বার<span class="required">*</span></label>
                            <input type="text" name="number" class="form-control" id="number" disabled required>
                        </div>
                        <div class="due_tax" style="display: none">
                            <div class="form-group row mb-2">
                                <label for="holding_payment_status" class="col-form-label"> Payment Status <span class="required">*</span></label>
                                <select class="form-control select2" name="holding_payment_status" disabled id="holding_payment_status" required>
                                    <option value="all">All</option>
                                    <option value="0">Due</option>
                                    <option value="1">Paid</option>
                                </select>
                            </div>
                            <div class="form-group row mb-2">
                                <label for="holding_tag_value" class="col-form-label"> Available Tag</label>
                                <select class="form-control select2" name="holding_tag_value" disabled id="holding_tag_value">
                                    <option style="color: red" value="">&mdash; চিহ্নিত করুন &mdash;</option>
                                    <option value="{name}">নাম</option>
                                    <option value="{holding_no}">হোল্ডিং নম্বর</option>
                                    <option value="{word_no}">ওয়ার্ড নম্বর</option>
                                    <option value="{bill_id}">বিল আইডি</option>
                                    <option value="{fiscal_year}">অর্থবছর</option>
                                    <option value="{amount}">মোট টাকা</option>
                                    <option value="{phone}">মোবাইল নাম্বার</option>
                                    <option value="{address}">ঠিকানা</option>
                                </select>
                            </div>
                        </div>
                        <div class="selectedCouncil_and_employee" style="display: none">
                            <div class="form-group row mb-2">
                                <label for="officer_tag_value" class="col-form-label"> Available Tag</label>
                                <select class="form-control select2" name="officer_tag_value" disabled id="officer_tag_value">
                                    <option style="color: red" value="">&mdash; চিহ্নিত করুন &mdash;</option>
                                    <option value="{name}">নাম (বাংলায়)</option>
                                    <option value="{en_name}">নাম (ইংরেজিতে)</option>
                                    <option value="{designation}">পদবী</option>
                                    <option value="{word}">ওয়ার্ড নম্বর</option>
                                    <option value="{phone}">মোবাইল নং</option>
                                    <option value="{address}">ঠিকানা</option>
                                </select>
                            </div>
                        </div>
                        <div class="water_client_div" style="display: none;">
                            <div class="form-group row mb-2">
                                <label for="word_no" class="form-label">ওয়ার্ড নং <span class="required">*</span></label>
                                <select name="word_no" required disabled class="form-control select2" id="word_no">
                                    <option style="color: red" selected value="">&mdash; চিহ্নিত করুন &mdash;</option>
                                    <option value="1" data-code="01">1</option>
                                    <option value="2" data-code="02">2</option>
                                    <option value="3" data-code="03">3</option>
                                    <option value="4" data-code="04">4</option>
                                    <option value="5" data-code="05">5</option>
                                    <option value="6" data-code="06">6</option>
                                    <option value="7" data-code="07">7</option>
                                    <option value="8" data-code="08">8</option>
                                    <option value="9" data-code="09">9</option>
                                    <option value="10" data-code="10">10</option>
                                    <option value="11" data-code="11">11</option>
                                    <option value="12" data-code="12">12</option>
                                </select>
                                <div class="invalid-feedback">
                                    ওয়ার্ড নং
                                </div>
                            </div>
                            <div class="form-group row mb-2">
                                <label for="water_client_tag_value" class="col-form-label"> Available Tag</label>
                                <select class="form-control select2" name="water_client_tag_value" disabled id="water_client_tag_value">
                                    <option style="color: red" value="">&mdash; চিহ্নিত করুন &mdash;</option>
                                    <option value="{client_id}">গ্রাহকের আইডি</option>
                                    <option value="{client_name}">গ্রাহকের নাম</option>
                                    <option value="{word_no}">ওয়ার্ড নম্বর</option>
                                    <option value="{phone}">মোবাইল নাম্বার</option>
                                    <option value="{address}">ঠিকানা</option>
                                </select>
                            </div>
                        </div>
                        <div class="water_bill_div" style="display: none;">
                            <div class="form-group row mb-2">
                                <label for="bill_year" class="form-label">বিলের বছর <span class="required">*</span></label>
                                <select name="bill_year" required disabled class="form-control select2" id="bill_year">
                                    <option style="color: red" selected value="">&mdash; চিহ্নিত করুন &mdash;</option>
                                        <option value='2000' >2000</option><option value='2001' >2001</option><option value='2002' >2002</option><option value='2003' >2003</option><option value='2004' >2004</option><option value='2005' >2005</option><option value='2006' >2006</option><option value='2007' >2007</option><option value='2008' >2008</option><option value='2009' >2009</option><option value='2010' >2010</option><option value='2011' >2011</option><option value='2012' >2012</option><option value='2013' >2013</option><option value='2014' >2014</option><option value='2015' >2015</option><option value='2016' >2016</option><option value='2017' >2017</option><option value='2018' >2018</option><option value='2019' >2019</option><option value='2020' >2020</option><option value='2021' >2021</option><option value='2022' >2022</option><option value='2023' >2023</option><option value='2024' >2024</option><option value='2025' >2025</option><option value='2026' selected="selected">2026</option><option value='2027' >2027</option>                                </select>
                                <div class="invalid-feedback">
                                    বছর
                                </div>
                            </div>
                            <div class="form-group row mb-2">
                                <label for="bill_month" class="form-label">বিলের মাস <span class="required">*</span></label>
                                <select name="bill_month" required disabled class="form-control select2" id="bill_month">
                                    <option style="color: red" selected value="">&mdash; চিহ্নিত করুন &mdash;</option>
                                    <option value="01" {{ date('m', strtotime('first day of last month')) == 01 ? 'selected' : '' }} >জানুয়ারী</option>
                                    <option value="02" {{ date('m', strtotime('first day of last month')) == 02 ? 'selected' : '' }} >ফেব্রুয়ারী</option>
                                    <option value="03" {{ date('m', strtotime('first day of last month')) == 03 ? 'selected' : '' }} >মার্চ</option>
                                    <option value="04" {{ date('m', strtotime('first day of last month')) == 04 ? 'selected' : '' }} >এপ্রিল</option>
                                    <option value="05" {{ date('m', strtotime('first day of last month')) == 05 ? 'selected' : '' }} >মে</option>
                                    <option value="06" {{ date('m', strtotime('first day of last month')) == 06 ? 'selected' : '' }} >জুন</option>
                                    <option value="07" {{ date('m', strtotime('first day of last month')) == 07 ? 'selected' : '' }} >জুলাই</option>
                                    <option value="08" {{ date('m', strtotime('first day of last month')) == '08' ? 'selected' : '' }} >আগস্ট</option>
                                    <option value="09" {{ date('m', strtotime('first day of last month')) == '09' ? 'selected' : '' }} >সেপ্টেম্বর</option>
                                    <option value="10" {{ date('m', strtotime('first day of last month')) == 10 ? 'selected' : '' }} >অক্টোবর</option>
                                    <option value="11" {{ date('m', strtotime('first day of last month')) == 11 ? 'selected' : '' }} >নভেম্বর</option>
                                    <option value="12" {{ date('m', strtotime('first day of last month')) == 12 ? 'selected' : '' }} >ডিসেম্বর</option>
                                </select>
                                <div class="invalid-feedback">
                                    মাস
                                </div>
                            </div>
                            <div class="form-group row mb-2">
                                <label for="water_bill_payment_status" class="col-form-label"> Payment Status <span class="required">*</span></label>
                                <select class="form-control select2" name="water_bill_payment_status" disabled id="water_bill_payment_status" required>
                                    <option value="all">All</option>
                                    <option value="0">Due</option>
                                    <option value="1">Paid</option>
                                </select>
                            </div>
                            <div class="form-group row mb-2">
                                <label for="water_bill_tag_value" class="col-form-label"> Available Tag</label>
                                <select class="form-control select2" name="water_bill_tag_value" disabled id="water_bill_tag_value">
                                    <option style="color: red" value="">&mdash; চিহ্নিত করুন &mdash;</option>
                                    <option value="{client_id}">গ্রাহকের আইডি</option>
                                    <option value="{client_name}">গ্রাহকের নাম</option>
                                    <option value="{word_no}">ওয়ার্ড নম্বর</option>
                                    <option value="{bill_id}">বিল আইডি</option>
                                    <option value="{bill_month_year}">বিলের মাস ও বছর</option>
                                    <option value="{bill_issue_date}">বিল ইস্যুর তারিখ</option>
                                    <option value="{bill_payment_last_date}">বিল পরিশোধের শেষ তারিখ</option>
                                    <option value="{amount}">মোট টাকা</option>
                                    <option value="{phone}">মোবাইল নাম্বার</option>
                                    <option value="{address}">ঠিকানা</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group row mb-2">
                            <label for="content" class="col-form-label">এসএমএস<span class="required">*</span></label>
                            <textarea class="form-control" name="smsbody" id="content" spellcheck="true" style="direction: ltr;" rows="3" required></textarea>
                        </div>
                        <div class="form-group row mb-2">
                            <button type="submit" class="btn btn-primary waves-effect btn-label waves-light btn-block"><i class="bx bx-check-double label-icon"></i>সাবমিট</button>
                        </div>
                        {{ Form::close() }}
                    </div>
                </div>
            </div>
            <div class="col-md-5  col-sm-12">
                <div class="card">
                    <div class="card-body">
                        <h4 class="text-danger"><em>নোটিশ:</em></h4>
                        <hr/>
                        <p>(১) একইসাথে একাধিক নাম্বার এ এসএমএস পাঠাতে চাইলে প্রতেক নাম্বার এর পরে <span class="text-success">কমা (,)</span> দিতে হবে। <span class="text-danger">যেমনঃ 017xxxxxxxxx,017xxxxxxxxx</span></p>
                        <p>(২) এসএমএস অবশ্যই বাংলায় লিখতে হবে</p>
                    </div>
                </div>
            </div>
        </div>
    @else
        @include('backend.errors.404')
    @endif
@endsection
@section('script')
    <script>
        // For SMS
        $("#sms_type").change(function(){
            var sms_type = $("#sms_type").val();
            if(sms_type == '1'){
                $('.static_smsDiv').show();
                $('.static_smsDiv input').attr('disabled', false);
                $('.trade_licencesDiv').hide();
                $('.trade_licencesDiv select').attr('disabled', true);
                $('.active_citizenDiv').hide();
                $('.active_citizenDiv select').attr('disabled', true);
                $('.wordDiv').hide();
                $('.wordDiv select').attr('disabled', true);
                $('.due_tax').hide();
                $('.due_tax select').attr('disabled', true);
                $('.selectedCouncil_and_employee').hide();
                $('.selectedCouncil_and_employee select').attr('disabled', true);
            }
            if(sms_type == '2'){
                $('.active_citizenDiv').show();
                $('.active_citizenDiv select').attr('disabled', false);
                $('.static_smsDiv').hide();
                $('.static_smsDiv input').attr('disabled', true);
                $('.trade_licencesDiv').hide();
                $('.trade_licencesDiv select').attr('disabled', true);
                $('.wordDiv').hide();
                $('.wordDiv select').attr('disabled', true);
                $('.due_tax').hide();
                $('.due_tax select').attr('disabled', true);
                $('.selectedCouncil_and_employee').hide();
                $('.selectedCouncil_and_employee select').attr('disabled', true);
                $('.select2').select2();
            }
            if (sms_type == '3'){
                $('.trade_licencesDiv').show();
                $('.trade_licencesDiv select').attr('disabled', false);
                $('.static_smsDiv').hide();
                $('.static_smsDiv input').attr('disabled', true);
                $('.active_citizenDiv').hide();
                $('.active_citizenDiv select').attr('disabled', true);
                $('.wordDiv').hide();
                $('.wordDiv select').attr('disabled', true);
                $('.due_tax').hide();
                $('.due_tax select').attr('disabled', true);
                $('.selectedCouncil_and_employee').hide();
                $('.selectedCouncil_and_employee select').attr('disabled', true);
                $('.select2').select2();
            }
            if (sms_type == '4'){
                $('.due_tax').show();
                $('.due_tax select').attr('disabled', false);
                $('.wordDiv').show();
                $('.wordDiv select').attr('disabled', false);
                $('.trade_licencesDiv').hide();
                $('.trade_licencesDiv select').attr('disabled', true);
                $('.static_smsDiv').hide();
                $('.static_smsDiv input').attr('disabled', true);
                $('.active_citizenDiv').hide();
                $('.active_citizenDiv select').attr('disabled', true);
                $('.selectedCouncil_and_employee').hide();
                $('.selectedCouncil_and_employee select').attr('disabled', true);
                $('.select2').select2();
            }
            if (sms_type == '5' || sms_type == '6'){
                $('.selectedCouncil_and_employee').show();
                $('.selectedCouncil_and_employee select').attr('disabled', false);
                $('.due_tax').hide();
                $('.due_tax select').attr('disabled', true);
                $('.wordDiv').hide();
                $('.wordDiv select').attr('disabled', true);
                $('.trade_licencesDiv').hide();
                $('.trade_licencesDiv select').attr('disabled', true);
                $('.static_smsDiv').hide();
                $('.static_smsDiv input').attr('disabled', true);
                $('.active_citizenDiv').hide();
                $('.active_citizenDiv select').attr('disabled', true);
                $('.select2').select2();
            }
            if (sms_type == 7){
                $('.water_client_div').show();
                $('.water_client_div select').attr('disabled', false);
                $('.water_bill_div').hide();
                $('.water_bill_div select').attr('disabled', true);
                $('.select2').select2();
            }
            if (sms_type == 8){
                $('.water_bill_div').show();
                $('.water_bill_div select').attr('disabled', false);
                $('.water_client_div').hide();
                $('.water_client_div select').attr('disabled', true);
                $('.select2').select2();
            }
        });

        $("#active_citizen").change(function(){
            var active_citizen = $("#active_citizen").val();
            if(active_citizen == '2'){
                $('.wordDiv').show();
                $('.wordDiv select').attr('disabled', false);
                $('.select2').select2();
            }
            else
            {
                $('.wordDiv').hide();
                $('.wordDiv select').attr('disabled', true);
            }
        });
        $("#citizen_tag_value").change(function(){
            var citizen_tag_value = $("#citizen_tag_value").val();
            var content = $("#content");
            const caretPos = content[0].selectionStart;
            const textAreaTxt = content.val();
            content.val(textAreaTxt.substring(0, caretPos) + citizen_tag_value + textAreaTxt.substring(caretPos)).val().length;
        });
        $("#holding_tag_value").change(function(){
            var citizen_tag_value = $("#holding_tag_value").val();
            var content = $("#content");
            const caretPos = content[0].selectionStart;
            const textAreaTxt = content.val();
            content.val(textAreaTxt.substring(0, caretPos) + citizen_tag_value + textAreaTxt.substring(caretPos)).val().length;
        });
        $("#trade_tag_value").change(function(){
            var citizen_tag_value = $("#trade_tag_value").val();
            var content = $("#content");
            const caretPos = content[0].selectionStart;
            const textAreaTxt = content.val();
            content.val(textAreaTxt.substring(0, caretPos) + citizen_tag_value + textAreaTxt.substring(caretPos)).val().length;
        });
        $("#officer_tag_value").change(function(){
            var officer_tag_value = $("#officer_tag_value").val();
            var content = $("#content");
            const caretPos = content[0].selectionStart;
            const textAreaTxt = content.val();
            content.val(textAreaTxt.substring(0, caretPos) + officer_tag_value + textAreaTxt.substring(caretPos)).val().length;
        });
        $("#water_bill_tag_value").change(function(){
            var water_bill_tag_value = $("#water_bill_tag_value").val();
            var content = $("#content");
            const caretPos = content[0].selectionStart;
            const textAreaTxt = content.val();
            content.val(textAreaTxt.substring(0, caretPos) + water_bill_tag_value + textAreaTxt.substring(caretPos)).val().length;
        });
        $("#water_client_tag_value").change(function(){
            var water_client_tag_value = $("#water_client_tag_value").val();
            var content = $("#content");
            const caretPos = content[0].selectionStart;
            const textAreaTxt = content.val();
            content.val(textAreaTxt.substring(0, caretPos) + water_client_tag_value + textAreaTxt.substring(caretPos)).val().length;
        });
    </script>
@endsection