@extends('setting.nav')

@section('content')
    <div class="container mt-4">
        <h4 class="mb-3">My Inbox Groups</h4>

        @if (session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif

        <a href="{{ route('inbox_groups.create') }}" class="btn btn-success mb-3">+ Add Group</a>

        <a href="{{ route('set_email') }}" class="btn btn-success mb-3">Go To Imp mail</a>

        <!-- 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>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 ($groups->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>ID</th>
                                    <th>Group Name</th>
                                    {{-- <th>Created At</th> --}}
                                    <th width="180">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($groups as $group)
                                    <tr>
                                        {{-- <td>{{ $group->id }}</td> --}}
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ $group->group_name }}</td>
                                        {{-- <td>{{ $group->created_at->format('d-m-Y') }}</td> --}}
                                        <td>
                                            <a href="{{ route('inbox_groups.edit', $group->id) }}"
                                                class="btn btn-warning btn-sm">Edit</a>
                                            <form action="{{ route('inbox_groups.destroy', $group->id) }}" method="POST"
                                                class="d-inline" onsubmit="return confirm('Are you sure?');">
                                                @csrf
                                                @method('DELETE')
                                                <button class="btn btn-danger btn-sm">Delete</button>
                                            </form>
                                            <a href="{{ route('inbox_groups.search', $group->id) }}"
                                                class="btn btn-primary btn-sm">View</a>

                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="4" class="text-center">No groups found.</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    @endif
                </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>
    @endsection