@extends('includes.panel.base')
@section('page_title')
    @lang('Inbounds `:name` - `:port`',['name' => $data->remark, 'port' => $data->port])
@endsection
@section('content')
    <div class="container-fluid">
        <div class="row g-3">
            <div class="col-md-12 grid-margin stretch-card">
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="dataTable" class="table table-striped">
                                <thead>
                                    <tr>
                                        <th scope="col">@lang('Username/Email')</th>
                                        <th scope="col">@lang('Expiry')</th>
                                        <th scope="col">@lang('Password')</th>
                                        <th scope="col">@lang('User Limit')</th>
                                        <th scope="col">@lang('Reset')</th>
                                        <th scope="col">@lang('TotalGB')</th>
                                        <th scope="col" width="128px" class="text-center">@lang('Status')</th>
                                        <th scope="col" width="64px" class="text-center">@lang('Actions')</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($data->clients as $item)
                                        <tr>
                                            <td>{{ $item['email'] ?? ''}}</td>
                                            <td>{{ $item['expiryTime']  ?? ''}}</td>
                                            <td>{{ $item['password'] ?? '' }}</td>
                                            <td>{{ $item['limitIp'] ?? '' }}</td>
                                            <td>{{ $item['reset'] ?? '' }}</td>
                                            <td>{{ $item['totalGB'] ?? '' }}</td>
                                            <td>{{ getClientTraffic($item['email']) }}</td>
                                            <td class="text-center">{{ $item['enable'] ? 'Enable' : 'Disable' }}
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <th scope="col">@lang('Username/Email')</th>
                                        <th scope="col">@lang('Expiry')</th>
                                        <th scope="col">@lang('Password')</th>
                                        <th scope="col">@lang('User Limit')</th>
                                        <th scope="col">@lang('Reset')</th>
                                        <th scope="col">@lang('TotalGB')</th>
                                        <th scope="col" width="128px" class="text-center">@lang('Status')</th>
                                        <th scope="col" width="64px" class="text-center">@lang('Actions')</th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
    <script>
        $(function() {
            'use strict';

            $(function() {
                $('#dataTable').DataTable({
                    "aLengthMenu": [
                        [10, 30, 50, -1],
                        [10, 30, 50, "@lang('All')"]
                    ],
                    "iDisplayLength": 10,
                    "language": {
                        search: ""
                    }
                });
                $('#dataTable').each(function() {
                    var datatable = $(this);
                    // SEARCH - Add the placeholder for Search and Turn this into in-line form control
                    var search_input = datatable.closest('.dataTables_wrapper').find(
                        'div[id$=_filter] input');
                    search_input.attr('placeholder', 'Search');
                    search_input.removeClass('form-control-sm');
                    // LENGTH - Inline-Form control
                    var length_sel = datatable.closest('.dataTables_wrapper').find(
                        'div[id$=_length] select');
                    length_sel.removeClass('form-control-sm');
                });
            });

        });
    </script>
@endsection