@extends('layouts.app')

@section('content')
    <div class="bg-body-light">
        <div class="content content-full">
            <div class="d-flex flex-column flex-sm-row justify-content-sm-between align-items-sm-center">
                <h1 class="flex-grow-1 fs-3 fw-semibold my-2 my-sm-3">Liste des comptes actifs</h1>
                <nav class="flex-shrink-0 my-2 my-sm-0 ms-sm-3" aria-label="breadcrumb">
                    <ol class="breadcrumb">

                    </ol>
                </nav>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="block">
            <div class="block-content">
                <div class="table-responsive">
                    <table class="table table-bordered table-striped table-vcenter js-dataTable-full">
                    <thead>
                    <tr>
                        <th class="text-center" style="width: 80px;">ID</th>
                        <th>Play</th>
                        <th>Nom</th>
                        <th>Accès</th>
                        <th>Webmail</th>
                        <th>Voir</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($accounts as $account)
                        <tr>
                            <td class="text-center">@if($account->play) <span class="badge text-bg-success">Oui</span>@endif</td>
                            <td class="text-center">{{$account->id}}</td>
                            <td class="text-center">{{$account->name}}</td>
                            <td class="text-center">
                                @if(str_contains($browser['os_family'], 'android'))
                                    <a href="intent://x.com?auth_token={{$account->auth_token}}#Intent;package=com.kiwibrowser.browser;scheme=https;end" target="_blank" class="btn btn-alt-info me-1 mb-3">
                                        <i class="fa fa-fw fa-lock opacity-50 me-1"></i>
                                    </a>
                                @else
                                    <a href="https://x.com?auth_token={{$account->auth_token}}" target="_blank" class="btn btn-alt-info me-1 mb-3">
                                        <i class="fa fa-fw fa-lock opacity-50 me-1"></i>
                                    </a>
                                @endif
                            </td>
                            <td class="text-center">
                                <a href="https://mail.myx.ovh/?postlogin&Email={{$account->rambler_email}}&Password={{$account->rambler_password}}" target="_blank" class="btn btn-alt-info me-1 mb-3">
                                    <i class="fa fa-fw fa-mail-bulk opacity-50 me-1"></i>
                                </a>
                            </td>
                            <td class="text-center">
                                <a href="/accounts/{{$account->id}}" class="btn btn-alt-info me-1 mb-3">
                                    <i class="fa fa-fw fa-eye opacity-50 me-1"></i>
                                </a>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>
                </div>
            </div>
        </div>
        @endsection
        @section('js')
            <script src="{{url('/')}}/js/lib/jquery.min.js"></script>
            <script src="{{url('/')}}/js/plugins/datatables/dataTables.min.js"></script>
            <script src="{{url('/')}}/js/plugins/datatables-bs5/js/dataTables.bootstrap5.min.js"></script>
            <script src="{{url('/')}}/js/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
            <script src="{{url('/')}}/js/plugins/datatables-responsive-bs5/js/responsive.bootstrap5.min.js"></script>
            <script src="{{url('/')}}/js/plugins/datatables-buttons/dataTables.buttons.min.js"></script>
            <script src="{{url('/')}}/js/plugins/datatables-buttons-bs5/js/buttons.bootstrap5.min.js"></script>
            <script src="{{url('/')}}/js/plugins/datatables-buttons-jszip/jszip.min.js"></script>
            <script src="{{url('/')}}/js/plugins/datatables-buttons-pdfmake/pdfmake.min.js"></script>
            <script src="{{url('/')}}/js/plugins/datatables-buttons-pdfmake/vfs_fonts.js"></script>
            <script src="{{url('/')}}/js/plugins/datatables-buttons/buttons.print.min.js"></script>
            <script src="{{url('/')}}/js/plugins/datatables-buttons/buttons.html5.min.js"></script>
            <script>
                $(document).ready(function () {
                    $('.table').DataTable();
                });
            </script>
@endsection