@extends('crudbooster::admin_template')
@push('head')
    <link rel="stylesheet" type="text/css" href="{{ asset('css/select2.css') }}">
    <link rel="stylesheet" href="{{ asset('/vendor/libs/datatables/datatables.css') }}">

    <style>
        #from_date.error,
        #to_date.error{
            border-color: #d9534f;
            color: #d9534f;
        }
        .invalid-date-err{
            display: none;
        }
        #filter.filter-btn-disable{
            pointer-events: none;
        }
    </style>
@endpush
@push('bottom')
    <script type="text/javascript" src="{{ asset('js/select2.js') }}"></script>
    <script src="{{ asset('/vendor/libs/datatables/datatables.js') }}"></script>
    <script src="{{ asset('/js/tables_datatables.js') }}"></script>
    <script src="{{ asset('/js/application_backend.js') }}"></script>
    <script type="text/javascript">
        $('select').select2()
        let selectedUser = ($('#user').find(":selected").val().length)?$('#user').find(":selected").val():null
        let from_date = ($('#from_date').val().length > 0)?Date($('#from_date').val()):null
        let to_date = ($('#to_date').val().length > 0)?Date($('#to_date').val()):null
        $(document).ready( function () {
            $('#available_cron_mail').DataTable({
                "serverSide": true,
                ajax: {
                    url: "{{ route('mailrecord.getAvailableRecords') }}",
                    data: {user: selectedUser,from: from_date,to: to_date}
                },
                "autoWidth": true,
                "pageLength": 25,
                "ordering": true,
                // "bSort": false,
                "searching": true,
                // "order": [[1, "desc"]],
                "processing": true,
                "paging": true,
                "pagingType": 'full_numbers',

                columns:[
                    {
                        "data": "id",
                        name:'id',
                        orderable: false,
                        searchable: false,
                        render: function (data, type, row, meta) {
                            if(row.status == 0)
                                return '<input type="checkbox" data-row="'+row.id+'" class="check">';
                                else return ''
                        }
                    },
                    {data:'creator_name','name':'creator_name',className:"text-center", orderable: false,searchable: true},
                    {data:'admin_email','name':'admin_email',className:"text-center", orderable: false,searchable: true},
                    {data:"receiver_name",'name':'receiver_name',className:"text-center", orderable: false,searchable: true},
                    {data:"receiver_email",'name':'receiver_email',className:"text-center", orderable: false,searchable: true},
                    {
                        data: "email",
                        name:'email',
                        searchable: true,
                        sortable: false,
                        className: "text-center",
                        render: function ( data, type, row ) {
                            if (row.email) return row.email +  "<br> <b>via setup email</b>";
                            else if (row.cron_email) return row.cron_email + "<br> <b>via user cron email</b>";
                            else return row.receiver_email + "<br> <b>via user email</b>";
                        }
                    },
                    {
                        data: "start_send_mail", name:"start_send_mail",searchable: false,orderable: false,sortable: false,className: "text-center"
                    },
                    {data:"end_send_mail",name:"end_send_mail",className:"text", orderable: false, searchable: false},
                    {
                        data:"timezone",
                        name:'timezone',
                        className:"text-center",
                        orderable: false,
                        searchable: false,
                    },
                    {
                        data:"status",
                        name:'status',
                        className:"text-center",
                        orderable: false,
                        searchable: false,
                        render: function (data, type, row ) {
                            if (row.status) {
                                return "<span class='btn bg-success text-white'>Mail Sent</span>";
                            }else return "<span class='btn bg-warning text-white'>Waiting</span>";
                        }
                    },
                    {
                        className:"text-center",
                        orderable: false,
                        searchable: false,
                        render: function (data, type, row ) {
                            if(row.status){
                                return "<button disabled class='btn btn-warning text-white'><i class='fa fa-envelope-o'>&nbsp;</i>Send</span>";
                            }else return "<button onclick='send_mail(event)' data-id='"+row.id+"' id='send-single-mail' class='btn btn-success text-white'><i class='fa fa-envelope-o'>&nbsp;</i>Send</span>";
                        }
                    },
                ],
            });
        });

        $('#filter').on('click',function(){
            selectedUser = ($('#user').find(":selected").val().length)?$('#user').find(":selected").val():null
            from_date = ($('#from_date').val().length > 0)?Date($('#from_date').val()):null
            to_date = ($('#to_date').val().length > 0)?Date($('#to_date').val()):null
            $('#available_cron_mail').DataTable().ajax.reload();
        })

        $(document).on('click', '.checkall', function(){
            if ($('.checkall').is(":checked")){
                $(".check").prop('checked', true)
                if(!$(".dataTables_length label button").hasClass('mail_send')) 
                    $(".dataTables_length label").append('<button class="btn btn-success mail_send" onclick="send_selected_mail(event)"><i class="fa fa-envelope-o">&nbsp;</i>Send Selected Mail</button>');
            }
            else{
                $(document).find('.check').prop('checked', false)
                $(".dataTables_length label").find('.mail_send').remove();
            }
        })
        $(document).on('click', '.check',function(){
            if($(".check:checked").length && !$(".dataTables_length label button").hasClass('mail_send')) $(".dataTables_length label").append('<button class="btn btn-success mail_send" onclick="send_selected_mail(event)"><i class="fa fa-envelope-o">&nbsp;</i>Send Selected Mail</button>');
            else if($(".check:checked").length == 0) $(".dataTables_length label").find('.mail_send').remove();
        })
        $(document).find('.checkall').prop('checked', false)
        $(document).on('click','.page-link',function(){
            $(document).find('.checkall').prop('checked', false)
        })

        function send_selected_mail(e){
            e.stopPropagation();
            var favorite = [];
            $.each($(".check:checked"), function(){
                favorite.push($(this).data('row'));
            });
            sendMailByIds(favorite)
            console.log(favorite,e);
        }

        function send_mail(e){            
            $(e.target).find('i').addClass('fa-spin');
            var favorite = [];
            favorite.push($(e.target).data('id'));
            sendMailByIds(favorite)
            
        }
        function sendMailByIds(ids){
            let url = "{{ route('mailrecord.mail.sendByIds') }}"
            swal({
                title:'Are you sure want to Sent Mail ?',
                type: 'warning',
                showCancelButton: true,
                confirmButtonColor: 'rgb(56, 174, 86)',
                confirmButtonText: 'Yes!',
                cancelButtonText:'No',
                closeOnConfirm: false 
            },function(){
                $.ajax({
                    type:"post",
                    url:url,
                    data:{ids:ids},
                    success:function(msg){                        
                    swal.close();
                    if(msg.success){
                        msg.result.each(function(value){
                            if(value.status){
                                swal({
                                    title:'Success!',
                                    text: "Mail Sended Successfully",
                                    type: 'success',
                                    timer: 3000
                                })
                            }else{
                                swal({
                                    title:'Warning!',
                                    text: "Something Wrong",
                                    type: 'warning',
                                    timer: 3000
                                })
                            }
                        })                        
                        $('#available_cron_mail').DataTable().ajax.reload();
                    }else{
                        swal({
                            title:'Warning!',
                            text: "Something Wrong",
                            type: 'warning',
                            timer: 3000
                        })
                    }
                },
                error:function(msg){
                    console.log(msg);
                }})

            })
        }
    </script>
