@extends('layouts.admin')


@section('style')
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
    <style>
        div#target-search div.drow{
            display: grid;
            width: 100%;
            grid-template-columns: 150px auto;
        }
        div#target-search div.drow div{
            margin: 10px;
        }

        div#target-search input[type=number]{
            width: 5em;
        }

        div#div_target_list{
            display: inline-block;
            width: 300px;
            margin: 0px;
            border: 0px;
        }

        div#div_target_selected{
            display: inline-block;
            width: 300px;
            margin: 0px 0px 0px 20px;;
            border: 0px;
        }

        div#blast_status_container {
            width: 100%;
            height: 500px;
            overflow: auto;
        }

        div#tags span{
            line-height: 1.2em;
            padding: 5px;
            border-radius: 0.6em;
            margin: 0.5em;
            min-width: 15em;
            color: #FFFFFF;
            background-color: #222d32;
            display: inline-block;
        }

        div#sms_guide {
            background-color: #ededed;
            padding: 10px;
            box-shadow: 2px 2px 6px;
            margin-top: 10px;
            min-height: 10px;
        }

/* draggable targets */
[data-draggable="target"]
{
	float:left;
	list-style-type:none;

	width:276px;
	height:15em;
	overflow-y:auto;

	margin:0px;
	padding:10px;

	border:2px solid #888;
	border-radius:0.2em;

	background:#eee;
	color:#555;
	cursor: -moz-grab;
	cursor: -webkit-grab;
	cursor: move;
}

/* drop target state */
[data-draggable="target"][aria-dropeffect="move"]
{
	border-color:#68b;
	background:#fff;
	cursor: pointer;
}

/* drop target focus and dragover state */
[data-draggable="target"][aria-dropeffect="move"]:focus,
[data-draggable="target"][aria-dropeffect="move"].dragover
{
	outline:none;

	box-shadow:0 0 0 1px #fff, 0 0 0 3px #68b;
}

/* draggable items */
[data-draggable="item"]
{
	display:block;
	list-style-type:none;

	margin:0 0 2px 0;
	padding:0.2em 0.4em;

	border-radius:0.2em;

	line-height:1.3;
}

/* items focus state */
[data-draggable="item"]:focus
{
	outline:none;

	box-shadow:0 0 0 2px #68b, inset 0 0 0 1px #ddd;
}

/* items grabbed state */
[data-draggable="item"][aria-grabbed="true"]
{
	background:#8ad;
	color:#fff;
}
    </style>
@endSection

