@extends('layouts.admin')

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

@section('content')
<div class="page-header">
    <div class="page-header-left">
        <a href="{{ route('admin.customers') }}" 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 Customers
        </a>
        <h1 class="page-title">{{ $customer->name ?? 'Customer' }}</h1>
    </div>
    <div class="page-actions">
        <form method="POST" action="{{ route('admin.customers.impersonate', $customer->id) }}" class="inline">
            @csrf
            <button type="submit" class="btn btn-primary" title="Log in as this customer to view their dashboard">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M2 8s2.5-4 6-4 6 4 6 4-2.5 4-6 4-6-4-6-4z" stroke="currentColor" stroke-width="1.5"/><circle cx="8" cy="8" r="1.8" stroke="currentColor" stroke-width="1.5"/></svg>
                Login as User
            </button>
        </form>
        <a href="{{ route('admin.customers.edit', $customer->id) }}" class="btn btn-outline">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M11 2l3 3-9 9H2v-3l9-9z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
            Edit
        </a>
        @if($customer->is_active && !$customer->is_suspended)
        <form method="POST" action="{{ route('admin.customers.suspend', $customer->id) }}" class="inline">
            @csrf
            @method('PATCH')
            <button type="submit" class="btn btn-outline btn-orange" onclick="return confirm('Suspend this customer?')">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5"/><path d="M5 8h6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
                Suspend
            </button>
        </form>
        @else
        <form method="POST" action="{{ route('admin.customers.activate', $customer->id) }}" class="inline">
            @csrf
            @method('PATCH')
            <button type="submit" class="btn btn-green" onclick="return confirm('Activate this customer?')">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="7" stroke="currentColor" stroke-width="1.5"/><path d="M5 8l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                Activate
            </button>
        </form>
        @endif
    </div>
</div>

