@extends('layouts.master')
@section('title', config('app.name') . ' : Riwayat Transaksi')
@section('css')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.14/css/bootstrap-select.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/3.0.5/daterangepicker.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.5.0/css/responsive.dataTables.css">
@endsection
@section('content')
<div class="main-content history">
    <div class="container">
      <div class="history__container">
        <div class="page-header">Riwayat</div>
        <div class="history__tab">
          <div class="row">
            <div class="col-lg-3">
              <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                <div class="title">Transaksi</div>
                <button class="nav-link active" id="v-pills-log-tab" data-toggle="pill" data-target="#v-pills-log" type="button" role="tab" aria-controls="v-pills-log" aria-selected="false">
                  <i class="fas fa-history"></i> 10 Transaksi Terakhir </button>
                <button class="nav-link" id="v-pills-deposit-tab" data-toggle="pill" data-target="#v-pills-deposit" type="button" role="tab" aria-controls="v-pills-deposit" aria-selected="true">
                  <i class="fas fa-wallet"></i> Tambah Dana </button>
                <button class="nav-link" id="v-pills-withdraw-tab" data-toggle="pill" data-target="#v-pills-withdraw" type="button" role="tab" aria-controls="v-pills-withdraw" aria-selected="false">
                  <i class="fas fa-coins"></i> Tarik Dana </button>
                <button class="nav-link" id="v-pills-cashback-tab" data-toggle="pill" data-target="#v-pills-cashback" type="button" role="tab" aria-controls="v-pills-cashback" aria-selected="false">
                  <i class="fas fa-exchange-alt"></i> Cashback </button>
                <button class="nav-link" id="v-pills-promo-tab" data-toggle="pill" data-target="#v-pills-promo" type="button" role="tab" aria-controls="v-pills-promo" aria-selected="true">
                  <i class="fas fa-gift"></i> Promosi </button>
                <button class="nav-link" id="v-pills-referral-tab" data-toggle="pill" data-target="#v-pills-referral" type="button" role="tab" aria-controls="v-pills-referral" aria-selected="false">
                  <i class="fas fa-link"></i> Referral </button>
                <button class="nav-link" id="v-pills-turnover-tab" data-toggle="pill" data-target="#v-pills-turnover" type="button" role="tab" aria-controls="v-pills-turnover" aria-selected="false">
                  <i class="fas fa-gamepad"></i> Turnover </button>
              </div>
            </div>
            <div class="col-lg-9">
              <div class="tab-content" id="v-pills-tabContent">
                <div class="tab-pane text-white fade show active" id="v-pills-log" role="tabpanel" aria-labelledby="v-pills-log-tab">
                  <div class="history-info">
                    <div class="info-header">10 Transaksi Terakhir</div>
                    <div class="info-content">
                      <div class="col-lg-12 p-0">
                        <div class="form-inline">
                          <div class="col-8 col-md-5 col-lg-5 p-0">
                            <input class="form-control mr-2 w-100" type="text" id="logDateChoose" name="dateRangePicker" readonly="">
                          </div>
                          <div class="col-4">
                            <button name="dateRangeSubmitLog" data-labeled="log" class="btn btn-success"> Kirim </button>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="info-content">
                      <div class="table-dataTable">
                        <table class="table table-hover table-bordered w-100" id="logHistoryTable">
                          <thead>
                            <tr>
                              <th scope="col" data-title="No.">No.</th>
                              <th scope="col" data-title="Tanggal">Tanggal</th>
                              <th scope="col" data-title="Nominal">Nominal</th>
                              <th scope="col" data-title="Keterangan">Keterangan</th>
                            </tr>
                          </thead>
                        </table>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="tab-pane text-white fade" id="v-pills-deposit" role="tabpanel" aria-labelledby="v-pills-deposit-tab">
                  <div class="history-info">
                    <div class="info-header">Riwayat Deposit</div>
                    <div class="info-content">
                      <div class="col-lg-12 p-0">
                        <div class="form-inline">
                          <div class="col-8 col-md-5 col-lg-5 p-0">
                            <input class="form-control mr-2 w-100" type="text" id="depositDateChoose" name="dateRangePicker" readonly="">
                          </div>
                          <div class="col-4">
                            <button name="dateRangeSubmitDewi" data-labeled="deposit" class="btn btn-success">Kirim</button>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="info-content">
                      <div class="table-dataTable">
                        <table class="table table-hover table-bordered w-100" id="depositHistoryTable">
                          <thead>
                            <tr>
                              <th scope="col" data-title="No.">No.</th>
                              <th scope="col" data-title="Tanggal">Tanggal</th>
                              <th scope="col" data-title="Nominal">Nominal</th>
                              <th scope="col" data-title="Status">Status</th>
                            </tr>
                          </thead>
                        </table>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="tab-pane text-white fade" id="v-pills-withdraw" role="tabpanel" aria-labelledby="v-pills-withdraw-tab">
                  <div class="history-info">
                    <div class="info-header">Riwayat Withdraw</div>
                    <div class="info-content">
                      <div class="col-lg-12 p-0">
                        <div class="form-inline">
                          <div class="col-8 col-md-5 col-lg-5 p-0">
                            <input class="form-control mr-2 w-100" type="text" id="withdrawDateChoose" name="dateRangePicker" readonly="">
                          </div>
                          <div class="col-4">
                            <button name="dateRangeSubmitDewi" data-labeled="withdraw" class="btn btn-success">Kirim</button>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="info-content">
                      <div class="table-dataTable">
                        <table class="table table-hover table-bordered" id="withdrawHistoryTable">
                          <thead>
                            <tr>
                              <th scope="col" class="text-left">No.</th>
                              <th scope="col" class="text-left">Tanggal</th>
                              <th scope="col" class="text-left">Nominal</th>
                              <th scope="col" class="text-center">Status</th>
                            </tr>
                          </thead>
                          <tbody id="withdrawHistoryTableBody"></tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="tab-pane text-white fade" id="v-pills-cashback" role="tabpanel" aria-labelledby="v-pills-cashback-tab">
                  <div class="history-info">
                    <div class="info-header">Riwayat Cashback</div>
                    <div class="info-content">
                      <div class="row">
                        <div class="col-md-4 col-12 mt-3" id="cashbackSLOT" style="display: none;">
                          <div class="card text-white bg-dark h-100">
                            <div class="card-header">
                              <div class="item-icon">
                                <img loading="lazy" src="{{ asset('themes/default/img/template-2-icons/slot.svg') }}" alt="" height="50">
                              </div>
                            </div>
                            <div class="card-body">
                              <div class="cashback-category">Kategory : <span class="font-weight-bold"> SLOT </span>
                              </div>
                              <div class="cashback-winlose">Status : <span class="font-weight-bold text-success" id="cashbackSLOTStatus"></span>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-4 col-12 mt-3" id="cashbackCASINO" style="display: none;">
                          <div class="card text-white bg-dark h-100">
                            <div class="card-header">
                              <div class="item-icon">
                                <img loading="lazy" src="{{ asset('themes/default/img/template-2-icons/casino.svg') }}" alt="" height="50">
                              </div>
                            </div>
                            <div class="card-body">
                              <div class="cashback-category">Kategory : <span class="font-weight-bold"> CASINO </span>
                              </div>
                              <div class="cashback-winlose">Status : <span class="font-weight-bold text-success" id="cashbackCASINOStatus"></span>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-4 col-12 mt-3" id="cashbackLIVEGAMES" style="display: none;">
                          <div class="card text-white bg-dark h-100">
                            <div class="card-header">
                              <div class="item-icon">
                                <img loading="lazy" src="{{ asset('themes/default/img/template-2-icons/livegames.svg') }}" alt="" height="50">
                              </div>
                            </div>
                            <div class="card-body">
                              <div class="cashback-category">Kategory : <span class="font-weight-bold"> LIVEGAMES </span>
                              </div>
                              <div class="cashback-winlose">Status : <span class="font-weight-bold text-success" id="cashbackLIVEGAMESStatus"></span>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-4 col-12 mt-3" id="cashbackSPORT" style="display: none;">
                          <div class="card text-white bg-dark h-100">
                            <div class="card-header">
                              <div class="item-icon">
                                <img loading="lazy" src="{{ asset('themes/default/img/template-2-icons/sport.svg') }}" alt="" height="50">
                              </div>
                            </div>
                            <div class="card-body">
                              <div class="cashback-category">Kategory : <span class="font-weight-bold"> SPORT </span>
                              </div>
                              <div class="cashback-winlose">Status : <span class="font-weight-bold text-success" id="cashbackSPORTStatus"></span>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-4 col-12 mt-3" id="cashbackARCADE" style="display: none;">
                          <div class="card text-white bg-dark h-100">
                            <div class="card-header">
                              <div class="item-icon">
                                <img loading="lazy" src="{{ asset('themes/default/img/template-2-icons/arcade.svg') }}" alt="" height="50">
                              </div>
                            </div>
                            <div class="card-body">
                              <div class="cashback-category">Kategory : <span class="font-weight-bold"> ARCADE </span>
                              </div>
                              <div class="cashback-winlose">Status : <span class="font-weight-bold text-success" id="cashbackARCADEStatus"></span>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="col-md-4 col-12 mt-3" id="cashbackLOTTERY" style="display: none;">
                          <div class="card text-white bg-dark h-100">
                            <div class="card-header">
                              <div class="item-icon">
                                <img loading="lazy" src="{{ asset('themes/default/img/template-2-icons/lottery.svg') }}" alt="" height="50">
                              </div>
                            </div>
                            <div class="card-body">
                              <div class="cashback-category">Kategory : <span class="font-weight-bold"> LOTTERY </span>
                              </div>
                              <div class="cashback-winlose">Status : <span class="font-weight-bold text-success" id="cashbackLOTTERYStatus"></span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="tab-pane text-white fade" id="v-pills-promo" role="tabpanel" aria-labelledby="v-pills-promo-tab">
                  <div class="history-info">
                    <div class="info-header">Promo Anda Sekarang</div>
                    <div class="info-content">
                      <div class="claim-bonus__body bonus-joined">
                        <div id="promoJoined">
                          <div class="row">
                            <div class="col-lg-12 mb-3 mb-lg-0">
                              <div class="bonus-joined__content">
                                <div class="row">
                                  <div class="col-lg-8">
                                    <div class="bonus-title" id="event_titleResult"></div>
                                    <div class="bonus-progress">
                                      <div class="progress">
                                        <div id="precentageBar" class="progress-bar progress-bar-striped active"></div>
                                      </div>
                                    </div>
                                  </div>
                                  <div class="col-lg-4">
                                    <img loading="lazy" src="" alt="game-result-icon" id="game_iconResult" style="width: 100px !important;">
                                    <h6 class="mb-0" id="game_idResult"></h6>
                                  </div>
                                </div>
                                <div class="row">
                                  <div class="col-lg-8">
                                    <h6 class="text-center" id="current_turn_overResult"></h6>
                                  </div>
                                </div>
                                <div class="row">
                                  <div class="col-lg-4 d-flex flex-column justify-content-center"> bonus.table.expDate <h6 id="expired_atResult" class="mb-0"></h6>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div id="promoErrorPage" style="display: none;"> Belum ada promo yang diambil. </div>
                      </div>
                    </div>
                  </div>
                  <div class="history-info">
                    <div class="info-header">Promotions List</div>
                    <div class="info-content">
                      <div class="table-dataTable">
                        <table class="table table-hover table-bordered w-100" id="promoHistory">
                          <thead>
                            <tr>
                              <th scope="col">No</th>
                              <th scope="col">Game Name</th>
                              <th scope="col">Promo Name</th>
                              <th scope="col">Join Date</th>
                              <th scope="col">Target TO</th>
                              <th scope="col">Current TO</th>
                              <th scope="col">Expired Date</th>
                              <th scope="col">Status</th>
                            </tr>
                          </thead>
                        </table>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="tab-pane text-white fade" id="v-pills-referral" role="tabpanel" aria-labelledby="v-pills-referral-tab">
                  <div class="history-info">
                    <div class="info-header">Riwayat Referral</div>
                    <div class="info-content">
                      <div class="col-lg-12 p-0">
                        <div class="form-inline">
                          <div class="col-8 col-md-5 col-lg-5 p-0">
                            <input class="form-control mr-2 w-100" type="text" id="referralDateChoose" name="dateRangePicker" readonly="">
                          </div>
                          <div class="col-4">
                            <button name="referralSubmit" data-labeled="referral" class="btn btn-success">Kirim</button>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="info-content">
                      <div class="table-dataTable">
                        <table class="table table-hover table-bordered w-100" id="referralHistory">
                          <thead>
                            <tr>
                              <th scope="col">No</th>
                              <th scope="col">Tanggal register</th>
                              <th scope="col">Pengguna</th>
                              <th scope="col">Jumlah Deposit</th>
                              <th scope="col">Jumlah Deposit</th>
                              <th scope="col">Taruhan</th>
                              <th scope="col">Win / Lose</th>
                            </tr>
                          </thead>
                        </table>
                      </div>
                    </div>
                  </div>
                  <div class="modal fade" id="referralDetail" tabindex="-1" role="dialog" aria-labelledby="referralDetailLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h5 class="modal-title" id="referralDetailLabel"></h5>
                          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                          </button>
                        </div>
                        <div class="modal-body">
                          <table class="table table-hover table-bordered w-100 table-responsive" id="referralHistoryDetail">
                            <thead>
                              <tr>
                                <th scope="col">No</th>
                                <th scope="col">Pengguna</th>
                                <th scope="col style=" width:="" 60px""="">Provider</th>
                                <th scope="col style=" width:="" 60px""="">Kategori Permainan</th>
                                <th scope="col">Taruhan</th>
                                <th scope="col">Persentase</th>
                                <th scope="col">Jumlah</th>
                                <th scope="col">Waktu Taruhan</th>
                              </tr>
                            </thead>
                          </table>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="tab-pane text-white fade" id="v-pills-turnover" role="tabpanel" aria-labelledby="v-pills-turnover-tab">
                  <div class="history-info">
                    <div class="info-header">Riwayat Permainan</div>
                    <div class="info-content">
                      <div class="col-lg-12 p-0">
                        <div class="form-inline">
                          <div class="col-4 p-0 mr-2">
                            <input class="form-control mr-2 w-100" type="text" id="turnoverDateChoose" name="dateRangePicker" readonly="">
                          </div>
                          <div class="col-4">
                            <button name="reportSubmit" data-labeled="report" class="btn btn-success">Kirim</button>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="info-content">
                      <div class="table-dataTable">
                        <table class="table table-hover table-bordered w-100" id="reportHistory">
                          <thead>
                            <tr>
                              <th scope="col">No</th>
                              <th scope="col">Periode Tanggal</th>
                              <th scope="col">Nama Permainan</th>
                              <th scope="col">Taruhan</th>
                              <th scope="col">Rebate</th>
                              <th scope="col">Win / Lose</th>
                            </tr>
                          </thead>
                        </table>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
