@extends('setting.nav')

@section('title', 'Home Page')

@section('content')
    <h2>Sender Emails</h2>
    <div class="row mb-2">
        <div class="col-8">
            <div class="d-flex gap-3">
                <div class="position-relative">
                    <a href="#" class="btn btn-secondary rounded-pill px-4" data-bs-toggle="modal"
                        data-bs-target="#importantMailModal">Important Mail
                    </a>
                    <span id="countis_spam"
                        class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                        {{ $total_impmail ?? 0 }}
                    </span>
                </div>
                <!-- Modal for Important Mail -->
                <div class="modal fade" id="importantMailModal" tabindex="-1" aria-labelledby="importantMailLabel"
                    aria-hidden="true">
                    <div class="modal-dialog modal-xl modal-dialog-scrollable">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="importantMailLabel">Important Mails</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <!-- Display Important Mails Here -->
                                <div class="container">
                                    <h2>Important Mails</h2>
                                    <table id="importantMailsTable" class="table table-striped table-bordered">
                                        <thead>
                                            <tr>
                                                <th>ID</th>
                                                <th>Sender Name</th>
                                                <th>Sender Email</th>
                                                <th style="width: 150px;">Actions</th> <!-- New Column for Button -->
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($importantMails as $mail)
                                                <tr>
                                                    <td>{{ $mail->id }}</td>
                                                    <td>{{ $mail->sender_name }}</td>
                                                    <td>{{ $mail->sender_email }}</td>
                                                    <td>
                                                        <div class="d-flex flex-wrap gap-3">
                                                            <div class="position-relative">
                                                                {{-- <a href="#"
                                                                    class="btn btn-secondary rounded-pill px-4">All
                                                                    Mails</a>
                                                                <span
                                                                    class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                                                                    {{ $mail->message_count }}
                                                                </span> --}}
                                                                <form action="{{ route('show_all_mail') }}" method="POST">
                                                                    @csrf
                                                                    <input type="hidden" name="user_id"
                                                                        value="{{ $mail->user_id }}">
                                                                    <input type="hidden" name="sender_email"
                                                                        value="{{ $mail->sender_email }}">
                                                                    <button type="submit"
                                                                        class="btn btn-secondary rounded-pill px-4">
                                                                        All Mails
                                                                    </button>
                                                                    <span
                                                                        class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                                                                        {{ $mail->message_count }}
                                                                    </span>
                                                                </form>
                                                            </div>

                                                            {{-- <div class="position-relative">
                                                                <a href="#"
                                                                    class="btn btn-primary rounded-pill px-4"> Bad</a>
                                                                <span
                                                                    class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                                                                    {{ $mail->is_spam_count }}
                                                                </span>
                                                            </div>

                                                            <div class="position-relative">
                                                                <a href="#"
                                                                    class="btn btn-success rounded-pill px-4">Good</a>
                                                                <span
                                                                    class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                                                                    {{ $mail->is_not_spam_count }}
                                                                </span>
                                                            </div> --}}

                                                        </div>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="position-relative">
                    <a href="#" class="btn btn-warning rounded-pill px-4" data-bs-toggle="modal"
                        data-bs-target="#notImportantMailModal">Not Important Mail
                    </a>
                    <span id="countis_spam"
                        class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                        {{ $total_not_impmail ?? 0 }}
                    </span>
                </div>

                <!-- Modal for Not Important Mail -->
                <div class="modal fade" id="notImportantMailModal" tabindex="-1" aria-labelledby="notImportantMailLabel"
                    aria-hidden="true">
                    <div class="modal-dialog modal-xl modal-dialog-scrollable">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="notImportantMailLabel">Not Important Mails</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal"
                                    aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <!-- Display Not Important Mails Here -->
                                <div class="container">
                                    <h2>Non-Important Mails</h2>
                                    <table id="nonImportantMailsTable" class="table table-striped table-bordered">
                                        <thead>
                                            <tr>
                                                <th>ID</th>
                                                <th>Sender Name</th>
                                                <th>Sender Email</th>
                                                <th style="width: 150px;">Actions</th> <!-- New Column for Button -->
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($nonImportantMails as $mail)
                                                <tr>
                                                    <td>{{ $mail->id }}</td>
                                                    <td>{{ $mail->sender_name }}</td>
                                                    <td>{{ $mail->sender_email }}</td>
                                                    <td>
                                                        <div class="d-flex flex-wrap gap-3">
                                                            <div class="position-relative">
                                                                {{-- <a href="#"
                                                                    class="btn btn-secondary rounded-pill px-4">All
                                                                    Mails</a>
                                                                <span
                                                                    class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                                                                    {{ $mail->message_count }}
                                                                </span> --}}
                                                                <form action="{{ route('show_all_mail') }}" method="POST">
                                                                    @csrf
                                                                    <input type="hidden" name="user_id"
                                                                        value="{{ $mail->user_id }}">
                                                                    <input type="hidden" name="sender_email"
                                                                        value="{{ $mail->sender_email }}">
                                                                    <button type="submit"
                                                                        class="btn btn-secondary rounded-pill px-4">
                                                                        All Mails
                                                                    </button>
                                                                    <span
                                                                        class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                                                                        {{ $mail->message_count }}
                                                                    </span>
                                                                </form>
                                                            </div>

                                                            {{-- <div class="position-relative">
                                                                <a href="#"
                                                                    class="btn btn-primary rounded-pill px-4"> Bad</a>
                                                                <span
                                                                    class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                                                                    {{ $mail->is_spam_count }}
                                                                </span>
                                                            </div>

                                                            <div class="position-relative">
                                                                <a href="#"
                                                                    class="btn btn-success rounded-pill px-4">Good</a>
                                                                <span
                                                                    class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                                                                    {{ $mail->is_not_spam_count }}
                                                                </span>
                                                            </div> --}}

                                                        </div>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>

                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-4">
            <span class="btn btn-primary" id="save-btn">Save Changes</span>
            <a href="{{ route('inbox_groups.index') }}" class="btn btn-success">+ Add Group</a>
        </div>
    </div>
    <div class="container-fluid mt-4">
        <!-- Success Message Display -->
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
        <!-- Card -->
        <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>Email Grouping</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 ($emails->isEmpty())
                        <h2 class="text-center text-danger">No mails available</h2>
                    @else
                        <table id="messagesTable" class="display table table-striped">
                            <thead style="position: sticky; top: 0; z-index: 1;">
                                <tr>
                                    <th style="width: 15%;">Important Mail</th>
                                    <th>ID</th>
                                    <th>Sender Name</th>
                                    <th>Sender Email</th>
                                    <th>Actions</th>

                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($emails as $index => $email)
                                    <tr>
                                        <td class="text-center">
                                            <input type="checkbox" id="checkbox-{{ $index }}"
                                                class="important-checkbox" data-email="{{ $email->id }}"
                                                {{ $email->important_mail == 0 ? 'checked' : '' }}>
                                        </td>
                                        {{-- <td>{{ $email->id }}</td> --}}
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ $email->sender_name }}</td>
                                        <td>{{ $email->sender_email }}</td>
                                        @if ($email->group_id == 0)
                                            <td>
                                                <form action="{{ route('email.updateGroup', $email->id) }}"
                                                    method="POST" class="d-inline-block">
                                                    @csrf
                                                    <div class="d-flex align-items-center">
                                                        <div class="form-group me-2">
                                                            <input type="hidden" name="email_id"
                                                                value="{{ $email->id }}">
                                                            <select name="group_id" class="form-select">
                                                                <option value="">Select Group</option>
                                                                @foreach ($groups as $group)
                                                                    <option value="{{ $group->id }}"
                                                                        {{ $email->group_id == $group->id ? 'selected' : '' }}>
                                                                        {{ $group->group_name }}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                        <button type="submit"
                                                            class="btn btn-primary btn-sm">Apply</button>
                                                    </div>
                                                </form>
                                            </td>
                                        @else
                                            <td>
                                                @foreach ($groups as $group)
                                                    @if ($group->id == $email->group_id)
                                                        <a href="{{ route('inbox_groups.search', $email->group_id) }}">
                                                            {{ $group->group_name }}
                                                        </a>
                                                        @break
                                                    @endif
                                                @endforeach
                                                <!-- Delete Icon (Font Awesome) -->
                                                <a href="{{ route('inboxGroup.removeGroup', $email->id) }}"
                                                    class="text-danger ms-2"
                                                    onclick="return confirm('Are you sure you want to remove this group?')">
                                                    <i class="bi bi-trash-fill"></i> <!-- Font Awesome Trash Icon -->
                                                </a>
                                            </td>
                                        @endif
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    @endif
                </div>
            </div>
        </div>
    </div>
    <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 = $('#messagesTable').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>

    <script>
        $(document).ready(function() {
            $('#importantMailsTable').DataTable({
                "paging": true,
                "searching": true,
                "ordering": true,
                "info": true,
            });
            $('#nonImportantMailsTable').DataTable({
                "paging": true,
                "searching": true,
                "ordering": true,
                "info": true
            });
            let table = $('#messagesTable').DataTable();

            document.getElementById("save-btn").addEventListener("click", function() {
                let checkedEmails = [];
                let importantMailValue = 0; //important
                table.rows().nodes().toArray().forEach(function(row) {
                    let checkbox = row.querySelector(".important-checkbox:checked");
                    if (checkbox) {
                        let importantMailValue = 0; //important
                        checkedEmails.push(checkbox.dataset.email);
                    }
                });


                if (checkedEmails.length > 0) {
                    $.ajax({
                        url: "update_set_email",
                        type: "GET", // Or "POST" if required
                        data: {
                            emails: checkedEmails, // Automatically converts to `emails[]=1&emails[]=2`
                            important_mail: importantMailValue,
                            user_id: "{{ Auth::id() }}"
                        },
                        dataType: "json",
                        success: function(response) {
                            console.log(response);
                            alert(response.message);
                            location.reload();
                        },
                        error: function(xhr) {
                            console.log(xhr);
                            alert("Error in updating emails: ");
                        }
                    });
                } else {
                    alert("No emails selected.");
                }
            });
        });
    </script>

@endsection