@extends('admin.layout.master')

@section('content')

<style>
    .error{
        color: red;
    }

    #message {
        display:none;
        background: #f1f1f1;
        color: #000;
        position: relative;
        padding: 10px;
        margin-top: 10px;
    }

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

    .valid {
        color: green;
    }

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

    .invalid {
        color: red;
    }

    .invalid:before {
        position: relative;
        left: -10px;
        content: "✖";
    }
    .disabled-field {
        background-color: #f1f1f1; /* Light gray background */
        color: #6c757d; /* Muted text color */
        border: 1px solid #ced4da; /* Subtle border */
        cursor: not-allowed; /* Show a disabled cursor */
        opacity: 0.65; /* Slightly faded appearance */
        pointer-events: none; /* Disable interaction */
    }
</style>
  
<div class="content-header">
    <div class="container-fluid">
        @foreach (['danger', 'warning', 'success', 'info'] as $msg)
            @if (Session::has('alert-' . $msg))
                <p class="alert alert-{{ $msg }}">{{ Session::get('alert-' . $msg) }}
                    <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
                </p>
            @endif
        @endforeach
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0">Edit Email Campaign</h1>
            </div>
            <div class="col-sm-6 text-right">
           
                <a href="{{ route('sendEmailCampaign', ['id' => $emailcampaign->id]) }}" id="startSendingSendNow"  class="btn btn-success  {{ ($emailcampaign->is_send == 0 && $emailCampaignsSubscriberCount > 0) ? '' : 'disabled' }}">Send Now</a>
            
                <button type="button" onclick="callIframeFunction()" class="btn btn-primary" id="updateMain">Update</button>
                <a href="{{ route('admin.email-campaign') }}" class="btn btn-info">Back</a>
            </div>
        </div>
        
    </div>
</div>

