@extends('admin.layouts.app')
<style>
        .pagination{
            float: right;
            margin-top: 10px;
        }

        .loader {
                position: relative;
                width: 85px;
                height: 50px;
                background-repeat: no-repeat;
                background-image: linear-gradient(#202020 50px, transparent 0),
                                  linear-gradient(#202020 50px, transparent 0),
                                  linear-gradient(#202020 50px, transparent 0),
                                  linear-gradient(#202020 50px, transparent 0),
                                  linear-gradient(#202020 50px, transparent 0),
                                  linear-gradient(#202020 50px, transparent 0);
                background-position: 0px center, 15px center, 30px center, 45px center, 60px center, 75px center, 90px center;
                animation: rikSpikeRoll 0.65s linear infinite alternate;
              }
            @keyframes rikSpikeRoll {
              0% { background-size: 10px 3px;}
              16% { background-size: 10px 50px, 10px 3px, 10px 3px, 10px 3px, 10px 3px, 10px 3px}
              33% { background-size: 10px 30px, 10px 50px, 10px 3px, 10px 3px, 10px 3px, 10px 3px}
              50% { background-size: 10px 10px, 10px 30px, 10px 50px, 10px 3px, 10px 3px, 10px 3px}
              66% { background-size: 10px 3px, 10px 10px, 10px 30px, 10px 50px, 10px 3px, 10px 3px}
              83% { background-size: 10px 3px, 10px 3px,  10px 10px, 10px 30px, 10px 50px, 10px 3px}
              100% { background-size: 10px 3px, 10px 3px, 10px 3px,  10px 10px, 10px 30px, 10px 50px}
            }
    </style>
@section('content')
<div class="container-fluid">

    <!-- <div class="header">
      
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="dashboard-default.html">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="#">Operations</a></li>
                <li class="breadcrumb-item active" aria-current="page">Payment Details</li>
            </ol>
        </nav>
    </div> -->
    <div class="header text-white">
        <div class="py-2 px-4 border-bottom d-none d-lg-block">
            <div class="d-flex align-items-center py-1">
                <div class="position-relative">
                    <div class="input-group mb-3">
                        <select class="form-select" id="search_by">
                            <option>Select...</option>
                            <!-- <option value="uid">UID</option> -->
                            <option value="payment_id">Payment-ID</option>
                            <option value="email">Email</option>
                            <option value="contact">Contact</option>

                        </select>
                        <input type="text" class="form-control" id="search_key" placeholder="Search for...">
                        <button class="btn btn-secondary" type="button" onclick="searchByKey()">Go!</button>
                    </div>
                </div>
                <div class="flex-grow-1 ps-3">

                </div>
                <div>
                    <div id="reportrange" class="overflow-hidden form-control">
                        <i class="far fa-calendar"></i>&nbsp;
                        <span></span> <i class="fas fa-caret-down"></i>
                    </div>
                </div>

                <div style="margin-left: 10px;">
                    <button type="button" class="btn btn-success btn-md" onclick="$('#payment_status_modal').modal('show');$('#payment_status_modal').modal({backdrop: 'static',   keyboard: true})">Check Payment Status</button>
                </div>

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

    <div class="row" style="margin-top:-40px !important;">
        <div class="col-12">
            <div class="card">
                {{-- <div class="card-header">
                                <h5 class="card-title">Responsive DataTables</h5>
                                <h6 class="card-subtitle text-muted">Highly flexible tool that many advanced features to any HTML table. See official
                                    documentation <a href="https://datatables.net/extensions/responsive/" target="_blank"
                                        rel="noopener noreferrer nofollow">here</a>.</h6>
                            </div> --}}
                <div class="card-body scroll-h">
                   

                    <div class="table-responsive table-card" style="max-height:85vh; height: auto;  overflow: auto;">
                        <table class="table table-sm table-centered align-middle table-nowrap mb-0" >
                            <thead class="text-muted table-light" style="position: sticky;top: 0;	">
                                <tr>
                                    <th>#</th>
                                    <th>Payment ID</th>
                                    {{-- <th>Order ID</th> --}}
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Contact</th>
                                    <th>Amount</th>
                                    <th>Purpose</th>
                                    <th>Payment Date</th>
                                    {{-- <th>Payment Method</th> --}}
                                    <th>Status</th>
                                    {{-- <th>Captured</th> --}}
                                </tr>
                            </thead>
                            <tbody id="paymentDetailsTbody">

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


</div>

<div class="modal fade" id="payment_status_modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">CHECK PAYMENT STATUS</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">

                <div style="width:96.5%; height: 50%; background: #00000049; position: absolute; padding: 100px; z-index: 55555; border-radius: 5px; display: none;" id="modal_loader">
                        <center>
                            <div class="loader"></div> 
                            <span class="mt-1"> Please Wait..</span>
                        </center>
                </div>

                <div class="row">
                    <div class="col-6">
                        <div class="form-group">
                            <label for="email">Email address (<span style="color: red;">*</span>)</label>
                            <input type="email" class="form-control required" id="email" aria-describedby="error_email" placeholder="Enter email">
                            <span id="error_email" class="form-text text-danger"></span>
                          </div>
                    </div>
                    <div class="col-6">
                        <div class="form-group">
                            <label for="payment_id">Payment ID (<span style="color: red;">*</span>)</label>
                            <input type="text" class="form-control required" id="payment_id" aria-describedby="error_payment_id" placeholder="Enter Payment ID">
                            <span id="error_payment_id" class="form-text text-danger"></span>
                          </div>
                    </div>
                </div>

                <div class="card text-center">
                    <div class="card-header">
                      <!-- Featured -->
                    </div>
                    <div class="card-body">
                      <!-- <h5 class="card-title">Special title treatment</h5> -->
                      <p class="card-text" id="message"></p>
                    </div>

                    <button type="button" class="btn btn-primary d-none" id="send_mail_btn" onclick="sendRegMailToUser()"> Send Via Mail</button>
                    <button type="button" class="btn btn-primary d-none" id="generate_uid_btn" onclick="generateUidAndUpdate();">Generate & update</button>

                    <!-- <div class="card-footer text-muted">
                        <div class="input-group mb-3">
                            <input type="email" class="form-control d-none" id="email_to" placeholder="Enter email">
                            <div class="input-group-append">
                            </div>
                          </div>
                    </div> -->

                  </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" onclick="fetchPaymentDetails();" id="fetch_pay_details_btn">Fetch Details</button>
                <button type="button" class="btn btn-warning d-none" onclick="undoDetails();" id="undo_pay_details_btn" style="font-size:20px;"><i class="fa fa-undo" aria-hidden="true"></i>
                </button>

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

@endsection