@extends('user_dashboard.layouts.app')
@section('content')
    @push('css')
        <style>
            .loader {
                position: absolute;
                z-index: 1;
                top: 40%;
                left: 46%;
                z-index: 9999;
                display: none;
            }

            .loader {
                background-color: #33333359;
                position: absolute;
                z-index: +100 !important;
                width: 100%;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
            }

            .loader img {
                width: 50px;
                top: 25%;
                transform: translateY(-50%);
                position: absolute;
                left: 48%;
            }

            .loader-hi8 {
                height: 1100px;
            }
        </style>
    @endpush

    <div class="loader loader-hi8" id="loading_div">
        <img src="{{ asset('loading.gif') }}" alt="" class="img-responsive">
    </div>
    <div class="rbt-dashboard-area mt--30 mb--50">
        <div class="container-fluid">
            <div class="row g-5">
                <div class="col-lg-3">
                    @include('user_dashboard.layouts.sidebar')
                </div>
                <div class="col-lg-9">
                    <div class="rbt-dashboard-content bg-color-white rbt-shadow-box mb--10">
                        <div class="content">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="section-title">
                                        <h4 class="rbt-title-style-3">
                                            @isset($page_title) {{$page_title}} @endisset
                                            (Your Wallet Balance ₹ {{Auth::guard('web')->user()->userDetail->remaining_amount}})
                                        </h4>
                                    </div>
                                </div>
                            </div>
                            <div class="row gy-5">
                                <div class="col-lg-12">
                                    <div class="rbt-dashboard-table table-responsive">
                                        <table class="rbt-table table table-borderless">
                                            <thead>
                                                <tr>
                                                    <th class="text-center">#</th>
                                                    <th class="text-center">Name</th>
                                                    <th class="text-center">Email</th>
                                                    <th class="text-center">Phone</th>
                                                    <th class="text-center">State</th>
                                                    <th class="text-center">Plan</th>
                                                    <th class="text-center">Amount</th>
                                                    <th class="text-center">Status</th>
                                                    <th class="text-center">Date</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($wallet_registration_requests as $key=>$wallet_registration_request)
                                                    <tr>
                                                        <td class="text-center">
                                                            {{ $key + 1 + ($wallet_registration_requests->currentPage() - 1) * $wallet_registration_requests->perPage() }}
                                                        </td>
                                                        <td class="text-center">{{$wallet_registration_request->name}}</td>
                                                        <td class="text-center">{{$wallet_registration_request->email}}</td>
                                                        <td class="text-center">{{$wallet_registration_request->phone}}</td>
                                                        <td class="text-center">{{$wallet_registration_request->state}}</td>
                                                        <td class="text-center">
                                                            {{$wallet_registration_request->planDetail?->title}}
                                                        </td>
                                                        <td class="text-center">
                                                            ₹ {{$wallet_registration_request->planDetail?->discounted_price}}
                                                        </td>
                                                        <td class="text-center">
                                                            @if($wallet_registration_request->status == 'pending')
                                                                <div class="rbt-modern-select bg-transparent">
                                                                    <select id="status_{{$wallet_registration_request->id}}" class="text-center" onchange="registerUser('{{$wallet_registration_request->id}}')">
                                                                        <option value="pending">Pending</option>
                                                                        <option value="success">Success</option>
                                                                        <option value="cancel">Cancel</option>
                                                                    </select>
                                                                </div>
                                                            @else
                                                                {{ucfirst($wallet_registration_request->status)}}
                                                            @endif
                                                        </td>
                                                        <td class="text-center">{{$wallet_registration_request->created_at->format('d-M-Y')}}</td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                        <hr>
                                        <div class="row">
                                            <div class="col-md-12">
                                                {!! $wallet_registration_requests->links() !!}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>

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

    @push('js')

        <script>

            function registerUser(id){
                $('#loading_div').show();
                var status = $('#status_'+id).val();
                $.ajax({
                    type: 'POST',
                    url: "{{ route('user.wallet.registration.request.store') }}",
                    data: {
                        _token:"{{csrf_token()}}",
                        id:id,
                        status:status
                    },
                    success: function(data) {
                        const Toast = Swal.mixin({
                            toast: true,
                            position: 'top-end',
                            showConfirmButton: false,
                            timer: 3000,
                            timerProgressBar: true,
                        });
                        Toast.fire({
                            icon: "success",
                            title: data.message,
                        });
                        location.reload();
                    },error: function(request, status, error) {
                        const Toast = Swal.mixin({
                            toast: true,
                            position: 'top-end',
                            showConfirmButton: false,
                            timer: 3000,
                            timerProgressBar: true,
                        });
                        Toast.fire({
                            icon: "error",
                            title: request.responseJSON.errors.status,
                        });
                    }
                });
            }

        </script>

    @endpush
@endsection