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








<section class="content-header">
    <h1>
        Mailbox
    </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 class="active"><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">Inbox</h3>

                    <div class="box-tools pull-right">
                        <div class="has-feedback" style="position: relative;">
                            <input type="text" name="search" id="searchInput" class="form-control input-sm" placeholder="Search Mail" value="{{ request()->get('search', '') }}">
                            <a href="javascript:void(0);" id="searchIcon" class="form-control-feedback" style="pointer-events: auto; cursor: pointer; right: 15px; z-index: 10; text-decoration: none; color: #999;" title="Search">
                                <span class="glyphicon glyphicon-search"></span>
                            </a>
                        </div>
                    </div>
                    <!-- /.box-tools -->
                </div>
                <!-- /.box-header -->
                <div class="box-body no-padding">
                    @if(isset($error))
                    <div class="alert alert-danger" style="margin: 15px;">
                        <i class="fa fa-warning"></i> {{ $error }}
                    </div>
                    @endif
                    @if(isset($message) && !empty($message))
                    <div class="alert alert-info" style="margin: 15px;">
                        <i class="fa fa-info-circle"></i> {{ $message }}
                    </div>
                    @endif
                    <div class="mailbox-controls">
                        <!-- Check all button -->
                        <button type="button" class="btn btn-default btn-sm checkbox-toggle"><i
                                class="fa fa-square-o"></i>
                        </button>
                        <div class="btn-group">
                            <button type="button" class="btn btn-default btn-sm" id="deleteSelectedBtn" disabled><i class="fa fa-trash-o"></i></button>
                            <!-- Reply and Forward buttons hidden as requested -->
                            <!-- <button type="button" class="btn btn-default btn-sm"><i class="fa fa-reply"></i></button> -->
                            <!-- <button type="button" class="btn btn-default btn-sm"><i class="fa fa-share"></i></button> -->
                        </div>
                        <!-- /.btn-group -->
                        <button type="button" class="btn btn-default btn-sm" id="refreshBtn" onclick="location.reload()"><i class="fa fa-refresh"></i></button>
                        <div class="pull-right">
                            @if(isset($totalPages) && $totalPages > 0)
                                {{ (($currentPage - 1) * $perPage) + 1 }}-{{ min($currentPage * $perPage, $inboxCount) }}/{{ $inboxCount }}
                            @else
                                0/0
                            @endif
                            <div class="btn-group">
                                @php
                                    $prevPage = max(1, ($currentPage ?? 1) - 1);
                                    $nextPage = min(($totalPages ?? 1), ($currentPage ?? 1) + 1);
                                    $paginationParams = [];
                                    if (isset($searchTerm) && !empty($searchTerm)) {
                                        $paginationParams['search'] = $searchTerm;
                                    }
                                @endphp
                                <a href="{{ route('mailbox.index', array_merge($paginationParams, ['page' => $prevPage])) }}" 
                                   class="btn btn-default btn-sm {{ ($currentPage ?? 1) <= 1 ? 'disabled' : '' }}"
                                   @if(($currentPage ?? 1) <= 1) onclick="return false;" @endif>
                                    <i class="fa fa-chevron-left"></i>
                                </a>
                                <a href="{{ route('mailbox.index', array_merge($paginationParams, ['page' => $nextPage])) }}" 
                                   class="btn btn-default btn-sm {{ ($currentPage ?? 1) >= ($totalPages ?? 1) ? 'disabled' : '' }}"
                                   @if(($currentPage ?? 1) >= ($totalPages ?? 1)) onclick="return false;" @endif>
                                    <i class="fa fa-chevron-right"></i>
                                </a>
                            </div>
                            <!-- /.btn-group -->
                        </div>
                        <!-- /.pull-right -->
                    </div>
                    <div class="table-responsive mailbox-messages">
                        <table class="table table-hover table-striped">
                            <tbody>
                                @foreach($mailData as $mail)
                                <tr>
                                    <td><input type="checkbox" class="email-checkbox" value="{{ $mail['id'] }}"></td>
                                    <td class="mailbox-star">
                                        <a href="#">
                                            <i class="fa {{ $mail['seen'] ? 'fa-star-o' : 'fa-star' }} text-yellow"></i>
                                        </a>
                                    </td>

                                    <td class="mailbox-name">
                                        <a href="{{ route('mailbox.read', ['id' => $mail['id']]) }}">
                                            {{ $mail['from'] }}
                                        </a>
                                    </td>
                                    <td class="mailbox-subject">
                                        <b>{{ $mail['subject'] }}</b> -
                                        {{ \Illuminate\Support\Str::limit($mail['body'], 50) }}
                                    </td>
                                    <td class="mailbox-attachment">
                                        @if($mail['has_attachment'])
                                        <i class="fa fa-paperclip"></i>
                                        @endif
                                    </td>
                                    <td class="mailbox-date">
                                        {{ \Carbon\Carbon::parse($mail['date'])->diffForHumans() }}
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>

                        <!-- /.table -->
                    </div>
                    <!-- /.mail-box-messages -->
                </div>
                <!-- /.box-body -->
                <div class="box-footer no-padding">
                    <div class="mailbox-controls">
                        <!-- Check all button -->
                        <button type="button" class="btn btn-default btn-sm checkbox-toggle"><i
                                class="fa fa-square-o"></i>
                        </button>
                        <div class="btn-group">
                            <button type="button" class="btn btn-default btn-sm" id="deleteSelectedBtnFooter" disabled><i class="fa fa-trash-o"></i></button>
                            <!-- Reply and Forward buttons hidden as requested -->
                            <!-- <button type="button" class="btn btn-default btn-sm"><i class="fa fa-reply"></i></button> -->
                            <!-- <button type="button" class="btn btn-default btn-sm"><i class="fa fa-share"></i></button> -->
                        </div>
                        <!-- /.btn-group -->
                        <button type="button" class="btn btn-default btn-sm" onclick="location.reload()"><i class="fa fa-refresh"></i></button>
                        <div class="pull-right">
                            @if(isset($totalPages) && $totalPages > 0)
                                {{ (($currentPage - 1) * $perPage) + 1 }}-{{ min($currentPage * $perPage, $inboxCount) }}/{{ $inboxCount }}
                            @else
                                0/0
                            @endif
                            <div class="btn-group">
                                @php
                                    $prevPage = max(1, ($currentPage ?? 1) - 1);
                                    $nextPage = min(($totalPages ?? 1), ($currentPage ?? 1) + 1);
                                    $paginationParams = [];
                                    if (isset($searchTerm) && !empty($searchTerm)) {
                                        $paginationParams['search'] = $searchTerm;
                                    }
                                @endphp
                                <a href="{{ route('mailbox.index', array_merge($paginationParams, ['page' => $prevPage])) }}" 
                                   class="btn btn-default btn-sm {{ ($currentPage ?? 1) <= 1 ? 'disabled' : '' }}"
                                   @if(($currentPage ?? 1) <= 1) onclick="return false;" @endif>
                                    <i class="fa fa-chevron-left"></i>
                                </a>
                                <a href="{{ route('mailbox.index', array_merge($paginationParams, ['page' => $nextPage])) }}" 
                                   class="btn btn-default btn-sm {{ ($currentPage ?? 1) >= ($totalPages ?? 1) ? 'disabled' : '' }}"
                                   @if(($currentPage ?? 1) >= ($totalPages ?? 1)) onclick="return false;" @endif>
                                    <i class="fa fa-chevron-right"></i>
                                </a>
                            </div>
                            <!-- /.btn-group -->
                        </div>
                        <!-- /.pull-right -->
                    </div>
                </div>
            </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/select2@4.1.0/dist/js/select2.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>
