@extends('layouts.admin_dynamic')

@section('content')
<div class="content-wrapper">
    <div class="" id="customerDetails">
        <!-- Content Header (Page header) -->
        <section class="content-header m-3"><h1>Email & Sms Notifications
          {{-- <a class="btn btn-small btn-default pull-right ml-2" href="{{route('customers.export')}}" ><i class="fa fa-download"></i>&nbsp; {{__('export')}}</a> --}}
          <a class="btn btn-small btn-success pull-right" href="#addCustomerModal" data-toggle='modal'>
          <i class="fa fa-plus"></i>&nbsp; {{__('Add')}}</a></h1></section>
    
        <!-- Main content -->
        <section class="content">
          <div class="row">
            <div class="col-xs-12">
                <div class="box box-success">
                  <div class="box-header">
                    {{-- @include('partials.filters', ['filter_route'=>url('/customers'), 'filter_id'=>'customerFilter']) --}}
                  </div>
                <div class="box-body">
                     
    <div class="card mb-4">
        <div class="card-header bg-warning">Short Code</div>
        <div class="card-body">
            <table class="table">
                <thead>
                    <tr>
                        <th>Short Code</th>
                        <th>Description</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($shortCodes as $code => $description)
                    <tr>
                        <td>{{ $code }}</td>
                        <td>{{ $description }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

                </div>
                <!-- /.box-body -->
              </div>
              <!-- /.box -->
            </div>
            <!-- /.col -->
          </div>
          <!-- /.row -->
         
          
          
    
        </section>

        <form action="{{ route('notification.update',$notificationTemplate->id) }}" method="post">
            @csrf
                        <!-- Main content -->
                <section class="content">
                    <div class="row">
                      <div class="col-xs-12">
                          <div class="box box-success">
                            <div class="box-header">
                              {{-- @include('partials.filters', ['filter_route'=>url('/customers'), 'filter_id'=>'customerFilter']) --}}
                            </div>
                          <div class="box-body">
                               
        
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-header bg-warning">Email Template</div>
                                        <div class="card-body">
                                            <div class="form-group">
                                                <label for="email_subject">Subject</label>
                                                <input type="text" class="form-control" id="email_subject" name="subject" value="{{ $notificationTemplate->email_subject }}" required>
                                            </div>
                                            <div class="form-group">
                                                <label for="email_content">Message</label>
                                               
                                                <textarea class="form-control" id="email_content" name="email_body" rows="10" required>{{ $notificationTemplate->email_content }}</textarea>
                                                <small class="form-text text-muted">Word count: <span id="email_word_count">0</span></small>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-header bg-warning">SMS Template</div>
                                        <div class="card-body">
                                          
                                            <div class="form-group">
                                                <label for="sms_content">Message</label>
                                                <textarea class="form-control" id="sms_content" name="sms_body" rows="10" required>{{ $notificationTemplate->sms_content }}</textarea>
                                                <small class="form-text text-muted">Word count: <span id="sms_word_count">0</span></small>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary mt-3">Update Template</button>

                          </div>
                          <!-- /.box-body -->
                        </div>
                        <!-- /.box -->
                      </div>
                      <!-- /.col -->
                    </div>
                    <!-- /.row -->
                   
                    
                    
              
                  </section>
        <!-- /.content -->


    </form>
      </div></div>


   
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">


<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>


<script>
    $(document).ready(function() {
        $('#email_content').summernote({
            height: 300,
            toolbar: [
                ['style', ['bold', 'italic', 'underline', 'clear']],
                ['font', ['strikethrough', 'superscript', 'subscript']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['insert', ['link']],
            ],
            callbacks: {
                onChange: function(contents, $editable) {
                    updateWordCount('email_content', 'email_word_count');
                }
            }
        });

        $('#sms_content').on('input', function() {
            updateWordCount('sms_content', 'sms_word_count');
        });

        // Initial word count
        updateWordCount('email_content', 'email_word_count');
        updateWordCount('sms_content', 'sms_word_count');
    });

    function updateWordCount(textareaId, counterId) {
        let content = '';
        if (textareaId === 'email_content') {
            content = $('#' + textareaId).summernote('code');
            // Remove HTML tags for accurate word count
            content = content.replace(/<[^>]*>/g, ' ');
        } else {
            content = $('#' + textareaId).val();
        }
        const words = content.trim().split(/\s+/).filter(function(word) {
            return word.length > 0;
        });
        $('#' + counterId).text(words.length);
    }
</script>

@endsection