@extends('layouts.app')

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

@section('partner')
    active
@endsection

@section('section.header')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>{{ __('partner') }}</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">{{ __('partner') }}</li>
                    </ol>
                </div>
            </div>
        </div><!-- /.container-fluid -->
    </section>
@endsection

@section('section.content')
    <!-- Main content -->
    <section class="content">
        <!-- Default box -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">{{ __('list') }}</h3>
                @if (Session::has('success'))
                    <div id="message-alert" class="alert alert-success">
                        {{ Session::get('success') }}
                    </div>
                @endif
                @if (Session::has('error'))
                    <div id="message-alert" class="alert alert-danger">
                        {{ Session::get('error') }}
                    </div>
                @endif
                <div class="card-tools">
                    @can('partner_create')
                        <button onclick="window.location.href = '{{ route('app.partner.create') }}'" type="button"
                            class="btn btn-primary btn-sm" title="{{ __('Create new') }}">
                            <i class="fas fa-add"></i>
                            <span>{{ __('Create new') }}</span>
                        </button>
                    @endcan
                    @can('partner_export')
                        <a class="btn btn-sm btn-secondary" id="export-partner" href="javascript:void(0)"><i
                                class="fas fa-file-excel"></i>{{ __('Export files') }}</a>
                    @endcan
                </div>
                @role('admin|support')
                    <div class="row card-text text-muted">
                        <div class="col-sm-4">
                            <small>{{ __('Total balance:') }}
                                <b>{{ number_format(\App\Models\User\User::getTotalBalance()) }}</b></small>
                        </div>
                        <div class="col-sm-4">
                            <small>Số user:
                                <b>{{ \App\Models\User\User::countUser() }}</b></small>
                        </div>
                    </div>
                @endrole
            </div>
            @php
                $tableBodyStyle = $isDemoAccount ? 'display: none;' : '';
            @endphp
            <div class="card-body">
                <form id="partner-filter-form" class="mb-3">
                    <div class="row">
                        <div class="col-md-4 mb-2">
                            <label for="filter_keyword" class="mb-1">Từ khóa</label>
                            <input type="text" id="filter_keyword" name="keyword" class="form-control"
                                placeholder="Tìm theo ID, username, sign key, IP...">
                        </div>

                        <div class="col-md-4 mb-2">
                            <label for="filter_username" class="mb-1">Username</label>
                            <input type="text" id="filter_username" name="username" class="form-control"
                                placeholder="Nhập username">
                        </div>

                        <div class="col-md-2 mb-2">
                            <label for="filter_role" class="mb-1">Loại tài khoản</label>
                            <select id="filter_role" name="role" class="form-control">
                                <option value="">-- Tất cả --</option>
                                <option value="admin">Admin</option>
                                <option value="support">Support</option>
                                <option value="supporter">AdminViewer</option>
                                <option value="partner">Partner</option>
                                <option value="accountant">Quản lý đối tác</option>
                            </select>
                        </div>

                        <div class="col-md-2 mb-2 d-flex align-items-end">
                            <div class="w-100 d-flex gap-2">
                                <button type="submit" class="btn btn-primary btn-sm w-100">
                                    <i class="fas fa-search"></i> Lọc
                                </button>
                                <button type="button" id="btn-reset-filter" class="btn btn-secondary btn-sm w-100">
                                    <i class="fas fa-undo"></i> Reset
                                </button>
                            </div>
                        </div>
                    </div>
                </form>

                <div class="table-responsive">
                    <table class="table table-bordered table-striped" id="listPartners" style="width: 100%">
                        <thead style="text-align: center">
                            <tr>
                                <th rowspan="2">{{ __('Id') }}</th>
                                <th rowspan="2">{{ __('Login name') }}</th>
                                <th rowspan="2">{{ __('account_type') }}</th>
                                <th rowspan="2">{{ __('Balance') }}</th>
                                <th colspan="2">{{ __('Discount') }}</th>
                                <th rowspan="2">{{ __('Api Key') }}</th>
                                <th rowspan="2">{{ __('Sign Key') }}</th>
                                <th rowspan="2">{{ __('IP') }}</th>
                                <th rowspan="2">{{ __('Last access') }}</th>
                                <th rowspan="2">{{ __('Creation date') }}</th>
                                <th rowspan="2">{{ __('Act') }}</th>
                            </tr>
                            <tr>
                                <th>{{ __('IN') }}</th>
                                <th>{{ __('OUT') }}</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
            <!-- /.card-body -->
        </div>
        <!-- /.card -->
    </section>
    <!-- /.content -->