@endpush
@section('content')
<style>
    @media only screen and (max-width: 992px){
        #group_type {
            max-width: 200px;
        }
    }
</style>
<!-- Your html goes here -->
<div class='panel panel-default'>
    <div class='panel-heading eap-box'>
        <div class="dark-color" style="display: flex;justify-content: space-between;flex-wrap: wrap;gap: 10px;">
            <h4><b>Mail Records</b></h4>
            <div style="display: flex;align-items: center;gap: 5px;flex-wrap: wrap;">
                <div class="form-group " id="form-group-product_name" style="margin-bottom: 0px;">
                    <label class="control-label">
                        {{trans('action.select_type')}} 
                    </label>
                    <select class="form-control"  required id="user" name="user">
                        <option value="" selected>{{trans('action.Select')}}</option>
                        @foreach ($users as $user)
                            <option value="{{ $user->id }}" > {{$user->fullName.'-'.$user->email}}</option>
                        @endforeach
                    </select>

                    <p class="help-block"></p>
                </div>
                
                <div>
                    <div style="display: flex;align-items: center;gap: 5px;flex-wrap: wrap;">
                        <div class="form-group " id="form-start_date" style="margin-bottom: 0px;">
                            <label class="control-label">
                                {{__('action.cron_setting_from')}} <span class="text-danger"  title="{{__('action.This_field_is_required')}}">*</span>
                            </label>
                            <input type="date" id="from_date" placeholder="From Date" class="form-control" name="from_date">
        
                            <p class="help-block"></p>
                        </div>
                        <div class="form-group " id="form-end_date" style="margin-bottom: 0px;">
                            <label class="control-label">
                                {{__('action.to')}} <span class="text-danger"  title="{{__('action.This_field_is_required')}}">*</span>
                            </label>
                            <input type="date" id="to_date" placeholder="to Date" class="form-control" name="to_date">
                            <p class="help-block"></p>
                        </div>
                    </div>
                    <span class="text-danger small invalid-date-err" role="alert">
                        <strong></strong>
                    </span>
                </div>

                <div class="form-group " style="margin-bottom: 0px;">
                    <a type="submit" class="btn btn-info" id="filter" style="position: relative;top: 6px;"><b>Filter</b></a>
                </div>
            </div>
            
        </div>
    </div>

    <div class='panel-body'>
        <div class="card-datatable table-responsive">
            <table class="table table-striped table-bordered" id="available_cron_mail">
                <thead>
                    <tr>
                        <th><input type="checkbox" class="checkall"></th>
                        <th>Therapist</th>
                        <th>Therapist Email</th>
                        <th>User</th>
                        <th>User Email</th>
                        <th>ReceiveAble Mail</th>
                        <th>T.Start Time</th>
                        <th>T.End Mail</th>
                        <th>Timezone</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- jQuery 2.2.3 -->
