@extends('layouts.admin')

@section('title', 'Event Payment Details')

@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

@endpush

@section('content')


    <!-- Filter/Search Bar -->
    <div class="row mb-3">
      
        <div class="col-lg-8 d-flex align-items-center gap-2 flex-wrap">

            <a href="{{ route('admin.events.index') }}" class="btn btn-phoenix-secondary btn-sm">
                <i class="uil uil-arrow-left me-1"></i>All Events
            </a>
            <input type="hidden" id="current_event_id" value="{{ request()->get('ev_id') }}">
            <input type="hidden" id="current_event_name" value="{{ $event_name }}">
            <select class="form-select w-auto" id="search_by" style="min-width: 140px;">
                <option value="">Select...</option>
                <option value="reg_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 w-auto" id="search_key" placeholder="Search for..." style="min-width: 200px;">
            <button class="btn btn-phoenix-primary" type="button" onclick="searchByKey()">Go!</button>
        </div>
        <div class="col-lg-4 d-flex justify-content-end align-items-center gap-2 flex-wrap">
            <button class="btn btn-phoenix-primary">
                <i class="uil uil-download-alt me-1"></i>Export
            </button>
            <input type="text" class="form-control w-auto" id="payment-daterange" style="max-width: 220px;" readonly>
        </div>
    </div>

    <!-- Payments Table -->
    <div class="card">
        <div class="card-body p-0">
            <div class="table-responsive scrollbar">
                    <table class="table table-sm fs-9 mb-0">
                        <thead>
                            <tr>
                                 <th class="sort border-top border-translucent ps-3" data-sort="application_id">#</th>
                            <th class="sort border-top border-translucent ps-3" data-sort="application_id">UID</th>
                            <th class="sort border-top border-translucent ps-3" data-sort="application_id">Name</th>
                            <th class="sort border-top border-translucent ps-3" data-sort="application_id">Category</th>
                            <th class="sort border-top border-translucent ps-3" data-sort="application_id">Sub Category</th>
                            <th class="sort border-top border-translucent ps-3" data-sort="application_id">Weight/Height</th>
                            <th class="sort border-top border-translucent ps-3" data-sort="application_id">Payment ID</th>
                            <th class="sort border-top border-translucent ps-3" data-sort="application_id">Email</th>
                            <th class="sort border-top border-translucent ps-3" data-sort="application_id">Contact</th>
                            <th class="sort border-top border-translucent ps-3" data-sort="application_id">Amount</th>
                            <th class="sort border-top border-translucent ps-3" data-sort="application_id">Qualified From</th>
                            <th class="sort border-top border-translucent ps-3" data-sort="application_id">Payment Date</th>
                            <th class="sort border-top border-translucent ps-3" data-sort="application_id">Status</th>
                            </tr>
                        </thead>
                        <tbody id="paymentDetailsTbody" class="">
                          <!-- Application rows will be rendered by JS -->
                        </tbody>
                    </table>
                </div>
          
        </div>
      
    </div>

    <!-- Payment Status Modal -->
    <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"></div>
                        <div class="card-body">
                            <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>
                </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>
</div>
@endsection



@section('footer_paginator')
    <div id="laravel_paginator" class=""></div>
@endsection

@push('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
@endpush

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="/js/pages/admin/event.js?v=1769015075"></script>
@endpush