@extends('layouts.admin')

@section('title', 'Payment Details')

@section('content')
<div class="row g-3 mb-3">
    <div class="col-md-8">
        <h2 class="mb-2 text-body-emphasis">Payment Details</h2>
        <p class="text-body-tertiary lh-sm">View complete payment transaction information</p>
    </div>
    <div class="col-md-4 d-flex justify-content-end">
        <a href="{{ route('admin.operations.payments.index') }}" class="btn btn-phoenix-secondary me-2">
            <span class="fas fa-arrow-left me-2"></span>Back
        </a>
        <a href="{{ route('admin.operations.payments.edit', $payment->id) }}" class="btn btn-phoenix-primary">
            <span class="fas fa-edit me-2"></span>Edit
        </a>
    </div>
</div>

<div class="row g-3">
    <div class="col-xxl-4">
        <div class="card border h-100">
            <div class="card-body">
                <div class="text-center">
                    <div class="avatar avatar-5xl mb-3">
                        <div class="avatar-name rounded-circle bg-success">
                            <span class="text-white fs-2">{{ substr($payment->user_name, 0, 1) }}</span>
                        </div>
                    </div>
                    <h5 class="mb-2">{{ $payment->user_name }}</h5>
                    <p class="text-body-tertiary mb-3">{{ $payment->user_email }}</p>
                    
                    @if($payment->status == 'completed')
                        <span class="badge badge-phoenix badge-phoenix-success fs-9 mb-4">Payment Completed</span>
                    @elseif($payment->status == 'pending')
                        <span class="badge badge-phoenix badge-phoenix-warning fs-9 mb-4">Payment Pending</span>
                    @elseif($payment->status == 'failed')
                        <span class="badge badge-phoenix badge-phoenix-danger fs-9 mb-4">Payment Failed</span>
                    @else
                        <span class="badge badge-phoenix badge-phoenix-secondary fs-9 mb-4">{{ ucfirst($payment->status) }}</span>
                    @endif
                    
                    <div class="d-flex justify-content-center gap-2">
                        <button class="btn btn-phoenix-primary btn-sm" data-bs-toggle="modal" data-bs-target="#statusModal">
                            <span class="fas fa-edit me-2"></span>Update Status
                        </button>
                        <a href="{{ route('admin.operations.payments.receipt', $payment->id) }}" class="btn btn-phoenix-secondary btn-sm">
                            <span class="fas fa-receipt me-2"></span>Receipt
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-xxl-8">
        <div class="card border h-100">
            <div class="card-header border-bottom bg-body">
                <h6 class="mb-0">Payment Information</h6>
            </div>
            <div class="card-body">
                <div class="row g-4">
                    <div class="col-md-6">
                        <div class="mb-4">
                            <h6 class="text-body-secondary mb-2">Transaction Details</h6>
                            <div class="border-start border-success ps-3">
                                <div class="mb-2">
                                    <strong>Amount:</strong> 
                                    <span class="text-success fw-bold fs-4">${{ number_format($payment->amount, 2) }}</span>
                                </div>
                                <div class="mb-2">
                                    <strong>Payment Type:</strong> {{ $payment->type }}
                                </div>
                                <div class="mb-2">
                                    <strong>Payment Method:</strong> {{ $payment->payment_method }}
                                </div>
                                <div class="mb-2">
                                    <strong>Transaction ID:</strong> 
                                    <code class="text-primary">{{ $payment->transaction_id }}</code>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-6">
                        <div class="mb-4">
                            <h6 class="text-body-secondary mb-2">Member Information</h6>
                            <div class="border-start border-primary ps-3">
                                <div class="mb-2">
                                    <strong>Member Name:</strong> {{ $payment->user_name }}
                                </div>
                                <div class="mb-2">
                                    <strong>Email:</strong> {{ $payment->user_email }}
                                </div>
                                <div class="mb-2">
                                    <strong>Payment ID:</strong> #{{ $payment->id }}
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-12">
                        <div class="mb-4">
                            <h6 class="text-body-secondary mb-2">Description</h6>
                            <div class="border-start border-info ps-3">
                                <p class="mb-0 text-body-tertiary">{{ $payment->description }}</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-12">
                        <div class="mb-4">
                            <h6 class="text-body-secondary mb-2">Payment Timeline</h6>
                            <div class="border-start border-warning ps-3">
                                <div class="mb-2">
                                    <strong>Payment Date:</strong> {{ $payment->created_at->format('F d, Y \a\t g:i A') }}
                                </div>
                                <div class="mb-2">
                                    <strong>Status:</strong> 
                                    @if($payment->status == 'completed')
                                        <span class="text-success">✓ Completed</span>
                                    @elseif($payment->status == 'pending')
                                        <span class="text-warning">⏳ Pending</span>
                                    @elseif($payment->status == 'failed')
                                        <span class="text-danger">✗ Failed</span>
                                    @else
                                        <span class="text-secondary">{{ ucfirst($payment->status) }}</span>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Status Update Modal -->
<div class="modal fade" id="statusModal" tabindex="-1" aria-labelledby="statusModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="statusModalLabel">Update Payment Status</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST" action="{{ route('admin.operations.payments.update', $payment->id) }}">
                @csrf
                @method('PATCH')
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="status" class="form-label">Status</label>
                        <select class="form-select" id="status" name="status" required>
                            <option value="pending" {{ $payment->status == 'pending' ? 'selected' : '' }}>Pending</option>
                            <option value="completed" {{ $payment->status == 'completed' ? 'selected' : '' }}>Completed</option>
                            <option value="failed" {{ $payment->status == 'failed' ? 'selected' : '' }}>Failed</option>
                            <option value="refunded" {{ $payment->status == 'refunded' ? 'selected' : '' }}>Refunded</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="admin_notes" class="form-label">Admin Notes</label>
                        <textarea class="form-control" id="admin_notes" name="admin_notes" rows="3" placeholder="Add any notes about the status change..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-phoenix-primary">Update Status</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection