@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="flex-box add-new filterReportBtn" style="height:54px;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>

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

                    </div>


                </div>
            </div>
        </div>
--}}


        <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 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>Input Bonus amount : </span>
                            <span class="allBonusInAmount"></span>
                        </h4>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-12">
                        <h4 class="bold-font">
                            <span>Output Bonus amount : </span>
                            <span class="allBonusOutAmount"></span>
                        </h4>
                    </div>
                </div>
                <div class="row mt-4">
                    <div class="col-lg-6 col-md-6 col-sm-12">
                        <h4 class="bold-font">
                            <span>Input amount : </span>
                            <span class="inputAmount"></span>
                        </h4>
                    </div>
                    <div class="col-lg-6 col-md-6 col-sm-12">
                        <h4 class="bold-font">
                            <span>Output amount : </span>
                            <span class="outputAmount"></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">
                                    title
                                </th>

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

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

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

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

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

                                        <a href="" style="color: inherit !important;">
                                            output amount
                                        </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");
            dateInput.on("click",function (){
                try {
                    this.showPicker();
                    // A date picker is shown.
                } catch (error) {
                    // Use external library when this fails.
                }
            })



            $(".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/game-bet',
                    method:'post',
                    data:data,
                }).then((res)=>{

                    $(".allBonusInAmount").text(res.all_input_bonus_amount);
                    $(".allBonusOutAmount").text(res.all_output_bonus_amount);
                    $(".inputAmount").text(res.all_input_amount);
                    $(".outputAmount").text(res.all_output_amount);

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

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

                                </td>
                                <td data-column="input bonus amount" class="child1 text-center">
                                    <div>${ele.input_bonus_amount}</div>
                                </td>
                                <td data-column="output bonus amount" class="child1 text-center">
                                    <div>${ele.output_bonus_amount}</div>
                                </td>
                                <td data-column="input amount" class="child1 text-center">
                                    <div>${ele.input_amount}</div>
                                </td>

                                <td data-column="output amount" class="child1 text-center">
                                    <div>${ele.output_amount}</div>
                                </td>


                            </tr>
                        `)
                    }

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

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

                }).catch((err) => {
                    $(".showLoadingTable").fadeOut(400);
                })
            })

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




        })



    </script>

@endsection