@extends('layouts.app')

@section('content')
<div class="page-wrapper">
    <div class="page-content">
        <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
            <div class="ps-3">
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0 p-0">
                        <li class="breadcrumb-item">
                            <a href="{{ route('admin.dashboard') }}"><i class="bx bx-home-alt"></i></a>
                        </li>
                        <li class="breadcrumb-item">
                            <a href="{{ route('walletTransactions.index') }}">Wallet Transactions</a>
                        </li>
                        <li class="breadcrumb-item active" aria-current="page">User History</li>
                    </ol>
                </nav>
            </div>
            <div class="ms-auto">
                <a href="{{ route('walletTransactions.index') }}" class="btn btn-light">Back</a>
            </div>
        </div>

        <div class="row g-3 mb-3">
            <div class="{{ $canEditWalletTransactions ? 'col-xl-4 col-lg-5' : 'col-12' }}">
                <div class="card h-100">
                    <div class="card-body">
                        <div class="d-flex align-items-start justify-content-between flex-wrap gap-3 mb-4">
                            <div class="d-flex align-items-center gap-3">
                                <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center fw-bold fs-4" style="width:58px; height:58px;">
                                    {{ $userInitial }}
                                </div>
                                <div>
                                    <span class="badge bg-light-primary text-primary mb-2">
                                        <i class='bx bx-user me-1'></i> {{ $user->account_type === 'partner' ? 'Partner' : 'User' }} Details
                                    </span>
                                    <h4 class="mb-1">{{ $userName }}</h4>
                                    <p class="mb-0 text-secondary">{{ $userEmail }}</p>
                                </div>
                            </div>
                        </div>

                        <div class="row g-3">
                            <div class="col-12">
                                <div class="border rounded p-3 h-100">
                                    <small class="text-uppercase text-secondary fw-bold d-block mb-1">Phone Number</small>
                                    <div class="fw-semibold">{{ $userPhoneNumber }}</div>
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="border rounded p-3 h-100">
                                    <small class="text-uppercase text-secondary fw-bold d-block mb-1">Wallet Balance</small>
                                    <div class="fw-semibold">{{ $walletBalanceDisplay }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            @if($canEditWalletTransactions)
            <div class="col-xl-8 col-lg-7">
                <div class="card h-100">
                    <div class="card-body">
                        <div class="d-flex align-items-start justify-content-between flex-wrap gap-3 mb-4">
                            <div>
                                <span class="badge bg-light-info text-info mb-2">
                                    <i class='bx bx-edit me-1'></i> Quick Update
                                </span>
                                <h4 class="mb-1">Wallet Balance Update</h4>
                            </div>

                            <span class="badge bg-light-success text-success p-2">
                                <i class='bx bx-wallet me-1'></i>
                                Available: {{ $walletBalanceDisplay }}
                            </span>
                        </div>

                        <form action="{{ route('walletTransactions.adjust', $user) }}" method="POST">
                            @csrf

                            <div class="row g-3">
                                <div class="col-md-5">
                                    <div class="mb-3">
                                        <label for="amount" class="form-label fw-semibold">Amount</label>
                                        <input
                                            type="number"
                                            step="0.01"
                                            min="0.01"
                                            id="amount"
                                            name="amount"
                                            value="{{ old('amount') }}"
                                            class="form-control @error('amount') is-invalid @enderror"
                                            placeholder="Enter amount"
                                        >
                                        @error('amount')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    @error('transaction_action')
                                        <div class="text-danger small mb-2">{{ $message }}</div>
                                    @enderror

                                    <div class="d-flex flex-wrap gap-2">
                                        <button type="submit" name="transaction_action" value="credit" class="btn btn-success">
                                            <i class='bx bx-plus-circle me-1'></i> Add Amount
                                        </button>
                                        <button type="submit" name="transaction_action" value="debit" class="btn btn-danger">
                                            <i class='bx bx-minus-circle me-1'></i> Minus Amount
                                        </button>
                                    </div>
                                </div>

                                <div class="col-md-7">
                                    <div class="mb-3">
                                        <label for="description" class="form-label fw-semibold">Description</label>
                                        <textarea
                                            id="description"
                                            name="description"
                                            rows="4"
                                            class="form-control @error('description') is-invalid @enderror"
                                            placeholder="Optional note"
                                        >{{ old('description') }}</textarea>
                                        @error('description')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            @endif
        </div>

        <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-3 mb-3">
            <div class="col">
                <div class="card radius-10 h-100">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div>
                                <p class="mb-0 text-secondary">Total Transactions</p>
                                <h4 class="my-1">{{ $transactions->count() }}</h4>
                                <p class="mb-0 font-13 text-info">
                                    <i class='bx bx-list-ul align-middle'></i> User ke total wallet entries
                                </p>
                            </div>
                            <div class="widgets-icons bg-light-info text-info ms-auto">
                                <i class='bx bx-transfer-alt'></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col">
                <div class="card radius-10 h-100">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div>
                                <p class="mb-0 text-secondary">Total Credit Amount</p>
                                <h4 class="my-1">{{ format_currency($totalAddedAmount) }}</h4>
                                <p class="mb-0 font-13 text-success">
                                    <i class='bx bxs-up-arrow align-middle'></i> All credited entries ka total
                                </p>
                            </div>
                            <div class="widgets-icons bg-light-success text-success ms-auto">
                                <i class='bx bxs-wallet'></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col">
                <div class="card radius-10 h-100">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div>
                                <p class="mb-0 text-secondary">Total Debit Amount</p>
                                <h4 class="my-1">{{ format_currency($totalDeductedAmount) }}</h4>
                                <p class="mb-0 font-13 text-danger">
                                    <i class='bx bxs-down-arrow align-middle'></i> All debited entries ka total
                                </p>
                            </div>
                            <div class="widgets-icons bg-light-danger text-danger ms-auto">
                                <i class='bx bxs-binoculars'></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-between flex-wrap gap-2 mb-3">
                    <div>
                        <h6 class="mb-1">Transaction History</h6>
                    </div>

                    <div class="d-flex align-items-center gap-2">
                        <label for="wallet-type-filter" class="mb-0 fw-semibold">Type Filter</label>
                        <select id="wallet-type-filter" class="form-select form-select-sm">
                            <option value="">All</option>
                            <option value="credit">Credit</option>
                            <option value="debit">Debit</option>
                        </select>
                    </div>
                </div>

                <div class="table-responsive">
                    <table id="wallet-user-history-table" class="table table-striped table-bordered align-middle" style="width:100%">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>IP Address</th>
                                <th>Browser</th>
                                <th>Transaction Type</th>
                                <th>Add Amount</th>
                                <th>Minus Amount</th>
                                <th>Status</th>
                                <th>Description</th>
                                <th>Date & Time</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

@include('includes.commonjs')
<script>
    $(function () {
        const walletHistoryTable = $('#wallet-user-history-table').DataTable({
            processing: true,
            serverSide: true,
            order: [[8, 'desc']],
            ajax: {
                url: @json(url()->current()),
                data: function (d) {
                    d.type = $('#wallet-type-filter').val();
                }
            },
            columns: [
                {
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'ip_address',
                    name: 'ip_address',
                    defaultContent: '-',
                    orderable: false
                },
                {
                    data: 'browser',
                    name: 'browser',
                    defaultContent: '-',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'refresh_type',
                    name: 'refresh_type',
                    defaultContent: '-'
                },
                {
                    data: 'credit_amount',
                    name: 'credit_amount',
                    defaultContent: '-',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'debit_amount',
                    name: 'debit_amount',
                    defaultContent: '-',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'status',
                    name: 'status',
                    defaultContent: '-'
                },
                {
                    data: 'description',
                    name: 'description',
                    defaultContent: '-'
                },
                {
                    data: 'created_at',
                    name: 'created_at',
                    defaultContent: '-'
                }
            ],
            language: {
                emptyTable: 'No transaction history found for this user.'
            }
        });

        $('#wallet-type-filter').on('change', function () {
            walletHistoryTable.ajax.reload();
        });
    });
</script>
@endsection