<!-- iCheck -->
<script src="{{ asset('plugins/iCheck/icheck.min.js') }}"></script>
<!-- Page Script -->
<script>
$(function() {
    // Function to perform search
    function performSearch() {
        var searchTerm = $('#searchInput').val().trim();
        var baseUrl = '{{ route("mailbox.index") }}';
        
        if (searchTerm === '') {
            // If search is cleared, redirect to inbox without search parameter
            window.location.href = baseUrl;
        } else {
            // Redirect with search parameter, reset to page 1
            window.location.href = baseUrl + '?search=' + encodeURIComponent(searchTerm);
        }
        return false;
    }
    
    // Handle Enter key in search input
    $('#searchInput').on('keypress', function(e) {
        if (e.which === 13) { // Enter key
            e.preventDefault();
            performSearch();
        }
    });
    
    // Handle search icon click - multiple approaches to ensure it works
    $('#searchIcon').on('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        performSearch();
        return false;
    });
    
    // Also handle clicks on the icon span
    $('#searchIcon span').on('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        performSearch();
        return false;
    });
    
    // Fallback: handle mousedown event
    $('#searchIcon').on('mousedown', function(e) {
        e.preventDefault();
        performSearch();
        return false;
    });
    
    //Enable iCheck plugin for checkboxes
    //iCheck for checkbox and radio inputs
    $('.mailbox-messages input[type="checkbox"]').iCheck({
        checkboxClass: 'icheckbox_flat-blue',
        radioClass: 'iradio_flat-blue'
    });

    //Enable check and uncheck all functionality
    $(".checkbox-toggle").click(function() {
        var clicks = $(this).data('clicks');
        if (clicks) {
            //Uncheck all checkboxes
            $(".mailbox-messages input[type='checkbox']").iCheck("uncheck");
            $(".fa", this).removeClass("fa-check-square-o").addClass('fa-square-o');
        } else {
            //Check all checkboxes
            $(".mailbox-messages input[type='checkbox']").iCheck("check");
            $(".fa", this).removeClass("fa-square-o").addClass('fa-check-square-o');
        }
        $(this).data("clicks", !clicks);
        updateDeleteButtonState();
    });

    //Handle starring for glyphicon and font awesome
    $(".mailbox-star").click(function(e) {
        e.preventDefault();
        //detect type
        var $this = $(this).find("a > i");
        var glyph = $this.hasClass("glyphicon");
        var fa = $this.hasClass("fa");

        //Switch states
        if (glyph) {
            $this.toggleClass("glyphicon-star");
            $this.toggleClass("glyphicon-star-empty");
        }

        if (fa) {
            $this.toggleClass("fa-star");
            $this.toggleClass("fa-star-o");
        }
    });

    // Handle checkbox selection for delete
    $('.email-checkbox').on('ifChanged', function() {
        updateDeleteButtonState();
    });

    function updateDeleteButtonState() {
        var checkedCount = 0;
        $('.email-checkbox').each(function() {
            if ($(this).is(':checked')) {
                checkedCount++;
            }
        });
        var hasChecked = checkedCount > 0;
        $('#deleteSelectedBtn, #deleteSelectedBtnFooter').prop('disabled', !hasChecked);
    }

    // Delete selected emails
    $('#deleteSelectedBtn, #deleteSelectedBtnFooter').click(function() {
        var selectedIds = [];
        $('.email-checkbox').each(function() {
            if ($(this).is(':checked')) {
                selectedIds.push($(this).val());
            }
        });

        if (selectedIds.length === 0) {
            Swal.fire({
                icon: 'warning',
                title: 'No Selection',
                text: 'Please select at least one email to delete.'
            });
            return;
        }

        Swal.fire({
            title: 'Are you sure?',
            text: 'You are about to delete ' + selectedIds.length + ' email(s). This action cannot be undone!',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#d33',
            cancelButtonColor: '#3085d6',
            confirmButtonText: 'Yes, delete them!',
            cancelButtonText: 'Cancel'
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: '{{ route("mailbox.delete") }}',
                    method: 'POST',
                    data: {
                        email_ids: selectedIds,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        if (response.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Deleted!',
                                text: response.message
                            }).then(() => {
                                location.reload();
                            });
                        } else {
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: response.message || 'Failed to delete emails.'
                            });
                        }
                    },
                    error: function(xhr) {
                        var errorMsg = 'An error occurred while deleting emails.';
                        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