@extends('admin.layouts.admin')
@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-gradient-primary text-white py-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <h4 class="mb-0">
                            <i class="fas fa-credit-card mr-2"></i>Subscription Payment Details
                        </h4>
                        <a href="{{ route('admin.payment-logs.index') }}" class="btn btn-light btn-sm">
                            <i class="fas fa-arrow-left mr-1"></i> Back to List
                        </a>
                    </div>
                </div>
                <div class="card-body p-4">
                    <div class="row">
                        <!-- Payment Information Card -->
                        <div class="col-lg-6 col-xl-4 mb-4">
                            <div class="card h-100 border-light shadow-sm">
                                <div class="card-header bg-light py-3">
                                    <h6 class="card-title mb-0 text-primary">
                                        <i class="fas fa-money-bill-wave mr-2"></i>Payment Information
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="payment-info">
                                        <div class="info-item">
                                            <span class="label">Transaction ID:</span>
                                            <span class="value">{{ substr($payment->stripe_transaction_id, 0, 8) }}...</span>
                                        </div>
                                        <div class="info-item">
                                            <span class="label">Subscription ID:</span>
                                            <span class="value">{{ $payment->stripe_subscription_id ? substr($payment->stripe_subscription_id, 0, 8) . '...' : 'N/A' }}</span>
                                        </div>
                                        <div class="info-item">
                                            <span class="label">Customer ID:</span>
                                            <span class="value">{{ $payment->stripe_customer_id ? substr($payment->stripe_customer_id, 0, 8) . '...' : 'N/A' }}</span>
                                        </div>
                                        <div class="info-item">
                                            <span class="label">Amount:</span>
                                            <span class="value text-success font-weight-bold">${{ number_format($payment->amount, 2) }}</span>
                                        </div>
                                        <div class="info-item">
                                            <span class="label">Status:</span>
                                            <span class="value">
                                                <span class="badge badge-{{ $payment->payment_status === 'succeeded' ? 'success' : ($payment->payment_status === 'pending' ? 'warning' : 'danger') }}">
                                                    {{ ucfirst($payment->payment_status) }}
                                                </span>
                                            </span>
                                        </div>
                                        <div class="info-item">
                                            <span class="label">Payment Date:</span>
                                            <span class="value">{{ $payment->payment_date ? $payment->payment_date->format('M d, Y h:i A') : 'Not processed' }}</span>
                                        </div>
                                        <div class="info-item">
                                            <span class="label">Description:</span>
                                            <span class="value">{{ $payment->payment_description ?? 'No description' }}</span>
                                        </div>
                                        <div class="info-item">
                                            <span class="label">Created:</span>
                                            <span class="value">{{ $payment->created_at->format('M d, Y h:i A') }}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Studio Information Card -->
                        <div class="col-lg-6 col-xl-4 mb-4">
                            <div class="card h-100 border-light shadow-sm">
                                <div class="card-header bg-light py-3">
                                    <h6 class="card-title mb-0 text-primary">
                                        <i class="fas fa-building mr-2"></i>Studio Information
                                    </h6>
                                </div>
                                <div class="card-body">
                                    @if($payment->studio)
                                    <div class="studio-info">
                                        <div class="info-item">
                                            <span class="label">Studio Name:</span>
                                            <span class="value">{{ $payment->studio->name }}</span>
                                        </div>
                                        <div class="info-item">
                                            <span class="label">Base Price:</span>
                                            <span class="value">${{ number_format($payment->studio->price, 2) }}</span>
                                        </div>
                                        <div class="info-item">
                                            <span class="label">Booking Type:</span>
                                            <span class="value">{{ ucfirst(str_replace('_', ' ', $payment->studio->booking_type)) }}</span>
                                        </div>
                                        <div class="info-item">
                                            <span class="label">Max Guests:</span>
                                            <span class="value">{{ $payment->studio->no_guest ?? 'Not specified' }}</span>
                                        </div>
                                        <div class="info-item">
                                            <span class="label">Availability:</span>
                                            <span class="value">{{ $payment->studio->is_available ? 'Available' : 'Not Available' }}</span>
                                        </div>
                                    </div>
                                    @else
                                    <div class="text-center text-muted py-3">
                                        <i class="fas fa-building fa-2x mb-2"></i>
                                        <p>Studio information not available</p>
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-6 col-xl-4 mb-4">
                            <div class="card h-100 border-light shadow-sm">
                                <div class="card-header bg-light py-3">
                                    <h6 class="card-title mb-0 text-primary">
                                        <i class="fas fa-box mr-2"></i>Package Information
                                    </h6>
                                </div>
                                <div class="card-body">
                                    @if($payment->package)
                                    <div class="package-info">
                                        <div class="info-item">
                                            <span class="label">Package Name:</span>
                                            <span class="value">{{ $payment->package->name }}</span>
                                        </div>
                                        <div class="info-item">
                                            <span class="label">Price:</span>
                                            <span class="value">${{ number_format($payment->package->price, 2) }}</span>
                                        </div>
                                        <div class="info-item">
                                            <span class="label">Max Guests:</span>
                                            <span class="value">{{ $payment->package->max_guests ?? 'Unlimited' }}</span>
                                        </div>
                                        <div class="info-item">
                                            <span class="label">Availability:</span>
                                            <span class="value">
                                                @if($payment->package->availability_from_time && $payment->package->availability_to_time)
                                                {{ \Carbon\Carbon::parse($payment->package->availability_from_time)->format('h:i A') }} -
                                                {{ \Carbon\Carbon::parse($payment->package->availability_to_time)->format('h:i A') }}
                                                @else
                                                24/7 Available
                                                @endif
                                            </span>
                                        </div>
                                    </div>
                                    @else
                                    <div class="text-center text-muted py-3">
                                        <i class="fas fa-box-open fa-2x mb-2"></i>
                                        <p>Package information not available</p>
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-6 col-xl-4 mb-4">
                            <div class="card h-100 border-light shadow-sm">
                                <div class="card-header bg-light py-3">
                                    <h6 class="card-title mb-0 text-primary">
                                        <i class="fas fa-user mr-2"></i>Customer Information
                                    </h6>
                                </div>
                                <div class="card-body">
                                    @if($payment->user)
                                    <div class="user-info">
                                        <div class="info-item">
                                            <span class="label">Customer Name:</span>
                                            <span class="value">{{ $payment->user->name }}</span>
                                        </div>
                                        <div class="info-item">
                                            <span class="label">Email:</span>
                                            <span class="value">{{ $payment->user->email }}</span>
                                        </div>
                                        <div class="info-item">
                                            <span class="label">Stripe ID:</span>
                                            <span class="value">{{ $payment->user->stripe_customer_id ? substr($payment->user->stripe_customer_id, 0, 8) . '...' : 'Not linked' }}</span>
                                        </div>
                                        <div class="info-item">
                                            <span class="label">Account Type:</span>
                                            <span class="value">{{ $payment->user->is_guest ? 'Guest' : 'Registered' }}</span>
                                        </div>
                                        <div class="info-item">
                                            <span class="label">Member Since:</span>
                                            <span class="value">{{ $payment->user->created_at->format('M d, Y') }}</span>
                                        </div>
                                        <div class="info-item">
                                            <span class="label">Email Verified:</span>
                                            <span class="value">{{ $payment->user->email_verified_at ? 'Yes' : 'No' }}</span>
                                        </div>
                                    </div>
                                    @else
                                    <div class="text-center text-muted py-3">
                                        <i class="fas fa-user-slash fa-2x mb-2"></i>
                                        <p>Customer information not available</p>
                                    </div>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-6 col-xl-4 mb-4">
                            <div class="card h-100 border-light shadow-sm">
                                <div class="card-header bg-light py-3">
                                    <h6 class="card-title mb-0 text-primary">
                                        <i class="fas fa-info-circle mr-2"></i>Payment Status
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="status-info">
                                        <div class="status-item d-flex align-items-center mb-3">
                                            <div class="status-indicator bg-{{ $payment->payment_status === 'succeeded' ? 'success' : ($payment->payment_status === 'pending' ? 'warning' : 'danger') }} mr-3"></div>
                                            <div>
                                                <div class="status-label">Payment Status</div>
                                                <div class="status-value">{{ ucfirst($payment->payment_status) }}</div>
                                            </div>
                                        </div>

                                        <div class="status-item d-flex align-items-center mb-3">
                                            <div class="status-indicator bg-{{ $payment->payment_date ? 'success' : 'secondary' }} mr-3"></div>
                                            <div>
                                                <div class="status-label">Payment Processed</div>
                                                <div class="status-value">{{ $payment->payment_date ? 'Yes' : 'No' }}</div>
                                            </div>
                                        </div>

                                        <div class="status-item d-flex align-items-center mb-3">
                                            <div class="status-indicator bg-info mr-3"></div>
                                            <div>
                                                <div class="status-label">Payment Method</div>
                                                <div class="status-value">Subscription</div>
                                            </div>
                                        </div>

                                        <div class="status-item d-flex align-items-center mb-3">
                                            <div class="status-indicator bg-primary mr-3"></div>
                                            <div>
                                                <div class="status-label">Last Updated</div>
                                                <div class="status-value">{{ $payment->updated_at->format('M d, Y h:i A') }}</div>
                                            </div>
                                        </div>

                                        @if($payment->failure_code)
                                        <div class="status-item d-flex align-items-center mb-3">
                                            <div class="status-indicator bg-danger mr-3"></div>
                                            <div>
                                                <div class="status-label">Error Code</div>
                                                <div class="status-value text-danger">{{ $payment->failure_code }}</div>
                                            </div>
                                        </div>
                                        @endif

                                        @if($payment->failure_message)
                                        <div class="status-item">
                                            <div class="status-label mb-1">Error Message</div>
                                            <div class="status-value text-danger small">{{ $payment->failure_message }}</div>
                                        </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>

                        @if($payment->stripe_event_data)
                        <div class="col-lg-6 col-xl-4 mb-4">
                            <div class="card h-100 border-light shadow-sm">
                                <div class="card-header bg-light py-3">
                                    <h6 class="card-title mb-0 text-primary">
                                        <i class="fas fa-receipt mr-2"></i>Stripe Event Data
                                    </h6>
                                </div>
                                <div class="card-body">
                                    <div class="stripe-data">
                                        <button class="btn btn-sm btn-outline-primary mt-2" type="button" data-toggle="collapse" data-target="#stripeDataCollapse">
                                            <i class="fas fa-eye mr-1"></i> View Full Details
                                        </button>
                                        <div class="collapse mt-2" id="stripeDataCollapse">
                                            <pre class="bg-light p-3 rounded small">{{ json_encode($payment->stripe_event_data, JSON_PRETTY_PRINT) }}</pre>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<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;
}

