@extends('layouts.dashboard')
@section('content')

<div class="content-wrapper">
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1 class="m-0">Subscription Payments</h1>
                </div>
                <div class="col-sm-6">
                    <a href="{{ url('/subscription/payments/create') }}" class="btn btn-primary float-right">
                        <i class="fa fa-plus"></i> New Payment
                    </a>
                </div>
            </div>
        </div>
    </div>

    <section class="content">
        <div class="container-fluid">

            {{-- Summary badges --}}
            <div class="row mb-3" id="summary-badges">
                <div class="col-md-3 col-sm-6">
                    <div class="info-box">
                        <span class="info-box-icon bg-warning"><i class="fa fa-hourglass-half"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">Pending</span>
                            <span class="info-box-number" id="count-pending">—</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="info-box">
                        <span class="info-box-icon bg-success"><i class="fa fa-check"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">Paid / Approved</span>
                            <span class="info-box-number" id="count-paid">—</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="info-box">
                        <span class="info-box-icon bg-info"><i class="fa fa-gift"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">Trial</span>
                            <span class="info-box-number" id="count-trial">—</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 col-sm-6">
                    <div class="info-box">
                        <span class="info-box-icon bg-danger"><i class="fa fa-times"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-text">Failed</span>
                            <span class="info-box-number" id="count-failed">—</span>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Filter tabs --}}
            <div class="row mb-2">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header p-2">
                            <ul class="nav nav-pills" id="status-filter-tabs">
                                <li class="nav-item">
                                    <a class="nav-link active" href="#" data-status="">All</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#" data-status="pending">Pending</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#" data-status="paid">Paid</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#" data-status="manually_approved">Manually Approved</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#" data-status="trial">Trial</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#" data-status="failed">Failed</a>
                                </li>
                            </ul>
                        </div>
                        <div class="card-body table-responsive p-1">
                            <table id="subscription-payments-table" class="table table-hover text-nowrap">
                                <thead>
                                    <tr>
                                        <th>Payment ID</th>
                                        <th>Customer</th>
                                        <th>Order / Subscription</th>
                                        <th>Amount</th>
                                        <th>Gateway</th>
                                        <th>Transaction ID</th>
                                        <th>Status</th>
                                        <th>Date</th>
                                        <th>Action</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

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

{{-- Delete Confirmation Modal --}}
<div class="modal fade" id="deletePaymentModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title">Confirm Delete</h5>
                <button type="button" class="close text-white" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to permanently delete this payment record?</p>
                <p class="text-muted small">Only pending or failed payments can be deleted. This action cannot be undone.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger btn-sm" id="btn-confirm-delete-payment">
                    <i class="fa fa-trash"></i> Delete
                </button>
            </div>
        </div>
    </div>
</div>

@endsection