@include('layouts.header')
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<div class="container-fluid" >

    <form class="forms-sample" method="POST" enctype="multipart/form-data" id="updateStatusForm">
        <div class="row" style="margin-top:20px;">
            <div class="col-sm-3">
            </div>
            <div class="col-sm-6">
                <center>
                    <div class="row">
                        <div class="col-sm-12">
                            <h2>Create a US A2P Campaign<div style="float:right">
                                    <!--<a href="{{url('/')}}" class="btn btn-danger btn-sm">Back</a>-->
                                </div>
                            </h2>
                            <hr/>
                        </div>
                    </div>
                </center>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-3">
            </div>

            <div class="col-sm-6"  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" value="{{request()->brand_id}}">

                <!--<label for="email">Available A2P Campaign use cases :</label>-->
                <label for="email">Available A2P Campaign use cases :</label>

                <div class="dropdown">
                    <button type="button" class="form-control dropdown-toggle" data-bs-toggle="dropdown" id="select_campaign_use_case_dropdown">
                        Select Campaign use case
                    </button>
                    <ul class="dropdown-menu">
                        <li><a class="dropdown-item UsAppToPersonUsecase " data-id="2FA" data-text="Two-Factor authentication (2FA)" href="javascript:;" >
                                <b>Two-Factor authentication (2FA)</b><br/>
                                Any authentication or account verification such as OTP. 
                            </a>
                            <hr/>
                        </li>

                        <li><a class="dropdown-item UsAppToPersonUsecase " href="javascript:;" data-id="ACCOUNT_NOTIFICATION" data-text="Account Notification" >
                                <b>Account Notification</b><br/>
                                Notifications about the status of an account or related to being a part of an account.
                            </a>
                            <hr/>
                        </li>

                        <li><a class="dropdown-item UsAppToPersonUsecase " href="javascript:;" data-id="CUSTOMER_CARE" data-text="Customer Care">
                                <b>Customer Care</b><br/>
                                Support, account management, and other avenues of customer interaction.
                            </a>
                            <hr/>
                        </li>
                        <li><a class="dropdown-item UsAppToPersonUsecase " href="javascript:;" data-id="DELIVERY_NOTIFICATION" data-text="Delivery Notification">
                                <b>Delivery Notification</b><br/>
                                Information about the status of a delivery.
                            </a>
                            <hr/>
                        </li>
                        <li><a class="dropdown-item UsAppToPersonUsecase " href="javascript:;"  data-id="FRAUD_ALERT" data-text="Fraud Alert Messaging">
                                <b>Fraud Alert Messaging</b><br/>
                                Messaging about potential fraudulent activity such as spending alerts.
                            </a>
                            <hr/>
                        </li>
                        <li><a class="dropdown-item UsAppToPersonUsecase " href="javascript:;"  data-id="HIGHER_EDUCATION" data-text="Higher Education"> 
                                <b>Higher Education</b><br/>
                                Message campaigns from colleges, universities, and other education institutions.
                            </a>
                            <hr/>
                        </li>
                        <li><a class="dropdown-item UsAppToPersonUsecase " href="javascript:;"  data-id="LOW_VOLUME" data-text="Low Volume Mixed">
                                <b>Low Volume Mixed </b><br/>
                                The Low Volume Mixed Campaign use case can be used to send messages of multiple use cases such as Customer Care and Deliv
                            </a>
                            <hr/>
                        </li>
                        <li><a class="dropdown-item UsAppToPersonUsecase " href="javascript:;"  data-text="Marketing">
                                <b>Marketing</b><br/>
                                Promotional content such as sales and limited time offers.
                            </a>
                            <hr/>
                        </li>
                        <li><a class="dropdown-item UsAppToPersonUsecase " href="javascript:;"  data-text="MIXED">
                                <b>Mixed</b><br/>
                                A campaign that covers multiple use cases such as Customer Care and Delivery Notifications. Note - mixed campaigns are likely to h
                            </a>
                            <hr/>
                        </li>
                        <li><a class="dropdown-item UsAppToPersonUsecase " href="javascript:;"  data-text="Polling and voting">
                                <b>Polling and voting</b><br/>
                                For conducting polling and voting, such as customer surveys. Not for political use.
                            </a>
                            <hr/>
                        </li>
                        <li><a class="dropdown-item UsAppToPersonUsecase " href="javascript:;"  data-text="Public Service Announcement">
                                <b>Public Service Announcement </b><br/>
                                PSAs to raise audience awareness about a given topic.
                            </a>
                            <hr/>
                        </li>
                        <li><a class="dropdown-item UsAppToPersonUsecase " href="javascript:;"  data-text="Security Alert">
                                <b>Security Alert</b><br/>
                                Notification of a compromised system (software or hardware related).
                            </a>
                        </li>
                    </ul>
                    <div id="UsAppToPersonUsecase_error" class="reset_message" style="margin-top:4px;"></div>

                </div>
                <div class="form-group" style='margin-top: 15px;'>
                    <label for="email">Message Flow:</label>
                    <textarea class="form-control" id="MessageFlow" name="MessageFlow" 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." >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>                
                <div id="MessageFlow_error" class="reset_message" style="margin-top:4px;"></div>
                <div class="form-group" style='margin-top: 15px;'>
                    <label for="email">Description:</label>
                    <textarea class="form-control" id="Description" name="Description" placeholder="We are holding 1000+ Twilio phone numbers and we have registered as an ISV brand as we are not the direct owner of the Phone numbers. Our users use these phone numbers for their personal communication so message content will be dynamic." rows="4">We are holding 1000+ Twilio phone numbers and we have registered as an ISV brand as we are not the direct owner of the Phone numbers. Our users use these phone numbers for their personal communication so message content will be dynamic.</textarea>
                </div>
                <div id="Description_error" class="reset_message" style="margin-top:4px;"></div>

                <div class="form-group" style='margin-top: 15px;'>
                    <label for="email">Message Samples 1:</label>
                    <textarea class="form-control" id="MessageSamples" name="MessageSamples" placeholder="It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout." rows="2" >It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</textarea>
                </div>
                <div id="MessageSamples_error" class="reset_message" style="margin-top:4px;"></div>
                <div class="form-group" style='margin-top: 15px;'>
                    <label for="email">Message Samples 2:</label>
                    <textarea class="form-control" id="MessageSamples_2" name="MessageSamples_2" placeholder="The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters." rows="2" >The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters.</textarea>
                </div>
                <div id="MessageSamples_2_error" class="reset_message" style="margin-top:4px;"></div>

                <b>
                    <center>
                        <div class="form-error-message" id="errorMessage"></div>
                    </center>
                </b>
                <br />
                <center><input type="submit" name="submit" id="submit_button" value="Submit" class="btn btn-primary btn-sm"></button></center>



            </div>



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

@include('layouts.footer')


<script>

$('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) {
                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('Save');
        }
    });

});

/*
 $('#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');