@extends('voyager::master')

@section('content')

    <style>
        .newChild1 {
            width: 25%;
        }

        .showLoadingTable {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(0, 0, 0, .5);
            z-index: 999999;
            border-radius: 5px;
            display: none;
        }

        .newCustomSelectBox .select-selected {
            margin-bottom: 11px;
        }

    </style>

    <div class="row">

        <div class="padding-item col-lg-12 col-md-12 col-sm-12">
            <nav class="navigation">


                <div class="nav-button-row">


                    <a class="red-item" data-toggle="modal" data-target="#delete_modal1">
                        <img src="{{ voyager_asset('icon/red-trash.svg') }}">
                        <span>
                        </span>
                    </a>

                </div>

            </nav>
            <div class="more-row" style="direction: ltr">
                <div class="row" style="align-items:flex-end;">

                    <div class="col-md-6 col-12 col-xs-12" style="flex: 1">


                        <div style="background-color: unset; padding: 0 10px; " class=" input-row form-group gray">

                            <label class="control-label" for="fromDateR">From</label>


                            <div>
                                <input type="date" class="form-control datePickerInput fromDateIn" name="fromDateR"
                                       placeholder="From date" value="">

                                <img class="black-calender" src="{{voyager_asset('icon/black-calender.svg')}}">
                                {{--                                <img class="delet-value" src="{{voyager_asset('icon/delet-value.svg')}}">--}}
                            </div>


                        </div>
                    </div>

                    <div class="col-md-6 col-12 col-xs-12" style="flex: 1">


                        <div style="background-color: unset; padding: 0 10px; " class=" input-row form-group gray">

                            <label class="control-label" for="toDateR">To</label>


                            <div>
                                <input type="date" class="form-control datePickerInput toDateIn" name="toDateR"
                                       placeholder="To date" value="">
                                <img class="black-calender" src="{{voyager_asset('icon/black-calender.svg')}}">
                                {{--                                <img class="delet-value" src="{{voyager_asset('icon/delet-value.svg')}}">--}}
                            </div>


                        </div>
                    </div>
                    <div class="col-md-6 col-12 col-xs-12 ml-2" style="flex: .8">
                        <div class="dropdown custom-selects ml-2 newCustomSelectBox">
                            {{--        <select class="form-control select2" name="{{ $row->field }}">--}}
                            <select class="siteListSelect" name="">
                                <option value="-1">All</option>
                                <option value="-1">All</option>
                                @foreach(\App\Models\Site::all() as $site)
                                    <option value="{{$site->id}}">{{$site->name}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="flex-box add-new filterReportBtn"
                         style="height:54px;margin-left: 10px;flex: .2; margin-bottom: 10px;">
                        <i class="voyager-search"
                           style="font-size: 20px;height: 25px;margin-right: 12px;margin-left: 12px;"></i>

                        <div style="font-size: 16px">
                            Filter
                        </div>

                    </div>


                </div>
            </div>
        </div>


        {{--      <div class="padding-item col-lg-12 col-md-12 col-sm-12">
                  <div class="row">

                      <div class="row" style="align-items:flex-end;">

                          <div class="col-md-6 col-12 col-xs-12" style="flex: 1">


                              <div style="background-color: unset; padding: 0 10px; " class=" input-row form-group gray
                                                                                                               ">

                                  <label class="control-label" for="fromDate">From</label>



                                  <input type="text" class="form-control" name="fromDate" placeholder="From date" value="">


                              </div>
                          </div>

                          <div class="col-md-6 col-12 col-xs-12" style="flex: 1">


                              <div style="background-color: unset; padding: 0 10px; " class=" input-row form-group gray
                                                                                                               ">

                                  <label class="control-label" for="toDate">To</label>

                                  <input type="text" class="form-control" name="toDate" placeholder="To date" value="">


                              </div>
                          </div>

                          <div class="flex-box add-new" style="height:60px;margin-left: unset;flex: .2; margin-bottom: 10px;">
                              <i class="voyager-search" style="font-size: 20px;height: 25px;margin-right: 12px;margin-left: 12px;"></i>

                              <p>
                                  Filter
                              </p>

                          </div>


                      </div>

                  </div>
              </div>
      --}}
        <div class="padding-item col-lg-12 col-md-12 col-sm-12 mt-5">
            <div class="row">
                <h4 class="bold-font more-row">
                    Results
                </h4>

                <div class="row mt-4">
                    <div class="col-lg-6 col-md-6 col-sm-12">
                        <h4 class="bold-font">
                            <span>All Withdraw amount : </span>
                            <span class="allWithdrawAmount"></span>
                        </h4>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-12">
                        <h4 class="bold-font">
                            <span>All Deposit amount : </span>
                            <span class="allDepositAmount"></span>
                        </h4>
                    </div>
                </div>


                <div class="row">
                    <div class="col-lg-12 col-md-12 col-sm-12" style="position:relative;overflow-x: auto">

                        <div class="showLoadingTable"></div>


                        <table class="">
                            <thead>
                            <tr class="tr">
                                <th class="newChild1">
                                    site
                                </th>

                                <th class="child1 text-center">
                                    <div class="flex-box list-filter">

                                        <a href="" style="color: inherit !important;">
                                            amount
                                        </a>
                                    </div>
                                </th>

                                <th class="child1 text-center">
                                    <div class="flex-box list-filter">

                                        <a href="" style="color: inherit !important;">
                                            type
                                        </a>
                                    </div>
                                </th>
                                <th class="child1 text-center">
                                    <div class="flex-box list-filter">

                                        <a href="" style="color: inherit !important;">
                                            player
                                        </a>
                                    </div>
                                </th>
                                <th class="child1 text-center">
                                    <div class="flex-box list-filter">

                                        <a href="" style="color: inherit !important;">
                                            coin
                                        </a>
                                    </div>
                                </th>


                                <th class="child1 text-center">
                                    <div class="flex-box list-filter">

                                        <a href="" style="color: inherit !important;">
                                            date
                                        </a>
                                    </div>
                                </th>

                                {{-- <th class="child2 text-center">
                                 </th>--}}
                            </tr>
                            </thead>
                            <tbody class="resultTable">

                            </tbody>
                        </table>
                    </div>

                    <div class="flex-box d-none mt-4 noResultMainBox">
                        <h4 class="bold-font">
                            No Results
                        </h4>
                    </div>

                </div>


            </div>
        </div>

    </div>

    <script>

        $(document).ready(function () {
            const dateInput = $(".datePickerInput");
            const siteList = @json(\App\Models\Site::all());
            var siteSelected = -1;

            dateInput.on("click", function () {
                try {
                    this.showPicker();
                    // A date picker is shown.
                } catch (error) {
                    // Use external library when this fails.
                }
            })

            // for(let i= 0 ; i < siteList.length ; i++){
            //     const ele = siteList[i];
            //     $(".siteListSelect").append(`
            //         <option value="${ele.id}">${ele.name}</option>
            //     `)
            // }


            $(".filterReportBtn").click(function () {

                $(".noResultMainBox").fadeOut(400);
                $(".showLoadingTable").fadeIn(400);

                var data = {}

                if ($('.fromDateIn').val().length > 0) {
                    data.from = $('.fromDateIn').val()
                }

                if ($('.toDateIn').val().length > 0) {
                    data.to = $('.toDateIn').val()
                }

                if (parseInt($(".siteListSelect").val()) != -1) {
                    data.s_id = parseInt($(".siteListSelect").val());
                }


                $.ajax({
                    url: '/api/report',
                    method: 'post',
                    data: data,
                }).then((res) => {

                    $(".allDepositAmount").text(res.all_deposit);
                    $(".allWithdrawAmount").text(res.all_withdraw);

                    $(".resultTable").empty();

                    for (let i = 0; i < res.withdraw.length; i++) {
                        const ele = res.withdraw[i];
                        $(".resultTable").append(`
                            <tr class="tr" style="padding: 12px 20px">
                                <td class="newChild1">
                                    ${ele.site.name}

                                </td>
                                <td data-column="amount" class="child1 text-center">
                                    <div>${ele.amount}</div>
                                </td>
                                <td data-column="type" class="child1 text-center">
                                    <div>withdraw</div>
                                </td>
                                <td data-column="player" class="child1 text-center">
                                    <div>${ele?.player?.email}</div>
                                </td>

                                <td data-column="coin" class="child1 text-center">
                                    <div>${ele.coin.name}</div>
                                </td>

                                <td data-column="date" class="child1 text-center">
                                    <div>${ele.updated_at.split('T')[0]}</div>
                                </td>

                            </tr>
                        `)
                    }
                    for (let i = 0; i < res.deposit.length; i++) {
                        const ele = res.deposit[i];
                        $(".resultTable").append(`
                            <tr class="tr" style="padding: 12px 20px">
                                <td class="newChild1">
                                    ${ele.site.name}

                                </td>
                                <td data-column="amount" class="child1 text-center">
                                    <div>${ele.amount}</div>
                                </td>
                                <td data-column="type" class="child1 text-center">
                                    <div>deposit</div>
                                </td>
                                <td data-column="player" class="child1 text-center">
                                    <div>${ele?.player?.email}</div>
                                </td>

                                <td data-column="coin" class="child1 text-center">
                                    <div>${ele.coin.name}</div>
                                </td>

                                <td data-column="date" class="child1 text-center">
                                    <div>${ele.updated_at.split('T')[0]}</div>
                                </td>

                            </tr>
                        `)
                    }

                    if (res.withdraw.length == 0 && res.deposit.length == 0) {
                        $(".noResultMainBox").fadeIn(400);
                    }

                    $(".showLoadingTable").fadeOut(400);

                }).catch((err) => {

                })
            })

            $(".filterReportBtn").click();


        })


    </script>

@endsection