@extends("admin.template.layout")

@section('content')
    <div class="container-xxl flex-grow-1 container-p-y">


        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">{{$page_heading}}</h5>

            </div>
            <form id="admin_form" method="post" action="{{route('fcm-notification.submit')}}"
                  enctype="multipart/form-data">
                <div class="card-body">
                    <div class="row">
                        <div class="col-xs-12 col-sm-6 mb-4">

                            @csrf()
                            <input type="hidden" name="id" value="{{$id}}">
                            <label class="form-label" for="bs-validation-name">Title<span
                                    class="text-danger">*</span></label>
                            <input
                                type="text"
                                class="form-control jqv-input" data-jqv-required="true"
                                id="notification-title"
                                name="title"
                                value="{{$notification->title}}"
                            />


                        </div>
                        <div class="col-xs-12 col-sm-6 mb-4">
                            <label class="form-label">Body</label>
                            <input type="text" class="form-control jqv-input" data-jqv-required="true"
                                   id="notification-body" name="body" value="{{$notification->body}}">
                        </div>
                        <div class="col-xs-12 col-sm-6">
                            <label class="form-label">Image</label>
                            <input type="file" name="image" data-role="file-image" data-preview="preview_image"
                                   class="jqv-input form-control">
                            <img src="{{$notification->image}}" style="height:200px;" class="mt-2" id="preview_image">
                        </div>
                        <div class="col-xs-12 col-sm-6">
                            <label class="form-label">Send To<span class="text-danger">*</span></label>
                            <select class="form-control jqv-input" data-jqv-required="true" id="notificationTtpe" name="type">
                                <option value="">Select</option>
                                @foreach(\App\Models\FcmNotification::NOTIFICATION_TYPE as $key=>$value)
                                    <option value="{{$key}}"
                                            @if($notification->type==$key) selected @endif>{{$value}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-sm-12 mb-2">
                            <div class="row filter bg-light rounded p-2 py-4 m-1 border border-dashed" id="FILTER_{{\App\Models\FcmNotification::NEW_USERS}}">
                                <div class="col-12">
                                    <h5 class="h5 mb-0">Filter New Users</h5>
                                    <small class="text-muted mb-0">Send notification to new users by date range.</small>
                                </div>
                                <div class="col-md-6">
                                    <label for="from_date" class="form-label">From Date</label>
                                    <input type="date" class="form-control jqv-input" data-role="datepicker"
                                           data-format="yyyy-mm-dd" name="from_date" id="from_date" >
                                </div>
                                <div class="col-md-6">
                                    <label for="to_date" class="form-label">To Date</label>
                                    <input type="date" class="form-control jqv-input" data-role="datepicker"
                                           data-format="yyyy-mm-dd" name="to_date" id="to_date" >
                                </div>
                            </div>
                            <div class="row filter bg-light rounded p-2 py-4 m-1 border border-dashed" id="FILTER_{{\App\Models\FcmNotification::VENUE_USERS}}">
                                <div class="col-12">
                                    <h5 class="h5 mb-0">Venue Users</h5>
                                    <small class="text-muted mb-0">Select custom filters to send notification.</small>
                                </div>
                                <div class="col-md-12">
                                    <label for="venues_list" class="form-label">Select Venue</label>
                                    <select class="form-control jqv-input select2" multiple id="venues_list" name="venue_ids[]">
                                        <option value="">Select</option>
                                        @foreach($venues as $venue)
                                            <option value="{{$venue->id}}">{{$venue->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="row filter bg-light rounded p-2 py-4 m-1 border border-dashed" id="FILTER_{{\App\Models\FcmNotification::COMMUNITY_USERS}}">
                                <div class="col-12">
                                    <h5 class="h5 mb-0">Community Users</h5>
                                    <small class="text-muted mb-0">Select at least one community from list.</small>
                                </div>
                                <div class="col-md-12">
                                    <label for="community_list" class="form-label">Select Communities</label>
                                    <select class="form-control jqv-input select2" multiple data-jqv-required="true" id="community_list" name="community_ids[]">
                                        <option value="">Select</option>
                                        @foreach($communities as $community)
                                            <option value="{{$community->id}}">{{$community->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="row" id="fetchUsersDiv">
                                <div class="col-md-12 text-right mb-2">
                                    <button type="button" class="main-btn primary-btn-outline btn-hover mt-2" onclick="fetchUsers()">Fetch Users</button>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12" id="specificUsersList">
                            <div class="mb-4">
                                <label class="form-label" for="bs-validation-name">Selected Users</label>
                                <select class="form-control jqv-input select2" id="notification-users-list" multiple name="user_ids[]">
                                    <option value="">Select Users</option>
                                </select>
                            </div>
                        </div>
                        <div class="col-12">
                            <button type="submit" class="main-btn primary-btn btn-hover" disabled>
                                Submit
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@stop

@section('script')
    <script>
        App.initFormView();
        let form_in_progress = 0;
        $('.filter').hide();
        $(document).ready(function () {
            $('.select2').select2();
            $('#community_list').select2();
            $('#venues_list').select2();
            $('#specificUsersList').hide();
            $('#fetchUsersDiv').hide();
            $('#notificationTtpe').on('change', function () {
                $('.filter').hide();
                $('#FILTER_' + $(this).val()).fadeIn();
                if($(this).val() == ''){
                    $('#fetchUsersDiv').hide();
                }else{
                    $('#fetchUsersDiv').fadeIn();
                }
                $('#notification-users-list').html('');
            });
        });

        function fetchUsers(){
            let data = {
                _token: "{{csrf_token()}}",
                type: $('#notificationTtpe').val(),
                from_date: $('#from_date').val(),
                to_date: $('#to_date').val(),
                venue_ids: $('#venues_list').val(),
                community_ids: $('#community_list').val(),
            };
            $.ajax({
                type: "POST",
                url: "{{route('fcm-notification.get-users')}}",
                data: data,
                success: function (response) {
                    $('#notification-users-list').html(response);
                    $('#notification-users-list').select2();
                    $('#specificUsersList').fadeIn();
                },
                error: function (response) {
                    console.log(response);
                }
            });
        }

        $('body').off('submit', '#admin_form');
        $('body').on('submit', '#admin_form', function (e) {
            e.preventDefault();
            var validation = $.Deferred();
            var $form = $(this);
            var formData = new FormData(this);

            $form.validate({
                rules: {},
                errorElement: 'div',
                errorPlacement: function (error, element) {
                    element.addClass('is-invalid');
                    error.addClass('error');
                    error.insertAfter(element);
                }
            });

            // Bind extra rules. This must be called after .validate()
            App.setJQueryValidationRules('#admin_form');

            if ($form.valid()) {
                validation.resolve();
            } else {
                var error = $form.find('.is-invalid').eq(0);
                $('html, body').animate({
                    scrollTop: (error.offset().top - 100),
                }, 500);
                validation.reject();
            }

            validation.done(function () {
                $form.find('.is-invalid').removeClass('is-invalid');
                $form.find('div.error').remove();


                App.button_loading(true);


                form_in_progress = 1;
                $.ajax({
                    type: "POST",
                    enctype: 'multipart/form-data',
                    url: $form.attr('action'),
                    data: formData,
                    processData: false,
                    contentType: false,
                    cache: false,
                    timeout: 600000,
                    dataType: 'html',
                    success: function (res) {
                        res = JSON.parse(res);
                        console.log(res['status']);
                        form_in_progress = 0;
                        App.button_loading(false);
                        if (res['status'] == 0) {
                            if (typeof res['errors'] !== 'undefined') {
                                var error_def = $.Deferred();
                                var error_index = 0;
                                jQuery.each(res['errors'], function (e_field, e_message) {
                                    if (e_message != '') {
                                        $('[name="' + e_field + '"]').eq(0).addClass('is-invalid');
                                        $('<div class="error">' + e_message + '</div>').insertAfter($('[name="' + e_field + '"]').eq(0));
                                        if(e_field=='user_ids') {
                                            $('[name="' + e_field + '[]"]').eq(0).addClass('is-invalid');
                                            $('<div class="error">' + e_message + '</div>').insertAfter($('[name="' + e_field + '[]"]').eq(0));
                                        }
                                        if (error_index == 0) {
                                            error_def.resolve();
                                        }
                                        error_index++;
                                    }
                                });
                                error_def.done(function () {
                                    var error = $form.find('.is-invalid').eq(0);
                                    $('html, body').animate({
                                        scrollTop: (error.offset().top - 100),
                                    }, 500);
                                });
                            } else {
                                var m = res['message'] || 'Unable to save category. Please try again later.';
                                App.toast(m, 'Oops!', 'error');
                            }
                        } else {
                            App.toast(res['message'] || 'Record saved successfully', 'Success!', 'success');
                            setTimeout(function () {
                                window.location.href = res['oData']['redirect'];
                            }, 2500);

                        }

                    },
                    error: function (e) {
                        form_in_progress = 0;
                        App.button_loading(false);
                        console.log(e);
                        App.toast("Network error please try again", 'Oops!', 'error');
                    }
                });
            });
        });
    </script>
@stop
@section('header')
<style>
    .select2-selection--multiple{height:100% !important}
</style>
@stop