@extends('setting.nav')

@section('content')
    <div class="container-fluid">
        <div class="row">
            <div class="col-2">
                <a href="{{ route('employee') }}" class="btn btn-primary btn-sm">Back</a>
            </div>
        </div>
        <!-- Card -->
        <div class="card border-0 shadow-sm mt-4" 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>Employee Email :- {{ $user->email }} (Type: {{ ucfirst($type) }} Mails :-
                    {{ $totalMessages }})</span>
                <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 class="card-body p-0">
                <div class="table-responsive" style="max-height: 400px; overflow-y: auto;">
                    @if ($messages->isEmpty())
                        <h2 class="text-center text-danger">No mails available</h2>
                    @else
                        <table class="table table-striped" id="employee">
                            <thead style="position: sticky; top: 0; z-index: 1;">
                                <tr>
                                    <th>ID</th>
                                    <th>Sender Name</th>
                                    <th>Sender Email</th>
                                    <th>Subject</th>
                                    <th>Sentiment</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($messages as $message)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ $message->sender_name }}</td>
                                        <td>{{ $message->sender_email }}</td>
                                        <td>{{ $message->subject }}</td>
                                        <td>
                                            {{ $message->is_spam_value }}
                                        </td>
                                        <td>
                                            <a href="{{ route('mail_with_email_id', $message->email_id) }}"
                                                class="btn btn-sm btn-primary">View</a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    @endif
                </div>
            </div>
        </div>
    @endsection
    @section('scripts')
        <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css" />

        <!-- jQuery -->
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

        <!-- DataTables JS -->
        <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
        <script>
            $(document).ready(function() {
                var table = $('#employee').DataTable({
                    ordering: true,
                    info: true,
                    pagingType: 'full_numbers',
                    language: {
                        search: "",
                        searchPlaceholder: "Search..."
                    },
                    dom: 't<"d-flex justify-content-between align-items-center p-3"p>'
                });

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

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