@endsection
@push('js')
    <script src="{{ asset('js/vendor/bootstrap-select.min.js') }}"></script>
    <script src="{{ asset('js/vendor/select2.min.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
    <script src="{{ asset('js/vendor/daterangepicker.min.js') }}"></script>
    <script src="{{ asset('js/vendor/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('js/vendor/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('js/vendor/html5-qrcode.min.js') }}"></script>
    <script src="{{ asset('js/vendor/daterange.js') }}"></script>
@endpush
@push('scripts')
<script>
    $('input[name=dateRangePicker]').daterangepicker({
        minDate: moment().subtract(2, 'month'),
        maxDate: moment(),
        ranges: {
            'Today': [moment(), moment()],
            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
            'This Month': [moment().startOf('month'), moment().endOf('month')],
            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        }
    });
    $("button[name=dateRangeSubmitDewi]").on('click', function (e) {
        e.preventDefault()
        const label = $(this).data('labeled');
        const startDate = $(`#${label}DateChoose`).data('daterangepicker').startDate.format('YYYY-MM-DD')
        const endDate = $(`#${label}DateChoose`).data('daterangepicker').endDate.format('YYYY-MM-DD')
        const route = {
            deposit: "{{ route('getDepositHistory') }}",
            withdraw: "{{ route('getWithdrawHistory') }}"
        }
        $.ajax({
            type: "POST",
            url: route[label],
            data: {
                _token : "{{ csrf_token() }}",
                startDate : startDate + ' 00:00:00',
                endDate : endDate + ' 23:59:59',
            },
            success: function (response) {
                $(`#${label}HistoryTable`).DataTable().clear().destroy()
                tableDepoWdHistory($(`#${label}HistoryTable`), response.data);
            }
        });
    });

        function tableDepoWdHistory(tableId, dataSource) {
        tableId.DataTable({
            processing: true,
            searching: false,
            responsive: true,
            scrollX: false,
            paging: true,
            data: dataSource,
            createdRow: function(row, data, dataIndex) {
                // Cek status dari backend dan tambahkan kelas CSS yang sesuai
                if (data.Status === 'request') {
                    $(row).addClass('in-progress');
                } else if (data.Status === 'approve') {
                    $(row).addClass('approved');
                } else if (data.Status === 'reject') {
                    $(row).addClass('rejected');
                } else if (data.Status === 'pending') {
                    $(row).addClass('pending');
                } else if (data.Status === 'cancelled') {
                    $(row).addClass('cancelled');
                }
            },
            columns: [
                {
                    data: null,
                    sortable: false,
                    render: function (data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1;
                    },
                    createdCell: function (cell, cellData, rowData, rowIndex, colIndex) {
                        $(cell).attr('data-title', 'No.');
                    }
                },
                {
                    data: 'CreatedAt',
                    sortable: false,
                    createdCell: function(cell, cellData, rowData, rowIndex, colIndex) {
                        // Format tanggal
                        var formattedDate = new Date(cellData).toLocaleString('en-GB', {
                            year: 'numeric',
                            month: 'short',
                            day: 'numeric',
                            hour: 'numeric',
                            minute: 'numeric',
                            second: 'numeric'
                        });
                        $(cell).text(formattedDate);
                        $(cell).attr('data-title', 'Tanggal');
                    }
                },
                {
                    data: 'AmountProcessed',
                    className: "dt-body-right",
                    render: function (data, type, row, meta) {
                        return Number(data).toLocaleString('en');
                    },
                    createdCell: function (cell, cellData, rowData, rowIndex, colIndex) {
                        $(cell).attr('data-title', 'Nominal');
                    }
                },
                {
                    data: 'Status',
                    render: function (data, type, row, meta) {
                        // Menampilkan status dalam bentuk teks
                        return `
                            ${ (data === 'request') ? '<div class="table-status in-progress">Request</div>' : '' }
                            ${ (data === 'approve') ? '<div class="table-status approved">Approved</div>' : '' }
                            ${ (data === 'reject') ? '<div class="table-status rejected">Rejected</div>' : '' }
                            ${ (data === 'pending') ? '<div class="table-status pending">Pending</div>' : '' }
                            ${ (data === 'cancelled') ? '<div class="table-status cancelled">Cancelled</div>' : '' }
                        `;
                    },
                    createdCell: function(cell, cellData, rowData, rowIndex, colIndex) {
                        $(cell).attr('data-title', 'Status');
                    }
                },
            ],
        });
    }

    $("button[name=reportSubmit]").on('click', function (e) {
        e.preventDefault()
        const route = "{{ route('getReportHistory') }}"
        const payload = {
            _token: "{{ csrf_token() }}",
            startDate: $(`#turnoverDateChoose`).data('daterangepicker').startDate.format('YYYY-MM-DD'),
            endDate: $(`#turnoverDateChoose`).data('daterangepicker').endDate.format('YYYY-MM-DD'),
        }
        $.ajax({
            type: "POST",
            url: route,
            data: payload,
            success: function (response) {
                $(`#reportHistory`).DataTable().clear().destroy()
                reportTable(response.data);
            }
        });
    });

    function reportTable(dataSource) {
        $(`#reportHistory`).DataTable({
            processing: true,
            searching: false,
            responsive: true,
            scrollX: false,
            paging: true,
            data: dataSource,
            columns: [
                {
                    data: null,
                    render: function (data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1;
                    },
                    createdCell: function (cell, cellData, rowData, rowIndex, colIndex) {
                        $(cell).attr('data-title', 'No.');
                    }
                },
                {
                    data: null,
                    render: function (data, type, row, meta) {
                        let startDate = new Date(row.start_date).toLocaleString('en-GB', {
                            year: 'numeric',
                            month: 'short',
                            day: 'numeric'
                        });
                        let endDate = new Date(row.end_date).toLocaleString('en-GB', {
                            year: 'numeric',
                            month: 'short',
                            day: 'numeric'
                        });
                        return `${startDate} - ${endDate}`;
                    },
                },
                {
                    data: 'provider_code',
                    render: function (data, type, row, meta) {
                        let providerList = "{&quot;AFB&quot;:&quot;AFB&quot;,&quot;M88&quot;:&quot;OPUS Sports&quot;,&quot;SBO&quot;:&quot;SBO&quot;,&quot;SAB&quot;:&quot;SABA SPORTS&quot;,&quot;CMD&quot;:&quot;CMD368&quot;,&quot;SPR&quot;:&quot;SPRIBE&quot;,&quot;JLI&quot;:&quot;JILI&quot;,&quot;AFG&quot;:&quot;AFB GAMING&quot;,&quot;BES&quot;:&quot;BE SOFT&quot;,&quot;JDB&quot;:&quot;JDB&quot;,&quot;FAC&quot;:&quot;FA CHAI&quot;,&quot;NLC&quot;:&quot;NoLimit City&quot;,&quot;RED&quot;:&quot;RED TIGER&quot;,&quot;FSP&quot;:&quot;FASTSPIN&quot;,&quot;PGS&quot;:&quot;PG SOFT&quot;,&quot;PLS&quot;:&quot;PLAYSTAR&quot;,&quot;CQ9&quot;:&quot;CQ9&quot;,&quot;MIC&quot;:&quot;MICROGAMING&quot;,&quot;ADV&quot;:&quot;ADVANTPLAY&quot;,&quot;PRA&quot;:&quot;PRAGMATIC PLAY&quot;,&quot;HCG&quot;:&quot;GB GAME&quot;,&quot;SPD&quot;:&quot;SPADE GAMING&quot;,&quot;HBN&quot;:&quot;HABANERO&quot;,&quot;NEX&quot;:&quot;NEXTSPIN&quot;,&quot;JOK&quot;:&quot;JOKER GAMING&quot;,&quot;ORS&quot;:&quot;OG SLOT&quot;,&quot;PLA&quot;:&quot;PLAYTECH SLOT&quot;,&quot;TOG&quot;:&quot;4D&quot;,&quot;EVO&quot;:&quot;EVOLUTION&quot;,&quot;WEC&quot;:&quot;WE CASINO&quot;,&quot;LG8&quot;:&quot;LG88&quot;,&quot;WMC&quot;:&quot;WMCASINO&quot;,&quot;PCA&quot;:&quot;PLAYTECH CASINO&quot;,&quot;PLC&quot;:&quot;PRAGMATIC PLAY LC&quot;,&quot;ORI&quot;:&quot;OG CASINO&quot;,&quot;SAG&quot;:&quot;SA GAMING&quot;,&quot;AFC&quot;:&quot;AFB CASINO&quot;,&quot;GD8&quot;:&quot;GD88&quot;,&quot;SEG&quot;:&quot;SEXY GAMING&quot;,&quot;DRG&quot;:&quot;DG CASINO&quot;,&quot;PKQ&quot;:&quot;POKER Q&quot;,&quot;WE1&quot;:&quot;WE1 POKER&quot;,&quot;GA2&quot;:&quot;GA28&quot;,&quot;LVG&quot;:&quot;LIVE GAMES&quot;,&quot;SV3&quot;:&quot;SV388&quot;,&quot;COD&quot;:&quot;COD GAMING&quot;,&quot;MKI&quot;:&quot;MIKI&quot;}"
                        providerList = JSON.parse(providerList.replace(/&quot;/g,'"'))
                        return providerList[data.toUpperCase()];
                    },
                },
                {
                    data: 'bet_amount',
                    render: function (data, type, row, meta) {
                        let format = new Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(data)
                        return (data < 0) ? `<span class="text-danger dt-right">${format}</span>` : format;
                    },
                    className: "dt-body-right"
                },
                {
                    data: 'com',
                    render: function (data, type, row, meta) {
                        let format = new Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(data)
                        return (data < 0) ? `<span class="text-danger dt-right">${format}</span>` : format;
                    },
                    className: "dt-body-right"
                },
                {
                    data: 'bet_winlose',
                    render: function (data, type, row, meta) {
                        let format = new Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(data)
                        return (data < 0) ? `<span class="text-danger">${format}</span>` : format;
                    },
                    className: "dt-body-right"
                },
            ],
        });
    }

    $("button[name=referralSubmit]").on('click', function (e) {
        e.preventDefault()
        const route = "{{ route('getReferralHistory') }}"
        const payload = {
            _token: "{{ csrf_token() }}",
            startDate: $(`#referralDateChoose`).data('daterangepicker').startDate.format('YYYY-MM-DD'),
            endDate: $(`#referralDateChoose`).data('daterangepicker').endDate.format('YYYY-MM-DD'),
        }
        $.ajax({
            type: "POST",
            url: route,
            data: payload,
            success: function (response) {
                $(`#referralHistory`).DataTable().clear().destroy()
                referralTable(response.data);
            }
        });
    });

    $("#referralDetail").on("show.bs.modal", function (e) {
        e.relatedTarget
        let playId = $(e.relatedTarget).attr('data-playId')
        getReferralHistoryDetail(playId)
    });

    function getReferralHistoryDetail(playId) {
        $.ajax({
            type: "POST",
            url: "{{ route('getReferralHistoryDetail') }}",
            data: {
                _token: "{{ csrf_token() }}",
                playId: playId,
            },
            success: function (response) {
                $(`#referralHistoryDetail`).DataTable().clear().destroy()
                let data = response.data
                referralTableDetail(data);
            },
        });
    };

    function referralTableDetail(dataSource) {
        $(`#referralHistoryDetail`).DataTable({
            processing: true,
            searching: false,
            responsive: true,
            scrollX: false,
            paging: true,
            data: dataSource,
            columns: [
                {
                    data: null,
                    render: function (data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1;
                    },
                    createdCell: function (cell, cellData, rowData, rowIndex, colIndex) {
                        $(cell).attr('data-title', 'No.');
                    }
                },
                { data: 'username' },
                { data: 'provider_code' },
                { data: 'game_category' },
                {
                    data: 'bet_valid',
                    render: function (data, type, row, meta) {
                        let format = new Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(data)
                        return (data < 0) ? `<span class="text-danger">${format}</span>` : format;
                    },
                    className: "dt-body-right"
                },
                { data: 'percentage' },
                {
                    data: 'referral_amount',
                    render: function (data, type, row, meta) {
                        let format = new Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(data)
                        return (data < 0) ? `<span class="text-danger">${format}</span>` : format;
                    },
                    className: "dt-body-right"
                },
                {
                    data: 'created_at',
                    createdCell: function(cell, cellData, rowData, rowIndex, colIndex) {
                        var formattedDate = new Date(cellData).toLocaleString('en-GB', {
                            year: 'numeric',
                            month: 'short',
                            day: 'numeric',
                        });
                        $(cell).text(formattedDate);
                        $(cell).attr('data-title', 'Tanggal');
                    }
                },
            ],
        });
    }

    function referralTable(dataSource) {
        $(`#referralHistory`).DataTable({
            processing: true,
            searching: false,
            responsive: true,
            scrollX: false,
            paging: true,
            data: dataSource,
            columns: [
                {
                    data: null,
                    render: function (data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1;
                    },
                    createdCell: function (cell, cellData, rowData, rowIndex, colIndex) {
                        $(cell).attr('data-title', 'No.');
                    }
                },
                {
                    data: 'register_date',
                    createdCell: function(cell, cellData, rowData, rowIndex, colIndex) {
                        var formattedDate = new Date(cellData).toLocaleString('en-GB', {
                            year: 'numeric',
                            month: 'short',
                            day: 'numeric',
                        });
                        $(cell).text(formattedDate);
                        $(cell).attr('data-title', 'Tanggal');
                    }
                },
                {
                    data: 'username',
                    render: function (data, type, row, meta) {
                        let result = `<a href="javascript:;" data-toggle="modal" data-target="#referralDetail" data-playId="${row.play_id}">${data}</a>`
                        return result;
                    },
                },
                {
                    data: 'deposit_count',
                    render: function (data, type, row, meta) {
                        let format = new Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(data)
                        return format;
                    },
                },
                {
                    data: 'deposit_amount',
                    render: function (data, type, row, meta) {
                        let format = new Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(data)
                        return (data < 0) ? `<span class="text-danger">${format}</span>` : format;
                    },
                },
                {
                    data: 'bet_amount',
                    render: function (data, type, row, meta) {
                        let format = new Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(data)
                        return (data < 0) ? `<span class="text-danger">${format}</span>` : format;
                    },
                },
                {
                    data: 'bet_winlose',
                    render: function (data, type, row, meta) {
                        let format = new Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(data)
                        return (data < 0) ? `<span class="text-danger">${format}</span>` : format;
                    },
                },
            ],
        });
    }

    $('#v-pills-promo-tab').on('click', function (e) {
        getPromotionActive();
    })

    function getPromotionActive() {
        $.ajax({
            type: "POST",
            url: "{{ route('getCashbackActive') }}",
            data: { _token: "{{ csrf_token() }}" },
            beforeSend: function () {
                $('#promoJoined').hide()
                $('#promoErrorPage').hide()
            },
            success: function (response) {
                if (response.success) {
                    let running = response.data.running
                    let history = response.data.history
                    if ($.isEmptyObject(running)) {
                        $('#promoErrorPage').show()
                    } else {
                        $('#promoJoined').show()
                        $('#event_titleResult').text(running.event_title)
                        $('#precentageBar').css('width', running.percentage + '%')
                        $('#current_turn_overResult').text(running.current_turn_over + ' / ' + running.target_turn_over + ` (${running.percentage}%)`)
                        $('#game_iconResult').attr('src', running.game_icon)
                        $('#game_idResult').text(running.game_id)
                        let date = new Date(running.expired_at).toLocaleString('en-GB', { year: 'numeric', month: 'short', day: 'numeric'})
                        $('#expired_atResult').text(date)
                    }
                    promoTable(history)
                }
            }
        });
    }

    function promoTable(dataSource) {
        $(`#promoHistory`).DataTable().clear().destroy()
        $(`#promoHistory`).DataTable({
            processing: true,
            searching: false,
            responsive: true,
            scrollX: false,
            paging: true,
            data: dataSource,
            columns: [
                {
                    data: null,
                    render: function (data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1;
                    },
                    createdCell: function (cell, cellData, rowData, rowIndex, colIndex) {
                        $(cell).attr('data-title', 'No.');
                    }
                },
                {
                    data: 'game_id',
                    render: function (data, type, row, meta) {
                        let providerList = "{&quot;AFB&quot;:&quot;AFB&quot;,&quot;M88&quot;:&quot;OPUS Sports&quot;,&quot;SBO&quot;:&quot;SBO&quot;,&quot;SAB&quot;:&quot;SABA SPORTS&quot;,&quot;CMD&quot;:&quot;CMD368&quot;,&quot;SPR&quot;:&quot;SPRIBE&quot;,&quot;JLI&quot;:&quot;JILI&quot;,&quot;AFG&quot;:&quot;AFB GAMING&quot;,&quot;BES&quot;:&quot;BE SOFT&quot;,&quot;JDB&quot;:&quot;JDB&quot;,&quot;FAC&quot;:&quot;FA CHAI&quot;,&quot;NLC&quot;:&quot;NoLimit City&quot;,&quot;RED&quot;:&quot;RED TIGER&quot;,&quot;FSP&quot;:&quot;FASTSPIN&quot;,&quot;PGS&quot;:&quot;PG SOFT&quot;,&quot;PLS&quot;:&quot;PLAYSTAR&quot;,&quot;CQ9&quot;:&quot;CQ9&quot;,&quot;MIC&quot;:&quot;MICROGAMING&quot;,&quot;ADV&quot;:&quot;ADVANTPLAY&quot;,&quot;PRA&quot;:&quot;PRAGMATIC PLAY&quot;,&quot;HCG&quot;:&quot;GB GAME&quot;,&quot;SPD&quot;:&quot;SPADE GAMING&quot;,&quot;HBN&quot;:&quot;HABANERO&quot;,&quot;NEX&quot;:&quot;NEXTSPIN&quot;,&quot;JOK&quot;:&quot;JOKER GAMING&quot;,&quot;ORS&quot;:&quot;OG SLOT&quot;,&quot;PLA&quot;:&quot;PLAYTECH SLOT&quot;,&quot;TOG&quot;:&quot;4D&quot;,&quot;EVO&quot;:&quot;EVOLUTION&quot;,&quot;WEC&quot;:&quot;WE CASINO&quot;,&quot;LG8&quot;:&quot;LG88&quot;,&quot;WMC&quot;:&quot;WMCASINO&quot;,&quot;PCA&quot;:&quot;PLAYTECH CASINO&quot;,&quot;PLC&quot;:&quot;PRAGMATIC PLAY LC&quot;,&quot;ORI&quot;:&quot;OG CASINO&quot;,&quot;SAG&quot;:&quot;SA GAMING&quot;,&quot;AFC&quot;:&quot;AFB CASINO&quot;,&quot;GD8&quot;:&quot;GD88&quot;,&quot;SEG&quot;:&quot;SEXY GAMING&quot;,&quot;DRG&quot;:&quot;DG CASINO&quot;,&quot;PKQ&quot;:&quot;POKER Q&quot;,&quot;WE1&quot;:&quot;WE1 POKER&quot;,&quot;GA2&quot;:&quot;GA28&quot;,&quot;LVG&quot;:&quot;LIVE GAMES&quot;,&quot;SV3&quot;:&quot;SV388&quot;,&quot;COD&quot;:&quot;COD GAMING&quot;,&quot;MKI&quot;:&quot;MIKI&quot;}"
                        providerList = JSON.parse(providerList.replace(/&quot;/g,'"'))
                        return providerList[data];
                    },
                },
                { data: 'event_title' },
                {
                    data: 'created_at',
                    createdCell: function(cell, cellData, rowData, rowIndex, colIndex) {
                        var formattedDate = new Date(cellData).toLocaleString('en-GB', {
                            year: 'numeric',
                            month: 'short',
                            day: 'numeric',
                        });
                        $(cell).text(formattedDate);
                        $(cell).attr('data-title', 'Tanggal');
                    }
                },
                {
                    data: 'target_turn_over',
                    render: function (data, type, row, meta) {
                        let format = new Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(data)
                        return format;
                    },
                    className: "dt-body-right"
                },
                {
                    data: 'current_turn_over',
                    render: function (data, type, row, meta) {
                        let format = new Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(data)
                        return format;
                    },
                    className: "dt-body-right"
                },
                {
                    data: 'expired_at',
                    createdCell: function(cell, cellData, rowData, rowIndex, colIndex) {
                        var formattedDate = new Date(cellData).toLocaleString('en-GB', {
                            year: 'numeric',
                            month: 'short',
                            day: 'numeric',
                        });
                        $(cell).text(formattedDate);
                        $(cell).attr('data-title', 'Tanggal');
                    }
                },
                { data: 'status' }
            ],
        });
    }

    $('#v-pills-cashback-tab').on('click', function (e) {
        getCashbackActive();
    })

    function getCashbackActive() {
        $.ajax({
            type: "POST",
            url: "{{ route('getCashbackActive') }}",
            data: { _token: "{{ csrf_token() }}" },
            success: function (response) {
                if (response.success) {
                    let data = response.data
                    $(`#cashback${data.category}`).show()
                    $(`#cashback${data.category}Status`).text(data.status)
                }
            }
        });
    }

    $("button[name=dateRangeSubmitLog]").on("click", function () {
        $.ajax({
            type: "POST",
            url: "{{ route('getTransactionLog') }}",
            data: {
                _token: "{{ csrf_token() }}",
                startDate: $(`#logDateChoose`).data('daterangepicker').startDate.format('YYYY-MM-DD'),
                endDate: $(`#logDateChoose`).data('daterangepicker').endDate.format('YYYY-MM-DD'),
            },
            success: function (response) {
                $(`#logHistoryTable`).DataTable().clear().destroy()
                logHistoryTable(response.data);
            }
        });
    })

    function logHistoryTable(dataSource) {
        $(`#logHistoryTable`).DataTable({
            processing: true,
            searching: false,
            responsive: true,
            scrollX: false,
            paging: false,
            data: dataSource,
            columns: [
                {
                    data: null,
                    render: function (data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1;
                    },
                    createdCell: function (cell, cellData, rowData, rowIndex, colIndex) {
                        $(cell).attr('data-title', 'No.');
                    }
                },
                {
                    data: 'transactionDate',
                    createdCell: function(cell, cellData, rowData, rowIndex, colIndex) {
                        var formattedDate = new Date(cellData).toLocaleString('en-GB');
                        $(cell).text(formattedDate);
                        $(cell).attr('data-title', 'Tanggal');
                    }
                },
                {
                    data: 'amount',
                    render: function (data, type, row, meta) {
                        let format = new Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(data)
                        let sign = "Rp"
                        return (row.transactionType  == "WITHDRAW") ? `<span class="text-danger">${sign} -${format}</span>` : sign + " " + format;
                    },
                    className: "dt-body-right"
                },
                {
                    data: 'transactionType',
                    render: function (data, type, row, meta) {
                        let format = new Intl.NumberFormat('en-US', { maximumFractionDigits: 2 }).format(data)
                        return data;
                    },
                },
            ],
        });
    }
</script>
@endpush