.bg-gradient-primary {
    background: linear-gradient(135deg, #4e73df 0%, #224abe 100%);
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f8f9fa;
}

.info-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.info-item .label {
    font-weight: 600;
    color: #6e707e;
    font-size: 0.85rem;
    flex: 1;
}

.info-item .value {
    color: #5a5c69;
    font-size: 0.9rem;
    flex: 1;
    text-align: right;
    word-break: break-word;
}

.status-indicator {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-label {
    font-size: 0.8rem;
    color: #6e707e;
    font-weight: 600;
}

.status-value {
    font-size: 0.9rem;
    color: #5a5c69;
    font-weight: 500;
}

.btn-light {
    border-color: #d1d3e2;
    color: #6e707e;
    font-weight: 500;
}

.btn-light:hover {
    background-color: #eaecf4;
    border-color: #bac8f3;
    color: #4e73df;
}

.bg-light {
    background-color: #f8f9fa !important;
    border-color: #e3e6f0;
}

.shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.text-primary {
    color: #ffffff !important;
}

pre {
    border-radius: 8px;
    background-color: #f8f9fa !important;
    border: 1px solid #e3e6f0;
    max-height: 200px;
    overflow-y: auto;
    font-size: 0.8rem;
}

.btn-outline-primary {
    border-width: 1px;
    font-size: 0.85rem;
}
</style>
@endsection