@extends('layouts.admin')

@section('title', 'Membership Renewal Payment Recovery')

@section('content')
<div class="row g-2 mb-2 align-items-center">
    <div class="col-md-7 col-12">
        <form class="d-flex gap-2 align-items-center" id="recovery-search-form" autocomplete="off">
            <select class="form-select form-select-sm w-auto profile-filter d-none" id="filter_status" name="status" style="min-width:140px;">
                <option value="">All Status</option>
                <option value="pending">Pending</option>
                <option value="email_sent">Email Sent</option>
                <option value="payment_completed">Completed</option>
                <option value="expired">Expired</option>
            </select>
            <select class="form-select form-select-sm w-auto profile-filter d-none" id="filter_email_status" name="email_status" style="min-width:140px;">
                <option value="">All Email Status</option>
                <option value="sent">Sent</option>
                <option value="delivered">Delivered</option>
                <option value="opened">Opened</option>
                <option value="failed">Failed</option>
                <option value="bounced">Bounced</option>
            </select>
            <select class="form-select form-select-sm w-auto profile-filter" id="filter_payment_received" name="payment_received" style="min-width:160px;">
                <option value="" selected>Payment Pending (Default)</option>
                <option value="1">Payment Received</option>
                <option value="all">Show All Records</option>
            </select>
            <input type="text" class="form-control form-control-sm w-auto profile-filter" id="search_key" name="search_key" placeholder="Search..." style="min-width:180px;">
            <button type="submit" class="btn btn-phoenix-primary btn-sm px-3" id="search_go">Go</button>
            <button type="button" class="btn btn-phoenix-secondary btn-sm px-3" id="reset_filters" title="Reset Filters"><span class="uil uil-redo"></span></button>
        </form>
    </div>
    <div class="col-md-5 col-12 text-md-end mt-2 mt-md-0">
        <div class="d-flex justify-content-md-end align-items-center gap-2">
            <div class="input-group" style="width: auto;">
                <span class="input-group-text bg-body-tertiary border-end-0 fs-10 px-2">
                    <span class="uil uil-calendar-alt"></span>
                </span>
                <input type="text" class="form-control form-control-sm" id="date_range_filter" placeholder="Filter by Payment Date" style="width: 220px; font-size: 0.875rem;" readonly>
            </div>
            <div class="btn-group">
                <button type="button" class="btn btn-phoenix-info btn-sm px-3 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                    <span class="uil uil-download-alt me-1"></span>Export
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item export-btn" href="#" data-format="csv"><span class="uil uil-file me-2"></span>Export CSV</a></li>
                    <li><a class="dropdown-item export-btn" href="#" data-format="xlsx"><span class="uil uil-file-alt me-2"></span>Export XLSX</a></li>
                    <li><a class="dropdown-item export-btn" href="#" data-format="pdf"><span class="uil uil-file-download me-2"></span>Export PDF</a></li>
                </ul>
            </div>
            <div class="btn-group d-none">
                <button type="button" class="btn btn-phoenix-primary btn-sm px-3 dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                    <span class="uil uil-message me-1"></span>Send All
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#" id="sendAllEmailsBtn"><span class="uil uil-envelope me-2 text-primary"></span>Send All Emails</a></li>
                    <li><a class="dropdown-item" href="#" id="sendAllSMSBtn"><span class="uil uil-comment-message me-2 text-success"></span>Send All SMS</a></li>
                    <li><a class="dropdown-item" href="#" id="sendAllWhatsAppBtn"><span class="uil uil-whatsapp me-2 text-info"></span>Send All WhatsApp</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="#" id="sendTestEmailBtn"><span class="uil uil-flask me-2 text-warning"></span>Send Test Email</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="row g-3">
    <div class="col-12">
        <div class="card border h-100">
            <div class="card-body p-0">
                <div class="table-responsive scrollbar">
                    <div class="phoenix-table-sticky-wrapper" style="position:relative; max-height:calc(100vh - 156px); overflow:auto;">
                        <table class="table table-sm fs-9 mb-0">
                            <thead style="position:sticky; top:0; z-index:2; background:#fff;">
                                <tr>
                                    <th class="sort border-top border-translucent ps-3" style="background:#fff;">Recovery Code</th>
                                    <th class="sort border-top border-translucent" style="background:#fff;">User Details</th>
                                    <th class="sort border-top border-translucent" style="background:#fff;">Contact</th>
                                    <th class="sort border-top border-translucent" style="background:#fff;">UID</th>
                                    <th class="sort border-top border-translucent" style="background:#fff;">Payment</th>
                                    <th class="sort border-top border-translucent" style="background:#fff;">Payment Received</th>
                                    <th class="sort border-top border-translucent" style="background:#fff;">Status</th>
                                    <th class="sort border-top border-translucent" style="background:#fff;">Email Status</th>
                                    <th class="sort border-top border-translucent" style="background:#fff;">Email Tracking</th>
                                    <th class="sort border-top border-translucent" style="background:#fff;">SMS Status</th>
                                    <th class="sort border-top border-translucent" style="background:#fff;">WhatsApp Status</th>
                                    <th class="sort border-top border-translucent pe-3" style="background:#fff;">Actions</th>
                                </tr>
                            </thead>
                            <tbody id="allRecoveriesTbody" class="recoveries_list">
                                <!-- Recovery rows will be rendered by JS -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

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

@push('scripts')
<script src="/js/pages/admin/membership-renewal-recovery.js?v=1769092544"></script>
@endpush