@extends('layouts.app')
@section('title') Compose Message @endsection
@section('content')
@php
$user_role = Auth::user()->user_role;
@endphp
<meta name="csrf-token" content="{{ csrf_token() }}">

<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet"
    href="{{ asset('bower_components/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.min.css')}}">
<link rel="stylesheet" href="{{ asset('bower_components/bootstrap/dist/css/bootstrap.min.css')}}">
<link rel="stylesheet" href="{{ asset('bower_components/font-awesome/css/font-awesome.min.css')}}">
<link rel="stylesheet" href="{{ asset('bower_components/Ionicons/css/ionicons.min.css')}}">
<link rel="stylesheet" href="{{ asset('dist/css/AdminLTE.min.css')}}">

<link rel="stylesheet" href="{{ asset('dist/css/skins/_all-skins.min.css')}}">
<link rel="stylesheet" href="{{ asset('plugins/iCheck/flat/blue.css')}}">
<link rel="stylesheet" href="{{ asset('plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css')}}">


<!-- Google Font -->
<link rel="stylesheet"
    href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
<style>
.content-header {
    position: relative;
    padding: 14px 15px 0 15px !important;
}
</style>








<section class="content-header">
    <h1>
        Mailbox
        <small>{{ isset($unreadCount) ? $unreadCount : 0 }} new messages</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="active">Mailbox</li>
    </ol>
</section>


