@extends('admin.layouts.admin')
@section('content')
<div class="container-fluid">
    <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-money-bill-wave mr-2"></i>Payment Logs
                </h4>
            </div> --}}
        </div>
        <div class="card-body p-4">
            <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>Currency</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>
                                                    <span class="badge badge-secondary">{{ strtoupper($payment->currency) }}</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('admin.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">There are no booking payment records available.</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>Studio</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->studio->name ?? 'NA', 0, 2) }}
                                                        </div>
                                                        <div>
                                                            <div class="font-weight-bold">{{ $payment->studio->name ?? 'N/A' }}</div>
                                                            <small class="text-muted">{{ $payment->package->name ?? 'No package' }}</small>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td>
                                                    <span class="text-monospace small">{{ substr($payment->stripe_transaction_id, 0, 8) }}...</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('admin.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">There are no subscription payment records available.</p>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('common_script')
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap4.min.css">

<script type="text/javascript" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.11.5/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.9/js/responsive.bootstrap4.min.js"></script>

<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: [[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" }
            },
            columnDefs: [
                { responsivePriority: 1, targets: 0 },
                { responsivePriority: 2, targets: 5 },
                { responsivePriority: 3, targets: 1 },
                { orderable: false, targets: 5 }
            ]
        });
    }

    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" }
            },
            columnDefs: [
                { responsivePriority: 1, targets: 0 },
                { responsivePriority: 2, targets: 5 },
                { responsivePriority: 3, targets: 2 },
                { orderable: false, targets: 5 }
            ]
        });
    }

    initBookingTable();
});
</script>
@endsection