@extends('layouts.app')
@section('title', 'Mobile | Push Notifications')
@section('extrastyles')
    <link rel="stylesheet" href="{{ asset('/plugins/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css') }}" />
    <link href="{{ asset('/plugins/select2/select2.css') }}" rel="stylesheet">
    <style>
        .select2-container {
            z-index: 99999;
        }
        .actionOptionSelect .select2-container {
            z-index: 1;
        }
    </style>
@endsection

@section('content')
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title2">
                    <h5>Create Notification</h5>
                </div>
                <div class="ibox-content p-md" id="notification-form">
                    @include('flash::message')
                    <div class="clearfix"></div>
                    {!! Form::open(['novalidate' => 'novalidate' , 'onsubmit' => isset($isClone) ? 'return cloneNotification(this);' : 'return saveNotification(this);' , 'id' => 'notificationForm']) !!}
                    @if(isset($notification))
                        <input type="hidden" name="notification_id" value="{{$notification->id}}" />
                    @endif
                    <div class="form-group">
                        {!! Form::label('campaign_name','Campaign Name') !!}
                        {!! Form::text('campaign_name' , @$notification->campaign_name , ['class' => 'form-control','placeholder' => 'Campaign Name','required'=>'true']) !!}
                    </div>
                    <div class="form-group">
                        {!! Form::label('title','Notification Title') !!}
                        {!! Form::text('title' , @$notification->title , ['class' => 'form-control','placeholder' => 'Notification Title','required'=>'true']) !!}
                    </div>
                    <div class="form-group">
                        {!! Form::label('description','Notification Description') !!}
                        {!! Form::text('description' , @$notification->description , ['class' => 'form-control','placeholder' => 'Notification Description','required'=>'true']) !!}
                    </div>
{{--                    <div class="form-group">--}}
{{--                        {!! Form::label('long_description','Notification Long Description') !!}--}}
{{--                        <div class="form-group">--}}
{{--                            {!! RTEForm::rte('long_description', @$notification->long_description ) !!}--}}
{{--                        </div>--}}
{{--                    </div>--}}
                    <div class="form-group">
                        {!! Form::label('action','Action') !!}
                        {!! Form::select('action', ['' => 'Select', 'product' => 'Product', 'product_group' => 'Product Group', 'category' => 'Category', 'coupon' => 'Coupon', 'cart' => 'Cart', 'url' => 'URL'] , @$notification->action , ['class' => 'form-control action','id' => 'action']) !!}
                    </div>

                    
                    <div class="form-group actionLabelSelect">
                        {!! Form::label('action_label','Action Label') !!}
                        {!! Form::text('action_label' , @$settings['action_text'] ?? 'View Product' , ['class' => 'form-control actionLabel','placeholder' => 'Action Label','required' => 'true']) !!}
                    </div>

                    <div class="form-group actionOptionSelect actionOptionParentSelect" style="display:{{ isset($notification) && (@$notification && @$notification->action) ? 'block' : 'none' }}">
                        {!! Form::label('action_value','Action') !!}
                        {!! Form::select('action_value', isset($actionData) ? $actionData : [] , @$settings['action_value'] , ['class' => 'form-control actionOptions','id' => 'actionOptions', 'style' => 'display:'.$showActionOptions.' width:100%' , 'multiple' => false]) !!}
                        {!! Form::text('action_value_text' , @$settings['action_value']  ?? '' , ['class' => 'form-control','required'=>'true', 'id' => 'actionText', 'style' => 'display: '.$showActionInput ]) !!}
                    </div>

                    <div class="pull-right mb-2">
                        <a class="btn btn-primary" href="javascript:void(0);" data-toggle="modal" data-target="#create_user">Add Users</a>
                    </div>

                    <table style="width: 100%;" class="table table-striped table-bordered table-hover" id="notification_listing">
                        <thead>
                        <tr>
                            <th>Type</th>
                            <th>Action</th>
                        </tr>
                        </thead>
{{--                        @if(!empty($notificationRules))--}}
                            <tbody class="notificationRulesListBody">
                                @include('Website::mobile-setting.push-notifications.user-rule-listing')
                            </tbody>
{{--                        @endif--}}
                    </table>
                    <h4 class="total_users float-right"></h4>

                    {{-- <div class="form-group">
                        {!! Form::label('users','Users') !!}
                        {!! Form::select('users', $userList , @$notification->users , ['class' => 'form-control','id' => 'userList']) !!}
                    </div>

                    <div class="form-group userOptionSelect" style="display:{{@$notification && @$notification->users == 'user_roles' ? 'block' : 'none' }}">
                        {!! Form::label('role_id','User Roles') !!}
                        {!! Form::select('role_id', isset($roles) ? $roles : [] , @$settings['role_id'] , ['class' => 'form-control','id' => 'userOptions', 'style' => 'display:'.@$notification && @$notification->users == 'user_roles' ? 'block' : 'none' ]) !!}
                    </div> --}}

                    <div class="form-group">
                        {!! Form::label('when','When') !!}
                        {!! Form::select('when', ['now' => 'Now', 'select_time' => 'Select Time'] , @$notification->when , ['class' => 'form-control','id' => 'schedule']) !!}
                    </div>

                    <div class="form-group schedule_date_input" style="display:{{@$notification && @$notification->when == 'select_time' ? 'block' : 'none' }}">
                        {!! Form::label('schedule_date','Schedule Date') !!}
                        <div class="input-group">
                            <span class="input-group-addon">
                                <i class="fa fa-calendar"></i>
                            </span>
                            <input type="text" name="schedule_date" id="schedule_date" class="form-control" value="{{ (isset($notification->schedule_date) && $notification->schedule_date!= '0000-00-00') ? $notification->schedule_date : date('Y/m/d H:i:s') }}">
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary form-btn">Send</button>
                        <a class="btn btn-secondary" href="javascript:void(0);" data-toggle="modal" data-target="#try_notification">Try Notifiaction</a>
{{--                    <button type="button" class="btn btn-secondary form-btn">Try Notifiaction</button>--}}
                    {!! Form::close() !!}
                </div>
            </div>
        </div>
    </div>

    <div class="modal inmodal fade" id="create_user" class="select_select2" tabindex="" role="dialog"  aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                {!! Form::open(['novalidate' => 'novalidate', 'onsubmit' => 'return saveList(this);']) !!}
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">Add User</h4>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="notification_id" value="{{ isset($notification->id) ? $notification->id : '' }}"  />
                    <div class="form-group">
                        {!! Form::label('rules','Rules') !!}
                        {!! Form::select('rules', $userList , isset($rules->type) ? $rules->type : isset($userType) , ['class' => 'form-control','id' => 'userList']) !!}
                    </div>
                    {{-- @include('Website::mobile-setting.push-notifications.user-roles-list') --}}
                    <div class="custom-conditions">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>

    <div class="modal inmodal fade" id="update_user" class="select_select2" tabindex="" role="dialog"  aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                {!! Form::open(['novalidate' => 'novalidate', 'onsubmit' => 'return updateNotificationList(this);']) !!}
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">Update User</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        @if(isset($notification->id))
                            <input type="hidden" name="notification_id" value="{{ $notification->id }}"  />
                        @endif
                        {!! Form::label('rules','Rules') !!}
                        <input type="hidden" name="rules" value="" class="rules_data" />
                        {!! Form::select('rules', $userList , [] , ['class' => 'form-control','id' => 'userList', 'disabled']) !!}
                    </div>
                    <div class="custom-conditions">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>

    <div class="modal inmodal fade" id="try_notification" tabindex="" role="dialog"  aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                {!! Form::open(['novalidate' => 'novalidate', 'onsubmit' => 'return sendTryNotification(this);']) !!}
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">Try Notification</h4>
                </div>
                <div class="modal-body">
                    <input type="hidden" name="notification_id" value="{{ isset($notification->id) ? $notification->id : '' }}"  />
                    <div class="form-group">
                        {!! Form::label('email','Email') !!}
                        {!! Form::text('email' , '' , ['class' => 'form-control tryNotificationEmail','placeholder' => 'Email','required'=>'true']) !!}
                    </div>
                    {{-- @include('Website::mobile-setting.push-notifications.user-roles-list') --}}
                    <div class="custom-conditions">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Submit</button>
                </div>
                {!! Form::close() !!}
            </div>
        </div>
    </div>