<!-- Main content -->
<section class="content">
    <div class="row">
        <div class="col-md-3">
            <a href="{{ route('mailbox.index') }}" class="btn btn-primary btn-block margin-bottom">Back to Inbox</a>

            <div class="box box-solid">
                <div class="box-header with-border">
                    <h3 class="box-title">Folders</h3>

                    <div class="box-tools">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body no-padding">
                    <ul class="nav nav-pills nav-stacked">
                        <li><a href="{{ route('mailbox.index') }}"><i class="fa fa-inbox"></i> Inbox
                                <span class="label label-primary pull-right">{{ isset($unreadCount) ? $unreadCount : 0 }}</span></a></li>
                        <li><a href="{{ route('mailbox.sendbox') }}"><i class="fa fa-envelope-o"></i> Sent</a></li>
                        <li><a href="{{ route('mailbox.drafts') }}"><i class="fa fa-file-text-o"></i> Drafts
                                <span class="label label-info pull-right">{{ isset($draftCount) ? $draftCount : 0 }}</span></a></li>
                        <li><a href="{{ route('mailbox.junk') }}"><i class="fa fa-filter"></i> Junk <span
                                    class="label label-warning pull-right">65</span></a>
                        </li>
                        <li><a href="{{ route('mailbox.trash') }}"><i class="fa fa-trash-o"></i> Trash
                                <span class="label label-danger pull-right">{{ isset($trashCount) ? $trashCount : 0 }}</span></a></li>
                    </ul>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /. box -->
            <div class="box box-solid">
                <div class="box-header with-border">
                    <h3 class="box-title">Labels</h3>

                    <div class="box-tools">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body no-padding">
                    <ul class="nav nav-pills nav-stacked">
                        <li><a href="#"><i class="fa fa-circle-o text-red"></i> Important</a></li>
                        <li><a href="#"><i class="fa fa-circle-o text-yellow"></i> Promotions</a></li>
                        <li><a href="#"><i class="fa fa-circle-o text-light-blue"></i> Social</a></li>
                    </ul>
                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
        </div>
        <!-- /.col -->
        <div class="col-md-9">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">Compose New Message</h3>
                </div>
                <!-- /.box-header -->
                <form id="compose-form" action="{{ route('mailbox.send') }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <input type="hidden" name="send_action" id="send_action" value="send">
                    @if(isset($draftData['id']))
                    <input type="hidden" name="draft_id" value="{{ $draftData['id'] }}">
                    <input type="hidden" name="draft_folder" value="INBOX.Drafts">
                    @endif
                    <div class="box-body">
                        <div class="form-group">
                            <input class="form-control" name="to" placeholder="To:" value="{{ $draftData['to'] ?? ($replyTo ?? ($forwardFrom ?? '')) }}">
                        </div>

                        <div class="form-group">
                            <input class="form-control" name="subject" placeholder="Subject:" value="{{ $draftData['subject'] ?? ($originalSubject ?? '') }}">
                        </div>

                        <div class="form-group">
                            <textarea id="compose-textarea" class="form-control" name="body" style="height: 300px">{{ $draftData['body'] ?? ($originalBody ?? '') }}</textarea>
                        </div>
                        
                        @if(isset($draftData['attachments']) && count($draftData['attachments']) > 0)
                        <div class="form-group">
                            <div class="alert alert-info">
                                <i class="fa fa-info-circle"></i> This draft contains {{ count($draftData['attachments']) }} attachment(s). 
                                Note: Attachments cannot be restored from drafts. Please re-attach files if needed.
                                <ul style="margin-top: 10px; margin-bottom: 0;">
                                    @foreach($draftData['attachments'] as $attachment)
                                    <li>{{ $attachment['filename'] }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                        @endif

                        <div class="form-group">
                            <div class="btn btn-default btn-file">
                                <i class="fa fa-paperclip"></i> Attachments
                                <input type="file" name="attachments[]" id="attachments" multiple>
                            </div>
                            <div id="file-list" style="margin-top:10px;"></div>
                            <p class="help-block">Max. 32MB per file. You can select multiple files.</p>
                        </div>
                    </div>



                    <!-- /.box-body -->
                    <div class="box-footer">
                        <div class="pull-right">
                            <button type="button" class="btn btn-default" id="draft-button"><i class="fa fa-pencil"></i> Draft</button>
                            <button type="button" class="btn btn-primary" id="send-button"><i class="fa fa-envelope-o"></i> Send</button>
                        </div>
                        <button type="reset" class="btn btn-default"><i class="fa fa-times"></i> Discard</button>
                    </div>
                </form>
                <!-- /.box-footer -->
            </div>
            <!-- /. box -->
        </div>
        <!-- /.col -->
    </div>
    <!-- /.row -->
</section>
<!-- /.content -->




<!-- <script src="{{ asset('bower_components/jquery/dist/jquery.min.js') }}"></script> -->
<!-- <script src="{{ asset('bower_components/bootstrap/dist/js/bootstrap.min.js') }}"></script> -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script src="{{ asset('bower_components/bootstrap/dist/js/bootstrap.min.js') }}"></script>
<!-- Slimscroll -->
<script src="{{ asset('bower_components/jquery-slimscroll/jquery.slimscroll.min.js') }}"></script>
<!-- FastClick -->
<script src="{{ asset('bower_components/fastclick/lib/fastclick.js') }}"></script>
<!-- AdminLTE App -->
<script src="{{ asset('dist/js/adminlte.min.js') }}"></script>
<script src="{{ asset('dist/js/demo.js') }}"></script>
<!-- iCheck -->
<script src="{{ asset('plugins/iCheck/icheck.min.js') }}"></script>
<script src="{{ asset('plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js') }}"></script>

<!-- Page Script -->
<script>
$(function() {
    //Add text editor
    $("#compose-textarea").wysihtml5();
    
    // If draft data exists, set the editor content after initialization
    @if(isset($draftData['body']) && !empty($draftData['body']))
    var draftBody = @json($draftData['body']);
    setTimeout(function() {
        var editor = $("#compose-textarea").data('wysihtml5');
        if (editor && editor.editor) {
            editor.editor.setValue(draftBody);
        } else {
            // Fallback: set directly to textarea if editor not ready
            $("#compose-textarea").val(draftBody);
        }
    }, 500);
    @endif
});
</script>
<script src="{{ asset('dist/js/demo.js') }}"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const fileInput = document.getElementById('attachments');
    const fileList = document.getElementById('file-list');

    if(fileInput) {
        fileInput.addEventListener('change', function() {
            updateFileList();
        });
    }

    function updateFileList() {
        if (!fileInput || !fileList) return;
        
        fileList.innerHTML = '';
        
        if (fileInput.files && fileInput.files.length > 0) {
            const fileCount = fileInput.files.length;
            const fileListDiv = document.createElement('div');
            fileListDiv.className = 'well well-sm';
            fileListDiv.innerHTML = '<strong>Selected Files (' + fileCount + '):</strong><ul style="margin-top:10px; margin-bottom:0;">';
            
            Array.from(fileInput.files).forEach(function(file, index) {
                const fileSize = (file.size / 1024 / 1024).toFixed(2);
                const listItem = document.createElement('li');
                listItem.style.marginBottom = '5px';
                listItem.innerHTML = '<i class="fa fa-file-o"></i> ' + file.name + 
                    ' <span class="text-muted">(' + fileSize + ' MB)</span> ' +
                    '<span class="text-danger" style="cursor:pointer; margin-left:10px;" onclick="removeFile(' + index + ')">× Remove</span>';
                fileListDiv.querySelector('ul').appendChild(listItem);
            });
            
            fileListDiv.innerHTML += '</ul>';
            fileList.appendChild(fileListDiv);
        }
    }

    window.removeFile = function(index) {
        if (!fileInput) return;
        
        const dt = new DataTransfer();
        const files = Array.from(fileInput.files);
        
        files.forEach(function(file, i) {
            if (i !== index) {
                dt.items.add(file);
            }
        });
        
        fileInput.files = dt.files;
        updateFileList();
    };
});

