@extends('layouts.master')

@section('title','Successful Connections Report')

@section('content')

<div>

<style>
    /* Tailwind-based adjustment */
    .pagination .relative .inline-flex {
        font-size: 0.75rem;
        /* text-sm or smaller */
        padding: 0.25rem 0.5rem;
        /* reduce padding */
    }

    /* Specific to arrow icons (if using unicode) */
    .pagination span[aria-hidden="true"] {
        font-size: 0.75rem;
    }

    svg {

        display: none;
    }

   
</style>



<div class="container mt-4">

    <h4>Successful Connections </h4>

    <form method="GET" action="{{ url()->current() }}" class="row g-3 mb-4">
        <div class="col-md-4">
            <input type="text" name="search" class="form-control">
        </div>
        <div class="col-md-2">
            <button type="submit" class="btn btn-primary">Search</button>
        </div>
    </form>

    <div class="card card-xy mb-3">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover" >

                    <thead>


                        <tr>
                            <th>User A</th>
                            <th>User B</th>
                            <th>Chat Id</th>
                        </tr>
                    </thead>

                    <tbody>

                        @forelse($active_connections as $c)

                        <tr>

                            <td>{{ $c['user_a'] }}</td>
                            <td>{{ $c['user_b'] }}</td>
                            <td>{{ $c['chat_id'] }}</td>
                        </tr>

                        @empty
                        <tr>
                            <td colspan="4">No connections</td>
                        </tr>
                        @endforelse
                    </tbody>


                </table>

                {{ $active_connections->links('pagination::bootstrap-5') }}
            </div>
        </div>
    </div>



    

</div>
</div>

@endsection