@extends('layouts.app')

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

@section('content')
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h2 class="fw-bold mb-1">{{ $savingsAccount->account_number }}</h2>
                    <p class="text-muted mb-0">{{ $savingsAccount->product_name }}</p>
                </div>
            </div>
        </div>
    </div>

    @if (session('success'))
        <div class="alert alert-success alert-dismissible fade show">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if ($errors->any())
        <div class="alert alert-danger alert-dismissible fade show">
            <ul class="mb-0">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="row">
        <!-- Account Summary -->
        <div class="col-md-4 mb-4">
            <div class="card border-0 shadow-sm">
                <div class="card-body text-center">
                    <div class="mb-3">
                        <i class="fas fa-piggy-bank fa-3x text-success"></i>
                    </div>
                    <h3 class="fw-bold text-success">USD {{ number_format($savingsAccount->current_balance, 2) }}</h3>
                    <p class="text-muted mb-0">Current Balance</p>

                    <hr class="my-3">

                    <div class="row text-center">
                        <div class="col-6 mb-2">
                            <div class="text-muted small">Available</div>
                            <div class="fw-semibold">USD {{ number_format($stats['available_balance'], 2) }}</div>
                        </div>
                        <div class="col-6 mb-2">
                            <div class="text-muted small">Minimum</div>
                            <div class="fw-semibold">USD {{ number_format($savingsAccount->minimum_balance, 2) }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Account Stats -->
            <div class="card border-0 shadow-sm mt-3">
                <div class="card-body">
                    <h6 class="fw-semibold mb-3">Statistics</h6>
                    <div class="mb-3">
                        <div class="d-flex justify-content-between mb-1">
                            <span class="text-muted small">Total Deposits</span>
                            <span class="fw-semibold">USD {{ number_format($stats['total_deposits'], 2) }}</span>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="d-flex justify-content-between mb-1">
                            <span class="text-muted small">Total Withdrawals</span>
                            <span class="fw-semibold">USD {{ number_format($stats['total_withdrawals'], 2) }}</span>
                        </div>
                    </div>
                    <div class="mb-0">
                        <div class="d-flex justify-content-between mb-1">
                            <span class="text-muted small">Interest Earned</span>
                            <span class="fw-semibold text-success">USD {{ number_format($stats['interest_earned'], 2) }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Account Details & Transactions -->
        <div class="col-md-8">
            <div class="card border-0 shadow-sm">
                <div class="card-body">
                    <ul class="nav nav-tabs" id="accountTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="details-tab" data-bs-toggle="tab"
                                    data-bs-target="#details" type="button" role="tab">
                                Account Details
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="transactions-tab" data-bs-toggle="tab"
                                    data-bs-target="#transactions" type="button" role="tab">
                                Transactions ({{ $savingsAccount->transactions->count() }})
                            </button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="client-tab" data-bs-toggle="tab"
                                    data-bs-target="#client" type="button" role="tab">
                                Client Info
                            </button>
                        </li>
                    </ul>

                    <div class="tab-content mt-4" id="accountTabsContent">
                        <!-- Account Details Tab -->
                        <div class="tab-pane fade show active" id="details" role="tabpanel">
                            <div class="row">
                                <div class="col-md-6">
                                    <h6 class="fw-semibold text-primary mb-3">Account Information</h6>
                                    <table class="table table-sm">
                                        <tr>
                                            <td class="text-muted">Account Number:</td>
                                            <td class="fw-semibold">{{ $savingsAccount->account_number }}</td>
                                        </tr>
                                        <tr>
                                            <td class="text-muted">Product:</td>
                                            <td class="fw-semibold">{{ $savingsAccount->product_name }}</td>
                                        </tr>
                                        <tr>
                                            <td class="text-muted">Type:</td>
                                            <td><span class="badge bg-info">{{ ucfirst($savingsAccount->type) }}</span></td>
                                        </tr>
                                        <tr>
                                            <td class="text-muted">Status:</td>
                                            <td>
                                                @if($savingsAccount->status == 'active')
                                                    <span class="badge bg-success">Active</span>
                                                @elseif($savingsAccount->status == 'dormant')
                                                    <span class="badge bg-warning">Dormant</span>
                                                @elseif($savingsAccount->status == 'closed')
                                                    <span class="badge bg-secondary">Closed</span>
                                                @else
                                                    <span class="badge bg-danger">Frozen</span>
                                                @endif
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="text-muted">Opening Date:</td>
                                            <td class="fw-semibold">{{ $savingsAccount->opening_date->format('M d, Y') }}</td>
                                        </tr>
                                        @if($savingsAccount->maturity_date)
                                        <tr>
                                            <td class="text-muted">Maturity Date:</td>
                                            <td class="fw-semibold">{{ $savingsAccount->maturity_date->format('M d, Y') }}</td>
                                        </tr>
                                        @endif
                                    </table>
                                </div>

                                <div class="col-md-6">
                                    <h6 class="fw-semibold text-primary mb-3">Financial Details</h6>
                                    <table class="table table-sm">
                                        <tr>
                                            <td class="text-muted">Opening Balance:</td>
                                            <td class="fw-semibold">USD {{ number_format($savingsAccount->opening_balance, 2) }}</td>
                                        </tr>
                                        <tr>
                                            <td class="text-muted">Current Balance:</td>
                                            <td class="fw-semibold text-success">USD {{ number_format($savingsAccount->current_balance, 2) }}</td>
                                        </tr>
                                        <tr>
                                            <td class="text-muted">Minimum Balance:</td>
                                            <td class="fw-semibold">USD {{ number_format($savingsAccount->minimum_balance, 2) }}</td>
                                        </tr>
                                        <tr>
                                            <td class="text-muted">Interest Rate:</td>
                                            <td class="fw-semibold">{{ $savingsAccount->interest_rate }}%</td>
                                        </tr>
                                        <tr>
                                            <td class="text-muted">Interest Calculation:</td>
                                            <td class="fw-semibold">{{ ucfirst($savingsAccount->interest_calculation) }}</td>
                                        </tr>
                                        <tr>
                                            <td class="text-muted">Created By:</td>
                                            <td>{{ $savingsAccount->creator->name }}</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>

                            @if($savingsAccount->notes)
                            <div class="row mt-3">
                                <div class="col-12">
                                    <h6 class="fw-semibold text-primary mb-2">Notes</h6>
                                    <div class="border rounded p-3 bg-light">
                                        {{ $savingsAccount->notes }}
                                    </div>
                                </div>
                            </div>
                            @endif
                        </div>

                        <!-- Transactions Tab -->
                        <div class="tab-pane fade" id="transactions" role="tabpanel">
                            @if($savingsAccount->transactions->count() > 0)
                                <div class="table-responsive">
                                    <table class="table table-hover">
                                        <thead>
                                            <tr>
                                                <th>Date</th>
                                                <th>Transaction #</th>
                                                <th>Type</th>
                                                <th>Amount</th>
                                                <th>Balance</th>
                                                <th>Description</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach($savingsAccount->transactions as $transaction)
                                            <tr>
                                                <td>{{ $transaction->transaction_date->format('M d, Y') }}</td>
                                                <td><small class="text-muted">{{ $transaction->transaction_number }}</small></td>
                                                <td>
                                                    @if($transaction->type == 'deposit')
                                                        <span class="badge bg-success">Deposit</span>
                                                    @elseif($transaction->type == 'withdrawal')
                                                        <span class="badge bg-warning">Withdrawal</span>
                                                    @elseif($transaction->type == 'interest')
                                                        <span class="badge bg-info">Interest</span>
                                                    @else
                                                        <span class="badge bg-secondary">{{ ucfirst($transaction->type) }}</span>
                                                    @endif
                                                </td>
                                                <td class="fw-semibold {{ $transaction->type == 'deposit' || $transaction->type == 'interest' ? 'text-success' : 'text-danger' }}">
                                                    {{ $transaction->type == 'deposit' || $transaction->type == 'interest' ? '+' : '-' }}
                                                    USD {{ number_format($transaction->amount, 2) }}
                                                </td>
                                                <td>USD {{ number_format($transaction->balance_after, 2) }}</td>
                                                <td><small>{{ $transaction->description }}</small></td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            @else
                                <div class="text-center py-4">
                                    <i class="fas fa-exchange-alt fa-2x text-muted mb-3"></i>
                                    <p class="text-muted">No transactions yet.</p>
                                </div>
                            @endif
                        </div>

                        <!-- Client Info Tab -->
                        <div class="tab-pane fade" id="client" role="tabpanel">
                            <div class="row">
                                @if ($savingsAccount->client)
                                    <div class="col-md-6">
                                        <h6 class="fw-semibold text-primary mb-3">Client Details</h6>
                                        <table class="table table-sm">
                                            <tr>
                                                <td class="text-muted">Client Name:</td>
                                                <td class="fw-semibold">{{ $savingsAccount->client->full_name ?? 'N/A' }}</td>
                                            </tr>
                                            <tr>
                                                <td class="text-muted">Client Number:</td>
                                                <td class="fw-semibold">{{ $savingsAccount->client->client_number ?? 'N/A' }}</td>
                                            </tr>
                                            <tr>
                                                <td class="text-muted">Phone:</td>
                                                <td>{{ $savingsAccount->client->phone ?? 'N/A' }}</td>
                                            </tr>
                                            <tr>
                                                <td class="text-muted">Email:</td>
                                                <td>{{ $savingsAccount->client->email ?? 'N/A' }}</td>
                                            </tr>
                                            <tr>
                                                <td class="text-muted">ID Number:</td>
                                                <td>{{ $savingsAccount->client->id_number ?? 'N/A' }}</td>
                                            </tr>
                                        </table>
                                    </div>

                                    <div class="col-md-6">
                                        <div class="d-grid gap-2">
                                            <a href="{{ route('clients.show', $savingsAccount->client) }}" class="btn btn-primary">
                                                <i class="fas fa-user"></i> View Full Client Profile
                                            </a>
                                        </div>
                                    </div>
                                @else
                                    <div class="col-12">
                                        <div class="alert alert-warning">
                                            <strong>Client not found:</strong> This savings account is missing an associated client record.
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
@endsection