@props(['freeBusiness', 'paidBusiness', 'canHandleStatus' => false])

<div class="card">
    <div class="card-body">

        <nav>
            <div class="nav nav-tabs" id="nav-tab" role="tablist">
                <button class="nav-link active" id="paid-tab" data-bs-toggle="tab" data-bs-target="#paidBusiness"
                    type="button" role="tab" aria-controls="paidBusiness" aria-selected="true">Paid
                    Business</button>
                <button class="nav-link " id="free-tab" data-bs-toggle="tab" data-bs-target="#freeBusiness"
                    type="button" role="tab" aria-controls="freeBusiness" aria-selected="true">Free
                    Business</button>
            </div>
        </nav>



        <div class="tab-content mt-3" id="businessTabContent">
            <div class="tab-pane fade show active" id="paidBusiness" role="tabpanel" aria-labelledby="paid-tab">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>User Name</th>
                            <th>Business Name</th>
                            <th>Payment Amount</th>
                            <th>Payment Proof</th>
                            <th>Payment Method</th>
                            @if ($canHandleStatus)
                            <th>Status</th>
                            @endif

                            <th>Created At</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($paidBusiness as $item)
                        <tr>
                            <td>
                                {{ isset($item->user->first_name) ? $item->user->first_name : $item->user?->name ??
                                'Admin' }}
                            </td>
                            <td>{{ $item->name }}</td>
                            <td>{{ $item->transactions->amount ?? 0 }}</td>
                            <td class="text-center">
                                <img src="{{ Storage::url($item->transactions->transaction_image ?? '') }}"
                                    class="image-open" style="height:50px;" alt="">
                            </td>
                            <td>{{ ucfirst($item->transactions->type) ?? 'N/A' }}</td>
                            @if ($canHandleStatus)
                            <td>
                                @if ($item->status == '0')
                                <button class="btn btn-success btn-sm approve-btn"
                                    data-id="{{ $item->id }}">Approve</button>
                                <button class="btn btn-danger btn-sm reject-btn"
                                    data-id="{{ $item->id }}">Reject</button>
                                @endif
                            </td>
                            @endif
                            <td>{{ $item->created_at->format('Y-m-d') }}</td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                @if ($paidBusiness instanceof Illuminate\Pagination\LengthAwarePaginator)
                {{ $paidBusiness->links() }}
                @endif

            </div>

            <div class="tab-pane fade" id="freeBusiness" role="tabpanel" aria-labelledby="free-tab">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>User Name</th>
                            <th>Business Name</th>
                            <th>Website</th>
                            <th>Phone</th>
                            <th>Created At</th>
                            @if ($canHandleStatus)
                            <th>Status</th>
                            @endif
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($freeBusiness as $item)
                        <tr>
                            <td>
                                {{ isset($item->user->first_name) ? $item->user->first_name : $item->user?->name ??
                                'Admin' }}
                            </td>
                            <td>{{ $item->name }}</td>
                            <td>{{ $item->website ?? 'N/A' }}</td>
                            <td>{{ $item->phone ?? 'N/A' }}</td>
                            <td>{{ $item->created_at->format('Y-m-d H:i:s') }}</td>
                            @if ($canHandleStatus)
                            <td>
                                @if ($item->status == '0')
                                <button class="btn btn-success btn-sm approve-btn"
                                    data-id="{{ $item->id }}">Approve</button>
                                <button class="btn btn-danger btn-sm reject-btn"
                                    data-id="{{ $item->id }}">Reject</button>
                                @endif
                            </td>
                            @endif
                        </tr>
                        @endforeach
                    </tbody>
                </table>
                @if ($freeBusiness instanceof Illuminate\Pagination\LengthAwarePaginator)
                {{ $freeBusiness->links() }}
                @endif
            </div>
        </div>
    </div>
</div>
<div id="fullscreenOverlay" class="image-overlay">
    <img id="fullscreenImage" src="" alt="Full Image">
</div>

@push('bottom-scripts')
<script>
    $('.approve-btn, .reject-btn').click(function() {
        const button = $(this);
        const id = button.data('id');
        const isApprove = button.hasClass('approve-btn');
        const actionText = isApprove ? 'approve' : 'reject';
        const url = '/admin/busines-approve/' + id + '/' + actionText;
        const confirmText = isApprove ? 'Yes, approve it!' : 'Yes, reject it!';
        const successTitle = isApprove ? 'Approved!' : 'Rejected!';
        const successMessage = isApprove ? 'The request has been approved.' : 'The request has been rejected.';

        Swal.fire({
            title: 'Are you sure?',
            text: `Do you want to ${actionText} this?`,
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: confirmText
        }).then((result) => {
            if (result.isConfirmed) {
                // Show spinner on the button
                button.prop('disabled', true);
                button.html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Processing...');

                $.ajax({
                    url: url,
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function() {
                        Swal.fire(
                            successTitle,
                            successMessage,
                            'success'
                        ).then(() => {
                            window.location.reload();
                        });
                    },
                    error: function() {
                        Swal.fire(
                            'Error!',
                            'Something went wrong. Please try again.',
                            'error'
                        );
                    },
                    complete: function() {
                        // Re-enable button and reset content if needed
                        button.prop('disabled', false);
                        button.html(isApprove ? 'Approve' : 'Reject');
                    }
                });
            }
        });
    });
</script>
@endpush