@extends('layouts.app')

@section('contents')
    <style>
        .txt-yellow {
            color: #e500b4;
        }
        .txt-green {
            color: limegreen;
        }
        .txt-red {
            color: red;
        }
        .txt-blue {
            color: #00b7ff;
        }
    </style>

    <div class="card">
        <div class="card-body border-bottom">
            <h4 class="card-title">สรุปรายเดือน</h4>
            <div class="row">
                <div class="col-xs-12 col-sm-12 col-md-6">
                    <form action="{{ url()->current() }}">
                        <div class="form-group">
                            <label for="year">ปี</label>
                            <input type="text" class="form-control" name="year" id="year" value="{{ $year }}">
                        </div>
                        <div class="form-group">
                            <label for="month">เดือน</label>
                            <select class="form-control" name="month" id="month">
                                @for($i = 1;$i < 13;$i++)
                                    <option value="{{$i}}" {{ (int)$month === (int)$i?'selected':'' }}>{{$i}}</option>
                                @endfor
                            </select>
                        </div>
                        <button class="btn btn-primary mt-1">ค้นหา</button>
                    </form>
                </div>
            </div>
        </div>
        <div class="card-datatable table-responsive pt-0 container-fluid">
            {{ MyNotify::get() }}
            <table id="dtable" class="table table-striped ">
                <thead>
                <tr>
                    <th>วันที่</th>
                    <th>โบนัส</th>
                    <th>ยอดฝาก</th>
                    <th>ยอดถอน</th>
                    <th>ฝากลบถอน</th>
                    <th>สมัครใหม่</th>
                </tr>
                </thead>
                <tbody>
                @foreach($reports as $key => $value)
                                        <tr>
                        <td>{{ $value['date'] }}</td>
                        <td><span class="txt-yellow">{{ number_format($value['bonus'],2) }}</span></td>
                        <td><span class="txt-green">{{ number_format($value['deposit'],2) }}</span></td>
                        <td><span class="txt-red">{{ number_format($value['withdraw'],2) }}</span></td>
                        <td><span class="txt-{{$value['total'] < 0?'red':'green'}}">{{ number_format($value['total'],2) }}</span></td>
                        <td><span class="txt-blue">{{ number_format($value['register'],2) }}</span></td>
                    </tr>
                @endforeach
                </tbody>
                <tfoot>
                <tr>
                    <th>รวม</th>
                    <th><span class="txt-yellow">{{ number_format(array_sum($total_bonus), 2) }}</span></th>
                    <th><span class="txt-green">{{ number_format(array_sum($total_deposit), 2) }}</span></th>
                    <th><span class="txt-red">{{ number_format(array_sum($total_withdraw), 2) }}</span></th>
                    <th><span class="txt-{{$value['total'] < 0?'red':'green'}}">{{ number_format(array_sum($total_total), 2) }}</span></th>
                    <th><span class="txt-blue">{{ number_format(array_sum($total_register), 2) }}</span></th>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>
@endsection

@section('head.vendor.css')
    <link rel="stylesheet" type="text/css"
          href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css"
          href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap5.min.css">
    <script src="{{ asset('app-assets/vendors/js/extensions/sweetalert2.all.min.js') }}"></script>
    <script src="{{ asset('app-assets/vendors/js/extensions/polyfill.min.js') }}"></script>
@endsection

@section('page.js')
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
    <script src="{{ asset('app-assets/js/scripts/extensions/ext-component-sweet-alerts.js') }}"></script>
    <script>
        $(document).ready(function () {
            $('#dtable').DataTable();
        });
    </script>
@endsection