@extends("admin.layouts.app")
@section("styles")
    <link href="https://cdn.ihouse.ps/admin_assets/assets/global/plugins/select2/css/select2.min.css" rel="stylesheet"
          type="text/css"/>
    <link href="https://cdn.ihouse.ps/admin_assets/assets/global/plugins/select2/css/select2-bootstrap.min.css"
          rel="stylesheet"
          type="text/css"/>
    <style>
        [hidden] {
            display: none !important;
        }

        .btn:not(.md-skip):not(.bs-select-all):not(.bs-deselect-all) {
            text-transform: capitalize;
        }

        #cke_1_contents {
            height: 600px !important;
        }
    </style>
@endsection
@section("content")
    <div class="row">
        <div class="col-md-12">
            <div class="portlet light bordered">
                <div class="portlet-title">
                    <div class="caption font-green">
                        <i class="icon-plus font-green"></i>
                        <span class="caption-subject bold uppercase">New Message Template</span>
                    </div>
                </div>
                @if ($errors->any())
                    @foreach ($errors->all() as $error)
                        <div dir="rtl" class="alert alert-danger alert-dismissible" role="alert">
                            <strong>{{ 'خطأ !' }}</strong> {{ $error }}
                            <button dir="ltr" type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    @endforeach
                @endif
                <div class="portlet-body form" style="direction: rtl">
                    {{ Form::open(['route' => "admin.message_templates.store", 'role' => "form"]) }}
                    {{ Form::hidden('total_sms', 0, ['id' => 'hidden-total-sms']) }}

                    <div class="form-body">
                        <!-- Title Input -->
                        <div class="form-group form-md-line-input form-md-floating-label" style="width: 65%!important;">
                            {{ Form::text("title", null, ['class' => 'form-control m-input', 'dir' => 'rtl']) }}

                            <label for="title">@lang("عنوان الرسالة")</label>
                        </div>

                        <div class="row">
                            <div class="col-md-5"></div>
                            <div class="col-md-7 text-center rtl">
                                <div class="col-md-2 m-b-sm">
                                    <section class="panel panel-default" style="margin-bottom: 0px; padding-top: 0!important;">
                                        <header class="panel-heading font-bold">
                                            Total Count
                                        </header>
                                        <div class="font-bold h1 text-center padder-v ng-binding" id="total-count">
                                            0
                                        </div>
                                    </section>
                                </div>
                                <div class="col-md-2 m-b-sm">
                                    <section class="panel panel-default" style="margin-bottom: 0px; padding-top: 0!important;">
                                        <header class="panel-heading">
                                            Total SMS
                                        </header>
                                        <div class="font-bold h1 text-center padder-v ng-binding" id="total-sms">
                                            0
                                        </div>
                                    </section>
                                    {{--                                       Total SMS: <span >0</span><br>--}}

                                </div>
                                <div class="col-md-2 m-b-sm">
                                    <section class="panel panel-default" style="margin-bottom: 0px; padding-top: 0!important;">
                                        <header class="panel-heading">
                                            GSM
                                        </header>
                                        <div class="font-bold h1 text-center padder-v ng-binding" id="gsm-count">
                                            0
                                        </div>
                                    </section>
                                    {{--                                       GSM: <span >0</span><br>--}}

                                </div>
                                <div class="col-md-2 m-b-sm">
                                    <section class="panel panel-default" style="margin-bottom: 0px; padding-top: 0!important;">
                                        <header class="panel-heading">
                                            Unicode
                                        </header>
                                        <div class="font-bold h1 text-center padder-v ng-binding" id="unicode-count">
                                            0
                                        </div>
                                    </section>
                                    {{--                                       Unicode: <span id="unicode-count">0</span><br>--}}
                                </div>
                                <div class="col-md-2 m-b-sm">
                                    <section class="panel panel-default" style="margin-bottom: 0px; padding-top: 0!important;">
                                        <header class="panel-heading">
                                            Next Part
                                        </header>
                                        <div class="font-bold h1 text-center padder-v ng-binding" id="next-part">
                                            160
                                        </div>
                                    </section>
                                    {{--                                       Next Part: <span id="next-part">160</span><br>--}}

                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12" style="direction: rtl">
                                <div class="col-md-4">
                                    <div class="form-group form-md-line-input form-md-floating-label">
                                        <div class="place">
                                            <ul id="placeholderCopy">
{{--                                                <span>اضافة</span>--}}
{{--                                                @foreach(config('ihouse.message_placeholder') as $key=>$value)--}}
{{--                                                    <li id="value">--}}
{{--                                                        <button class="copy-btn btn btn-outline-primary" data-key="{{ $key }}" type="button"><i--}}
{{--                                                                class="bx bx-clipboard"></i>{{ $value }}--}}
{{--                                                        </button>--}}
{{--                                                    </li>--}}
{{--                                                @endforeach--}}
                                            </ul>
                                        </div>
                                    </div>

                                </div>
                                <div class="col-md-8">
                                    <div class="form-group form-md-line-input form-md-floating-label">
                                        <label for="body">نص الرسالة</label>
                                        {{ Form::textarea("body", null, ['class' => 'form-control m-input', 'dir' => 'rtl', 'id' => 'body']) }}
                                    </div>


                                </div>

                            </div>

                        </div>
                        <!-- Body Input -->


                        <!-- Status Input -->
                        <div class="form-group col-6" style="width: 15%!important;">
                            <label for="status">

                                الحالة
                            </label>
                            {!! Form::select("status",[1=>"Active",0=>"Not Active"],null,['class'=>"form-control form-control m-input form-md-floating-label"])!!}

                        </div>

                        <!-- Properties Input -->


                        <!-- Form Actions -->
                        <div class="form-actions noborder">
                            <button type="submit" class="btn blue">@lang("constants.create")</button>
                            <button type="reset" class="btn default">@lang("constants.clear")</button>
                        </div>
                        {!! Form::close() !!}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section("scripts")
    <script src="https://cdn.ckeditor.com/4.9.2/full/ckeditor.js"></script>
    <script>
        $(document).ready(function () {

            $('.copy-btn').on('click', function () {

                let key = $(this).data('key');

                let textMsg = $('#body').val();

                let concatData = textMsg.concat(`{${key}}`);

                $('#body').val(concatData);

            })
        })

        // CKEDITOR.replace('body'); // Initialize CKEditor for the 'body' field
    </script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const bodyInput = document.getElementById('body');
            const totalCounter = document.getElementById('total-count');
            const totalSMSCounter = document.getElementById('total-sms');
            const gsmCounter = document.getElementById('gsm-count');
            const unicodeCounter = document.getElementById('unicode-count');
            const nextPartCounter = document.getElementById('next-part');

            // Define GSM character set
            const GSM_CHARSET = /[\x20-\x7E\u00A1\u00A3-\u00A5\u00C0-\u00C3\u00C8-\u00CA\u00CC\u00CD\u00D2-\u00D5\u00D9-\u00DB\u00DC\u00DF\u00E0-\u00E3\u00E7\u00E8-\u00EA\u00EC\u00ED\u00F2-\u00F5\u00F9-\u00FB\u00FC\u00C6\u00E6\u00D8\u00F8\u00C5\u00E5\u0394\u03A6\u0393\u039B\u03A9\u03A0\u03A8\u03A3\u0398\u039E\u00A0\u00C7\u00E7\u00D1\u00F1\u00D6\u00F6\u00DC\u00FC\u00B5\u00DF\u00A3\u20AC]+/;

            function isGSM(character) {
                return GSM_CHARSET.test(character);
            }

            function countSMSCharacters() {
                const text = bodyInput.value;
                let gsmCount = 0;
                let unicodeCount = 0;

                // Count GSM and Unicode characters
                [...text].forEach(char => {
                    if (isGSM(char)) {
                        gsmCount++;
                    } else {
                        unicodeCount++;
                    }
                });

                const totalChars = gsmCount + unicodeCount;
                const isUnicode = unicodeCount > 0;
                const charsPerPart = isUnicode ? 70 : 160; // Adjust for headers in multipart messages
                const perSMS = isUnicode ? 70 : 160; // Max characters per single SMS part

                // Calculate the number of SMS parts
                const totalSMS = Math.ceil(totalChars / charsPerPart);

                // Determine characters left for the next part
                const charsUsedInCurrentPart = totalChars % charsPerPart;
                const charsLeftForNextPart = charsPerPart - charsUsedInCurrentPart;

                // Update UI elements with the calculated values
                totalCounter.textContent = totalChars;
                totalSMSCounter.textContent = totalSMS;
                gsmCounter.textContent = gsmCount;
                unicodeCounter.textContent = unicodeCount;
                nextPartCounter.textContent = charsUsedInCurrentPart === 0 ? 0 : charsLeftForNextPart;
                $('#hidden-total-sms').val(totalSMS); // Update the hidden input

                // Change the color of the next part counter based on the value
                if (charsLeftForNextPart < 11) {
                    nextPartCounter.style.color = 'red';
                } else {
                    nextPartCounter.style.color = 'black'; // Default color
                }

                console.log('Total SMS:', totalSMS, 'Chars Left for Next Part:', nextPartCounter.textContent);
            }

            bodyInput.addEventListener('input', countSMSCharacters);
            countSMSCharacters();  // Initial call to handle any pre-filled text
        });
    </script>


@endsection