@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 src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
    <script type='text/javascript' src='https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js'></script>
    <script type="text/javascript" src="https://cdn.datatables.net/plug-ins/2.0.1/pagination/input.js"></script>
    <script>
        var dataTable;
        let filterTypingTimer = null;
        jQuery(document).ready(function($) {

            dataTable = $('#listPartners').DataTable({
                'pagingType': 'input',
                dom: 'lifrtp',
                processing: true,
                serverSide: true,
                info: true,
                ajax: {
                    url: '{{ route('app.getPartnerData') }}',
                    type: 'GET',
                    data: function(d) {
                        d.keyword = $('#filter_keyword').val();
                        d.username = $('#filter_username').val();
                        d.role = $('#filter_role').val();
                    },
                    error: function(xhr, status, error) {
                        if (status == "parsererror") {
                            window.location.href = '/auth/login';
                        }
                    }
                },
                'pageLength': 10,
                'aLengthMenu': [
                    [10, 20, 50, -1],
                    [10, 20, 50, 'All']
                ],
                columns: [{
                        data: 'id'
                    },
                    {
                        data: 'username',
                        className: 'text-center'
                    },
                    {
                        data: 'rule_name',
                        className: 'text-center'
                    },
                    {
                        data: 'balance',
                        className: 'text-right',
                        render: function(data, type, row) {
                            if (type === 'display') {
                                var formattedBalance = new Intl.NumberFormat('en-US').format(data);
                                return formattedBalance;
                            }
                            return data;
                        }
                    },
                    {
                        data: 'discount_in'
                    },
                    {
                        data: 'discount_out'
                    },
                    {
                        data: 'api_key',
                        searchable: false,
                        visible: {{ in_array(auth()->user()->username, ['admin', 'dev001']) ? 'true' : 'false' }}
                    },
                    {
                        data: 'sign_key'
                    },
                    {
                        data: 'ip_address',
                        searchable: false
                    },
                    {
                        data: 'last_accessed_at',
                        className: 'text-center',
                        render: function(data, type, row) {
                            if (type === 'display') {
                                if (data) {
                                    return formatTime(data);
                                }
                                return "{{ __('Not logged in yet') }}";

                            }
                            return data;
                        }
                    },
                    {
                        data: 'created_at',
                        className: 'text-center',
                        render: function(data, type, row) {
                            if (type === 'display') {
                                return formatTime(data);

                            }
                            return data;
                        }
                    },
                    {
                        data: 'actions',
                        orderable: false,
                        searchable: false,
                        className: 'text-center',
                    }
                ]
            });

            function reloadTableWithDebounce() {
                clearTimeout(filterTypingTimer);
                filterTypingTimer = setTimeout(function() {
                    dataTable.ajax.reload();
                }, 400); // đợi 400ms sau khi ngừng gõ mới reload
            }

            // submit form vẫn hỗ trợ
            $('#partner-filter-form').on('submit', function(e) {
                e.preventDefault();
                dataTable.ajax.reload();
            });

            // reset filter
            $('#btn-reset-filter').on('click', function() {
                $('#filter_keyword').val('');
                $('#filter_username').val('');
                $('#filter_role').val('');
                dataTable.ajax.reload();
            });

            // gõ tới đâu load tới đó
            $('#filter_keyword, #filter_username').on('input', function() {
                reloadTableWithDebounce();
            });

            // chọn role thì reload luôn
            $('#filter_role').on('change', function() {
                dataTable.ajax.reload();
            });
        })

        function numberFormat(number) {
            return new Intl.NumberFormat('en-US').format(number);
        }

        function formatTime(isoTime) {
            try {
                const date = new Date(isoTime);
                const hours = date.getHours().toString().padStart(2, '0');
                const minutes = date.getMinutes().toString().padStart(2, '0');
                const seconds = date.getSeconds().toString().padStart(2, '0');
                const day = date.getDate().toString().padStart(2, '0');
                const month = (date.getMonth() + 1).toString().padStart(2, '0');
                const year = date.getFullYear();

                return `${hours}:${minutes}:${seconds} ${day}/${month}/${year}`;
            } catch (e) {}
            return null;
        }
    </script>
    <script>
        $('#export-partner').click(function(e) {
            e.preventDefault();
            $.ajax({
                type: 'POST',
                url: "{{ route('app.exportPartner') }}",
                dataType: 'JSON',
                success: function(response) {
                    if (response.success) {
                        toastr.success(response.message);
                        setTimeout(function() {
                            window.open('/file-managers', '_blank');
                        }, 3000);
                    }
                },
                error: function(error) {
                    toastr.error(error);
                },
            });
        });
    </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') }}">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
    <style>
        td:not(:last-child) {
            word-wrap: break-word;
            overflow: hidden;
            white-space: nowrap;
        }

        table tbody {
            {{ $tableBodyStyle }}
        }

        #partner-filter-form .form-control {
            min-height: 38px;
        }

        #partner-filter-form label {
            font-weight: 600;
        }

        .dataTables_processing {
            z-index: 1050 !important;
        }
    </style>
@endsection