@extends('layouts.app')

@section('title')
    {{ __('Báo cáo đối tác cuối ngày') }}
@endsection

@section('report')
    active
@endsection

@section('section.header')
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>{{ __('Báo cáo đối tác cuối ngày') }}</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">{{ __('Báo cáo') }}</li>
                    </ol>
                </div>
            </div>
            <hr>
        </div><!-- /.container-fluid -->
    </section>
@endsection

@section('section.content')
    <section class="content">
        <form class="row" id="search-report-partner">
            @csrf
            <div class="col-lg-2">
                <div class="form-group">
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">{{ __('Ngày') }}</span>
                        </div>
                        <input type="date" class="form-control" name="create_date" value="{{ date('Y-m-d', strtotime('-1 day')) }}">
                    </div>
                </div>
            </div>
            <div class="col-lg-2">
                <div class="form-group">
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text">{{ __('partner') }}</span>
                        </div>
                        <select name="username" class="form-control">
                            <option value="">{{ __('select') }}</option>
                            @foreach (\App\Models\User\User::getPartners() as $partner)
                                <option value="{{ $partner->username }}">{{ $partner->username }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </div>
            <div class="col-lg-4">
                <button type="submit" class="btn btn-success" id="btn-search"><i
                        class="fa fa-search"></i>{{ __('search') }}</button>
            </div>
        </form>
        <div class="card">
            <div class="sum-balances" style ="padding-left: 1rem;">
                <strong id="sum-balances"></strong>
            </div>
            <div class="card-body">
                <div class="table-">
                    <table class="table table-bordered table-striped" id="listPartners">
                        <thead style="text-align: center; background-color: rgb(198, 222, 235)">
                            <tr>
                                <th>{{ __('Tên') }}</th>
                                <th>{{ __('Số dư') }}</th>
                                <th>{{ __('Ngày') }}</th>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr>
                                <td></td>
                                <td class="text-center font-weight-bold text-danger">
                                    <div id="total-balance"></div>
                                </td>
                                <td></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
            </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 type='text/javascript' src='https://cdn.datatables.net/1.10.16/js/jquery.dataTables.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/plug-ins/2.0.1/pagination/input.js"></script>
    <script>
        jQuery(document).ready(function($) {
            var dataTable = $('#listPartners').DataTable({
                'pagingType': 'input',
                dom: 'lifrtp',
                processing: true,
                serverSide: true,
                info: true,
                'pageLength': 50,
                'aLengthMenu': [
                    [50, 100, 200, -1],
                    [50, 100, 200, 'All']
                ],
                ajax: {
                    url: '{{ route('app.admin.report.partnerData') }}',
                    type: 'GET',
                    data: function(d) {
                        d.create_date = $('#search-report-partner [name="create_date"]').val();
                        d.username = $('#search-report-partner [name="username"]').val();
                    },
                    dataSrc: function(json) {
                        if(json.data.length > 0) {
                            $('#sum-balances').html("Tổng số dư là: " + numberFormat(json.totalBalance));
                            $('#total-balance').html("Total: " + numberFormat(json.totalBalance));
                        }
                        else {
                            $('#sum-balances').html("");
                            $('#total-balance').html("");

                        }
                        return json.data;
                    },
                    error: function(xhr, status, error) {
                        if(status == "parsererror") {
                            window.location.href = '/auth/login';
                        }
                    }
                },
                columns: [{
                        data: 'username',
                        className: 'text-center',
                    },
                    {
                        data: 'balance',
                        className: 'text-center',
                        render: function(data, type, row) {
                            return numberFormat(data);
                        }
                    },
                    {
                        data: 'created_at',
                        className: 'text-center',
                        render: function(data, type, row) {
                        if(type === 'display') {
                            return formatTime(data);

                        }
                        return data;
                        }   
                    },
                ],
                order: [
                    [1, 'desc']
                ]
            });

            $(document).on('click', '#btn-search', function(event) {
                event.preventDefault();
                dataTable.ajax.reload();
            });

            $('#listPartners').css('width', '100%');
        });

        function formatTime(isoTime) {
            const date = new Date(isoTime);
            const day = date.getDate().toString().padStart(2, '0');
            const month = (date.getMonth() + 1).toString().padStart(2, '0');
            const year = date.getFullYear();

            return `${day}/${month}/${year}`;
        }

        function numberFormat(number) {
            return new Intl.NumberFormat('en-US').format(number);
        }
    </script>
@endsection

@section('styles')
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
    <link type="text/css" href="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/css/dataTables.checkboxes.css"
        rel="stylesheet" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
    <link rel="stylesheet" href="{{ asset('dist/css/input.css') }}">
    <style>
         table, #listPartners tfoot td, #listPartners tfoot {
        border-left: none  !important;             
        border-right: none !important;            
        border-bottom: none !important;           
    }
    </style>
@endsection