@extends('layouts.app')
@section('title') Read Mail @endsection
@section('content')
@php
$user_role = Auth::user()->user_role;
@endphp
<style>
.content-header {
    position: relative;
    padding: 14px 15px 0 15px !important;
}

.mailbox-read-message {
    padding: 20px;
    background-color: #fff;
    line-height: 1.6;
    color: #333;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Enhanced Table Styling */
.mailbox-read-message table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 20px 0;
    font-size: 14px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.mailbox-read-message table thead {
    background: linear-gradient(to bottom, #f8f9fa 0%, #e9ecef 100%);
}

.mailbox-read-message table th {
    background-color: #495057;
    color: #fff;
    font-weight: 600;
    padding: 12px 15px;
    text-align: left;
    border-bottom: 2px solid #343a40;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mailbox-read-message table th:first-child {
    border-top-left-radius: 4px;
}

.mailbox-read-message table th:last-child {
    border-top-right-radius: 4px;
}

.mailbox-read-message table td {
    padding: 12px 15px;
    border-bottom: 1px solid #e9ecef;
    vertical-align: top;
    color: #495057;
}

.mailbox-read-message table tbody tr {
    transition: background-color 0.2s ease;
}

.mailbox-read-message table tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}

.mailbox-read-message table tbody tr:nth-child(odd) {
    background-color: #fff;
}

.mailbox-read-message table tbody tr:hover {
    background-color: #e3f2fd !important;
    cursor: pointer;
}

.mailbox-read-message table tbody tr:last-child td {
    border-bottom: none;
}

.mailbox-read-message table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 4px;
}

.mailbox-read-message table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 4px;
}

/* Responsive table wrapper */
.mailbox-read-message > div {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.mailbox-read-message table {
    min-width: 100%;
}

/* Table cell alignment */
.mailbox-read-message table td[align="center"],
.mailbox-read-message table th[align="center"] {
    text-align: center;
}

.mailbox-read-message table td[align="right"],
.mailbox-read-message table th[align="right"] {
    text-align: right;
}

.mailbox-read-message table td[align="left"],
.mailbox-read-message table th[align="left"] {
    text-align: left;
}

/* Images in tables */
.mailbox-read-message table img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Links in tables */
.mailbox-read-message table a {
    color: #007bff;
    text-decoration: none;
    transition: color 0.2s ease;
}

.mailbox-read-message table a:hover {
    color: #0056b3;
    text-decoration: underline;
}

/* Images */
.mailbox-read-message img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 10px 0;
}

/* Responsive design for mobile */
@media (max-width: 768px) {
    .mailbox-read-message {
        padding: 15px;
    }
    
    .mailbox-read-message table {
        font-size: 12px;
        margin: 15px 0;
    }
    
    .mailbox-read-message table th,
    .mailbox-read-message table td {
        padding: 8px 10px;
    }
    
    .mailbox-read-message table th {
        font-size: 11px;
    }
}

/* Print styles */
@media print {
    .mailbox-read-message table {
        box-shadow: none;
        border: 1px solid #ddd;
    }
    
    .mailbox-read-message table th {
        background-color: #f0f0f0 !important;
        color: #000 !important;
    }
    
    .mailbox-read-message table tbody tr:hover {
        background-color: transparent !important;
    }
}
</style>








<section class="content-header">
    <h1>
        Read Mail
    </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.compose') }}" class="btn btn-primary btn-block margin-bottom">Compose</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 -->
            <!-- Labels section hidden as requested -->
            <!--
            <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>
                <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">Read Mail</h3>
                </div>

                <div class="box-body no-padding">
                    <div class="mailbox-read-info">
                        <h3>{{ $mail['subject'] }}</h3>
                        <h5>
                            From: {{ $mail['from'] }}
                            <span class="mailbox-read-time pull-right">{{ $mail['date'] }}</span>
                        </h5>
                    </div>

                    <div class="mailbox-read-message">
                        {!! $mail['body'] !!}
                    </div>
                </div>

                @if(count($mail['attachments']) > 0)
                <div class="box-footer">
                    <ul class="mailbox-attachments clearfix">
                        @foreach ($mail['attachments'] as $index => $attachment)
                        <li>
                            <span class="mailbox-attachment-icon"><i class="fa fa-file-o"></i></span>
                            <div class="mailbox-attachment-info">
                                <!-- Download URL using route -->
                                <a href="{{ route('mailbox.download', ['id' => $mail['id'], 'part' => $index + 1]) }}"
                                    class="mailbox-attachment-name">
                                    <i class="fa fa-paperclip"></i> {{ $attachment['filename'] }}
                                </a>
                                <span class="mailbox-attachment-size">
                                    {{ round(strlen($attachment['content']) / 1024, 2) }} KB
                                    <a href="{{ route('mailbox.download', ['id' => $mail['id'], 'part' => $index + 1]) }}"
                                        class="btn btn-default btn-xs pull-right">
                                        <i class="fa fa-cloud-download"></i>
                                    </a>
                                </span>
                            </div>
                        </li>
                        @endforeach
                    </ul>
                </div>
                @endif


                <div class="box-footer">
                    <div class="pull-right">
                        <a href="{{ route('mailbox.reply', ['id' => $mail['id']]) }}" class="btn btn-default"><i class="fa fa-reply"></i> Reply</a>
                        <a href="{{ route('mailbox.forward', ['id' => $mail['id']]) }}" class="btn btn-default"><i class="fa fa-share"></i> Forward</a>
                    </div>
                    <button type="button" class="btn btn-default" id="deleteEmailBtn" data-email-id="{{ $mail['id'] }}"><i class="fa fa-trash-o"></i> Delete</button>
                    <button type="button" class="btn btn-default" onclick="window.print()"><i class="fa fa-print"></i> Print</button>
                </div>
            </div>
        </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() {
    // Delete email functionality
    $('#deleteEmailBtn').click(function() {
        var emailId = $(this).data('email-id');
        
        Swal.fire({
            title: 'Are you sure?',
            text: 'This email will be deleted. This action cannot be undone!',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Yes, delete it!',
            cancelButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: '{{ url("/mailbox/delete") }}/' + emailId,
                    method: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        _method: 'DELETE'
                    },
                    success: function(response) {
                        if (response.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Deleted!',
                                text: response.message
                            }).then(() => {
                                window.location.href = '{{ route("mailbox.index") }}';
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: response.message || 'Failed to delete email.'
                            });
                        }
                    },
                    error: function(xhr) {
                        var errorMsg = 'An error occurred while deleting the email.';
                        if (xhr.responseJSON && xhr.responseJSON.message) {
                            errorMsg = xhr.responseJSON.message;
                        }
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: errorMsg
                        });
                    }
                });
            }
        });
    });
});
</script>
<!-- AdminLTE for demo purposes -->
<script src="{{ asset('dist/js/demo.js') }}"></script>


@endsection