<section class="content">

    <div class="container-fluid">

        <form id="emailCampaignEditForm" action="{{ route('admin.email-campaign-update') }}" method="post">
            @csrf

            <input type="hidden" name="id" id="emailcampaignId" value="{{ $emailcampaign->id }}">
            <div class="row">

                <div class="col-md-9">
    
                    <div class="card card-primary">
                        <div class="card-header">
                            <h3 class="card-title">Create Email Campaign</h3>
                        </div>
                        <div class="card-body">
                            <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 here" autocomplete="off">
                            </div>
                        </div>
                    </div>

                    <div class="card card-primary">
                        <div class="card-header">
                            <h3 class="card-title">Template</h3>
                        </div>
                        <div class="card-body">
                            <div class="form-group">
                                <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>
                    </div>

                    <div class="card card-primary">
                        <div class="card-header">
                            <h3 class="card-title">Details</h3>
                        </div>
                        <div class="card-body">

                            <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="from_name">From Name</label>
                                <input type="text" class="form-control" name="from_name" value="{{ $emailcampaign->from_name }}" id="from_name" placeholder="Enter From Name" autocomplete="off">
                            </div>

                            <div class="form-group">
                                <label for="from_email">From Email</label>
                                <select name="from_email" id="from_email" data-placeholder="Select From Email" class="form-control">
                                    <option value="info@partswarehouse.com" @if("info@partswarehouse.com" == $emailcampaign->from_email) selected @endif>info@partswarehouse.com</option>
                                </select>
                            </div>

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

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

              
                <div class="col-md-3">
               
                    <div class="card card-outline card-primary">
                        <div class="card-body">

                            @php $schedule_date_time = ""; @endphp
                            @if(!empty($emailcampaign->schedule_date) && !empty($emailcampaign->schedule_time))
                                @php $schedule_date_time =  $emailcampaign->schedule_date.' '.$emailcampaign->schedule_time @endphp
                            @endif    
                            
                            @if($emailcampaign->is_send == 0 && empty($schedule_date_time))

                                <p><b>This Campaign has been paused/In Draft</b></p>

                            @elseif($emailcampaign->is_send == 0 && (!empty($schedule_date_time) && (strtotime($schedule_date_time) > strtotime("now"))))

                                <p><b>This Campaign is currently in the queue</b></p>
                                <p>Starts at {{ date('n/d/Y g:i A',strtotime($emailcampaign->schedule_at)) }}</p>

                            @elseif($emailcampaign->is_send == 0 && !empty($schedule_date_time))

                                <p><b>This Campaign is currently progressing</b></p>
                                <p>Started at {{ date('n/d/Y g:i A',strtotime($emailcampaign->schedule_at)) }}</p>
                                <p>{{ $emailcampaign->total_email }} of {{ !empty($sentEmailCount) ? $sentEmailCount : 0 }} sent</p>

                            @elseif($emailcampaign->is_send == 1)
                                <div class="row">
                                    <div class="col-md-12">
                                        <p><b>This Campaign was completed </b></p>
                                        <p>Ended at {{ date('n/d/Y g:i A',strtotime($emailcampaign->send_time)) }}</p>
                                    </div>
                                    <!-- <div class="col-md-3 text-right">
                                        <a href="{{ route('sendEmailCampaignReset', ['id' => $emailcampaign->id]) }}"  class="btn btn-danger btn-sm">Reset Now</a>
                                    </div> -->
                                </div>
                            @endif
                        </div>
                    </div>
                       
                    <div class="card card-primary">
                        <div class="card-header">
                            <h3 class="card-title">Delivery</h3>
                        </div>
                        <div class="card-body">
                      
                            <div class="row">
                                <div class="col-md-12">
                                    <p>Server time: {{ date('n/d/Y g:i A') }}</p>
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="schedule_now" name="schedule_now" {{ !empty($emailcampaign->schedule_date) ? 'checked' : '' }}  value="1" onchange="toggleScheduleNow()">
                                        <label class="form-check-label" for="paysstatetax">
                                            <b>send this campaign</b>
                                        </label>
                                    </div>
                                </div>
                            </div>

                            <!-- <div class="row mt-4" id="CheckScheduleNow"  style="display: none;" >
                                <div class="col-md-12">
                                    <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-12">
                                    <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 class="row mt-4 {{ empty($emailcampaign->schedule_date) ? 'disabled-field' : '' }}" id="CheckScheduleNow" >
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="schedule_date_time">Schedule Date & Time</label>
                                        <div class="d-flex">
                                            <input type="date" class="form-control me-2  disabled-field " 
                                                value="{{ $emailcampaign->schedule_date }}" 
                                                name="schedule_date" 
                                                id="schedule_date" 
                                                placeholder="Enter schedule date" 
                                                autocomplete="off">

                                            <input type="time" class="form-control ml-2  disabled-field " 
                                                value="{{ $emailcampaign->schedule_time }}" 
                                                name="schedule_time" 
                                                id="schedule_time" 
                                                placeholder="Enter schedule time" 
                                                autocomplete="off">
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row mt-2">

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <input type="text" class="form-control" name="send_test_email" id="send_test_email" placeholder="Enter Test Email" autocomplete="off">
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="" id="showAlertMessage"></div>
                                </div>
                            
                                <div class="col-md-12">
                                    <a onclick="callTestEmailFunction()" class="btn btn-secondary startSending" style="float:right;">Send Test</a>
                                </div>
                            </div>
                        </div>
                    </div>
                   
                    <div class="card card-primary">
                        <div class="card-header">
                            <h3 class="card-title">Receivers</h3>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input subscriber_list_id" {{ !empty($email_campaigns_all_subscribers) ? 'checked' : '' }}   id="allSubscriber" name="subscriber_list_id[]" value="0">
                                        <label class="form-check-label" for="subscriber_list_id">
                                            <b>All Subscriber</b> ({{$subscriber}})
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    @foreach ($subscriberlist as $s)
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input subscriber_list_id"  {{ in_array($s->id, $emailCampaignSubscriberIds) ? 'checked' : '' }}    name="subscriber_list_id[]" value="{{ $s->id }}">
                                            <label class="form-check-label" for="subscriber_list_id">
                                                <b>{{ $s->name }}</b> ({{$s->subscriberCount}})
                                            </label>
                                        </div>
                                    @endforeach
                                </div>
                                <div class="col-md-12 mt-4">
                                    <p>Total Receivers : <span id="totalReceivers">0</span></p>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>

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


