@extends('layouts.app')

@section('title', 'Users Management')

@section('headerButtons')
    <button class="btn btn-primary btn-sm mr-2" data-toggle="modal" data-target="#quickSave">Credit Cooperative
        Account</button>
    <button class="btn btn-warning btn-sm" data-toggle="modal" data-target="#savingWithdrawal"> Debit Cooperative Account
    </button>
    <div>
        @livewire('user-mgt.quick-save', ['user' => $user])</div>
    <div>
        @livewire('user-mgt.savings-withdrawal', ['user' => $user])</div>
@endsection


@section('content')
    @include('admin.userMgt.partials.header')

    @include('admin.userMgt.partials.nav')


    <div class="container-fluid px-3 txn">
        <div class="row">
            <!-- Saving Balance -->
            <div class="col-12 col-md-3 mb-3">
                <div class="card wallet-card">
                    <div class="card-body">
                        <p class="metric-label mb-1">Saving Balance</p>
                        <h2 class="metric-value mb-2"><span
                                class="metric-amount">N{{ $user->savingWallet->balance ?? 0 }}</span></h2>
                    </div>
                </div>
            </div>

            <!-- Total credit count  -->
            <div class="col-12 col-lg-2 mb-3">
                <div class="card wallet-card">
                    <div class="card-body">
                        <p class="metric-label mb-1">Total credit count</p>
                        <h2 class="metric-value mb-2"><span class="metric-amount">{{ $creditCount }}</span></h2>
                    </div>
                </div>
            </div>

            <!-- Total debit count  -->
            <div class="col-12 col-lg-2 mb-3">
                <div class="card wallet-card">
                    <div class="card-body">
                        <p class="metric-label mb-1">Total debit count</p>
                        <h2 class="metric-value mb-2"><span class="metric-amount">{{ $debitCount }}</span></h2>
                    </div>
                </div>
            </div>


            <!-- Bank Details -->
            <div class="col-12 col-lg-3 mb-3">
                <div class="card wallet-card">
                    <div class="card-body">
                        <p class="metric-label mb-1">Bank Details</p>
                        <span class="bank-label">Bank</span>
                        <h2 class="metric-value mb-2"><span class="metric-amount">0</span></h2>
                    </div>
                </div>
            </div>

        </div>

        <!-- Filters -->

        @include('admin.userMgt.partials.filter-option')

        <!-- Transaction History -->
        <div class="card">
            <div class="card-body">
                <div class="d-flex align-items-center mb-3">
                    <span class="section-title">Saving History</span>
                </div>

                <div class="table-responsive">
                    <table class="table txn-table">
                        <thead class="thead-light">
                            <tr>
                                <th>By</th>
                                <th>Name</th>
                                <th>Amount</th>
                                <th>Previous Balance</th>
                                <th>Payment Mode</th>
                                <th>Date & Time</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($transactions as $transaction)
                                <tr>
                                    <td>{{ $transaction->actor?->fullname }}</td>
                                    <td>{{ $transaction->name }}</td>
                                    <td
                                        class="@if ($transaction->type == 'credit' && $transaction->status != 'pending') text-success
                                            @elseif ($transaction->type != 'credit' && $transaction->status != 'pending') text-danger
                                            @else text-warning @endif  ">
                                        @if ($transaction->type == 'credit')
                                            +
                                        @else
                                            -
                                        @endif N{{ number_format($transaction->amount) }}
                                    </td>
                                    <td>
                                        N{{ number_format($transaction->previous_balance) }}</td>
                                    <td>{{ strtoupper($transaction->paymentMethod) }}</td>
                                    <td>{{ $transaction->created_at->format('M d, Y H:iA') }}</td>
                                    <td>
                                        @php
                                            $status = $transaction->status;
                                            if ($status == 'approved') {
                                                $status = 'success';
                                            } elseif ($status == 'pending') {
                                                $status = 'secondary';
                                            } else {
                                                $status = 'danger';
                                            }
                                        @endphp
                                        <span
                                            class="badge txn-status badge-{{ $status }}">{{ $transaction->status }}</span>
                                    </td>
                                    {{-- <td class="text-center">
                                        <span class="action-view-circle"><i class="far fa-eye"></i></span>
                                    </td> --}}
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="card-footer bg-white ">
                @include('components.pagination', ['records' => $transactions])
            </div>

        </div>
    </div>



@endsection

@section('style')
    <style>
        .payment-option {
            cursor: pointer;
            transition: 0.2s;
        }

        .payment-option.active {
            border: 2px solid #198754;
            background: #f1fff4;
        }
    </style>
@endsection

{{-- @section('script')
    <script>
        document.addEventListener('livewire:initialized', () => {
            Livewire.on('open-pin-modal', () => {
                $('#quickSave').modal('hide');
                $('#pinModal').modal('show');
            });

            Livewire.on('close-all-modals', () => {
                $('#pinModal').modal('hide');
                $('#quickSave').modal('hide');
            });
        });
    </script>
@endsection --}}