@extends('layouts.app')

@section('plugin-styles')
    <link type="text/css" rel="stylesheet" href="{{asset('vendors/daterangepicker/css/daterangepicker.css')}}" />
@stop
@section('content')
    <div class="content">
        @php $user = request()->user();
            $url = '/emails';
            use Modules\Emails\Entities\Message;
        @endphp
        <x-content.header title="{{ __('menu.inbox') }}" subTitle="{{$unread.' '.__('title.Unread email')}} ">
            <x-slot:headerRight>
                <button
                    onclick="Livewire.dispatch('openLiveModal', { actionType: 'compose' })"
                    class="btn-primary-base">
                    <x-svg-icon icon="icon-plus" />
                    {{ trans('menu.compose') }}
                </button>


            </x-slot:headerRight>
        </x-content.header>

        @include('emails::filter')

        <div class="relative">
            <div class="selection-overlay hidden absolute top-1 left-16 right-1 bg-white/90 rounded-t-lg px-4 py-3 lg:py-2 flex items-center gap-3 z-[20]">
                <span class="text-md-semibold text-custom-grey-600"><span class="selected-count">0</span> {{ trans('forms.lbl_items_selected') }}</span>
                <x-svg-icon icon="vertical-bar" />

                <button
                    type="button"
                    class="text-sm-semibold text-custom-orange-500 flex items-center gap-2"
                    onclick="ReadAll();"><x-svg-icon icon="icon-check" /><span class="hidden lg:inline-block">{{trans('label.mark_as_read')}}</span>
                </button>

                <x-svg-icon icon="vertical-bar" />

                <a href="javascript:;" data-uri="{{route('emails.index')}}" data-status="draft" class="btn-delete-all text-sm-semibold text-custom-orange-500 flex items-center gap-2"><x-svg-icon icon="icon-trash"/><span class="hidden lg:inline-block">{{trans('forms.lbl_delete')}}</span></a>

            </div>


            <table id="datatable" class="table-custom-striped w-full" style="width: 100%;">
                <thead>
                    <tr>
                        <th scope="col">
                            <input class="table-header-checkbox" type="checkbox" name="select_all" id="select-all" value="1">
                        </th>
                        <th scope="col">{{trans('menu.starred')}}</th>
                        <th scope="col">{{trans('tables.sender')}}</th>
                        <th scope="col">{{trans('tables.subject_title')}}</th>
                        <th scope="col">{{trans('forms.lbl_status')}}</th>
                        <th scope="col">{{trans('tables.date_title')}}</th>
                    </tr>
                </thead>
            </table>
        </div>
        <livewire:emails::livewire.email-modal :modalId="'modal-email'" :users="$users" />
    </div>

@stop