@section('content')

        <!-- Main content -->
        <section class="content">
            <h2>1. Query Users</h2>
            <div id='target-search'>
                <div class="drow">
                    <div>Module:</div>
                    <div>
                        <select name="module" id="module">
                            @if ($stampcard_module)
                                <option value="dsc">Stampcard</option>
                            @endif
                            @if ($plant_module)
                                <option value="plant">Plant Rewards</option>
                            @endif
                        </select>
                    </div>
                </div>

                <div class="drow">
                    <div>Date Of Birth:</div>
                    <div>
                        <select id="dob-days" name="dob-days" >

                        </select>

                        <select id="dob-months" name="dob-months" >

                        </select>

                        <select id="dob-years" name="dob-years" >

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


                <div class="drow">
                    <div>Registration Date:</div>
                    <div>
                        <input type="text" name="reg-daterange" value="01/01/2021 - 01/01/2021" />
                    </div>
                </div>

                <div class="drow">
                    <div>Mobile Verified:</div>
                    <div>
                        <select id='filter-mobile-verified'>
                            <option value='all'>Both</option>
                            <option value='1'>Verified Only</option>
                            <option value='0'>Non-verified Only</option>
                        </select>
                    </div>
                </div>

                <div class="drow">
                    <div>Membership Details:</div>
                    <div>
                        <select id='filter-membership-details'>
                            <option value='all'>Both</option>
                            <option value='member'>With member details only</option>
                            <option value='no-member'>No membership details</option>
                        </select>
                    </div>
                </div>

                @if ($stampcard_module)
                    <div class="drow" data-module="dsc">
                        <div>Cards Completed:</div>
                        <div>
                            >= <input type='number' id='min-cards-completed' value='0'></input> AND <= <input type='number' id='max-cards-completed' value='99'></input>
                        </div>
                    </div>

                    <div class="drow" data-module="dsc">
                        <div>Stamps Completed:</div>
                        <div>
                            >= <input type='number' id='min-stamps-completed' value='0'></input> AND <= <input type='number' id='max-stamps-completed' value='99'></input>
                        </div>
                    </div>
                @endif

                @if ($plant_module)
                    {{-- if data-module can be use for multiple module, just put a space to input another module like how html attr class work --}}
                    <div class="drow" data-module="plant">
                        <div>Plant Matured Type:</div>
                        <div>
                            <select id="plant-matured-type">
                                <option value="all">Both</option>
                                <option value="1">With Receipt Token</option>
                                <option value="0">Without Receipt Token</option>
                            </select>
                        </div>
                    </div>

                    <div class="drow" data-module="plant">
                        <div>Number of Plant Matured</div>
                        <div>
                            >= <input type='number' id='min-plant-matured' value='0'></input> AND <= <input type='number' id='max-plant-matured' value='99'></input>
                        </div>
                    </div>

                    <div class="drow" data-module="plant">
                        <div>Active Plant Level:</div>
                        <div>
                            >= <input type='number' id='min-plant-level' value='0'></input> AND <= <input type='number' id='max-plant-level' value='0'></input>
                        </div>
                    </div>

                    <div class="drow" data-module="plant">
                        <div>Inactivity Weeks:</div>
                        <div>
                            >= <input type='number' id='min-inactivity-week' value='0'></input> AND <= <input type='number' id='max-inactivity-week' value='0'></input>
                        </div>
                    </div>

                    <div class="drow" data-module="plant">
                        <div>Merchant Visited:</div>
                        <div>
                            <select id="merchant">
                                <option value="">Choose a merchant</option>
                                @foreach ($merchants as $merchant)
                                    <option value="{{ $merchant->id }}">{{ $merchant->company_name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                @endif

                <button id='btn-get-targets'>Get Blast Targets</button>
            </div>
            <hr>
            <div id='target-select'>
            		<h2>2. Select list of targets for SMS Blast</h2>
			        Drag and drop users to select those you would like to reach out to for this blast.<br><br>
			        <div id="div_target_list">
				        List of targets from your database<br>
				        <ol id="target_list" data-draggable="target">
				        </ol>
			        </div>
			        <div id = "div_target_selected">
				        Selected targets (<span id="target_count"></span>)<br>
				        <ol id="target_selected" data-draggable="target">
				        </ol>
			        </div>
			        <br><br>
			        <button id="btn-target-addthousand" class="float-left" style="display: inline-block;">Add 1000</button>
			        <button id="btn-target-addall" class="float-left" style="display: inline-block;">Add All</button>
            </div>
            <hr>
            <div id="message">
                <h2>3. Select list of targets for SMS Blast</h2>
				Sender ID: <input type="text" id="sms_from_mobile" value=""><br>
				Test Recipient Mobile: <input type="text" id="test_destination" value=""><br>
                <span id="sms_char_count"></span><br>
				<textarea name="sms_content" id="sms_content" rows="5" cols="80"></textarea>
                <br>
                <button id="btn btn-sms-guide">Show SMS Guide</button>
                <div id="sms_guide" style="display: none;"></div>
                <br>
				<div id='tags'></div>
                <br>Important: Please confirm legal requirements (e.g. Prefixes, UNSUB numbers) and constraints (e.g. Time of Day) for SMS blast within respective countries.
                <br>
                    <button id="btn-send-test" class="float-left" style="display: inline-block;">Send Test</button>
                    <button id="btn-send-sms" class="float-left" style="display: none;">Send SMS</button>

			</div>
            <hr>
            <h2>Blast Status Update</h2>
            <div id="blast_status_container" style="display: none;"></div>


        </section>


        <!-- /.content -->

@endsection


@section('script')
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <script type="text/javascript" src="../js/dragdrop.js"></script>
    <script type="text/javascript" src="../js/dob.js"></script>
    <script>
    $(document).ready(function(){

        $(document).on("click","#btn-get-targets", function(e){
            $("#target_list").html("");
            $("#target_selected").html("");

            var postdata = {
                'min_cards_completed':$("#min-cards-completed").val(),
                'max_cards_completed':$("#max-cards-completed").val(),
                'min_stamps_completed':$("#min-stamps-completed").val(),
                'max_stamps_completed':$("#max-stamps-completed").val(),
                'mobile_verified': $("#filter-mobile-verified").val(),
                'membership_details': $("#filter-membership-details").val(),
                'reg_from': window.reg_from,
                'reg_to': window.reg_to,
                'dob_day': $("#dob-days").val(),
                'dob_month': $("#dob-months").val(),
                'dob_year': $("#dob-years").val(),
                'module': $('#module').val(),
                'plant': {
                    'matured_type': $('#plant-matured-type').val(),
                    'min_matured': $('#min-plant-matured').val(),
                    'max_matured': $('#max-plant-matured').val(),
                    'min_level': $('#min-plant-level').val(),
                    'max_level': $('#max-plant-level').val()
                },
                'min_inactivity_week': $('#min-inactivity-week').val(),
                'max_inactivity_week': $('#max-inactivity-week').val(),
                'merchant': $('#merchant').val()
            };

            Object.getOwnPropertyNames(postdata).forEach(function(key) {
                if (postdata[key] === undefined) {
                    postdata[key] = null;
                }
            });

            console.log(postdata);
            $.ajax({
                method: "post",
                cache: false,
                url: AJAX_URL + 'blast_get_dsc_targets',
                data: postdata,
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
            }).done(function (response) {
                var response = JSON.parse(response);
                    console.log(response);
                if(response.status == 'success'){
                    console.log(response.html);
                    $("#target_list").html(response.html);
                    $("#tags").html(response.tags);
                }

            });
        });

        $(document).on("click","#btn-send-test", function(e){

            $("#blast_status_container").html("");
            $("#btn-send-sms").show();
            var message = $("#sms_content").val();

            var i = 0;
            $("#blast_status_container").prepend("<p>Initiating Test SMS Blast</p>");

            $( "ol#target_selected li" ).each(function( index ) {
		        var e = $( this );
		        var recipient_id = e.attr('value');
                var sender_id = $("#sms_from_mobile").val();
                var postdata = {
                    'sender_id':sender_id,
				    'message':message,
                    'recipient_id':recipient_id,
                    'recipient_source':$('#module').val(),
                    'test_destination': $("#test_destination").val()
                    };
                console.log(postdata);


                if(i <= 10){
                    $.ajax({
                        method: "post",
                        cache: false,
                        url: AJAX_URL + 'blast_send_test',
                        data: postdata,
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                    }).done(function (response) {
                        var response = JSON.parse(response);
                            console.log(response);

                        if(response.status == 'success'){

                            i++;
                            $("#blast_status_container").show();
                            $("#blast_status_container").prepend("<p>" + response.html + "</p>");

                            if(i == $( "#target_selected li" ).length){
                                $("#blast_status_container").prepend("<p>Test Completed</p>");

                            }
                        }

                    });

                }

            }); //End Foreach



        });

        $(document).on("click","#btn-send-sms", function(e){
            $("#btn-send-sms").hide();
            $("#blast_status_container").html("");
            var message = $("#sms_content").val();

            var i = 0;
            $("#blast_status_container").prepend("<p>Initiating SMS Blast</p>");

            $( "ol#target_selected li" ).each(function( index ) {
		        var e = $( this );
		        var recipient_id = e.attr('value');
                var sender_id = $("#sms_from_mobile").val();
                var postdata = {
                    'sender_id':sender_id,
				    'message':message,
                    'recipient_id':recipient_id,
                    'recipient_source':$('#module').val()
                    };
                console.log(postdata);


                    $.ajax({
                        method: "post",
                        cache: false,
                        url: AJAX_URL + 'blast_send_live',
                        data: postdata,
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                    }).done(function (response) {
                        var response = JSON.parse(response);
                            console.log(response);

                        if(response.status == 'success'){
                            i++;

                            $("#blast_status_container").show();
                            $("#blast_status_container").prepend("<p>" + response.html + "</p>");

                            if(i == $( "#target_selected li" ).length){
                                $("#blast_status_container").prepend("<p>Blast Completed</p>");
                            }
                        }

                    });


            }); //End Foreach

            $("#blast_status_container").prepend("<p>Blast Completed</p>");

        });

        $(function() {
            $('input[name="reg-daterange"]').daterangepicker({
                opens: 'left'
                }, function(start, end, label) {
                    window.reg_from = start.format('YYYY-MM-DD') ;
                    window.reg_to = end.format('YYYY-MM-DD');
                    console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
                });

            $('input[name="dob-daterange"]').daterangepicker({
                opens: 'left',
                singleDatePicker: true
            });
        });

        $(document).on("click","#btn-target-addall", function(e){

	        $("#target_selected").html($("#target_list").html());

        });

        $(document).on("click","#btn-target-addthousand", function(e){
            volume = 1000;
            var count = 0
            $( "#target_list li" ).each(function() {
                var e = $( this );
                if(count < volume){
                    $("#target_selected").append(e);
                    count++;
                    console.log(count);
                }else{
                    return false;
                }
            });

        });

        $("#sms_content").keyup(function(e){
    		$("#sms_char_count").text("Characters: " + $(this).val().length);
    	});

        $('#module').on('change', function(e) {
            const opt = $(this).val();
            $('div[data-module]').each(function() {
                const row = $(this);
                row.not(
                    row.filter(`[data-module*='${opt}']`).show()
                ).hide();
            });

            if ($('#sms_guide:first').is(':visible')) {
                $('#btn-sms-guide').trigger('click');
            }
        }).trigger('change');

        $('#btn-sms-guide').on('click', function(e) {
            const el_btn = $(this);
            const el_content = $('#sms_guide:first');

            if (el_content.is(':visible')) {
                el_content.hide();
                el_btn.text('Show SMS Guide');
                return;
            }

            $.ajax({
                method: "get",
                cache: false,
                url: AJAX_URL + 'blast_guide/'+$('#module').val(),
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
            }).done(function (response) {
                try {
                    if (typeof response !== 'object') {
                        response = JSON.parse(response);
                    }
                } catch (e) {
                    response = {};
                }

                if (response.status !== 'success') {
                    el_content.html('');
                    return;
                }

                let html = '';
                Object.getOwnPropertyNames(response.data).forEach(function (key) {
                    html += `<div><b>${key}</b>: ${response.data[key]}</div>`;
                });
                el_content.html(html);
                el_content.show();
                el_btn.text('Hide SMS Guide');
            });
        });
    });

    </script>
@endSection