@extends('admin.layout.master')

@section('content')

<style>

    #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">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0">Create A New Campaign</h1>
            </div>
            <div class="col-sm-6 text-right">
                <button type="button" onclick="callIframeFunction()" class="btn btn-primary" id="saveMain">Save</button>
                <a href="{{ route('admin.email-campaign') }}" class="btn btn-info">Back</a>
            </div>

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

<section class="content">
    <div class="container-fluid">
        @if ($errors->any())
            <div class="alert alert-danger">
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
        <form id="emailCampaignAddForm" action="{{ route('admin.email-campaign-save') }}" method="post">
        @csrf
            <div class="row">

                <div class="col-md-9">
            
                    <div class="card card-primary">
                        <div class="card-header">
                            <h3 class="card-title">Create A New Campaign</h3>
                        </div>
                        <div class="card-body">
                            <div class="form-group">
                                <label for="name">Campaign Title</label>
                                <input type="text" class="form-control" 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=0" 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" 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="Parts Warehouse" 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">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="info@partswarehouse.com" id="reply_to_email" placeholder="Enter Reply-to-Email" autocomplete="off">
                            </div>

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

                <div class="col-md-3">
                    <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" 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 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 disabled-field" name="schedule_date" id="schedule_date" placeholder="Enter schedule date" autocomplete="off">
                                            <input type="time" class="form-control ml-2 disabled-field" name="schedule_time" id="schedule_time" placeholder="Enter schedule time" autocomplete="off">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row mt-4">

                                <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" 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"  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>

    $(".subscriber_list_id").click(function () {
        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.");
            },
        });
    });

    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 to receive data from the iframe
    function receiveDataFromIframe(data) {
       $('#content').text(data);
       if($('#emailCampaignAddForm').valid()){
            $('#emailCampaignAddForm').submit();
       }
    }

    function receiveDataFromIframeTestEmail(data) {
       $('#content').text(data);
    }

    function callIframeFunction() {
        const iframe = document.getElementById('myIframe');
        const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
        const saveButton = iframeDoc.querySelector('.fa-save');
        if (saveButton) {
            saveButton.click();
        }
    }

    function callIframeFunctionTestEmail() {
        const iframe = document.getElementById('myIframe');
        const iframeWindow = iframe.contentWindow;
        console.log(iframeWindow.executeTestEmailHtml);
        if (iframeWindow && typeof iframeWindow.executeTestEmailHtml === 'function') {
            iframeWindow.executeTestEmailHtml();
        }
    }
    
     $('#emailCampaignAddForm input, #emailCampaignAddForm select').on('keyup change input', function() {
        $("#saveMain").prop("disabled", false);
    });

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

</script>



<script>
    
    function callTestEmailFunction(){
        
        callIframeFunctionTestEmail();
        setTimeout(function() {
            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 content = $('#content').val();
            var emailcampaignId = "";

            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,
                        content: content,
                        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);
            }
        }, 1000);
       
        
    };
    
</script>

<script>
    $(function () {

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

    //   $('#emailCampaignAddForm').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