<script src="{{ asset ('vendor/crudbooster/assets/adminlte/plugins/jQuery/jquery-2.2.3.min.js') }}"></script>

<script>
    $(document).ready(function(){
        // from date validation
        $("#from_date").on("change", function () {
            validateMailFilterDate($("#from_date"));
        });

        // to date validation
        $("#to_date").on("change", function () {
            validateMailFilterDate($("#to_date"));
        });


        // date validation function
        function validateMailFilterDate(selector) {
            const InputtedDateVal = new Date(selector.val()).toLocaleDateString("en-US", {
                year: "numeric",
                month: "2-digit",
                day: "2-digit",
            });
            const today = new Date().toLocaleDateString("en-US", {
                year: "numeric",
                month: "2-digit",
                day: "2-digit",
            });

            const newToday = new Date();

            const year = newToday.getFullYear();
            const month = newToday.getMonth();
            const date = newToday.getDate();
            let upcomingThirtyDays = [];
            let previousThirtyDays = [];
 
            // upcoming 30 days
            for(let i = 1; i <= 30; i++){
                let upcomingDay = new Date(year, month, date + i).toLocaleDateString("en-US", {
                    year: "numeric",
                    month: "2-digit",
                    day: "2-digit",
                });

                upcomingThirtyDays.push(upcomingDay);
            }

            // previous 30 days
            for(let i = 1; i <= 30; i++){
                let previousDay = new Date(year, month, date - i).toLocaleDateString("en-US", {
                    year: "numeric",
                    month: "2-digit",
                    day: "2-digit",
                });

                previousThirtyDays.push(previousDay);
            }

            const upcomingThirtiethDay = upcomingThirtyDays[upcomingThirtyDays.length - 1];
            const previousThirtiethDay = previousThirtyDays[previousThirtyDays.length - 1];

            
            if (selector.val() == "" || selector.val() == undefined) {
                $(".invalid-date-err").hide();
                $(".invalid-date-err strong").text("");
                $("#filter").attr('disabled', false);
                $("#filter").removeClass("filter-btn-disable");
                selector.removeClass("error");
            } else if (InputtedDateVal < previousThirtiethDay) {
                $(".invalid-date-err strong").text(`${selector.attr("name") == "from_date" ? "From" : "To"} date cannot be less than last 30 days.`);
                $(".invalid-date-err").show();
                selector.addClass("error");
                $("#filter").attr('disabled', true);
                $("#filter").addClass("filter-btn-disable");
            } else if (InputtedDateVal > upcomingThirtiethDay) {
                $(".invalid-date-err strong").text(`${selector.attr("name") == "from_date" ? "From" : "To"} date cannot be more than upcoming 30 days.`);
                $(".invalid-date-err").show();
                selector.addClass("error");
                $("#filter").attr('disabled', true);
                $("#filter").addClass("filter-btn-disable");
            } else{
                $(".invalid-date-err").hide();
                $(".invalid-date-err strong").text("");
                $("#filter").attr('disabled', false);
                $("#filter").removeClass("filter-btn-disable");
                selector.removeClass("error");
            }
        }
    });
</script>
@endsection