document.addEventListener('DOMContentLoaded', function() {
    const composeForm = document.getElementById('compose-form');
    const sendActionInput = document.getElementById('send_action');
    const draftButton = document.getElementById('draft-button');
    const sendButton = document.getElementById('send-button');
    let isSubmitting = false;

    // Function to clear form
    function clearForm() {
        if (composeForm) {
            // Explicitly clear form fields first
            const toField = composeForm.querySelector('input[name="to"]');
            if (toField) {
                toField.value = '';
            }
            
            const subjectField = composeForm.querySelector('input[name="subject"]');
            if (subjectField) {
                subjectField.value = '';
            }
            
            // Note: Editor will be cleared after form reset
            
            // Clear draft ID fields if they exist
            const draftIdInput = composeForm.querySelector('input[name="draft_id"]');
            if (draftIdInput) {
                draftIdInput.remove();
            }
            const draftFolderInput = composeForm.querySelector('input[name="draft_folder"]');
            if (draftFolderInput) {
                draftFolderInput.remove();
            }
            
            // Clear file list
            const fileList = document.getElementById('file-list');
            if (fileList) {
                fileList.innerHTML = '';
            }
            
            // Reset file input
            const fileInput = document.getElementById('attachments');
            if (fileInput) {
                fileInput.value = '';
            }
            
            // Reset send action
            if (sendActionInput) {
                sendActionInput.value = 'send';
            }
            
            // Reset form (this will reset any other fields)
            composeForm.reset();
            
            // After reset, immediately clear fields again to prevent restoring draft values
            setTimeout(function() {
                if (toField) {
                    toField.value = '';
                }
                if (subjectField) {
                    subjectField.value = '';
                }
                if (bodyTextarea) {
                    // Clear textarea value first
                    bodyTextarea.value = '';
                    $('#compose-textarea').val('');
                    
                    // Clear wysihtml5 editor - multiple methods
                    try {
                        const editor = $('#compose-textarea').data('wysihtml5');
                        if (editor && editor.editor) {
                            // Method 1: Clear using editor API
                            editor.editor.clear();
                            editor.editor.setValue('');
                            
                            // Method 2: Select all and delete
                            try {
                                if (editor.editor.composer && editor.editor.composer.commands) {
                                    editor.editor.composer.commands.exec('selectAll');
                                    editor.editor.composer.commands.exec('delete');
                                }
                            } catch (e) {
                                // Ignore
                            }
                            
                            // Method 3: Clear iframe content directly
                            try {
                                if (editor.editor.composer && editor.editor.composer.element) {
                                    var iframe = editor.editor.composer.element;
                                    if (iframe && iframe.contentDocument) {
                                        var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
                                        if (iframeDoc.body) {
                                            iframeDoc.body.innerHTML = '';
                                        }
                                    }
                                }
                            } catch (e) {
                                // Ignore iframe errors
                            }
                            
                            // Method 4: Find iframe by class and clear
                            try {
                                var wysihtml5Iframe = $('iframe.wysihtml5-sandbox');
                                if (wysihtml5Iframe.length > 0) {
                                    var iframe = wysihtml5Iframe[0];
                                    if (iframe.contentDocument) {
                                        var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
                                        if (iframeDoc.body) {
                                            iframeDoc.body.innerHTML = '';
                                        }
                                    }
                                }
                            } catch (e) {
                                // Ignore errors
                            }
                        }
                    } catch (e) {
                        console.log('Could not clear editor:', e);
                    }
                    
                    // Ensure textarea is empty and trigger events
                    bodyTextarea.value = '';
                    $('#compose-textarea').val('').trigger('change').trigger('input');
                }
            }, 100);
        }
    }

    // Function to show loading state
    function setLoadingState(button, isLoading) {
        if (isLoading) {
            button.disabled = true;
            const originalText = button.innerHTML;
            button.setAttribute('data-original-text', originalText);
            button.innerHTML = '<i class="fa fa-spinner fa-spin"></i> Processing...';
        } else {
            button.disabled = false;
            const originalText = button.getAttribute('data-original-text');
            if (originalText) {
                button.innerHTML = originalText;
            }
        }
    }

    // Handle form submission via AJAX
    if (composeForm) {
        composeForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            if (isSubmitting) {
                return false;
            }

            const formData = new FormData(composeForm);
            const action = sendActionInput.value;
            const isDraft = action === 'draft';
            const activeButton = isDraft ? draftButton : sendButton;

            // Set loading state
            isSubmitting = true;
            setLoadingState(activeButton, true);
            if (draftButton && sendButton) {
                draftButton.disabled = true;
                sendButton.disabled = true;
            }

            // Get CSRF token
            const csrfToken = $('meta[name="csrf-token"]').attr('content');
            
            // Make AJAX request
            $.ajax({
                url: composeForm.action,
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': csrfToken
                },
                success: function(response) {
                    isSubmitting = false;
                    setLoadingState(activeButton, false);
                    if (draftButton && sendButton) {
                        draftButton.disabled = false;
                        sendButton.disabled = false;
                    }

                    if (response.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: response.message || (isDraft ? 'Draft saved successfully!' : 'Email sent successfully!'),
                            confirmButtonColor: '#3085d6',
                            confirmButtonText: 'OK'
                        }).then(() => {
                            // Clear form immediately
                            clearForm();
                            
                            // Also clear again after delays to ensure wysihtml5 editor is cleared
                            setTimeout(function() {
                                clearForm();
                            }, 100);
                            
                            setTimeout(function() {
                                clearForm();
                                
                                // Final check - if editor still has content, reload page
                                try {
                                    const editor = $('#compose-textarea').data('wysihtml5');
                                    if (editor && editor.editor) {
                                        const editorValue = editor.editor.getValue();
                                        if (editorValue && editorValue.trim() !== '') {
                                            // Editor still has content, reload page to ensure clean state
                                            window.location.href = '{{ route("mailbox.compose") }}';
                                            return;
                                        }
                                    }
                                } catch (e) {
                                    // Ignore errors
                                }
                            }, 300);
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error!',
                            text: response.message || 'An error occurred. Please try again.',
                            confirmButtonColor: '#d33',
                            confirmButtonText: 'OK'
                        });
                    }
                },
                error: function(xhr) {
                    isSubmitting = false;
                    setLoadingState(activeButton, false);
                    if (draftButton && sendButton) {
                        draftButton.disabled = false;
                        sendButton.disabled = false;
                    }

                    let errorMessage = 'An error occurred. Please try again.';
                    
                    if (xhr.responseJSON && xhr.responseJSON.message) {
                        errorMessage = xhr.responseJSON.message;
                    } else if (xhr.status === 422) {
                        // Validation errors
                        if (xhr.responseJSON && xhr.responseJSON.errors) {
                            const errors = xhr.responseJSON.errors;
                            errorMessage = Object.values(errors).flat().join(', ');
                        } else if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMessage = xhr.responseJSON.message;
                        }
                    } else if (xhr.status === 0) {
                        errorMessage = 'Network error. Please check your connection.';
                    } else if (xhr.statusText) {
                        errorMessage = xhr.statusText;
                    }

                    Swal.fire({
                        icon: 'error',
                        title: 'Error!',
                        text: errorMessage,
                        confirmButtonColor: '#d33',
                        confirmButtonText: 'OK'
                    });
                }
            });

            return false;
        });
    }

    // Handle draft button click
    if (draftButton && sendActionInput) {
        draftButton.addEventListener('click', function(e) {
            e.preventDefault();
            sendActionInput.value = 'draft';
            composeForm.dispatchEvent(new Event('submit'));
        });
    }

    // Handle send button click
    if (sendButton && sendActionInput) {
        sendButton.addEventListener('click', function(e) {
            e.preventDefault();
            sendActionInput.value = 'send';
            composeForm.dispatchEvent(new Event('submit'));
        });
    }
});
</script>


@endsection