@extends('layouts.appLayout')

@section('title', 'My Purchases')
@section('nav_title', 'My Purchases')

@section('content')
<main class="container my-4">
    
    {{-- Breadcrumbs --}}
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb bg-transparent px-0">
            <li class="breadcrumb-item"><a href="{{ route('myProfilePage') }}">Profile</a></li>
            <li class="breadcrumb-item active" aria-current="page">My Purchases</li>
        </ol>
    </nav>

    <!-- Header -->
    <header class="d-flex justify-content-between align-items-center mb-4 p-3 bg-light rounded">
        <div>
            <h1 class="text-dark fw-bold mb-0"><i class="fas fa-shopping-bag me-2 text-primary"></i>My Purchases</h1>
            <p class="text-muted mb-0">View your purchase history and receipts</p>
        </div>
        <a href="{{ route('myProfilePage') }}" class="btn btn3">
            <i class="fas fa-arrow-left me-2"></i>Back to Profile
        </a>
    </header>

    <!-- Main Content -->
    <section class="row g-4">
        
        <!-- Subscription Receipts Section -->
        <article class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-primary text-white rounded-top">
                    <h2 class="h5 mb-0"><i class="fas fa-calendar-check me-2"></i>Subscription Receipts</h2>
                </div>
                <div class="card-body">
                    @if (!empty($lastSubscriptionReceipt))
                        <div class="alert alert-info mb-4">
                            <i class="fas fa-info-circle me-2"></i> This is your most recent subscription receipt.
                        </div>
                        
                        <div class="card border-primary mb-3">
                            <div class="card-header bg-light">
                                <h5 class="mb-0 text-primary">
                                    <i class="fas fa-file-invoice me-2"></i>
                                    Receipt #{{ $lastSubscriptionReceipt['receipt_id'] }}
                                </h5>
                            </div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6">
                                        <ul class="list-group list-group-flush">
                                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                                <span><strong><i class="fas fa-id-card me-2 text-muted"></i>Receipt ID:</strong></span>
                                                <span class="badge bg-primary rounded-pill">{{ $lastSubscriptionReceipt['receipt_id'] }}</span>
                                            </li>
                                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                                <span><strong><i class="fas fa-cubes me-2 text-muted"></i>Product:</strong></span>
                                                <span>{{ $lastSubscriptionReceipt['subscriptionProduct']['name'] ?? 'N/A' }}</span>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="col-md-6">
                                        <ul class="list-group list-group-flush">
                                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                                <span><strong><i class="fas fa-dollar-sign me-2 text-muted"></i>Price Paid:</strong></span>
                                                <span class="text-success fw-bold">${{ number_format($lastSubscriptionReceipt['price_paid'], 2) }}</span>
                                            </li>
                                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                                <span><strong><i class="fas fa-credit-card me-2 text-muted"></i>Payment Method:</strong></span>
                                                <span class="text-capitalize">{{ $lastSubscriptionReceipt['receipt']['payment_method'] }}</span>
                                            </li>
                                            <li class="list-group-item d-flex justify-content-between align-items-center">
                                                <span><strong><i class="fas fa-clock me-2 text-muted"></i>Date:</strong></span>
                                                <span>{{ \Carbon\Carbon::parse($lastSubscriptionReceipt['receipt']['created_at'])->format('M d, Y \a\t H:i') }}</span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="card-footer bg-light text-end">
                                <button class="btn btn-sm btn-primary">
                                    <i class="fas fa-download me-1"></i> Download PDF
                                </button>
                            </div>
                        </div>
                    @else
                        <div class="text-center py-4">
                            <i class="fas fa-receipt fa-3x text-muted mb-3"></i>
                            <h4 class="text-muted">No subscription receipts found</h4>
                            <p class="text-muted">You don't have any active subscriptions yet.</p>
                            {{-- <a href="{{ route('subscription.plans') }}" class="btn btn-primary">
                                <i class="fas fa-plus me-1"></i> Explore Subscription Plans
                            </a> --}}
                        </div>
                    @endif
                </div>
            </div>
        </article>

        <!-- Course Receipts Section -->
        <article class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-primary text-white rounded-top">
                    <h2 class="h5 mb-0"><i class="fas fa-graduation-cap me-2"></i>Course Receipts</h2>
                </div>
                <div class="card-body">
                    @if ($receipts->isNotEmpty())
                        <div class="table-responsive">
                            <table class="table table-hover align-middle">
                                <thead class="table-light">
                                    <tr>
                                        <th scope="col" class="w-25">Receipt ID</th>
                                        <th scope="col" class="w-25">Date</th>
                                        <th scope="col" class="w-25">Payment Method</th>
                                        <th scope="col" class="w-25 text-end">Amount</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($receipts as $receipt)
                                        <tr class="cursor-pointer" onclick="window.location='{{ route('detailsReceipt', $receipt['receipt_id']) }}'">
                                            <td>
                                                <span class="badge bg-primary bg-opacity-10 text-primary">#{{ $receipt['receipt_id'] }}</span>
                                            </td>
                                            <td>
                                                {{ \Carbon\Carbon::parse($receipt['created_at'])->format('M d, Y') }}
                                            </td>
                                            <td>
                                                <span class="text-capitalize">{{ $receipt['payment_method'] }}</span>
                                            </td>
                                            <td class="text-end fw-bold text-success">
                                                ${{ number_format($receipt['total_price'], 2) }}
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                                <tfoot class="table-light">
                                    <tr>
                                        <td colspan="3" class="text-end fw-bold">Total Spent:</td>
                                        <td class="text-end fw-bold text-success">
                                            ${{ number_format($receipts->sum('total_price'), 2) }}
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                        
                        <div class="d-flex justify-content-between align-items-center mt-3">
                            <div class="text-muted">
                                Showing {{ $receipts->count() }} receipts
                            </div>
                            <nav aria-label="Receipts pagination">
                                <ul class="pagination pagination-sm mb-0">
                                    <li class="page-item disabled">
                                        <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a>
                                    </li>
                                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                                    <li class="page-item"><a class="page-link" href="#">2</a></li>
                                    <li class="page-item"><a class="page-link" href="#">3</a></li>
                                    <li class="page-item">
                                        <a class="page-link" href="#">Next</a>
                                    </li>
                                </ul>
                            </nav>
                        </div>
                    @else
                        <div class="text-center py-4">
                            <i class="fas fa-book fa-3x text-muted mb-3"></i>
                            <h4 class="text-muted">No course receipts found</h4>
                            <p class="text-muted">You haven't purchased any courses yet.</p>
                            {{-- <a href="{{ route('courses.index') }}" class="btn btn-primary">
                                <i class="fas fa-book-open me-1"></i> Browse Courses
                            </a> --}}
                        </div>
                    @endif
                </div>
            </div>
        </article>

    </section>
</main>
@endsection

@push('styles')
    <link rel="stylesheet" href="{{ asset('css/myPurchases.css') }}">
@endpush