@extends('layouts.app')

@section('form-title') {{ __('Inbox') }} @endsection
@section('form-sub-title') {{ __('Click a message for more information') }} @endsection

@section('breadcrumb') 
<li class="breadcrumb-item">{{ __('Inbox') }} </li> 
@endsection

@section('content')

<div class="pcoded-inner-content">
    <div class="main-body">
      <div class="page-wrapper">
        <!-- Page body start -->
        <div class="page-body">
          <div class="row">
            <div class="col-sm-12">
                <div class="card mb-4">
                    <div class="card-header">
                        <h5>{{ __('Inbox') }}</h5>
                    </div>
                    <div class="card-block">
                        <div class="row">
                            <div class="col-sm-12">
                                <!-- Nav tabs -->
                                <ul class="nav nav-tabs md-tabs" role="tablist">
                                    <li class="nav-item">
                                        <a class="nav-link active" data-bs-toggle="tab" href="#new" loaded="yes" role="tab">{{ __('New') }}</a>
                                        <div class="slide"></div>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" data-bs-toggle="tab" href="#archive" loaded="no" role="tab">{{ __('Archive') }}</a>
                                        <div class="slide"></div>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" data-bs-toggle="tab" href="#trash" loaded="no" role="tab">{{ __('Trash') }}</a>
                                        <div class="slide"></div>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" data-bs-toggle="tab" href="#spam" loaded="no" role="tab">{{ __('Spam') }}</a>
                                        <div class="slide"></div>
                                    </li>
                                </ul>
                                <!-- Tab panes -->
                                <div class="tab-content card-block p-0">
                                    <div class="tab-pane active" id="new" role="tabpanel">
                                        @include('inbox.messages')
                                    </div>
                                    <div class="tab-pane" id="archive" role="tabpanel"></div>
                                    <div class="tab-pane" id="trash" role="tabpanel"></div>
                                    <div class="tab-pane" id="spam" role="tabpanel"></div>
                                </div>
                                <input type="hidden" name="active_tab" id="active_tab" value="new">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Page body end -->
    </div>
  </div>
</div>
@endsection