@endsection

@section('footer')
    <script src="{{ asset('/plugins/dateRangePicker/moment.js') }}" ></script>
    <script src="{{ asset('/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js') }}" ></script>
    <script src="{{ asset('/plugins/select2/select2.js') }}"></script>
    <script>
        let isRendered = false;
        $(document).ready(function() {

            actions();
            initializeProductSelect2();

            $('#action').change(function () {
                // $('#actionText').val('');
                let actionLabel = '{{__('View')}}';
                const actionSelect = $(this).children("option:selected");
                const actionVal = actionSelect.val();
                const actionText = actionSelect.text();

                if(actionVal.trim() !== '') {
                    $('.actionLabelSelect').show();
                }

                if(actionVal.trim() == '') {
                    $('.actionLabelSelect').hide();
                    $('.actionOptionSelect.actionOptionParentSelect').hide();
                } else if(actionVal === 'product') {
                    actionLabel = '{{__('View Product')}}';
                }else if (actionVal === 'cart') {
                    actionLabel =  '{{__('View Cart')}}';
                }else if (actionVal === 'coupon') {
                    actionLabel =  '{{__('Add to Cart')}}';
                }
                if(isRendered) {
                    $('#action_label').val(actionLabel);
                }
                isRendered = true;

                $('.actionOptionSelect').find('label').text(actionText);

                if(actionVal !== 'product' && $('.actionOptions').data('select2')) {
                    $('.actionOptions').select2('destroy');
                }

                if(actionVal === 'product' || actionVal === 'cart' || actionVal === 'category' || actionVal === 'product_group') {
                    $('#actionText').hide();
                }

                if(actionVal === 'cart') {
                    $('.actionOptionSelect').hide();
                }else{
                    if(actionVal.trim() !== '') {
                        $('.actionOptionSelect').show();
                    }
                }

                if(actionVal === 'url') {
                    $('#actionText').show();
                    $('.actionOptions').hide();
                }else if(actionVal === 'coupon') {
                    $('#actionText').show();
                    $('.actionOptions').hide();
                }else if(actionVal === 'product') {
                    $('#actionText').hide();
                    $('.actionOptions').show();
                    initializeProductSelect2();
                }else{
                    $.ajax({
                        method: "GET",
                        url: '{{ mobile_notification_url('action') }}',
                        data: "action=" + actionVal,
                    }).done(function(response) {
                        if(response && Object.keys(response).length > 0) {
                            $('.actionOptionSelect').show();
                            $('.actionOptions').show();
                            $('#actionText').hide();
                            $('.actionOptions').empty();
                            $.each(Object.keys(response), function (i, id) {
                                $('.actionOptions').append($('<option>', {
                                    value: id,
                                    text : response[id]
                                }));
                            });
                        }
                    });
                }
            });
            $('#action').change();
            $('#schedule').change(function () {
                const schedule = $(this).children("option:selected").val();
                if(schedule === 'select_time') {
                    $('.schedule_date_input').show();
                    dateTimePicker('#schedule_date', 'YYYY-MM-DD HH:mm:ss');
                    $('.form-btn').text('Schedule');
                }else{
                    $('.form-btn').text('Send');
                    $('.schedule_date_input').hide();
                }
            });

            dateTimePicker('#schedule_date', 'YYYY-MM-DD HH:mm:ss');

            @if(!isset($notification))
            $('.action').change();
            @endif

        });

        function initializeProductSelect2() {
            $( ".actionOptions" ).select2({
                placeholder : 'Search Product',
                minimumInputLength: 2,
                maximumSelectionLength: 10,
                tags: false,
                ajax: {
                    url: "{{ mobile_notification_url('search-product') }}",
                    dataType: 'json',
                    data: function (term) {
                        return term
                    },
                    processResults: function (data, page) {
                        return {
                            results: data
                        };
                    }
                }
            });
        }

        let notificationId = 0;
        $(window).on('load',function (){
            @if(isset($notification->id))
                notificationId = '{{ $notification->id }}';
            @endif
            getUserRulesUsersCount();
        });

        function getUserRulesUsersCount() {
            $.ajax({
                method: "GET",
                data: "id=" + notificationId,
                url: '{{ mobile_notification_url('count-users') }}',
            }).done(function(response) {
                $('.total_users').html('Estimated Users (Users which has mobile app and notifications enabled): '+response);
            });
        }

        {{--$(window).on('load',function (){--}}
        {{--    let id = 0;--}}
        {{--    @if(isset($notification->id))--}}
        {{--        id = '{{ $notification->id }}';--}}
        {{--    @endif--}}

        {{--    $.ajax({--}}
        {{--        method: "GET",--}}
        {{--        data: "id=" + id,--}}
        {{--        url: '{{ mobile_notification_url('total-users') }}',--}}
        {{--    }).done(function(response) {--}}
        {{--        console.log(response);--}}
        {{--    });--}}
        {{--});--}}

        function editUserRules($id){
            $.ajax({
                method: "GET",
                url: '{{ mobile_notification_url('user-rule') }}',
                data: "rule_id=" + $id
            }).done(function(response) {
                $('#update_user .custom-conditions').html(response.html);
                $("#update_user #userList").val(response.rules);
                $("#update_user .rules_data").val(response.rules);
                $('#update_user').modal('show');
                $('#update_user .country_id').select2();
                $('#update_user .language_id').select2();
                $('#update_user .userOptions').select2();
                getUserRulesUsersCount();
            });
        }

        $(document).on('change', '#userList', function () {
                const userType = $(this).children("option:selected").val();
                $.ajax({
                method: "GET",
                url: '{{ mobile_notification_url('user-form') }}',
                data: "userType=" + userType
            }).done(function(response) {
                $('#create_user .custom-conditions').html(response);
                $('#create_user .country_id').select2();
                $('#create_user .language_id').select2();
                $('#create_user .userOptions').select2();
            });
                // if(userType === 'user_roles'){
                //     $('.languagesOptionSelect').hide();
                //     $('.userOptionSelect').hide();
                //     $('.countryOptionSelect').hide();
                //     $('.userOptionSelect').hide();
                //     getActionData(userType);
                // }
                // // else if(userType === 'custom') {
                // //     $('.userOptionSelect').hide();
                // //     window.open('{{mobile_notification_url('custom-list')}}', '_blank');
                // // }
                // else if (userType === 'country'){
                //     $('.languagesOptionSelect').hide();
                //     $('.userOptionSelect').hide();
                //     $('.select_select2 .country_id').select2();
                //     getActionData(userType);
                // }
                // else if(userType === 'language'){
                //     $('.countryOptionSelect').hide();
                //     $('.userOptionSelect').hide();
                //     $('.select_select2 .language_id').select2();
                //     getActionData(userType);
                // }
                //  else{
                //     $('.userOptionSelect').hide();
                // }
            });

        function getActionData(userType){
            $.ajax({
                method: "GET",
                url: '{{ mobile_notification_url('users') }}',
                data: "userType=" + userType
            }).done(function(response) {
                if(response.success == 'user_roles'){
                    if(response.data && Object.keys(response.data).length > 0) {
                        $('.userOptionSelect').show();
                        $('.userOptions').show();
                        $('.userOptions').empty();
                        $.each(Object.keys(response.data), function (i, id) {
                            $('.userOptions').append($('<option>', {
                                value: id,
                                text : response.data[id]
                            }));
                        });
                    }
                }
                if(response.success == 'country'){
                    if(response.data && Object.keys(response.data).length > 0) {
                        $('.countryOptionSelect').show();
                        $('.country_id').show();
                        $('.country_id').empty();
                        $.each(Object.keys(response.data), function (i, id) {
                            $('.country_id').append($('<option>', {
                                value: id,
                                text : response.data[id]
                            }));
                        });
                    }
                }
                if(response.success == 'language'){
                    if(response.data && Object.keys(response.data).length > 0) {
                        $('.languagesOptionSelect').show();
                        $('.language_id').show();
                        $('.language_id').empty();
                        $('#create_user .language_id').select2();
                        $.each(Object.keys(response.data), function (i, id) {
                            $('.language_id').append($('<option>', {
                                value: id,
                                text : response.data[id]
                            }));
                        });
                    }
                }
            });
        }

        function actions(){
            const actionSelect = $('.action').children("option:selected");
            const actionVal = actionSelect.val();
            const actionText = actionSelect.text();
            $('.actionOptionSelect').find('label').text(actionText);
            if(actionVal === 'url') {
                $('#actionText').show();
                $('.actionOptions').hide();
            }else if(actionVal === 'coupon') {
                $('#actionText').show();
                $('.actionOptions').hide();
            }else{
                $.ajax({
                    method: "GET",
                    url: '{{ mobile_notification_url('action') }}',
                    data: "action=" + actionVal,
                }).done(function(response) {
                    if(response && Object.keys(response).length > 0) {
                        $('.actionOptionSelect').show();
                        $('.actionOptions').show();
                        $('#actionText').hide();
                        $('.actionOptions').empty();
                        $.each(Object.keys(response), function (i, id) {
                            $('.actionOptions').append($('<option>', {
                                value: id,
                                text : response[id]
                            }));
                        });
                    }
                });
            }
        }

        function deleteUserRules(id){
            let notificationId = 0;
            @if(isset($notification->id))
                notificationId = '{{ $notification->id }}';
            @endif
            if(confirm('Are you sure you want to delete this item ?')) {
                $.ajax({
                    method: 'POST',
                    url: '{{ mobile_notification_url('delete-list')}}',
                    data: 'id='+id + '&notificationId=' + notificationId,
                }).done(function(response) {
                    $('#notification_listing .notificationRulesListBody').html(response);
                    getUserRulesUsersCount();
                });
            }
        }

        function saveList(object) {
            var formData = $(object).serialize();
            $.ajax({
                method: 'POST',
                url: '{{ mobile_notification_url('store-user-rules')}}',
                data: 'data='+formData,
            }).done(function(response) {
                $('#notification_listing .notificationRulesListBody').html(response);
                $("#create_user").modal('hide');
                getUserRulesUsersCount();
            });
            return false;
             return reloadAjaxSubmit('create_user',"{{ mobile_notification_url('store-user-rules')}}",'name','Submit');
        }

        function updateNotificationList(object) {
            var formData = $(object).serialize();
            $.ajax({
                method: 'POST',
                url: '{{ mobile_notification_url('update-user-rules')}}',
                data: 'data='+formData,
            }).done(function(response) {
                $("#update_user").modal('hide');
                getUserRulesUsersCount();
            });
            return false;
            {{--return reloadAjaxSubmit('update_user',"{{ mobile_notification_url('update-user-rules')}}",'name','Submit');--}}
        }

        function getButtonText() {
            const option = $('#schedule').children("option:selected").val();
            return option === 'select_time' ? 'Schedule' : 'Send';
        }

        function saveNotification() {
            return reloadAjaxSubmit('notification-form',"{{ mobile_notification_url('store')}}",'campaign_name', getButtonText(), "{{ application_url('website/mobile-setting/push-notifications') }}");
        }

        function updateNotification() {
            return reloadAjaxSubmit('notification-form',"{{ mobile_notification_url('store')}}",'campaign_name','Submit',getButtonText(), "{{ application_url('website/mobile-setting/push-notifications') }}");
        }

        function cloneNotification() {
            return reloadAjaxSubmit('notification-form',"{{ mobile_notification_url('clone')}}",'campaign_name', getButtonText(), "{{ application_url('website/mobile-setting/push-notifications') }}");
        }

        function sendTryNotification() {
            let formData = $('#notificationForm').serialize();
            const tryNotificationEmail = $('.tryNotificationEmail').val();
            if(tryNotificationEmail.trim() == '') {
                toastrShowError('Error','Please provide valid email address');
            }
            formData += '&email='+encodeURIComponent(tryNotificationEmail);
            $.ajax({
                method: 'POST',
                url: '{{ mobile_notification_url('try-notification')}}',
                data: 'data='+formData,
                dataType: 'json',
            }).done(function(response) {
                if(response && response.success) {
                    toastrShow('Success','Notification sent successfully!');
                    $("#try_notification").modal('hide');
                }else if(response.error) {
                    toastrShowError('Error',response.error);
                }
            });
            return false;
        }

    </script>
@endsection