@extends('layouts.admin')

@section('title', 'Account Details')

@section('content')
<div class="page-header">
    <div class="page-header-left">
        <a href="{{ route('admin.accounts') }}" class="btn-back">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M10 12L6 8l4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
            Back to Accounts
        </a>
        <h1 class="page-title">Account: {{ $account->account_number }}</h1>
    </div>
    <div class="page-actions">
        <a href="{{ route('admin.customers.show', $account->user_id) }}" class="btn btn-outline">View Customer</a>
    </div>
</div>

<div class="grid-3">
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Account Information</h3>
        </div>
        <div class="card-body">
            <div class="info-list">
                <div class="info-item">
                    <span class="info-label">Account Number</span>
                    <span class="info-value text-mono text-semibold">{{ $account->account_number }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">Account Type</span>
                    <span class="info-value">{{ ucfirst($account->account_type) }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">Status</span>
                    <span class="info-value">
                        <span class="badge badge-{{ $account->status === 'active' ? 'green' : 'red' }}">{{ ucfirst($account->status) }}</span>
                    </span>
                </div>
                <div class="info-item">
                    <span class="info-label">Customer</span>
                    <span class="info-value">{{ $account->user->name ?? 'N/A' }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">Created</span>
                    <span class="info-value">{{ $account->created_at->format('M d, Y') }}</span>
                </div>
            </div>
        </div>
    </div>

    <div class="card" style="grid-column: span 2;">
        <div class="card-header">
            <h3 class="card-title">Balance Management</h3>
        </div>
        <div class="card-body">
            <div class="balance-display">
                <span class="balance-label">Current Balance</span>
                <span class="balance-amount">{{ $currency ?? '₦' }}{{ number_format($account->balance, 2) }}</span>
            </div>
            <form method="POST" action="{{ route('admin.accounts.balance', $account->id) }}" style="margin-top: 1.5rem;">
                @csrf
                <div class="form-grid form-grid-3">
                    <div class="form-group">
                        <label for="type" class="form-label">Action <span class="required">*</span></label>
                        <select id="type" name="type" class="form-select @error('type') is-invalid @enderror" required>
                            <option value="credit" {{ old('type') === 'debit' ? '' : 'selected' }}>Fund / Credit (money in)</option>
                            <option value="debit" {{ old('type') === 'debit' ? 'selected' : '' }}>Debit (money out)</option>
                        </select>
                        @error('type')
                        <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="amount" class="form-label">Amount <span class="required">*</span></label>
                        <input type="number" id="amount" name="amount" class="form-input @error('amount') is-invalid @enderror" step="0.01" min="0.01" value="{{ old('amount') }}" required placeholder="e.g. 50000.00">
                        @error('amount')
                        <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group">
                        <label for="date" class="form-label">Transaction Date <span class="form-label-hint">(optional — backdate)</span></label>
                        <input type="datetime-local" id="date" name="date" class="form-input @error('date') is-invalid @enderror" value="{{ old('date', now()->format('Y-m-d\TH:i')) }}">
                        @error('date')
                        <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>
                    <div class="form-group" style="grid-column: span 3; margin-top: 1rem;">
                        <label for="description" class="form-label">Reason <span class="required">*</span></label>
                        <input type="text" id="description" name="description" class="form-input @error('description') is-invalid @enderror" value="{{ old('description') }}" required placeholder="Reason for adjustment (creates audit trail)">
                        @error('description')
                        <span class="form-error">{{ $message }}</span>
                        @enderror
                    </div>
                </div>
                <button type="submit" class="btn btn-primary" style="margin-top: 1rem;" onclick="return confirm('Apply this balance adjustment? This will create an audit trail.')">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M4 8h8M8 4v8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
                    Apply Balance Adjustment
                </button>
            </form>
        </div>
    </div>
</div>

<div class="card" style="margin-top: 1.5rem;">
    <div class="card-header">
        <h3 class="card-title">Transaction History</h3>
    </div>
    <x-data-table :emptyMessage="'No transactions for this account.'">
        <x-slot:thead>
            <th>Reference</th>
            <th>Type</th>
            <th>Amount</th>
            <th>Fee</th>
            <th>Description</th>
            <th>Status</th>
            <th>Date</th>
        </x-slot:thead>
        <x-slot:tbody>
            @forelse($transactions as $transaction)
            <tr>
                <td><span class="text-mono">{{ $transaction->reference }}</span></td>
                <td><span class="badge badge-{{ $transaction->type === 'credit' ? 'green' : 'blue' }}">{{ ucfirst($transaction->type) }}</span></td>
                <td class="text-semibold">{{ $currency ?? '₦' }}{{ number_format($transaction->amount, 2) }}</td>
                <td>{{ $currency ?? '₦' }}{{ number_format($transaction->fee ?? 0, 2) }}</td>
                <td>{{ Str::limit($transaction->description ?? '', 40) }}</td>
                <td><span class="badge badge-{{ in_array($transaction->status, ['successful', 'completed']) ? 'green' : ($transaction->status === 'pending' ? 'orange' : 'red') }}">{{ ucfirst($transaction->status) }}</span></td>
                <td>{{ $transaction->created_at->format('M d, Y H:i') }}</td>
            </tr>
            @empty
            <tr>
                <td colspan="7">
                    <div class="data-table-empty-content">
                        <p>No transactions found for this account.</p>
                    </div>
                </td>
            </tr>
            @endforelse
        </x-slot:tbody>
    </x-data-table>
</div>
@endsection