@extends('admin.layout.master')

@section('content')

<style>
    .error{
        color: red;
    }
  /* The message box is shown when the user clicks on the password field */
#message {
    display:none;
    background: #f1f1f1;
    color: #000;
    position: relative;
    padding: 10px;
    margin-top: 10px;
  }

  #message p {
      padding: 0px 10px;
      font-size: 14px;
  }

  /* Add a green text color and a checkmark when the requirements are right */
  .valid {
    color: green;
  }

  .valid:before {
    position: relative;
    left: -10px;
    content: "✔";
  }

  /* Add a red text color and an "x" when the requirements are wrong */
  .invalid {
    color: red;
  }

  .invalid:before {
    position: relative;
    left: -10px;
    content: "✖";
  }
</style>
    <!-- Content Header (Page header) -->
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0">Edit Email Campaign</h1>
            </div><!-- /.col -->

        </div><!-- /.row -->
    </div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->

<!-- Main content -->
<section class="content">
    <div class="container-fluid">

        <div class="row">
            <!-- left column -->
            <div class="col-md-10">
                <!-- general form elements -->
                <div class="card card-primary">
                    <div class="card-header">
                        <h3 class="card-title">Edit Email Campaign</h3>
                    </div>
                    <!-- /.card-header -->
                    <!-- form start -->
                    <form id="emailCampaignEditForm" action="{{ route('admin.email-campaign-update') }}" method="post">
                       @csrf
                        <div class="card-body">
                            <input type="hidden" name="id" value="{{ $emailcampaign->id }}">


                            <div class="form-group">
                                <label for="name">Campaign Title</label>
                                <input type="text" class="form-control" value="{{ $emailcampaign->name }}"  name="name" id="name" placeholder="Enter Campaign Title" autocomplete="off">
                            </div>

                            <div class="form-group">
                                <label for="subject">Subject</label>
                                <input type="text" class="form-control" value="{{ $emailcampaign->subject }}" name="subject" id="subject" placeholder="Enter subject" autocomplete="off">
                            </div>



                            <div class="form-group">
                                <label for="subscriber_list_id">Subscriber List</label>
                                <select name="subscriber_list_id" id="subscriber_list_id" data-placeholder="Select Subscriber List" class="form-control">
                                    @foreach ($subscriberlist as $s)
                                        <option value="{{ $s->id }}" @if($s->id == $emailcampaign->subscriber_list_id) selected @endif>{{ $s->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group">
                                <label for="exampleInputContent">Content</label>
                                <div >
                                    <iframe id="myIframe" src="{{ url('/') }}/admin/email-campaign/show-templete-editor?id={{ $emailcampaign->id }}" width="100%" height="700" style="border:none;"></iframe>
                                    <textarea id="content" name="content" rows="10" cols="40" style="display: none;"></textarea>

                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="schedule_date">Schedule Date</label>
                                        <input type="date" class="form-control" value="{{ $emailcampaign->schedule_date }}" name="schedule_date" id="schedule_date" placeholder="Enter schedule date" autocomplete="off">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label for="schedule_time">Schedule Time</label>
                                        <input type="time" class="form-control" value="{{ $emailcampaign->schedule_time }}" name="schedule_time" id="schedule_time" placeholder="Enter schedule time" autocomplete="off">
                                    </div>
                                </div>
                            </div>

                        </div>
                        <!-- /.card-body -->

                        <div class="card-footer">
                            <button type="button" onclick="callIframeFunction()" class="btn btn-primary">Update</button>
                            <a href="{{ route('admin.email-campaign') }}" class="btn btn-info">Back</a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>

<script>
    // Function to receive data from the iframe
    function receiveDataFromIframe(data) {

       $('#content').text(data);

       if($('#emailCampaignEditForm').valid()){
        $('#emailCampaignEditForm').submit();
       }

      }
    function callIframeFunction() {

        const iframe = document.getElementById('myIframe');
        const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
            const saveButton = iframeDoc.querySelector('.fa-save');
            console.log(saveButton);
            if (saveButton) {

                saveButton.click();
            }

    }


</script>



<script>
    $(function () {

        $('#subscriber_list_id').select2({
            theme: 'bootstrap4',
            placeholder: "Please select subscriber list",
        });

      $('#emailCampaignEditForm').validate({
          rules: {

              name: {
                  required: true,
              },
              subject: {
                  required: true,
              },
              from_email: {
                  required: true,
              },
              from_name: {
                  required: true,
              },
              subscriber_list_id: {
                  required: true,
              },
              content: {
                  required: true,
              },
              schedule_date: {
                  required: true,
              },
              schedule_time: {
                  required: true,
              },

          },
          messages: {

                subject: {
                  required: "Please enter a name"
                },
                subject: {
                  required: "Please enter a subject"
                },
                from_email: {
                  required: "Please enter a from email"
                },
                from_name: {
                  required: "Please enter a from name"
                },
                subscriber_list_id: {
                    required: "Please select a subscriber list."
                },
                content: {
                  required: "Please enter a content"
                },
                schedule_date: {
                  required: "Please select a schedule date"
                },
                schedule_time: {
                  required: "Please select a schedule time"
                },

          },
          errorElement: 'span',
          errorPlacement: function (error, element) {
              error.addClass('invalid-feedback');
              element.closest('.form-group').append(error);
          },
          highlight: function (element, errorClass, validClass) {
              $(element).addClass('is-invalid');
          },
          unhighlight: function (element, errorClass, validClass) {
              $(element).removeClass('is-invalid');
          }
      });
    });
</script>

@endsection