@extends($activeTemplate . 'layouts.master')
@section('content')
    <div class="transaction-section padding-top padding-bottom">
        <div class="container">
            <div class="show-filter mb-3 text-end">
                <button type="button" class="btn btn-outline--primary showFilterBtn btn-sm"><i class="las la-filter"></i>
                    @lang('Filter')</button>
            </div>
            <div class="card responsive-filter-card mb-4">
                <div class="card-body p-4"
                    style="background: -webkit-linear-gradient(-90deg, #124656 0%, #063a4a 45%, #063b46 100%); color: #ffffff">
                    <form action="">
                        <div class="d-flex flex-wrap gap-4">
                            <div class="flex-grow-1 contact-form-group">
                                <label>@lang('Username/Email/UserID')</label>
                                <input type="text" name="search" value="{{ request()->search }}" class="form-control"
                                    style="background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, 0.1); color: #ffffff">
                            </div>

                            <div class="flex-grow-1  contact-form-group">
                                <label>@lang('Level')</label>
                                <select class="select-bar" name="distance" style="">
                                    <option value="">@lang('Any')</option>
                                    @foreach (range(1, 7) as $distance)
                                        <option value="{{ $distance }}" @selected(request()->distance == $distance)>
                                            {{ __(keyToTitle($distance)) }}</option>
                                    @endforeach
                                </select>
                            </div>

                            <div class="flex-grow-1 align-self-end">
                                <div class="contact-form-group">
                                    <button class="btn btn--warning w-100 h-45" style="line-height: 2.3"><i
                                            class="fas fa-filter"></i> @lang('Filter')</button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="d-flex justify-content-end mb-2">
                <div class="btn-group float-end" role="group" aria-label="Basic example">
                    <a href="{{ route('user.export.my.reward.pdf', ['search' => request()->search, 'distance' => request()->distance]) }}"
                        class="btn btn--primary btn-sm d-flex align-items-center"><i class="las la-file-pdf"></i>
                        @lang('Generate PDF')</a>
                    <a href="{{ route('user.export.my.reward', ['search' => request()->search, 'distance' => request()->distance]) }}"
                        class="btn btn--info btn-sm d-flex align-items-center"><i class="las la-file-excel"></i>
                        @lang('Generate Excel')</a>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="card primary-bg item-rounded">
                        <table class="deposite-table">
                            <thead class="custom--table">
                                <tr>
                                    <th>{{ trans('User ID') }}</th>
                                    <th>{{ trans('Name') }}</th>
                                    <th>{{ trans('Email') }}</th>
                                    <th>{{ trans('Mobile') }}</th>
                                    <th>{{ trans('Level') }}</th>
                                    <th>{{ trans('Reward') }}</th>
                                    <th>{{ trans('Transaction') }}</th>
                                    <th>{{ trans('Charge') }}</th>
                                    <th>{{ trans('Achieved at') }}</th>
                                    <th>{{ trans('Status') }}</th>
                                    <th>{{ trans('Actions') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($rewards as $key => $item)
                                    <tr>
                                        <td>{{ $item->user->system_id }}</td>
                                        <td><span>{{ $item->user->fullname }} </span> <br>
                                            <span>(<span>@</span>{{ $item->user->username }})</span>
                                        </td>
                                        <td>{{ $item->user->email }}</td>
                                        <td><span>+</span>{{ $item->user->mobile }}</td>
                                        <td>{{ $item->rank }}</td>
                                        <td>{{ $general->cur_sym }}{{ showAmount($item->prize) }}</td>
                                        <td>{{ $item->transaction ? $general->cur_sym . ' ' . showAmount($item->transaction->amount) : 'N/A' }}</td>
                                        <td>{{ $item->transaction ? $general->cur_sym . ' ' . showAmount($item->transaction->charge) : 'N/A' }}</td>
                                        <td>{{ $item->status_changed_at ? $item->status_changed_at->format('d-M-Y') : 'N/A' }}
                                        <td>
                                            @php
                                                 echo $item->winStatus;
                                            @endphp
                                        </td>
                                        <td>
                                            <button class="btn btn-sm h-auto btn--primary detailBtn"
                                                data-reward="{{ json_encode($item) }}">
                                                <i class="fa fa-desktop"></i>
                                            </button>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="100%">{{ __($emptyMessage) }}</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                        @if ($rewards->hasPages())
                            <div class="py-3">
                                {{ paginateLinks($rewards) }}
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div id="detailModal" class="modal fade custom--modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">@lang('Details')</h5>
                    <span type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <i class="las la-times"></i>
                    </span>
                </div>
                <div class="modal-body">
                    <ul class="list-group userData">
                        <li class="list-group-item d-flex justify-content-between align-items-center primary-bg text-white">
                            <span>@lang('Charge')</span>
                            <span><span id="chargeValue"></span> {{ $general->cur_text }}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center primary-bg text-white">
                            <span>@lang('Payable Amount')</span>
                            <span><span id="payableValue"></span> {{ $general->cur_text }}</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center primary-bg text-white">
                            <span>@lang('Payment Mode')</span>
                            <span id="paymentModeValue"></span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center primary-bg text-white">
                            <span>@lang('Transaction No')</span>
                            <span id="transactionNoValue"></span>
                        </li>
                    </ul>
                    <div class="feedback"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn--danger btn-sm"
                        data-bs-dismiss="modal">@lang('Close')</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('style')
    <link href="{{ asset('assets/global/css/jquery.treeView.css') }}" rel="stylesheet" type="text/css">
@endpush
@push('script')
    <script src="{{ asset('assets/global/js/jquery.treeView.js') }}"></script>
    <script>
        (function($) {
            "use strict"
            $('.treeview').treeView();
        })(jQuery);
    </script>
@endpush



@push('script')
    <script>
        (function($) {
            "use strict";
            $('.detailBtn').on('click', function() {
                var modal = $('#detailModal');

                var reward = $(this).data('reward');

                modal.find('#chargeValue').text(reward.transaction.charge);
                modal.find('#payableValue').text(reward.prize);
                modal.find('#paymentModeValue').text(reward.transaction.payment_mode);
                modal.find('#transactionNoValue').text(reward.trx);

                modal.modal('show');
            });
        })(jQuery);
    </script>
@endpush
