@include('layouts.header')

@php
$user_encryption = request()->data;
@endphp

<section class="use-case">
    <div class="container">
        <div class="section-head">
            <h2>Message Use Case Information</h2>                                   
        </div>
        <form class="forms-sample" method="POST" enctype="multipart/form-data" id="updateStatusForm">
        <div class="form-wrapper">
            <div class="row justify-content-center custom-accordian">
                <div class="col-lg-12 col-md-12" id="success_div">
                    <input type="hidden" name="UsAppToPersonUsecase" id="UsAppToPersonUsecase">
                    <input type="hidden" name="user_id" value="{{$users->user_id}}">
                    <input type="hidden" name="brand_id" id="brand_id" value="{{request()->brand_id}}">
                    <input type="hidden" name="data" value="{{request()->brand_id}}">
                    @if(!empty($users->phone_number))

                    @foreach($users->phone_number as $row)
                    <input type="hidden" name="phone_number[]" value="{{$row->phone_number}}">
                    <input type="hidden" name="mesaaging_id[]" value="{{$row->messaging_id}}">
                    @if(!empty($row->sid))
                    <input type="hidden" name="sid[]" value="{{$row->sid}}">
                    @endif
                    @endforeach 
                    @endif
                    <label for="email">
                    </label>
                    <div class="dropdown">
                        <a type="button" class="form-control dropdown-toggle" data-bs-toggle="dropdown" id="select_campaign_use_case_dropdown" aria-expanded="false">
                            Select Campaign use case
                        </a>
                        
                        <ul class="dropdown-menu" style="">
                            <li>
                                <a class="dropdown-item UsAppToPersonUsecase " data-id="2FA" data-text="Two-Factor authentication (2FA)" href="javascript:;">
                                    <p>Two-Factor authentication (2FA)</p>
                                    <span>Any authentication or account verification such as OTP. </span>
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item UsAppToPersonUsecase " href="javascript:;" data-id="ACCOUNT_NOTIFICATION" data-text="Account Notification">
                                    <p>Account Notification</p>
                                    <span>Notifications about the status of an account or related to being a part of an account.</span>
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item UsAppToPersonUsecase " href="javascript:;" data-id="CUSTOMER_CARE" data-text="Customer Care">
                                    <p>Customer Care</p>
                                    <span>Support, account management, and other avenues of customer interaction.</span>
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item UsAppToPersonUsecase " href="javascript:;" data-id="DELIVERY_NOTIFICATION" data-text="Delivery Notification">
                                    <p>Delivery Notification</p>
                                    <span>Information about the status of a delivery.</span>
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item UsAppToPersonUsecase " href="javascript:;" data-id="FRAUD_ALERT" data-text="Fraud Alert Messaging">
                                    <p>Fraud Alert Messaging</p>
                                    <span>Messaging about potential fraudulent activity such as spending alerts.</span>
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item UsAppToPersonUsecase " href="javascript:;" data-id="HIGHER_EDUCATION" data-text="Higher Education"> 
                                    <p>Higher Education</p>
                                    <span>Message campaigns from colleges, universities, and other education institutions.</span>
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item UsAppToPersonUsecase " href="javascript:;" data-id="LOW_VOLUME" data-text="Low Volume Mixed">
                                    <p>Low Volume Mixed </p>
                                    <span>The Low Volume Mixed Campaign use case can be used to send messages of multiple use cases such as Customer Care and Deliv.</span>
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item UsAppToPersonUsecase " href="javascript:;" data-text="Marketing">
                                    <p>Marketing</p>
                                    <span>Promotional content such as sales and limited time offers.</span>
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item UsAppToPersonUsecase " href="javascript:;" data-text="MIXED">
                                    <p>Mixed</p>
                                    A campaign that covers multiple use cases such as Customer Care and Delivery Notifications. Note - mixed campaigns are likely to h</span>
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item UsAppToPersonUsecase " href="javascript:;" data-text="Polling and voting">
                                    <p>Polling and voting</p>
                                    <span>For conducting polling and voting, such as customer surveys. Not for political use.</span>
                                </a>
                            </li>
                            <li>
                                <a class="dropdown-item UsAppToPersonUsecase " href="javascript:;" data-text="Public Service Announcement">
                                    <p>Public Service Announcement </p>
                                    <span>PSAs to raise audience awareness about a given topic.</span>
                                </a>
                            </li>
                            <li><a class="dropdown-item UsAppToPersonUsecase " href="javascript:;" data-text="Security Alert">
                                    <p>Security Alert</p>
                                    <span>Notification of a compromised system (software or hardware related).</span>
                                </a>
                            </li>
                        </ul>
                        <div id="UsAppToPersonUsecase_error" class="reset_message"></div>
                    </div>
                    <div class="form-group">
                        <label for="email">Description : </label>
                        <textarea class="form-control" id="Description" name="Description" placeholder="Please describe the purpose or use case for which you intend to use these messages. Example: This campaign sends one-time passcodes to the end users when they try to log into our company’s website. " rows="5"></textarea>
                        <div id="Description_error" class="reset_message"></div>
                    </div>

                    <div class="form-group">
                        <label for="email">Sample message #1 : </label>
                        <textarea class="form-control" id="MessageSamples" name="MessageSamples" rows="2" placeholder="Example: Your one-time passcode is 123456."></textarea>
                        <div id="MessageSamples_error" class="reset_message"></div>
                    </div>

                    <div class="form-group">
                        <label for="email">Sample message #2 : </label>
                        <textarea class="form-control" id="MessageSamples_2" name="MessageSamples_2" rows="2" placeholder="Example: Your one-time passcode is 123456."></textarea>
                        <div id="MessageSamples_2_error" class="reset_message"></div>
                    </div>

                    <div class="form-group ">
                        <label for="email">Message Flow : </label>
                        <textarea class="form-control" id="MessageFlow" name="MessageFlow" rows="3" placeholder="End users opt-in by visiting www.example.com and adding their phone number. They then check a box agreeing to receive text messages from Example Brand. Additionally, end users can also opt-in by texting START to (111) 222-3333 to opt in."></textarea>
                        <div id="MessageFlow_error" class="reset_message"></div>
                    </div>

                    <div class="form-error-message" id="errorMessage"></div>
                    <div class="form-group text-end">
                        <input type="submit" name="submit" id="submit_button" value="Submit" class="btn btn-primary">	
                    </div>
                </div>
            </div>
        </div>
        </form>
    </div>