<script>
    $( document ).ready(function() {
        getToralReceiverCount();
    });
    
    function getToralReceiverCount(){

        const checkedValues = $(".subscriber_list_id:checked").map(function () {
            return $(this).val();
        }).get();

        $.ajax({
            url: "{{ route('admin.email-campaign-total-receivers') }}", 
            method: "POST",
            data: {
                _token: "{{ csrf_token() }}",
                subscriber_list_ids: checkedValues,
            },
            success: function (response) {
                $("#totalReceivers").text(response.total_receivers);
            },
            error: function (xhr, status, error) {
                console.error("Error:", error);
                alert("Failed to submit data.");
            },
        });
    }

    $(".subscriber_list_id").click(function () {
        getToralReceiverCount();
    });

    function toggleScheduleNow() {
        const scheduleNowCheckbox = document.getElementById('schedule_now');
        const scheduleDate = document.getElementById('schedule_date');
        const scheduleTime = document.getElementById('schedule_time');
        const CheckScheduleNow = document.getElementById('CheckScheduleNow');

        if (scheduleNowCheckbox.checked) {
            // Enable fields
            scheduleDate.removeAttribute('disabled');
            scheduleTime.removeAttribute('disabled');
            CheckScheduleNow.removeAttribute('disabled');
            scheduleDate.classList.remove('disabled-field');
            scheduleTime.classList.remove('disabled-field');
            CheckScheduleNow.classList.remove('disabled-field');
        } else {
            // Disable fields
            CheckScheduleNow.setAttribute('disabled', 'disabled');
            scheduleDate.setAttribute('disabled', 'disabled');
            scheduleTime.setAttribute('disabled', 'disabled');
            scheduleDate.classList.add('disabled-field');
            scheduleTime.classList.add('disabled-field');
            CheckScheduleNow.classList.add('disabled-field');
        }
    }



    function callTestEmailFunction(){
        
        
        var send_test_email = $('#send_test_email').val();
        var schedule_date = $('#schedule_date').val();
        var schedule_time = $('#schedule_time').val();
        var subject = $('#subject').val();
        var emailcampaignId = $('#emailcampaignId').val();

        if(send_test_email != ""){

            $('.startSending').attr('disabled', 'disabled');
            $('.startSending').html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> <span class="visually-hidden">Email Sending...</span>');

            $.ajax({
                url: "{{ route('sendTestEmailCampaign') }}",
                type: 'POST',
                data: {
                    send_test_email: send_test_email,
                    schedule_date: schedule_date,
                    schedule_time: schedule_time,
                    subject: subject,
                    emailcampaignId: emailcampaignId,
                },
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                success: function (response) {
                    
                    document.getElementById('showAlertMessage').style.display = 'block';
                    document.getElementById('showAlertMessage').innerHTML = '<p class="alert alert-success">Email Send Successfully<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a></p>';

                    setTimeout(function () {
                        document.getElementById('showAlertMessage').style.display = 'none';
                    }, 5000);

                    $('.startSending').removeAttr('disabled');
                    $('.startSending').html('Send Email').removeAttr('disabled');

                },
                error: function (xhr) {
                    alert('An error occurred: ' + xhr.responseText);
                }
            });

        }else{

            let emailInput = document.getElementById('send_test_email');
            emailInput.classList.add('is-invalid');
            emailInput.focus();

            document.getElementById('showAlertMessage').style.display = 'block';
            document.getElementById('showAlertMessage').innerHTML = '<p class="alert alert-danger">Please Enter Email<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a></p>';

            setTimeout(function () {
                document.getElementById('showAlertMessage').style.display = 'none';
                emailInput.classList.remove('is-invalid');
            }, 5000);
        }
        
    };
    
    $('#startSendingSendNow').click(function(){
        $(this).attr('disabled', 'disabled');
        $(this).html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> <span class="visually-hidden">Email Sending...</span>');
    });
</script>


<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();
            }

    }


    $('#emailCampaignEditForm input, #emailCampaignEditForm select').on('keyup change input', function() {
        $("#updateMain").prop("disabled", false);
    });

    function enableSaveButton() {
       $("#updateMain").prop("disabled", false);
    }
    function disabledSaveButton() {
       $("#updateMain").prop("disabled", true);
    }


</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,
              },
             
              subscriber_list_id: {
                  required: true,
              },
              content: {
                  required: true,
              },
              

          },
          messages: {

                subject: {
                  required: "Please enter a name"
                },
                subject: {
                  required: "Please enter a subject"
                },
                from_email: {
                  required: "Please enter a from email"
                },
                
                subscriber_list_id: {
                    required: "Please select a subscriber list."
                },
                content: {
                  required: "Please enter a content"
                },
                

          },
          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