@extends('layouts.main')

@section('content')

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12">
            <div class="card card-primary card-outline card-tabs">
                <div class="card-header p-0 pt-1 border-bottom-0">
                    <ul class="nav nav-tabs" id="custom-tabs-three-tab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="custom-tabs-three-overview-tab" data-toggle="pill"
                                href="#custom-tabs-three-overview" role="tab" aria-controls="custom-tabs-three-overview"
                                aria-selected="false">Overview</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="custom-tabs-three-recipient-tab" data-toggle="pill"
                                href="#custom-tabs-three-recipient" role="tab"
                                aria-controls="custom-tabs-three-recipient" aria-selected="true">Recipients</a>
                        </li>
                    </ul>
                </div>
                <div class="card-body">
                    <div class="tab-content" id="custom-tabs-three-tabContent">
                        <div class="tab-pane fade active show" id="custom-tabs-three-overview" role="tabpanel"
                            aria-labelledby="custom-tabs-three-overview-tab">
                            <div class="p-15">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="card-header">
                                            <h3 class="card-title text-left">Campaign Details</h3>
                                        </div>
                                        <div class="card-body">
                                            <h3 class="card-title">Message: {{$campaignDetails->message}}</h3>
                                            <br>
                                            <h3 class="card-title">Created At: {{$campaignDetails->created_at}}</h3>
                                            <br>
                                        </div>
                                    </div>

                                </div>

                            </div>
                        </div>
                        <div class="tab-pane fade" id="custom-tabs-three-recipient" role="tabpanel"
                            aria-labelledby="custom-tabs-three-recipient-tab">
                            <div class="col-md-12">
                                <!-- <div class="col-sm-2">
                                    <div class="form-group">
                                        <label for="msg_type">Message Status</label>
                                        <select class="selectpicker form-control" name="msg_status" id="msg_status">
                                            <option value="any" @if($status=="any" ) selected @endif>Any</option>
                                            <option value="valid" @if($status=="valid" ) selected @endif>Valid</option>
                                            <option value="invalid" @if($status=="invalid" ) selected @endif>Invalid
                                            </option>
                                            <option value="removed" @if($status=="removed" ) selected @endif>Removed
                                            </option>
                                            <option value="expired" @if($status=="expired" ) selected @endif>Expired
                                            </option>
                                            <option value="failed" @if($status=="failed" ) selected @endif>Failed
                                            </option>
                                            <option value="queued" @if($status=="queued" ) selected @endif>Queued
                                            </option>
                                            <option value="processing" @if($status=="processing" ) selected @endif>
                                                Processing</option>
                                            <option value="processed" @if($status=="processed" ) selected @endif>
                                                Processed</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-sm-2">
                                    <div class="form-group">
                                        <label for="msg_type">SMS Delivery Status</label>
                                        <select class="selectpicker form-control" name="msg_delivery_status"
                                            id="msg_delivery_status">
                                            <option value="null" @if($deliveryStatus==null) selected @endif>All</option>
                                            <option value="sent" @if($deliveryStatus=="sent" ) selected @endif>Read
                                            </option>
                                            <option value="queued" @if($deliveryStatus=="queued" ) selected @endif>
                                                Unread</option>
                                        </select>
                                    </div>
                                </div> -->
                                </div>
                                <table class="table data-table table-hover" id="recipient-table-list">
                                    <thead>
                                        <tr>
                                            <th style="width: 20%;">Id</th>
                                            <th style="width: 25%;">Message</th>
                                            <th style="width: 25%;">Status</th>
                                            <th style="width: 25%;">Delivery Status</th>
                                           
                                        </tr>
                                    </thead>
                                    {{--Dummy data table--}}
                                    <tbody>
                                        @foreach($smsList as $k=>$v)
                                        <tr>
                                            <td>{{$v->id}}</td>
                                            <td>{{$v->message}}</td>
                                            <td>{{$v->status}}</td>
                                            <td>{{$v->deliveryStatus}}</td>
                                            
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            
                        </div>
                    </div>
                </div>
                <!-- /.card -->
            </div>
        </div>
    </div>
</div>

</section>

@endsection

