@extends('mobile.layout.index')
@section('title')
    iungo
@endsection
@push('css-mobile')
    <style>
        .title-noti{
            text-align: center;
            margin-bottom: 0;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            width: 116px;
            color: white;
            border-radius: 4px;
            font-size: 14px;
            font-weight: 600;
        }
        .title-warning{
            background: #FEC300;
        }
        .title-info-box{
            background: blue;
        }
        .title-mess-bg{
            background: sienna;
        }
        .title-bill-bg{
            background: #F44336;
        }
        .title-system-bg{
            background: #5799DB;
        }
        .title-fa-bg{
            background: #08BF5A;
        }
        .title-calendar-bg{
            background: #FF850B;
        }


    </style>
@endpush
@section('content')
{{--    @if($ver != '/v2')--}}
    @include('mobile.layout.header')
{{--    @endif--}}
    <div class=""  style="margin-bottom: 70px">
        <div class="">
        <div class="table-responsive-xs table-responsive-sm">
            @if(isset($notifyData))
                <input type="hidden" id="nextPageUrl" value="{{ $notifyData->nextPageUrl() }}">
                <input type="hidden" id="currentPage" value="{{ $notifyData->currentPage() }}">
            @endif
            <table class="table table-bordered table-hover" style="margin-bottom: unset">
                <thead>
                <tr class="header-table">
{{--                    <th style="width: 30%"></th>--}}
{{--                    <th class="text-center" style="width: 70%">名前</th>--}}
{{--                    <th style="width: 30%"></th>--}}
                </tr>
                </thead>
                <tbody class="list-notify">
                @if($notifyData && count($notifyData) > 0)
                    @foreach($notifyData as $key => $value)
                        <tr
                                 @if($value->is_confirm == 1) style="background: white;border-bottom: 1px solid #EDEDED" @endif
                                @if($value->is_confirm == 0) style="background: rgba(244,255,249,1);border-bottom: 1px solid #EDEDED" @endif
{{--                        onclick="window.location='{{route('ChatMobile', ['conversation_id' => $value->conversation_id])}}'"--}}
                        >
                            <td style="width: 20%; border: none">
                                <img
                                        @if($value->type != 6)src="{{(!is_null($value->avatar_url)) ? $value->avatar_url : '/images/blank_avatar.png'}}" onerror="this.onerror=null;this.src='/images/blank_avatar.png'" @endif
                                        @if($value->type == 6)src="{{(!is_null($value->bot_image)) ? $value->bot_image : '/images/8.png'}}" onerror="this.onerror=null;this.src='/images/8.png'" @endif
                                     class="image-list-notify" style="border-radius: 50%">
                            </td>
                            <td  style="width: 80%; color: rgba(112,112,112,1); padding-left: 0; border: none">
                                <div style="font-size: 10px; margin-bottom: 0; display: flex;justify-content: space-between;">

                                    <p class="title-noti
                                    @if($value->type == 1)
                                            title-mess-bg
                                    @elseif($value->type == 2)
                                            title-info-box
                                    @elseif($value->type == 3)
                                            title-fa-bg
                                    @elseif($value->type == 4)
                                            title-warning
                                    @elseif($value->type == 5 || $value->type == 8 || $value->type == 9)
                                            title-bill-bg
                                    @elseif($value->type == 6)
                                            title-system-bg
                                    @elseif($value->type == 7)
                                            title-calendar-bg
                                    @endif
                                            ">
                                        {{$value->notify_title}}
                                    </p>
                                    <p style="margin-bottom: 0;">{{$value->notify_time}}</p>
                                </div>

                                <p style="font-size: 15px; margin-bottom: 0; margin-right: 5px">{{$value->notify_content}}</p>
                                <p style="font-size: 15px; margin-bottom: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 65vw">
                                    @if($value->name && $value->real_name)
                                        {{$value->name}} ({{$value->real_name}})
                                    @else
                                        {{$value->name}}
                                    @endif 
                                </p>
                                <!-- @if($value['is_verify'] == 0)
                                    <br>
                                    <span style="color: red;">Line＠設定でWebhookURLを入力して、承認してください。</span>
                                @endif -->
                            </td>
{{--                            <td>--}}
{{--                                {{$value->notify_time}}--}}
{{--                            </td>--}}
{{--                            <td>--}}
{{--                                <button class="btn btn-success btn-sm access-bot-mobile"--}}
{{--                                        style="margin: 40px auto;;font-size: 14px"--}}
{{--                                        onclick='window.location="{{route('ListFriendMobile',['id'=>Hashids::encode($value->id)])}}"'>--}}
{{--                                    選択--}}
{{--                                </button>--}}
{{--                            </td>--}}
                        </tr>
                    @endforeach
                @else
                    <tr>
                        <td colspan="3" style="text-align: center"> 現在、通知はありません</td>
                    </tr>
                @endif
                </tbody>
            </table>
        </div>
        </div>
        @include('mobile.pages.list_notify.modal.modal_filter')
    </div>
    <div class="modal fade" id="modalConfirm" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-body">
                    <p>確認済みにしますか？</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="btn-confirm-clear-badge-notify-v2" onclick="makeConfirmNotify()">はい</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">キャンセル</button>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('script-mobile')
  <script>
      var nextPageUrl = $('#nextPageUrl').val();
      var is_busy = false;
      $(document).ready(function () {
          $(window).scroll(function () {
              if ($(window).scrollTop() + 896 >= $(window).height()) {
                  // ajax call get data from server and append to the div
                  if (is_busy == true) {
                      return false;
                  }

                  if (!nextPageUrl)
                      return false;

                  is_busy = true;

                  $.ajax({
                      url: nextPageUrl,
                      data: { flagLoad: 1},
                      dataType: 'json',
                      success: function (data) {
                          console.log(data)
                          nextPageUrl = data.notifyData.next_page_url;
                          $('#nextPageUrl').val(data.notifyData.next_page_url);
                          $('#currentPage').val(data.notifyData.current_page);
                          const html = getListNotifyHTML(data.notifyData.data);
                          $('.list-notify').append(html)
                          is_busy = false;
                      }
                  });
              }
          });
      });
      function clearAllCheck() {

          const arrTypeName = [
              'filter_notify_unsent',
              'filter_notify_sent',
              'filter_notify_when_adding_friends',
              'filter_notify_answer_form',
              'filter_notify_event',
              'filter_notify_settlement',
              'filter_notify_calendar',
          ];
          arrTypeName.forEach(element => {
              if ($(`#${element}`).is(":checked")) {
                  $(`#${element}`).click();
              }
          });
      }
    function filterNotify() {
        const arrStatusName = [
            'filter_notify_unsent', 
            'filter_notify_sent', 
        ];
        const arrTypeName = [
            'filter_notify_when_adding_friends',
            'filter_notify_answer_form', 
            'filter_notify_event', 
            'filter_notify_settlement', 
            'filter_notify_calendar',
            // 'filter_account_notification'
        ];
        const arrStatusValue = [];
        const arrTypeValue = [];
        arrStatusName.forEach(element => {
            if ($(`#${element}`).is(":checked")) {
                arrStatusValue.push($(`#${element}`).val());
            }
        });
        arrTypeName.forEach(element => {
            if ($(`#${element}`).is(":checked")) {
                arrTypeValue.push($(`#${element}`).val());
            }
        });
      $.ajaxSetup({
        headers: {
            "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
        }
      });
      $.ajax({
        method: 'GET',
        url: `/ajax/filter-notify`,
        data: {filterStatus: arrStatusValue, filterType: arrTypeValue},
        // beforeSend: function () {
        //   $.LoadingOverlay('show');
        // },
        success: function (response) {
            if(response.success) {
               window.location.reload();
                // $.LoadingOverlay('hide');
            }
        },
        error: function () {
          // $.LoadingOverlay('hide');
        }
      })
    }

    function getListNotifyHTML(data) {
        let html = '';

        if (data.length > 0) {
            data.forEach(v => {
                if (v['is_confirm'] == 0)
                    html += '<tr style="background: rgba(244,255,249,1);border-bottom: 1px solid #c6bdbd" >';
                else if (v['is_confirm'] == 1)
                    html += '<tr style="background: white;border-bottom: 1px solid #c6bdbd">';

                html += '   <td style="width: 20%; border: none">';
                if (v['type'] != 6) {
                    html += '       <img src="' + (v['avatar_url'] != null ? v['avatar_url'] : '/images/blank_avatar.png') + '" onerror="this.onerror=null;this.src=\'/images/blank_avatar.png\'" class="image-list-notify" style="border-radius: 50%">';
                }
                if (v['type'] == 6) {
                    html += '       <img src="' + (v['bot_image'] != null ? v['bot_image'] : '/images/8.png') + '" onerror="this.onerror=null;this.src=\'/images/8.png\'" class="image-list-notify" style="border-radius: 50%">';
                }
                html += '   </td>';
                html += '   <td  style="width: 80%; color: rgba(112,112,112,1); padding-left: 0; border: none">';
                html += '       <div style="font-size: 10px; margin-bottom: 0; display: flex;justify-content: space-between;">';
                html += '       <p class="title-noti ';
                if (v['type'] == 1)
                    html += 'title-mess-bg';
                else if (v['type'] == 2)
                    html += 'title-info-box';
                else if (v['type'] == 3)
                    html += 'title-fa-bg';
                else if (v['type'] == 4)
                    html += 'title-warning';
                else if (v['type'] == 5)
                    html += 'title-bill-bg';
                else if (v['type'] == 6)
                    html += 'title-system-bg';
                else if (v['type'] == 7)
                    html += 'title-calendar-bg';

                html += '       ">';
                html += v['notify_title'];
                html += '       </p>';
                html += '           <p style="margin-bottom: 0;">' + v['notify_time'] + '</p>';
                html += '       </div>';

                html += '       <p style="width: 80%;; font-size: 15px; margin-bottom: 0;margin-right: 5px">' + v['notify_content'] + '</p>';
                html += '       <p class="name-bot"';
                html += '       style="font-size: 15px; margin-bottom: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 65vw;color:rgba(112,112,112,1);" >';
                if (v['name'] && v['real_name']){
                    html += v['name'] + '(' + v['real_name'] + ')';
                }
                if(v['name'] && v['real_name'] == null) {
                    html += v['name'];
                }
                html += '       </p>';
                html += '   </td>';
                html += '</tr>';
            })
        } else {
            html += '<tr>';
            html += '   <td colspan="3" style="text-align: center">現在、発表はありません</td>';
            html += '</tr>';
        }

        return html;
    }

    function makeConfirmNotify() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            method: 'GET',
            url: `/ajax/confirm-notify`,
            data: {},
            beforeSend: function () {
                $.LoadingOverlay('show');
            },
            success: function (response) {
                $.LoadingOverlay('hide');
                $('#modalConfirm').hide();
                if(response.status) {
                    window.location.reload();
                }
            },
            error: function () {
                $('#modalConfirm').hide();
                $.LoadingOverlay('hide');
            }
        })
    }
  </script>
@endpush