</section>

@include('layouts.footer')


<script>
     var user_encryption = "";
    $('body').on('click', '.UsAppToPersonUsecase', function () {
        id = $(this).attr('data-id');
        $('#UsAppToPersonUsecase').val(id);
        $('.UsAppToPersonUsecase').removeClass('active');
        $(this).addClass('active');
        select_campaign_use_case_dropdown = $(this).attr('data-text');
        $('#select_campaign_use_case_dropdown').html(select_campaign_use_case_dropdown);
    });

    $('body').on('click', 'li', function () {
        $(this).removeClass('active');
        setTimeout(function () {
            $(this).addClass('active');
        }, 200);
    });

    $('#updateStatusForm').submit(function (e) {
        e.preventDefault();
        var formData = new FormData($(this)[0]);

        $('.form-error-message').html('');
        $('.reset_message').html('');

        $('#submit_button').val('Submitting...');

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $('#submit_button').prop('disabled', true);
        $.ajax({
            type: 'POST',
            url: "{{ url('/campaign/save')}}",
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: (data) => {
                console.log(data);
                $('#submit_button').prop('disabled', false);
                $('#submit_button').val('Submit');
                data = jQuery.parseJSON(data);


                if (data.campaign_status) {

                    brand_sid = $('#brand_id').val();
                    window.location.href = "{{url('/')}}/brand_status?brand_id=" + brand_sid + "&data=" + user_encryption;
                    return false;

                    /*  if (data.campaign_status == "IN_PROGRESS") {
                     $('#success_div').html('\
                     <div class="col-sm-12">\n\
                     <center>\n\
                     <div class="text-center" style="color:green">\n\
                     <b><h4>You Campaign is In Progress!</h4></b>\n\
                     </div>\n\
                     </center>\n\
                     </div>');
                     return false;
                     } else if (data.campaign_status == "FAILED") {
                     $('#success_div').html('\
                     <div class="col-sm-12">\n\
                     <center>\n\
                     <div class="text-center" style="color:red">\n\
                     <b><h4>You Campaign is failed!</h4></b>\n\
                     </div>\n\
                     </center>\n\
                     </div>');
                     return false;
                     } else {
                     $('#success_div').html('\
                     <div class="col-sm-12">\n\
                     <center>\n\
                     <div class="text-center" style="color:green">\n\
                     <b><h4>You Campaign is created successfully!</h4></b>\n\
                     </div>\n\
                     </center>\n\
                     </div>');
                     return false;
                     }*/
                }

                if (data.success == false) {

                    $('#errorMessage').html("<span class='text-danger'>" + data.message + "</span>");
                } else {
                    $('#success_div').html(' <div class="col-sm-12"><center><div class="text-center" style="color:green"><b><p>Thank You</p><p>Messaging Services Register Successfully</p></b></div></center></div>');
                }


            },
            error: function (data) {
                $('#submit_button').prop('disabled', false);
                console.log("--------Error------------");

                $.each(data.responseJSON.errors, function (key, value) {
                    $('#' + key + '_error').html('<span class="text-danger">' + value + '</span>');
                    console.log(key + ": " + value);

                });
                console.log(data.responseJSON.errors.first_name)
                if (data.responseJSON.errors) {
//                $('#errorMessage').html("<span class='text-danger'>Required Fields is missing!</span>");
                } else {
                    $('#errorMessage').html("<span class='text-danger'>Something went wrong!</span>");
                }
                $('#submit_button').val('Submit');
            }
        });

    });

    /*
     $('#updateStatusForm').submit(function (e) {
     e.preventDefault();
     var formData = new FormData($(this)[0]);
     
     $('.form-error-message').html('');
     $('.reset_message').html('');
     
     $('#submit_button').val('Submitting...');
     
     $.ajaxSetup({
     headers: {
     'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
     }
     });
     $('#submit_button').prop('disabled', true);
     $.ajax({
     type: 'POST',
     url: "{{ url('/save_messaging_services')}}",
     data: formData,
     cache: false,
     contentType: false,
     processData: false,
     success: (data) => {
     console.log(data);
     $('#submit_button').prop('disabled', false);
     $('#submit_button').val('Submit');
     data = jQuery.parseJSON(data);
     if (data.status == false) {
     $('#errorMessage').html("<span class='text-danger'>Something went wrong!</span>");
     } else {
     $('#success_div').html(' <div class="col-sm-12"><center><div class="text-center" style="color:green"><b><p>Thank You</p><p>Messaging Services Register Successfully</p></b></div></center></div>');
     }
     
     
     },
     error: function (data) {
     $('#submit_button').prop('disabled', false);
     console.log("--------Error------------");
     
     $.each(data.responseJSON.errors, function (key, value) {
     $('#' + key + '_error').html('<span class="text-danger">' + value + '</span>');
     console.log(key + ": " + value);
     
     });
     console.log(data.responseJSON.errors.first_name)
     if (data.responseJSON.errors) {
     $('#errorMessage').html("<span class='text-danger'>Required Fields is missing!</span>");
     } else {
     $('#errorMessage').html("<span class='text-danger'>Something went wrong!</span>");
     }
     $('#submit_button').val('Save');
     }
     });
     
     });
     
     
     $('body').on('click', '.UsAppToPersonUsecase', function () {
     id = $(this).attr('data-id');
     $('#UsAppToPersonUsecase').val(id);
     $('.UsAppToPersonUsecase').removeClass('active');
     
     $(this).addClass('active');
     
     
     select_campaign_use_case_dropdown = $(this).attr('data-text');
     
     $('#select_campaign_use_case_dropdown').html(select_campaign_use_case_dropdown);
     
     
     });
     
     $('body').on('click', 'li', function () {
     
     $(this).removeClass('active');
     setTimeout(function(){
     $(this).addClass('active');
     },200);
     
     
     
     });
     */
</script> 

@include('layouts.footer_end');