@extends('setting.nav')

@section('title', 'All Mail Page')

@section('content')
    <div class="container-fluid">
        <!-- Card -->
        <div class="row">
            <div class="col-11"></div>
            <div class="col-1">
                <!-- Use back() helper to go to the previous page -->
                <a href="javascript:history.back()" class="btn btn-primary btn-sm">Back</a>
            </div>
        </div> </br>
        <div class="card border-0 shadow-sm" style="border-radius: 1rem;">
            <div class="card-header d-flex justify-content-between align-items-center text-white"
                style="position:Sticky; top:0; border-radius: 1rem 1rem 0 0; background: linear-gradient(135deg, #4e73df, #1cc88a); font-size: 1.25rem; font-weight: 600;">
                <span>Sender All Mail :- {{ $senderEmail }} </span>
                {{-- </span>Sender Name: {{ $messages->first()->sender_name ?? 'N/A' }} --}}
                <div class="d-flex align-items-center gap-1" style="max-width: 500px;">
                    <div>
                        Sender Name: {{ $messages->first()->sender_name ?? 'N/A' }}
                    </div>
                    <div style="width: 250px;">
                        <input type="text" id="customSearch" class="form-control" placeholder="Search mails..."
                            style="border-radius: 30px; padding: 0.4rem 1rem;">
                    </div>
                </div>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">

                    {{-- <h4>Messages for User ID: {{ $userId }} and Sender: {{ $senderEmail }}</h4> --}}
                    @if ($messages->count())
                        <table id="messagesTable" class="table table-bordered table-striped">
                            <thead style="position: sticky; top: 0; z-index: 1;">
                                <tr>
                                    <th>ID</th>
                                    <th>Subject</th>
                                    <th>Sent Date</th>
                                    <th>Sentiment</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($messages as $index => $msg)
                                    @php
                                        // Create DateTime objects in Asia/Kolkata timezone
                                        // $sent = new DateTime($mail->sent_date, new DateTimeZone('Asia/Kolkata'));
                                        $sent = new DateTime($msg->sent_date); // Let it parse the actual timezone
                                        $sent->setTimezone(new DateTimeZone('Asia/Kolkata'));

                                    @endphp
                                    <tr>
                                        <td>{{ $index + 1 }}</td>
                                        <td>{{ $msg->subject }}</td>
                                        <td>{{ $sent->format('d M Y H:i A') }}</td>
                                        <td>@php
                                            $getting_spam = strpos($msg->label_ids, 'SPAM') !== false ? 1 : 0;
                                        @endphp
                                            {{ $msg->is_promotion == 1 ? 'Mass mail' : ($getting_spam == 1 ? 'Mass mail' : ucfirst($msg->is_spam_value)) }}
                                        </td>
                                        <th> <a href="{{ route('mails.show_single', ['emial_id' => $msg->email_id, 'is_sent' => '0', 'user_id' => $employee->id ?? null]) }}"
                                                class="btn btn-sm btn-outline-primary">View</a></th>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    @else
                        <p>No messages found.</p>
                    @endif

                </div>
            </div>
        </div>
    </div>

    <!-- DataTables Scripts -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.5/css/jquery.dataTables.min.css" />
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.5/js/jquery.dataTables.min.js"></script>

    {{-- <script>
        $(document).ready(function() {
            $('#messagesTable').DataTable({
                pageLength: 10,
                ordering: true,
                searching: true,
                responsive: true
            });
        });
    </script> --}}
    <script>
        $(document).ready(function() {
            var table = $('#messagesTable').DataTable({
                // pageLength: 5,
                // lengthChange: false,
                ordering: true,
                info: true,
                // pagingType: 'simple',
                pagingType: 'full_numbers',
                language: {
                    search: "",
                    searchPlaceholder: "Search...",
                    // paginate: {
                    //     previous: "<",
                    //     next: ">"
                    // }
                },
                dom: 't<"d-flex justify-content-between align-items-center p-3"p>'
                //      dom: `<"d-flex justify-content-between align-items-center px-3 pt-3"l>t
            // <"d-flex justify-content-between align-items-center p-3"p>`
            });

            // Connect custom search box
            $('#customSearch').on('keyup', function() {
                table.search(this.value).draw();
            });

            // Style pagination buttons
            setTimeout(function() {
                $('.dataTables_paginate .paginate_button').addClass('btn btn-sm btn-outline-secondary mx-1')
                    .css({
                        borderRadius: '30px'
                    });
            }, 100);
        });
    </script>
@endsection