@extends('user.layouts.user')
@section('content')
<div class="card border-0 shadow-sm">
    <div class="card-header bg-primary text-white py-3">
        <h4 class="mb-0">
            <i class="fas fa-money-bill-wave mr-2"></i>My Payment History
        </h4>
    </div>
    <div class="card-body p-4">
        <div class="row mb-4">
            <div class="col-md-4">
                <div class="card bg-light border-0">
                    <div class="card-body text-center">
                        <h6 class="text-muted">Total Spending</h6>
                        <h3 class="text-primary">${{ number_format($paymentSummary['grand_total'], 2) }}</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card bg-light border-0">
                    <div class="card-body text-center">
                        <h6 class="text-muted">Booking Payments</h6>
                        <h3 class="text-info">{{ $paymentSummary['booking_count'] }}</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="card bg-light border-0">
                    <div class="card-body text-center">
                        <h6 class="text-muted">Subscription Payments</h6>
                        <h3 class="text-success">{{ $paymentSummary['subscription_count'] }}</h3>
                    </div>
                </div>
            </div>
        </div>

        <ul class="nav nav-tabs nav-tabs-custom" id="paymentTabs" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="booking-tab" data-toggle="tab" href="#bookingLogs" role="tab" aria-controls="bookingLogs" aria-selected="true">
                    <i class="fas fa-receipt mr-1"></i> Booking Payments
                    <span class="badge badge-light ml-2">{{ $bookingLogs->count() }}</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="subscription-tab" data-toggle="tab" href="#subscriptionLogs" role="tab" aria-controls="subscriptionLogs" aria-selected="false">
                    <i class="fas fa-credit-card mr-1"></i> Subscription Payments
                    <span class="badge badge-light ml-2">{{ $subscriptionLogs->count() }}</span>
                </a>
            </li>
        </ul>

        <div class="tab-content mt-4" id="paymentTabsContent">
            <div class="tab-pane fade show active" id="bookingLogs" role="tabpanel" aria-labelledby="booking-tab">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-light py-3">
                        <h5 class="card-title mb-0 text-primary">
                            <i class="fas fa-receipt mr-2"></i>Booking Payment History
                        </h5>
                    </div>
                    <div class="card-body p-0">
                        @if($bookingLogs->count() > 0)
                            <div class="table-responsive">
                                <table id="bookingTable" class="table table-hover mb-0" style="width:100%">
                                    <thead class="thead-light">
                                        <tr>
                                            <th>Studio</th>
                                            <th>Amount</th>
                                            <th>Status</th>
                                            <th>Date</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($bookingLogs as $payment)
                                        <tr>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="studio-avatar bg-primary text-white rounded-circle mr-3 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px; font-size: 14px;">
                                                        {{ substr($payment->studio->name ?? 'NA', 0, 2) }}
                                                    </div>
                                                    <div>
                                                        <div class="font-weight-bold">{{ $payment->studio->name ?? 'N/A' }}</div>
                                                        <small class="text-muted">{{ $payment->payment_intent_id ? substr($payment->payment_intent_id, 0, 8) . '...' : 'Free via subscription' }}</small>
                                                    </div>
                                                </div>
                                            </td>
                                            <td class="font-weight-bold text-success">${{ number_format($payment->amount, 2) }}</td>
                                            <td>
                                                <span class="badge badge-{{ $payment->status === 'succeeded' ? 'success' : ($payment->status === 'pending' ? 'warning' : ($payment->status === 'free-via-subscription' ? 'info' : 'danger')) }}">
                                                    {{ ucfirst(str_replace('-', ' ', $payment->status)) }}
                                                </span>
                                            </td>
                                            <td>
                                                <div class="text-nowrap">{{ $payment->created_at->format('M d, Y') }}</div>
                                                <small class="text-muted">{{ $payment->created_at->format('h:i A') }}</small>
                                            </td>
                                            <td>
                                                <a href="{{ route('user.payment-logs.booking.show', $payment->id) }}" class="btn btn-sm btn-outline-primary">
                                                    <i class="fas fa-eye"></i> Details
                                                </a>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @else
                            <div class="text-center py-5">
                                <i class="fas fa-receipt fa-4x text-muted mb-3"></i>
                                <h5 class="text-muted">No Booking Payments Found</h5>
                                <p class="text-muted">You haven't made any booking payments yet.</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <div class="tab-pane fade" id="subscriptionLogs" role="tabpanel" aria-labelledby="subscription-tab">
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-light py-3">
                        <h5 class="card-title mb-0 text-primary">
                            <i class="fas fa-credit-card mr-2"></i>Subscription Payment History
                        </h5>
                    </div>
                    <div class="card-body p-0">
                        @if($subscriptionLogs->count() > 0)
                            <div class="table-responsive">
                                <table id="subscriptionTable" class="table table-hover mb-0" style="width:100%">
                                    <thead class="thead-light">
                                        <tr>
                                            <th>Package</th>
                                            <th>Transaction ID</th>
                                            <th>Amount</th>
                                            <th>Status</th>
                                            <th>Date</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach($subscriptionLogs as $payment)
                                        <tr>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="studio-avatar bg-info text-white rounded-circle mr-3 d-flex align-items-center justify-content-center" style="width: 40px; height: 40px; font-size: 14px;">
                                                        {{ substr($payment->package->name ?? 'NA', 0, 2) }}
                                                    </div>
                                                    <div>
                                                        <div class="font-weight-bold">{{ $payment->package->name ?? 'N/A' }}</div>
                                                        <small class="text-muted">{{ $payment->studio->name ?? 'No studio' }}</small>
                                                    </div>
                                                </div>
                                            </td>
                                            <td>
                                                <span class="text-monospace small">{{ $payment->stripe_transaction_id ? substr($payment->stripe_transaction_id, 0, 8) . '...' : 'N/A' }}</span>
                                            </td>
                                            <td class="font-weight-bold text-success">${{ number_format($payment->amount, 2) }}</td>
                                            <td>
                                                <span class="badge badge-{{ $payment->payment_status === 'succeeded' ? 'success' : ($payment->payment_status === 'pending' ? 'warning' : 'danger') }}">
                                                    {{ ucfirst($payment->payment_status) }}
                                                </span>
                                            </td>
                                            <td>
                                                @if($payment->payment_date)
                                                <div class="text-nowrap">{{ \Carbon\Carbon::parse($payment->payment_date)->format('M d, Y') }}</div>
                                                <small class="text-muted">{{ \Carbon\Carbon::parse($payment->payment_date)->format('h:i A') }}</small>
                                                @else
                                                <span class="text-muted">-</span>
                                                @endif
                                            </td>
                                            <td>
                                                <a href="{{ route('user.payment-logs.subscription.show', $payment->id) }}" class="btn btn-sm btn-outline-primary">
                                                    <i class="fas fa-eye"></i> Details
                                                </a>
                                            </td>
                                        </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        @else
                            <div class="text-center py-5">
                                <i class="fas fa-credit-card fa-4x text-muted mb-3"></i>
                                <h5 class="text-muted">No Subscription Payments Found</h5>
                                <p class="text-muted">You haven't made any subscription payments yet.</p>
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener("DOMContentLoaded", function() {
    $('#paymentTabs a').on('click', function (e) {
        e.preventDefault();
        $(this).tab('show');

        setTimeout(function() {
            if ($('#bookingLogs').hasClass('active')) {
                if (!$.fn.DataTable.isDataTable('#bookingTable')) {
                    initBookingTable();
                }
            }
            if ($('#subscriptionLogs').hasClass('active')) {
                if (!$.fn.DataTable.isDataTable('#subscriptionTable')) {
                    initSubscriptionTable();
                }
            }
        }, 150);
    });

    function initBookingTable() {
        $('#bookingTable').DataTable({
            responsive: true,
            ordering: true,
            order: [[3, 'desc']],
            pageLength: 10,
            lengthMenu: [[10, 20, 30], [10, 20, 30]],
            searching: false,
            lengthChange: false,
            language: {
                lengthMenu: "Show _MENU_ entries",
                info: "Showing _START_ to _END_ of _TOTAL_ entries",
                infoEmpty: "Showing 0 to 0 of 0 entries",
                infoFiltered: "(filtered from _MAX_ total entries)",
                paginate: { first: "First", last: "Last", next: "Next", previous: "Previous" },
                search: "Search:",
                searchPlaceholder: "Search payments..."
            },
            columnDefs: [
                { responsivePriority: 1, targets: 0 },
                { responsivePriority: 2, targets: 4 },
                { responsivePriority: 3, targets: 1 },
                { orderable: false, targets: 4 }
            ]
        });
    }

    function initSubscriptionTable() {
        $('#subscriptionTable').DataTable({
            responsive: true,
            ordering: true,
            order: [[4, 'desc']],
            pageLength: 10,
            lengthMenu: [[10, 20, 30], [10, 20, 30]],
            searching: false,
            lengthChange: false,
            language: {
                lengthMenu: "Show _MENU_ entries",
                info: "Showing _START_ to _END_ of _TOTAL_ entries",
                infoEmpty: "Showing 0 to 0 of 0 entries",
                infoFiltered: "(filtered from _MAX_ total entries)",
                paginate: { first: "First", last: "Last", next: "Next", previous: "Previous" },
                search: "Search:",
                searchPlaceholder: "Search payments..."
            },
            columnDefs: [
                { responsivePriority: 1, targets: 0 },
                { responsivePriority: 2, targets: 5 },
                { responsivePriority: 3, targets: 2 },
                { orderable: false, targets: 5 }
            ]
        });
    }

    initBookingTable();
});
</script>

<style>
.card {
    border-radius: 12px;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
}

.card-header {
    border-radius: 12px 12px 0 0 !important;
    border-bottom: 1px solid #e3e6f0;
}

.studio-avatar {
    width: 40px;
    height: 40px;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-tabs-custom .nav-link {
    border: none;
    border-bottom: 3px solid transparent;
    color: #6e707e;
    font-weight: 500;
}

.nav-tabs-custom .nav-link.active {
    border-bottom: 3px solid black;
    color: #4e73df;
    background: transparent;
}
</style>
@endpush