@extends('layouts.app')

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

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h3 class="card-title">
                        <i class="fas fa-university"></i> Bank Account Details
                    </h3>
                    <div>
                        <a href="{{ route('bank-information.edit', $bankAccountInfo) }}" class="btn btn-warning">
                            <i class="fas fa-edit"></i> Edit
                        </a>
                        <a href="{{ route('bank-information.create-transaction', $bankAccountInfo) }}" class="btn btn-success">
                            <i class="fas fa-plus"></i> Add Transaction
                        </a>
                        <a href="{{ route('bank-information.index') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left"></i> Back to List
                        </a>
                    </div>
                </div>
                
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header" data-bs-toggle="collapse" data-bs-target="#bankInfo" aria-expanded="true" aria-controls="bankInfo" style="cursor: pointer;">
                                    <h5 class="mb-0 d-flex justify-content-between align-items-center">
                                        <span><i class="fas fa-university me-2"></i>Bank Account Information</span>
                                        <i class="fas fa-chevron-down"></i>
                                    </h5>
                                </div>
                                <div class="collapse" id="bankInfo">
                                    <div class="card-body">
                                        <table class="table table-borderless">
                                            <tr>
                                                <td><strong>ID:</strong></td>
                                                <td>{{ $bankAccountInfo->id }}</td>
                                            </tr>
                                            <tr>
                                                <td><strong>Bank Name:</strong></td>
                                                <td>{{ $bankAccountInfo->bank_name }}</td>
                                            </tr>
                                            <tr>
                                                <td><strong>Account Number:</strong></td>
                                                <td>{{ $bankAccountInfo->account_number }}</td>
                                            </tr>
                                            <tr>
                                                <td><strong>Account Type:</strong></td>
                                                <td>{{ $bankAccountInfo->account_type ?? 'N/A' }}</td>
                                            </tr>
                                            <tr>
                                                <td><strong>Branch Name:</strong></td>
                                                <td>{{ $bankAccountInfo->branch_name ?? 'N/A' }}</td>
                                            </tr>
                                            <tr>
                                                <td><strong>Routing Number:</strong></td>
                                                <td>{{ $bankAccountInfo->routing_number ?? 'N/A' }}</td>
                                            </tr>
                                            <tr>
                                                <td><strong>Status:</strong></td>
                                                <td>
                                                    @if($bankAccountInfo->is_active)
                                                        <span class="badge badge-success">Active</span>
                                                    @else
                                                        <span class="badge badge-secondary">Inactive</span>
                                                    @endif
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="card">
                                <div class="card-header" data-bs-toggle="collapse" data-bs-target="#accountInfo" aria-expanded="true" aria-controls="accountInfo" style="cursor: pointer;">
                                    <h5 class="mb-0 d-flex justify-content-between align-items-center">
                                        <span><i class="fas fa-user me-2"></i>Account Holder & Balance Information</span>
                                        <i class="fas fa-chevron-down"></i>
                                    </h5>
                                </div>
                                <div class="collapse" id="accountInfo">
                                    <div class="card-body">
                                        <table class="table table-borderless">
                                            <tr>
                                                <td><strong>Account Holder:</strong></td>
                                                <td>{{ $bankAccountInfo->accountHolder->name }}</td>
                                            </tr>
                                            <tr>
                                                <td><strong>Contact Person:</strong></td>
                                                <td>{{ $bankAccountInfo->accountHolder->contact_person ?? 'N/A' }}</td>
                                            </tr>
                                            <tr>
                                                <td><strong>Phone:</strong></td>
                                                <td>{{ $bankAccountInfo->accountHolder->phone ?? 'N/A' }}</td>
                                            </tr>
                                            <tr>
                                                <td><strong>Email:</strong></td>
                                                <td>{{ $bankAccountInfo->accountHolder->email ?? 'N/A' }}</td>
                                            </tr>
                                            <tr>
                                                <td><strong>Opening Balance:</strong></td>
                                                <td><strong class="text-info">৳{{ number_format($bankAccountInfo->opening_balance, 2) }}</strong></td>
                                            </tr>
                                            <tr>
                                                <td><strong>Current Balance:</strong></td>
                                                <td><strong class="text-success">৳{{ number_format($bankAccountInfo->current_balance, 2) }}</strong></td>
                                            </tr>
                                            <tr>
                                                <td><strong>Balance Change:</strong></td>
                                                <td>
                                                    @php
                                                        $change = $bankAccountInfo->current_balance - $bankAccountInfo->opening_balance;
                                                    @endphp
                                                    @if($change > 0)
                                                        <span class="text-success">+৳{{ number_format($change, 2) }}</span>
                                                    @elseif($change < 0)
                                                        <span class="text-danger">-৳{{ number_format(abs($change), 2) }}</span>
                                                    @else
                                                        <span class="text-muted">৳0.00</span>
                                                    @endif
                                                </td>
                                            </tr>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <hr>
                    <h5>Transaction Statistics</h5>
                    <div class="row mb-4">
                        <div class="col-md-2">
                            <div class="card bg-primary text-white">
                                <div class="card-body text-center py-2">
                                    <h5 class="mb-1">{{ $transactionStats['total_transactions'] }}</h5>
                                    <small class="mb-0">Total Transactions</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="card bg-info text-white">
                                <div class="card-body text-center py-2">
                                    <h5 class="mb-1">৳{{ number_format($bankAccountInfo->opening_balance, 2) }}</h5>
                                    <small class="mb-0">Opening Balance</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="card bg-success text-white">
                                <div class="card-body text-center py-2">
                                    <h5 class="mb-1">৳{{ number_format($transactionStats['total_deposits'], 2) }}</h5>
                                    <small class="mb-0">Total Deposits</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="card bg-danger text-white">
                                <div class="card-body text-center py-2">
                                    <h5 class="mb-1">৳{{ number_format($transactionStats['total_withdrawals'], 2) }}</h5>
                                    <small class="mb-0">Total Withdrawals</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="card bg-warning text-white">
                                <div class="card-body text-center py-2">
                                    <h5 class="mb-1">৳{{ number_format($transactionStats['calculated_current_balance'], 2) }}</h5>
                                    <small class="mb-0">Current Balance</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="card bg-secondary text-white">
                                <div class="card-body text-center py-2">
                                    <h5 class="mb-1">
                                        @if($transactionStats['last_transaction'])
                                            {{ $transactionStats['last_transaction']->transaction_date->format('M d, Y') }}
                                        @else
                                            N/A
                                        @endif
                                    </h5>
                                    <small class="mb-0">Last Transaction</small>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    @if($bankAccountInfo->bankTransactions->count() > 0)
                        <h5>Recent Transactions (Last 20)</h5>
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped">
                                <thead class="thead-dark">
                                    <tr>
                                        <th>Date</th>
                                        <th>Type</th>
                                        <th>Invoice Information</th>
                                        <th>Description</th>
                                        <th>Deposit</th>
                                        <th>Withdraw</th>
                                        <th>Running Balance</th>
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                        // Get ALL transactions in DESC order (newest first) for display
                                        $allTransactions = $bankAccountInfo->bankTransactions()->orderBy('transaction_date', 'desc')->orderBy('id', 'desc')->get();
                                        
                                        // Get transactions in ASC order (oldest first) for running balance calculation
                                        $transactionsForCalculation = $allTransactions->sortBy(function($transaction) {
                                            return $transaction->transaction_date->format('Y-m-d') . '-' . str_pad($transaction->id, 10, '0', STR_PAD_LEFT);
                                        });
                                        
                                        $runningBalances = [];
                                        $runningBalance = $bankAccountInfo->opening_balance ?? 0;
                                        
                                        // Calculate running balance for each transaction (oldest to newest)
                                        foreach($transactionsForCalculation as $trans) {
                                            // Add deposit amount
                                            $runningBalance += $trans->deposit_balance;
                                            
                                            // Subtract withdrawal amount
                                            $runningBalance -= $trans->withdraw_balance;
                                            
                                            $runningBalances[$trans->id] = $runningBalance;
                                        }
                                        
                                        // Get only last 20 transactions for display
                                        $displayTransactions = $allTransactions->take(20);
                                    @endphp
                                    @foreach($displayTransactions as $transaction)
                                        <tr>
                                            <td>{{ $transaction->transaction_date->format('M d, Y') }}</td>
                                            <td>
                                                <span class="badge badge-{{ $transaction->isDeposit() ? 'success' : 'warning' }}">
                                                    {{ $transaction->transaction_type_label }}
                                                </span>
                                            </td>
                                            <td>
                                                @if($transaction->salesInvoice)
                                                    <div class="small">
                                                        <strong class="text-primary">Invoice: {{ $transaction->salesInvoice->invoice_no }}</strong>
                                                        <br><span class="text-muted">Customer: {{ $transaction->salesInvoice->customer_name ?? ($transaction->salesInvoice->customer ? $transaction->salesInvoice->customer->name : 'N/A') }}</span>
                                                        <br><span class="text-success">Amount: ৳{{ number_format($transaction->salesInvoice->invoice_amount, 2) }}</span>
                                                        <br><span class="text-warning">Due: ৳{{ number_format($transaction->salesInvoice->due_amount, 2) }}</span>
                                                    </div>
                                                @else
                                                    <span class="text-muted">-</span>
                                                @endif
                                            </td>
                                            <td>{{ $transaction->description ?? 'N/A' }}</td>
                                            <td>
                                                <strong class="text-success">৳{{ number_format($transaction->deposit_balance, 2) }}</strong>
                                            </td>
                                            <td>
                                                <strong class="text-danger">৳{{ number_format($transaction->withdraw_balance, 2) }}</strong>
                                            </td>
                                            <td>
                                                <strong class="text-primary">৳{{ number_format($runningBalances[$transaction->id] ?? 0, 2) }}</strong>
                                            </td>
                                            <td>
                                                <span class="badge {{ $transaction->status_badge_class }}">
                                                    {{ ucfirst($transaction->status) }}
                                                </span>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                        
                        <div class="text-center">
                            <a href="{{ route('bank-information.transactions', $bankAccountInfo) }}" class="btn btn-primary">
                                <i class="fas fa-list"></i> View All Transactions
                            </a>
                        </div>
                    @else
                        <div class="text-center py-3">
                            <i class="fas fa-exchange-alt fa-2x text-muted mb-2"></i>
                            <p class="text-muted">No transactions found for this bank account.</p>
                            <a href="{{ route('bank-information.create-transaction', $bankAccountInfo) }}" class="btn btn-success">
                                <i class="fas fa-plus"></i> Add First Transaction
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

<style>
    .collapse {
        transition: height 0.35s ease;
    }
    
    .collapse:not(.show) {
        display: none;
    }
    
    .collapse.show {
        display: block;
    }
    
    .fa-chevron-down {
        transition: transform 0.3s ease;
    }
    
    .card-header {
        transition: background-color 0.2s ease;
    }
    
    .card-header:hover {
        background-color: #f8f9fa;
    }
</style>

<script>
    // Handle collapse icon rotation and functionality
    document.addEventListener('DOMContentLoaded', function() {
        const collapseElements = document.querySelectorAll('[data-bs-toggle="collapse"]');
        
        collapseElements.forEach(function(element) {
            element.addEventListener('click', function() {
                const target = document.querySelector(this.getAttribute('data-bs-target'));
                const icon = this.querySelector('.fa-chevron-down');
                
                // Toggle the collapse
                if (target.classList.contains('show')) {
                    target.classList.remove('show');
                    icon.style.transform = 'rotate(0deg)';
                } else {
                    target.classList.add('show');
                    icon.style.transform = 'rotate(180deg)';
                }
            });
        });
    });
</script>