<div class="grid-3">
    <div class="card">
        <div class="card-body text-center" style="padding-top: 2rem;">
            <div class="avatar avatar-xl" style="margin: 0 auto 1rem;">
                @if($customer->profile_photo)
                <img src="{{ asset('storage/' . $customer->profile_photo) }}" alt="{{ $customer->name }}">
                @else
                <span>{{ strtoupper(substr($customer->name, 0, 1)) }}</span>
                @endif
            </div>
            <h3 class="text-lg text-semibold">{{ $customer->name }}</h3>
            <p class="text-muted">{{ $customer->email }}</p>
            <span class="badge badge-{{ $customer->is_active && !$customer->is_suspended ? 'green' : 'red' }}" style="margin-top: 0.5rem;">{{ $customer->is_active && !$customer->is_suspended ? 'Active' : 'Inactive' }}</span>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Personal Information</h3>
        </div>
        <div class="card-body">
            <div class="info-list">
                <div class="info-item">
                    <span class="info-label">Phone</span>
                    <span class="info-value">{{ $customer->phone ?? 'N/A' }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">Username</span>
                    <span class="info-value">{{ $customer->username ?? 'N/A' }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">Role</span>
                    <span class="info-value"><span class="badge badge-blue">{{ ucfirst($customer->role?->slug ?? 'customer') }}</span></span>
                </div>
                <div class="info-item">
                    <span class="info-label">Joined</span>
                    <span class="info-value">{{ $customer->created_at?->format('M d, Y') }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">Last Login</span>
                    <span class="info-value">{{ $customer->last_login_at ? $customer->last_login_at->diffForHumans() : 'Never' }}</span>
                </div>
            </div>
        </div>
    </div>

    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Account Summary</h3>
        </div>
        <div class="card-body">
            <div class="info-list">
                <div class="info-item">
                    <span class="info-label">Total Accounts</span>
                    <span class="info-value text-semibold">{{ $customer->accounts_count }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">Total Balance</span>
                    <span class="info-value text-semibold text-lg" style="color: #0D6B58;">{{ $currency ?? '₦' }}{{ number_format($customer->accounts->sum('balance'), 2) }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">Total Transactions</span>
                    <span class="info-value">{{ $customer->transactions_count }}</span>
                </div>
                <div class="info-item">
                    <span class="info-label">Total Cards</span>
                    <span class="info-value">{{ $customer->cards_count }}</span>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card" style="margin-top: 1.5rem;">
    <div class="card-header">
        <div class="tabs-nav">
            <button class="tab-btn active" onclick="switchTab('accounts')">Accounts</button>
            <button class="tab-btn" onclick="switchTab('transactions')">Transactions</button>
            <button class="tab-btn" onclick="switchTab('cards')">Cards</button>
            <button class="tab-btn" onclick="switchTab('beneficiaries')">Beneficiaries</button>
        </div>
    </div>

    <div id="tab-accounts" class="tab-panel active">
        <x-data-table :emptyMessage="'No accounts found.'">
            <x-slot:thead>
                <th>Account Number</th>
                <th>Type</th>
                <th>Balance</th>
                <th>Status</th>
                <th>Actions</th>
            </x-slot:thead>
            <x-slot:tbody>
                @forelse($customer->accounts as $account)
                <tr>
                    <td><span class="text-mono">{{ $account->masked_number }}</span></td>
                    <td>{{ ucfirst($account->account_type) }}</td>
                    <td class="text-semibold">{{ $currency ?? '₦' }}{{ number_format($account->balance, 2) }}</td>
                    <td><span class="badge badge-{{ $account->status === 'active' ? 'green' : 'red' }}">{{ ucfirst($account->status) }}</span></td>
                    <td>
                        <a href="{{ route('admin.accounts.show', $account->id) }}" class="btn btn-sm btn-outline">View</a>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="5">
                        <div class="data-table-empty-content">
                            <p>No accounts found for this customer.</p>
                        </div>
                    </td>
                </tr>
                @endforelse
            </x-slot:tbody>
        </x-data-table>
    </div>

    <div id="tab-transactions" class="tab-panel" style="display:none;">
        <x-data-table :emptyMessage="'No transactions found.'">
            <x-slot:thead>
                <th>Reference</th>
                <th>Type</th>
                <th>Amount</th>
                <th>Status</th>
                <th>Date</th>
            </x-slot:thead>
            <x-slot:tbody>
                @forelse($customer->transactions as $transaction)
                <tr>
                    <td><span class="text-mono">{{ $transaction->reference }}</span></td>
                    <td><span class="badge badge-blue">{{ ucfirst($transaction->type) }}</span></td>
                    <td class="text-semibold">{{ $currency ?? '₦' }}{{ number_format($transaction->amount, 2) }}</td>
                    <td><span class="badge badge-{{ $transaction->status === 'completed' || $transaction->status === 'successful' ? '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="5">
                        <div class="data-table-empty-content">
                            <p>No transactions found.</p>
                        </div>
                    </td>
                </tr>
                @endforelse
            </x-slot:tbody>
        </x-data-table>
    </div>

    <div id="tab-cards" class="tab-panel" style="display:none;">
        <x-data-table :emptyMessage="'No cards found.'">
            <x-slot:thead>
                <th>Card Number</th>
                <th>Type</th>
                <th>Expiry</th>
                <th>Status</th>
            </x-slot:thead>
            <x-slot:tbody>
                @forelse($customer->cards as $card)
                <tr>
                    <td><span class="text-mono">{{ $card->masked_number }}</span></td>
                    <td>{{ ucfirst($card->card_type) }}</td>
                    <td>{{ $card->expiry_month }}/{{ $card->expiry_year }}</td>
                    <td><span class="badge badge-{{ $card->status === 'active' ? 'green' : ($card->status === 'blocked' ? 'red' : 'orange') }}">{{ ucfirst($card->status) }}</span></td>
                </tr>
                @empty
                <tr>
                    <td colspan="4">
                        <div class="data-table-empty-content">
                            <p>No cards found.</p>
                        </div>
                    </td>
                </tr>
                @endforelse
            </x-slot:tbody>
        </x-data-table>
    </div>

    <div id="tab-beneficiaries" class="tab-panel" style="display:none;">
        <x-data-table :emptyMessage="'No beneficiaries found.'">
            <x-slot:thead>
                <th>Name</th>
                <th>Bank</th>
                <th>Account Number</th>
                <th>Added</th>
            </x-slot:thead>
            <x-slot:tbody>
                @forelse($customer->beneficiaries as $beneficiary)
                <tr>
                    <td class="text-semibold">{{ $beneficiary->name }}</td>
                    <td>{{ $beneficiary->bank }}</td>
                    <td><span class="text-mono">{{ $beneficiary->account_number }}</span></td>
                    <td>{{ $beneficiary->created_at?->format('M d, Y') }}</td>
                </tr>
                @empty
                <tr>
                    <td colspan="4">
                        <div class="data-table-empty-content">
                            <p>No beneficiaries found.</p>
                        </div>
                    </td>
                </tr>
                @endforelse
            </x-slot:tbody>
        </x-data-table>
    </div>
</div>

<x-confirm-modal
    id="deleteCustomerModal"
    title="Delete Customer"
    message="Are you sure you want to delete this customer? This action cannot be undone."
    actionUrl="{{ route('admin.customers.destroy', $customer->id) }}"
    method="DELETE"
    buttonText="Delete Customer"
/>
@endsection

@push('scripts')
<script>
function switchTab(tab) {
    document.querySelectorAll('.tab-panel').forEach(function(el) { el.style.display = 'none'; el.classList.remove('active'); });
    document.querySelectorAll('.tab-btn').forEach(function(el) { el.classList.remove('active'); });
    document.getElementById('tab-' + tab).style.display = 'block';
    event.target.classList.add('active');
}
</script>
@endpush