@extends('layouts.app')

@section('title')
    {{ __('telegram') }}
@endsection

@section('telegram')
    active
@endsection

@section('section.header')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>{{ __('telegram') }}</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="{{ route('app.index') }}">{{ __('home') }}</a></li>
                        <li class="breadcrumb-item active">{{ __('telegram') }}</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>
@endsection

@section('section.content')
    <section class="content">
        <div class="card">
            <div class="card-body">
                <table class="table table-bordered table-striped text-center" id="listPartners" style="width: 100%">
                    <thead>
                        <tr>
                            <th>{{ __('ID') }}</th>
                            <th>{{ __('Tên tài khoản') }}</th>
                            <th>{{ __('Tên đầy đủ') }}</th>
                            <th>{{ __('Ngôn ngữ') }}</th>
                            <th>{{ __('Thời gian tạo') }}</th>
                            <th>{{ __('Cập nhật lúc') }}</th>
                            <th>{{ __('Vai trò') }}</th>
                            <th>{{ __('Hành động') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($telegram_accounts as $account)
                            <tr>
                                <td>{{ $account->id }}</td>
                                <td>{{ $account->username }}</td>
                                <td>{{ $account->full_name }}</td>
                                <td><span class="badge bg-info">{{ $account->language_code }}</span></td>
                                <td>{{ $account->created_at }}</td>
                                <td>{{ $account->updated_at }}</td>
                                <td>
                                    {{-- {{ json_encode($account->roles->pluck('name')) }} --}}
                                </td>
                                <td>
                                    <a href="{{ route('app.telegram.edit', ['id' => $account->id]) }}"
                                        class="btn btn-primary btn-sm"><i class="fas fa-edit"></i>{{ __('Chỉnh sửa') }}</a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </section>
@endsection

@section('scripts')
    <!-- DataTables  & Plugins -->
    <script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-bs4/js/dataTables.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-responsive/js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-responsive/js/responsive.bootstrap4.min.js') }}"></script>
    <script src="{{ asset('plugins/datatables-buttons/js/dataTables.buttons.min.js') }}"></script>
    <script>
        const dataTables = $('table').DataTable();
    </script>
@endsection

@section('styles')
    <link rel="stylesheet" href="{{ asset('plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
    <link rel="stylesheet" href="{{ asset('plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
    <style>
        td:not(:last-child) {
            word-wrap: break-word;
            overflow: hidden;
            white-space: nowrap;
        }
    </style>
@endsection