{{--External Style Section--}}
@section('script')
<script>
    $(document).ready(function () {
        $('#recipient-table-list').DataTable();
        fileUploadVisibility1();
        fileUploadVisibility2();
        fileUploadVisibility3();
        bulkMsgSendTypeVisibility();

        $("#recipient-table-list").on("click", ".deleteRecipient", function () {
            var id = $(this).data("id");
            //console.log(id);

            bootbox.confirm("Are you sure?", function (result) {
                if (result) {
                    var _url = $("#_url").val();
                    window.location.href = _url +
                        "/whatsapp/user/manage-whatsapp-campaign/delete/recipients/" + id;
                }
            });
        });

        var deleteTriger = $('#deleteTriger');
        deleteTriger.hide();

        $(".card").delegate(".deleteRow, #bulkDelete", "change", function (e) {
            $('#deleteTriger').toggle($('.deleteRow:checked').length > 0);
        });


        deleteTriger.on("click", function (event) { // triggering delete one by one
            if ($('.deleteRow:checked').length > 0) { // at-least one checkbox checked
                var ids = [];
                $('.deleteRow').each(function () {
                    if ($(this).is(':checked')) {
                        ids.push($(this).val());
                    }
                });
                var ids_string = ids.toString(); // array to string conversion

                $.ajax({
                    type: "POST",
                    url: '{!! url(' / sms / bulk - campaign - recipients - delete / ') !!}',
                    data: {
                        data_ids: ids_string,
                        campaign_id: $('#campaign_id').val()
                    },
                    success: function (result) {
                        if (result.status == 'success') {
                            alertify.log("<i class='fa fa-times-circle'></i> <span>" +
                                result.message + "</span>", "success");
                        } else {
                            alertify.log("<i class='fa fa-times-circle'></i> <span>" +
                                result.message + "</span>", "error");
                        }
                        oTable.draw(); // redrawing datatable
                    },
                    async: false
                });
            }
        });

        /*For Delete Recipient*/
        $("body").delegate(".cdelete", "click", function (e) {
            e.preventDefault();
            var id = this.id;
            bootbox.confirm("Are you sure?", function (result) {
                if (result) {
                    var _url = $("#_url").val();
                    window.location.href = _url + "/sms/delete-campaign-recipient/" + id;
                }
            });
        });

        //----------------------------------------------
        $("#whatsapp_template-1").change(function () {
            var id = $(this).val();
            var dataString = 'wt_id=' + id;
            $.ajax({
                type: "POST",
                url: _url + '/whatsapp/user/get-template-info',
                data: dataString,
                cache: false,
                success: function (data) {
                    console.log(data.message);
                    $('#message-1').val(data.message);
                    //$('.message').html(data);
                }
            });
        });

        var $get_msg1 = $('#message-1');

        $('#merge_value-1').on('change', function () {
            var caretPos = $get_msg1[0].selectionStart;
            var textAreaTxt = $get_msg1.val();
            var txtToAdd = this.value;

            $get_msg1.val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(
                caretPos));
        });

        //----------------------------------------------
        $("#whatsapp_template-2").change(function () {
            var id = $(this).val();
            var dataString = 'wt_id=' + id;
            $.ajax({
                type: "POST",
                url: _url + '/whatsapp/user/get-template-info',
                data: dataString,
                cache: false,
                success: function (data) {
                    console.log(data.message);
                    $('#message-2').val(data.message);
                    //$('.message').html(data);
                }
            });
        });

        var $get_msg2 = $('#message-2');

        $('#merge_value-2').on('change', function () {
            var caretPos = $get_msg2[0].selectionStart;
            var textAreaTxt = $get_msg2.val();
            var txtToAdd = this.value;

            $get_msg2.val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(
                caretPos));
        });

        //----------------------------------------------
        $("#whatsapp_template-3").change(function () {
            var id = $(this).val();
            var dataString = 'wt_id=' + id;
            $.ajax({
                type: "POST",
                url: _url + '/whatsapp/user/get-template-info',
                data: dataString,
                cache: false,
                success: function (data) {
                    console.log(data.message);
                    $('#message-3').val(data.message);
                    //$('.message').html(data);
                }
            });
        });

        var $get_msg3 = $('#message-3');

        $('#merge_value-3').on('change', function () {
            var caretPos = $get_msg3[0].selectionStart;
            var textAreaTxt = $get_msg3.val();
            var txtToAdd = this.value;

            $get_msg3.val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(
                caretPos));
        });

        $('#msg_status').on('change', function () {
            var campId = '{{$id}}';
            var status = $(this).val();
            var deliveryStatus = $('#msg_delivery_status').val();
            console.log(campId);
            console.log(status);
            console.log(deliveryStatus);
            getRecipientsByStatus(campId, status, deliveryStatus);

        });

        $('#msg_delivery_status').on('change', function () {
            var campId = '{{$id}}';
            var deliveryStatus = $(this).val();
            var status = $('#msg_status').val();
            console.log(campId);
            console.log(deliveryStatus);
            console.log(status);
            getRecipientsByStatus(campId, status, deliveryStatus);

        });
    });

    function fileUploadVisibility1() {

        var messageTypeValue = $("#message_type-1").val();
        // console.log(messageTypeValue);
        if (messageTypeValue == "plain") {
            $("#file-upload-1").hide();
        } else {
            $("#file-upload-1").show();
        }
    }

    function fileUploadVisibility2() {

        var messageTypeValue = $("#message_type-2").val();
        // console.log(messageTypeValue);
        if (messageTypeValue == "plain") {
            $("#file-upload-2").hide();
        } else {
            $("#file-upload-2").show();
        }
    }

    function fileUploadVisibility3() {

        var messageTypeValue = $("#message_type-3").val();
        // console.log(messageTypeValue);
        if (messageTypeValue == "plain") {
            $("#file-upload-3").hide();
        } else {
            $("#file-upload-3").show();
        }
    }

    function getRecipientsByStatus(campId, status, deliveryStatus) {
        var cId = campId;
        var status = status;
        var deliveryStatus = deliveryStatus;

        var base_url = $("#_url").val();
        console.log(base_url);
        var apiUrl = "/whatsapp/user/get-recipients/" + cId + "/" + status + "/" + deliveryStatus;
        var requestUrl = base_url + apiUrl;

        $.ajax({
            type: 'GET',
            url: requestUrl,
            dataType: 'json',
            success: function (data) {
                console.log(data);

                if (data.length > 0) {
                    var trHTML = '';

                    $.each(data, function (i, item) {

                        // let result = data.map(a => a.id);

                        // console.log("Hey:", result);

                        console.log(item.id);

                        trHTML += '<tr><td>' + item.id + '</td><td>' + item.message +
                            '</td><td><button class="deleteRecipient btn btn-sm btn-danger" data-id="' +
                            item.id + '">' + 'Delete' + '</button></td></tr>';
                    });

                    $('#recipient-table-list tbody').empty();
                    $('#recipient-table-list').append(trHTML);
                } else {
                    var trHTML = '<tr><td colspan="3">' + 'No data available' + '</td></tr>';
                    $('#recipient-table-list tbody').empty();
                    $('#recipient-table-list').append(trHTML);
                }


            },
            error: function () {
                //console.log(data);
            }
        });
    }

    function bulkMsgSendTypeVisibility() {

        var messageTypeValue = $("#message_type").val();
        console.log(messageTypeValue);

        if (messageTypeValue == "") {
            $("#bulk-whatsapp-form").hide();
            $(".bulk-whatsapp-from-file-form").hide();
            $(".schedule-bulk-whatsapp-from-file-form").hide();
        } else if (messageTypeValue == "bulk-whatsapp") {
            $("#bulk-whatsapp-form").show();
            $(".bulk-whatsapp-from-file-form").hide();
            $(".schedule-bulk-whatsapp-from-file-form").hide();
        } else if (messageTypeValue == "bulk-whatsapp-from-file") {
            $("#bulk-whatsapp-form").hide();
            $(".bulk-whatsapp-from-file-form").show();
            $(".schedule-bulk-whatsapp-from-file-form").hide();
        } else {
            $(".schedule-bulk-whatsapp-from-file-form").show();
            $("#bulk-whatsapp-form").hide();
            $(".bulk-whatsapp-from-file-form").hide();
        }
    }
</script>
@endsection