@push('child-scripts')
<script>
$(document).ready(function() {
    $(document).on('click', '.pagination a', function(event){
        event.preventDefault();
        let page = $(this).attr('href').split('page=')[1];
        let type = $('#active_tab').val();
        fetch_data(page, type);
    });

  function fetch_data(page, type){
    $.ajax({
      url: "{{ route('inbox.index') }}",
      data: {page: page, type: type},
      success: function(data){
        $('#'+type).html(data);
        initFooTable();
      }
    });
  }

  initFooTable();
  
  function initFooTable(){
    $('.data-table').footable({
      "paging": {
        "enabled": false,
      },
      "sorting": {
        "enabled": true
      }
    });
    //initilizeTooltip();
  }

    $('a[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
        let loaded = $(e.target).attr("loaded");
        let type = $(e.target).attr("href").split('#')[1];
        let page = 1;
        $('#active_tab').val(type);

        if(loaded !== 'yes'){
            fetch_data(page, type);
            // mark this tab as already loaded
            //$(e.target).attr("loaded", 'yes');
        }
    });

    $(document).on('change', "#checkall", function () {
        $("input:checkbox").prop('checked', $(this).prop("checked"));
    });

    $(document).on('click', '.do-action-multiple', function () {
        let action = $(this).data('action');
        let remove_task = 'no';

        // Confirmation for task delition
        if(action === 'trash-d-task' || action === 'spam-d-task'){
            Swal.fire({
                icon: 'warning',
                title: 'Also delete task?',
                text: "You won't be able to recover this task later!",
                showDenyButton: true,
                showCancelButton: true,
                confirmButtonText: 'Yes',
                denyButtonText: `No`,
                confirmButtonColor: '#bb2d3b',
                denyButtonColor: '#0b5ed7',
            }).then((result) => {
                if (result.isConfirmed) {
                    remove_task = 'yes';
                    doActionMultiple(action, remove_task);
                } else if (result.isDenied) {
                    doActionMultiple(action, remove_task);
                }
            });
        }else{
            doActionMultiple(action, remove_task);
        }
    });

    function doActionMultiple(action, remove_task){
        let inboxes = '';

        $('.inbox').each(function(index, obj){
            if(obj.checked == true){
                let inbox = $(obj).val();
                inboxes += inbox + ',';

                if(action === 'archive' || action === 'trash' || action === 'trash-d-task' || action === 'spam-d-task'){
                    $('#tr_'+inbox).fadeOut();
                }else if(action === 'ru-toggle'){
                    if($('#tr_'+inbox).hasClass('read')){
                        $('#tr_'+inbox).addClass('unread');
                        $('#tr_'+inbox).removeClass('read');
                        $('#i_'+inbox).removeClass('fa-eye');
                        $('#i_'+inbox).addClass('fa-eye-slash');
                        $('#i_'+inbox).data('action', 'unread');
                    }else{
                        $('#tr_'+inbox).addClass('read');
                        $('#tr_'+inbox).removeClass('unread');
                        $('#i_'+inbox).removeClass('fa-eye-slash');
                        $('#i_'+inbox).addClass('fa-eye');
                        $('#i_'+inbox).data('action', 'read');
                    }
                }
            }
        });

        if(inboxes !== ''){
            $.ajax({
                url: "{{ route('inbox.update.multiple') }}",
                data: {inboxes:inboxes, action:action, remove_task:remove_task},
                type: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                success: function(data){
                    // recount total unread messages
                    window.totalUsersUnreadInboxes();
                }
            });
        }
    }

    $(document).on('click', '.do-action', function () {
        let action = $(this).data('action');
        let inbox = $(this).data('inbox');
        let remove_task = 'no';

        // Get confirmation to delete task
        if(action === 'trash-d-task' || action === 'spam-d-task'){
            Swal.fire({
                icon: 'warning',
                title: 'Also delete task?',
                text: "You won't be able to recover this task later!",
                showDenyButton: true,
                showCancelButton: true,
                confirmButtonText: 'Yes',
                denyButtonText: `No`,
                confirmButtonColor: '#bb2d3b',
                denyButtonColor: '#0b5ed7',
            }).then((result) => {
                if (result.isConfirmed) {
                    remove_task = 'yes';
                    doAction(action, inbox, remove_task);
                } else if (result.isDenied) {
                    doAction(action, inbox, remove_task);
                }
            });
        }else{
            doAction(action, inbox, remove_task);
        }
    });

    function doAction(action, inbox, remove_task){
        $.ajax({
            url: "{{ route('inbox.update.status') }}",
            data: {inbox: inbox, action: action, remove_task: remove_task},
            type: 'POST',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            success: function(data){
                if(action === 'archive-to'){
                    $('#tr_'+inbox).fadeOut();
                    window.location.replace(data.url);
                }else if(action === 'archive' || action === 'trash' || action === 'trash-d-task' || action === 'spam-d-task'){
                    $('#tr_'+inbox).fadeOut();
                }else if(action === 'unread'){
                    $('#tr_'+inbox).removeClass('unread');
                    $('#tr_'+inbox).addClass('read');
                    $('#i_'+inbox).removeClass('fa-eye-slash');
                    $('#i_'+inbox).addClass('fa-eye');
                    $('#i_'+inbox).data('action', 'read');
                }else if(action === 'read'){
                    $('#tr_'+inbox).addClass('unread');
                    $('#tr_'+inbox).removeClass('read');
                    $('#i_'+inbox).removeClass('fa-eye');
                    $('#i_'+inbox).addClass('fa-eye-slash');
                    $('#i_'+inbox).data('action', 'unread');
                }
                // recount total unread messages
                window.totalUsersUnreadInboxes();
            }
        });
    }

    function initilizeTooltip(){
        // var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        // var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        //     return new bootstrap.Tooltip(tooltipTriggerEl)
        // });
        $('[data-bs-toggle="tooltip"]').tooltip({
            html: true
        });
    }
});
</script>
@endpush