@extends('layouts.master')

@section('content')
<main id="main" class="main">
    <section class="section dashboard">
        <div class="container">

            <h4>Balance: £{{ $balance }}</h4>

            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#topUpModal">
                Top Up
            </button>

            <h4>Transaction History</h4>
            <table id="transactionsTable" class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>Type</th>
                        <th>Amount</th>
                        <th>Description</th>
                        <th>Date</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($transactions as $transaction)
                        <tr>
                            <td>{{ ucfirst($transaction->type) }}</td>
                            <td>£{{ $transaction->amount }}</td>
                            <td>{{ $transaction->description }}</td>
                            <td>{{ $transaction->created_at->format('Y-m-d H:i') }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </section>
</main>

<!-- Top Up Modal -->
<div class="modal fade" id="topUpModal" tabindex="-1" aria-labelledby="topUpModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="topUpModalLabel">Top Up Wallet</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="topUpForm" action="{{ route('wallet.topup', ['user' => $user->id]) }}" method="POST">
                @csrf
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="amount" class="form-label">Amount</label>
                        <input type="number" name="amount" id="amount" class="form-control" required min="1">
                    </div>

                    @if(auth()->user()->can('users'))
                        <!-- Admin can select credit or debit -->
                        <div class="mb-3">
                            <label class="form-label">Transaction Type</label><br>
                            <div class="form-check form-check-inline">
                                <input type="radio" name="transaction_type" id="credit" value="credit"
                                    class="form-check-input" required>
                                <label class="form-check-label" for="credit">Credit</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input type="radio" name="transaction_type" id="debit" value="debit"
                                    class="form-check-input" required>
                                <label class="form-check-label" for="debit">Debit</label>
                            </div>
                        </div>

                        <!-- Hidden user_id field for Admin -->
                        <input type="hidden" name="user_id" value="{{ auth()->id() }}">
                    @else
                        <input type="hidden" name="transaction_type" value="credit">

                        <!-- Stripe Card details for non-admin -->
                        <div class="mb-3">
                            <label for="cardDetails" class="form-label">Card Details</label>
                            <div id="card-element" class="form-control">
                                <!-- Stripe Elements will go here -->
                            </div>
                            <div id="card-errors" class="text-danger mt-2" role="alert"></div>
                        </div>
                    @endif
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">Top Up</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                </div>
            </form>

        </div>
    </div>
</div>

@endsection

@section('scripts')
<script src="https://js.stripe.com/v3/"></script>
<script>
    // Initialize Stripe for card details
    const stripe = Stripe('{{ env('STRIPE_KEY') }}');
    const elements = stripe.elements();
    const card = elements.create('card');
    card.mount('#card-element');

    // Handle form submission for Stripe payments
    const form = document.getElementById('topUpForm');
    form.addEventListener('submit', async (event) => {
        event.preventDefault();

        @if(auth()->user()->can('users'))
            form.submit(); // Submit form directly for admin

        @else
            const { token, error } = await stripe.createToken(card);
            if (error) {
                document.getElementById('card-errors').textContent = error.message;
            } else {
                const hiddenInput = document.createElement('input');
                hiddenInput.setAttribute('type', 'hidden');
                hiddenInput.setAttribute('name', 'stripeToken');
                hiddenInput.setAttribute('value', token.id);
                form.appendChild(hiddenInput);
                form.submit();
            }
        @endif
    });

    // Initialize DataTables
    $(document).ready(function () {
        $('#transactionsTable').DataTable();
    });
</script>
@endsection