@extends('frontend.member.user_layouts')

@section('member-content')
    <style>
        .transactions-container {
            margin: 30px 20px;
            background: #fff;
            padding: 30px;
            border-radius: 5px;
            box-shadow: 0 1px 1px rgba(46, 46, 46, 0.1);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .transactions-title {
            color: #60666d;
            font-weight: 700;
            margin-bottom: 18px;
            text-align: center;
        }

        .transactions-table {
            border-radius: 10px;
            overflow: hidden;
        }

        .transactions-table th {
            background-color: #fff;
            color: #60666d;
            text-transform: uppercase;
            font-size: 13px;
            font-weight: 600;
            border: none;
        }

        .transactions-table td {
            vertical-align: middle;
            font-size: 14px;
            border-top: 1px solid #eee;
        }

        .status-pill {
            display: inline-block;
            padding: 4px 12px;
            border-radius: 20px;
            color: #fff;
            font-size: 12px;
            font-weight: 600;
            text-transform: capitalize;
        }

        .status-pill.paid {
            background-color: #28a745;
        }

        .status-pill.unpaid {
            background-color: #ffc107;
            color: #000;
        }

        .action-button {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            background-color: #0d6efd;
            color: #fff;
            border: none;
            border-radius: 6px;
            padding: 5px 10px;
            font-size: 13px;
            transition: background-color 0.3s;
        }

        .action-button:hover {
            background-color: #0a58ca;
        }


        @media (max-width: 767.98px) {
            .transactions-container {
                padding: 20px;
            }

            .transactions-table {
                font-size: 12px;
            }
        }

        .card {
            border: 1px solid #ddd;
        }

        .card h6 {
            color: #0d6efd;
        }

        @media (max-width: 767px) {

            html,
            body {
                background-color: #fff;
            }

            .transactions-container {
                background-color: #fff;
                width: 100% !important;
                margin: 0 !important;
                border-radius: 0 !important;
                box-shadow: none !important;
                padding: 15px !important;
            }

            .card {
                border: 0px;
                box-shadow: none !important;
            }
        }
    </style>

    <div class="transactions-container">

        <h3 class="transactions-title">Your Invoices</h3>
        @if (session('success'))
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {{ session('success') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                {{ session('error') }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        @endif

        <div class="d-none d-md-block">
            {{-- Desktop: keep table --}}
            <table class="table transactions-table">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Invoice No</th>
                        <th>Amount</th>
                        <th>Billing Period</th>
                        <th>Invoice Date</th>
                        <th>Due Date</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($invoices as $invoice)
                        <tr>
                            <td>{{ $loop->iteration }}</td>
                            <td><strong>{{ $invoice->invoice_no }}</strong></td>
                            <td>{{ number_format($invoice->amount, 2) }}</td>
                            <td>{{ ucfirst($invoice->bill_period) }}</td>
                            <td>{{ $invoice->invoice_date?->format('d M, Y') }}</td>
                            <td>{{ $invoice->last_due_date?->format('d M, Y') }}</td>
                            <td>
                                <span class="status-pill {{ $invoice->payment_status === 'paid' ? 'paid' : 'unpaid' }}">
                                    {{ ucfirst($invoice->payment_status) }}
                                </span>
                            </td>
                            <td>
                                <a href="{{ route('member.invoice_show', $invoice->invoice_no) }}"
                                    class="btn btn-info btn-sm" target="_blank">
                                    <i class="fa fa-eye"></i> Invoice
                                </a>
                                @if ($invoice->payment_status === 'unpaid' && $invoice->is_payment_submit==false)
                                    <a href="{{ route('member.pay', $invoice->id) }}" class="btn btn-success btn-sm">
                                        <i class="fa fa-credit-card"></i> Pay
                                    </a>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="text-center text-muted">No invoices found.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        {{-- Mobile stacked cards --}}
        <div class="d-block d-md-none">
            @forelse ($invoices as $invoice)
                <div class="card mb-3 shadow border-0 rounded-4" style="border-bottom:1px #ccc solid;">
                    <div class="card-body p-3">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <h6 class="fw-bold mb-0 text-primary">#{{ $invoice->invoice_no }}</h6>
                            <span
                                class="badge rounded-pill bg-{{ $invoice->payment_status === 'paid' ? 'success' : 'warning' }}">
                                {{ ucfirst($invoice->payment_status) }}
                            </span>
                        </div>
                        <div class="mb-2 text-secondary small">
                            Billing: <strong>{{ ucfirst($invoice->bill_period) }}</strong>
                        </div>
                        <div class="mb-2 fs-5 text-dark fw-semibold">
                            {{ number_format($invoice->amount, 2) }}
                        </div>
                        <div class="d-flex justify-content-between small text-muted">
                            <div>
                                <i class="fa fa-calendar"></i>
                                {{ $invoice->invoice_date?->format('d M, Y') }}
                            </div>
                            <div>
                                <i class="fa fa-clock"></i>
                                Due {{ $invoice->last_due_date?->format('d M, Y') }}
                            </div>
                        </div>
                        <div class="mt-3 d-flex justify-content-between gap-2">
                            <a href="{{ route('invoice.show', $invoice->id) }}" target="_blank"
                                class="btn btn-outline-primary btn-sm w-50 rounded-3">
                                <i class="fa fa-eye me-1"></i> View
                            </a>
                            @if ($invoice->payment_status === 'unpaid')
                                <a href="{{ route('member.pay', $invoice->id) }}"
                                    class="btn btn-success btn-sm w-50 rounded-3">
                                    <i class="fa fa-credit-card me-1"></i> Pay
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
            @empty
                <div class="text-center text-muted">No invoices found.</div>
            @endforelse
        </div>
    </div>
@endsection