@section('footer-script')
    <script type="text/javascript" src="{{asset('vendors/daterangepicker/js/daterangepicker.js')}}"></script>
    <script src="{{ asset('js/jquery-file-upload.js') }}"></script>

    <script type="text/javascript">
        PDDataTable({
            searching : false,
            url: "{{ route('emails.index') }}",
            columns:[
                { data: 'checkboxgrid', name: 'checkboxgrid', orderable: false, searchable: false, className: "checkbox-column"},
                { data: 'starred', name: 'starred',
                    render: {
                        _: function (data, type, row){
                            return row.starred_view;
                        },
                        sort: function (data) {
                            return data;
                        }
                    },
                },
                { data: 'sender', name: 'sender',
                    render: {
                        _: function (data, type, row){
                            return row.sender_view;
                        },
                        sort: function (data) {
                            return data;
                        }
                    },
                },
                { data: 'subject', name: 'subject',
                    render: {
                        _: function (data, type, row){
                            return row.subject_view;
                        },
                        sort: function (data) {
                            return data;
                        }
                    },
                },
                { data: 'status', name: 'status',
                    render: {
                        _: function (data, type, row){
                            return data === 'unread' ? '<div class="bg-custom-green-100 text-xs-semibold text-custom-green-600 py-1 px-3 rounded-lg text-center">{{__("forms.lbl_new")}}</div>':'<div class="bg-custom-grey-100 text-xs-semibold text-custom-grey-400 py-1 px-3 rounded-lg text-center">{{__("label.read")}}</div>';
                        },
                        sort: function (data) {
                            return data;
                        }
                    },
                },
                { data: 'date', name: 'date',
                    render: {
                        _: function (data, type, row){
                            return row.date_view;
                        },
                        sort: function (data) {
                            return moment(data).format("{{getDateFormat()}}");
                        }
                    },
                    class:'w-max !text-right',
                },
            ],
            order : [5, 'desc'],
            callbackFunc  : function(d){
                d.range = [];
                d.range = $('input[name="range"]').val();

                d.term = $('input[name="query"]').val();

                d.senderFilter = $('input[name="senderFilter[]"]:checked').map(function () {
                    return $(this).val();
                })
                .get();

                d.receiverFilter = $('input[name="receiverFilter[]"]:checked').map(function () {
                    return $(this).val();
                })
                .get();

                d.status = $('#dt-search-form .tabs-btn-box.active').attr('data-val');

            },
            drawCallback : function( settings ) {

	            if (this.api().page.info().pages > 1) {
	                $('.dataTables_paginate').show();
	            }
                let status = $('#dt-search-form .tabs-btn-box.active').attr('data-val');
                if($('#'+status).length){
                    $('#'+status).html(this.api().page.info().recordsTotal);
                }
                $('.btn-delete-all').attr('data-status', status);

            },
        });


        jQuery(document).ready(function() {

            $( document ).on( "multi_select_option_change", function( event, eventInfo ) {
                PDTable.draw();
            });

            $('body').on('click', '.tabs-btn-box', function () {
                // Reset all tabs and contents for the second set filter
                $(".tabs-btn-box").removeClass("active");

                $(this).addClass("active");

                PDTable.draw();
            });

            $('body').on('click', '.btn-show', function(event) {
                event.preventDefault();
                $('.mail-view').append(customLoader);
                PDRequest({
                    type    : "GET",
                    url     : $(this).data('uri'),
                    isFlash : false
                }).then((response) => {

                    $('.mail-view').find(".loader-section").remove();
                    $(this).find(".mail-list").removeClass("new_mail");
                    $(".mail-view").html(response.html);

                }).catch(function(error) {
                    $('.mail-view').find(".loader-section").remove();
                });

            });

            $('body').on('click', '.btn-star', function(event) {
                event.preventDefault();
                PDRequest({
                    type    : "GET",
                    url     : $(this).data('uri'),
                    isFlash : false,
                    event  : event
                }).then((response) => {
                    PDTable.draw();
                }).catch(function(error) {
                    $('.page-holder').find(".loader-section").remove();
                });

            });

            $('.table-custom-striped tbody').on('click', 'tr', function () {
                if ($(event.target).closest('.btn-star').length === 0 && $(event.target).closest('.table-header-checkbox').length === 0) {
                    let url = $(this).find('.row-clickable').data('url');
                    if (url) {
                        window.location.href = url;
                    }
                }
            });

        });
        function cb(start, end) {
            $('.reportrange span.date-text').html(start.format('D MMM, YYYY') + ' - ' + end.format('D MMM, YYYY'));
            $(document).trigger('onRangeChanged');
        }

        $('.reportrange').daterangepicker({
            opens           : 'left',
            autoApply       : true,
            autoUpdateInput : false,
            startDate       : moment(),
            endDate         : moment(),
            locale          : {
                format          : "{{getDateFormat()}}",
                customRangeLabel: "{{trans('label.pick_date_range')}}",
                "firstDay": 1,
                "daysOfWeek": daysOfWeek,
                "monthNames": monthNames
            },
            //ranges  : rangeFilters,
            alwaysShowCalendars : true,
            showDropdowns       : true,
            showWeekNumbers: true
        }, cb);
        $('.reportrange').on('apply.daterangepicker', function(ev, picker) {
            $("input[name='range']").val(picker.startDate.format("{{getDateFormat()}}") + ' - ' + picker.endDate.format("{{getDateFormat()}}"));
            PDTable.draw();
        });

        $('.reportrange').on('cancel.daterangepicker', function(ev, picker) {
            $("input[name='range']").val('');
            PDTable.draw();
        });

        function ReadAll(){
            var Tids = $('.form-check-input:checked').map(function() {
            return $(this).val();
                }).get();
            var csrfToken = $('meta[name="csrf-token"]').attr('content');

            PDRequest({
                    type    : "POST",
                    url     : "emails/readall",
                    data: { tids: Tids, test:"test" }, // Wrap the data in an object with a key (e.g., 'tids')
                    headers: {
                        'X-CSRF-TOKEN': csrfToken
                    },
                    event   : event
                }).then((response) => {
                    $('.mail-view').find(".loader-section").remove();
                    location.reload();

                }).catch(function(error) {
                    $('.mail-view').find(".loader-section").remove();
                });
        }
    </script>

@stop