@extends('layouts.app')

@section('title', 'Daily Transaction 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-calendar-day"></i> Daily Transaction Details
                    </h3>
                    <button onclick="history.back()" class="btn btn-secondary">
                        <i class="fas fa-arrow-left"></i> Back
                    </button>
                </div>
                
                <div class="card-body">
                    <!-- Bank Information -->
                    <div class="card mb-4 border-primary">
                        <div class="card-header bg-primary text-white">
                            <h5 class="mb-0">
                                <i class="fas fa-university"></i> Bank Information
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <p><strong>Bank Name:</strong> {{ $bankAccount->bank_name }}</p>
                                    <p><strong>Account Number:</strong> {{ $bankAccount->account_number }}</p>
                                    @if($bankAccount->account_name)
                                        <p><strong>Account Name:</strong> {{ $bankAccount->account_name }}</p>
                                    @endif
                                </div>
                                <div class="col-md-6">
                                    <p><strong>Date Range:</strong> {{ $dateFrom->format('d M Y') }} to {{ $dateTo->format('d M Y') }}</p>
                                    @if($bankAccount->branch_name)
                                        <p><strong>Branch:</strong> {{ $bankAccount->branch_name }}</p>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Summary Cards -->
                    <div class="row mb-4">
                        <div class="col-md-4">
                            <div class="card bg-success text-white">
                                <div class="card-body text-center">
                                    <h4 class="mb-1">৳{{ number_format($totalDeposit, 2) }}</h4>
                                    <small>Total Deposit</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card bg-danger text-white">
                                <div class="card-body text-center">
                                    <h4 class="mb-1">৳{{ number_format($totalWithdrawal, 2) }}</h4>
                                    <small>Total Withdrawal</small>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card bg-info text-white">
                                <div class="card-body text-center">
                                    <h4 class="mb-1">৳{{ number_format($totalDeposit - $totalWithdrawal, 2) }}</h4>
                                    <small>Net Balance</small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Approval Actions -->
                    <div class="card mb-3">
                        <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">
                                <i class="fas fa-check-circle"></i> Approval Actions
                            </h5>
                            <div>
                                <button type="button" class="btn btn-sm btn-light" onclick="selectAllTransactions()">
                                    <i class="fas fa-check-square"></i> Select All
                                </button>
                                <button type="button" class="btn btn-sm btn-light" onclick="deselectAllTransactions()">
                                    <i class="fas fa-square"></i> Deselect All
                                </button>
                                <button type="button" class="btn btn-sm btn-success" id="approveSelectedBtn" disabled onclick="submitApprovalForm()">
                                    <i class="fas fa-check"></i> Approve Selected
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Approval Form (hidden, checkboxes will be inside) -->
                    <form id="approvalForm" action="{{ route('bank-information.transactions.approve-multiple') }}" method="POST" style="display: none;">
                        @csrf
                    </form>

                    <!-- Daily Transactions -->
                    @if(count($transactionsByDate) > 0)
                        @foreach($transactionsByDate as $date => $dateTransactions)
                            <div class="card mb-3">
                                <div class="card-header bg-secondary text-white">
                                    <h5 class="mb-0">
                                        <i class="fas fa-calendar"></i> {{ \Carbon\Carbon::parse($date)->format('d M Y') }}
                                        <small class="float-right">
                                            Transactions: {{ count($dateTransactions) }}
                                        </small>
                                    </h5>
                                </div>
                                <div class="card-body p-0">
                                    <div class="table-responsive">
                                        <table class="table table-bordered table-striped mb-0">
                                            <thead class="thead-light">
                                                <tr>
                                                    <th style="width: 3%;">
                                                        <input type="checkbox" class="select-all-date" data-date="{{ $date }}" onchange="toggleDateTransactions('{{ $date }}', this.checked)">
                                                    </th>
                                                    <th style="width: 4%;">#</th>
                                                    <th style="width: 12%;">Date</th>
                                                    <th style="width: 12%;">Type</th>
                                                    <th style="width: 20%;">Description</th>
                                                    <th style="width: 12%;" class="text-right">Deposit</th>
                                                    <th style="width: 12%;" class="text-right">Withdrawal</th>
                                                    <th style="width: 10%;">Status</th>
                                                    <th style="width: 15%;">Action</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach($dateTransactions as $index => $transaction)
                                                    @php
                                                        $isUnapproved = is_null($transaction->approved_by) || is_null($transaction->approved_at);
                                                        $isPending = $transaction->status == 'pending';
                                                        $isWithdrawal = $transaction->transaction_type == 'withdrawal' || $transaction->withdraw_balance > 0;
                                                    @endphp
                                                    <tr class="{{ $isUnapproved && !$isWithdrawal ? 'table-warning' : '' }}">
                                                        <td>
                                                            @if($isUnapproved && !$isWithdrawal)
                                                                <input type="checkbox" form="approvalForm" name="transaction_ids[]" value="{{ $transaction->id }}" 
                                                                       class="transaction-checkbox" data-date="{{ $date }}" 
                                                                       onchange="updateApproveButton()">
                                                            @endif
                                                        </td>
                                                        <td>{{ $index + 1 }}</td>
                                                        <td>{{ $transaction->transaction_date->format('d M Y') }}</td>
                                                        <td>
                                                            <span class="badge badge-{{ $transaction->transaction_type == 'deposit' ? 'success' : 'danger' }}">
                                                                {{ ucfirst($transaction->transaction_type) }}
                                                            </span>
                                                        </td>
                                                        <td>{{ $transaction->description ?? '—' }}</td>
                                                        <td class="text-right text-success">
                                                            @if($transaction->deposit_balance > 0)
                                                                <strong>৳{{ number_format($transaction->deposit_balance, 2) }}</strong>
                                                            @else
                                                                —
                                                            @endif
                                                        </td>
                                                        <td class="text-right text-danger">
                                                            @if($transaction->withdraw_balance > 0)
                                                                <strong>৳{{ number_format($transaction->withdraw_balance, 2) }}</strong>
                                                            @else
                                                                —
                                                            @endif
                                                        </td>
                                                        <td>
                                                            <span class="badge badge-{{ $transaction->status == 'completed' ? 'success' : ($transaction->status == 'pending' ? 'warning' : 'danger') }}">
                                                                {{ ucfirst($transaction->status) }}
                                                            </span>
                                                            @if($transaction->approved_by && $transaction->approved_at)
                                                                <br><small class="text-muted">
                                                                    Approved by {{ $transaction->approvedBy->name ?? 'N/A' }}<br>
                                                                    {{ $transaction->approved_at->format('d M Y, h:i A') }}
                                                                </small>
                                                            @endif
                                                        </td>
                                                        <td>
                                                            @if($isWithdrawal)
                                                                <span class="text-muted">—</span>
                                                            @elseif($isUnapproved)
                                                                <div>
                                                                    <form action="{{ route('bank-information.transactions.approve', $transaction->id) }}" method="POST" style="display: inline;">
                                                                        @csrf
                                                                        <button type="submit" class="btn btn-sm btn-success {{ !$isPending ? 'mb-1' : '' }}" title="Approve">
                                                                            <i class="fas fa-check"></i> Approve
                                                                        </button>
                                                                    </form>
                                                                    @if(!$isPending)
                                                                        <form action="{{ route('bank-information.transactions.pending', $transaction->id) }}" method="POST" style="display: inline;">
                                                                            @csrf
                                                                            <button type="submit" class="btn btn-sm btn-warning" title="Set Pending">
                                                                                <i class="fas fa-clock"></i> Pending
                                                                            </button>
                                                                        </form>
                                                                    @endif
                                                                </div>
                                                            @else
                                                                <div>
                                                                    <span class="text-success mb-1 d-block">
                                                                        <i class="fas fa-check-circle"></i> Approved
                                                                    </span>
                                                                    <form action="{{ route('bank-information.transactions.unapprove', $transaction->id) }}" method="POST" style="display: inline;" onsubmit="return confirm('Are you sure you want to unapprove this transaction?');">
                                                                        @csrf
                                                                        <button type="submit" class="btn btn-sm btn-warning" title="Unapprove">
                                                                            <i class="fas fa-times"></i> Unapprove
                                                                        </button>
                                                                    </form>
                                                                </div>
                                                            @endif
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                            <tfoot class="table-info">
                                                <tr>
                                                    <th colspan="5"><strong>Total for {{ \Carbon\Carbon::parse($date)->format('d M Y') }}</strong></th>
                                                    <th class="text-right">
                                                        <strong class="text-success">৳{{ number_format(collect($dateTransactions)->sum('deposit_balance'), 2) }}</strong>
                                                    </th>
                                                    <th class="text-right">
                                                        <strong class="text-danger">৳{{ number_format(collect($dateTransactions)->sum('withdraw_balance'), 2) }}</strong>
                                                    </th>
                                                    <th colspan="2"></th>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <div class="alert alert-info text-center">
                            <i class="fas fa-info-circle"></i> No transactions found for the selected date range.
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
function updateApproveButton() {
    const checkedBoxes = document.querySelectorAll('.transaction-checkbox:checked');
    const approveBtn = document.getElementById('approveSelectedBtn');
    
    if (checkedBoxes.length > 0) {
        approveBtn.disabled = false;
        approveBtn.textContent = `Approve Selected (${checkedBoxes.length})`;
    } else {
        approveBtn.disabled = true;
        approveBtn.innerHTML = '<i class="fas fa-check"></i> Approve Selected';
    }
}

function selectAllTransactions() {
    document.querySelectorAll('.transaction-checkbox').forEach(checkbox => {
        checkbox.checked = true;
    });
    document.querySelectorAll('.select-all-date').forEach(checkbox => {
        checkbox.checked = true;
    });
    updateApproveButton();
}

function deselectAllTransactions() {
    document.querySelectorAll('.transaction-checkbox').forEach(checkbox => {
        checkbox.checked = false;
    });
    document.querySelectorAll('.select-all-date').forEach(checkbox => {
        checkbox.checked = false;
    });
    updateApproveButton();
}

function toggleDateTransactions(date, checked) {
    document.querySelectorAll(`.transaction-checkbox[data-date="${date}"]`).forEach(checkbox => {
        checkbox.checked = checked;
    });
    updateApproveButton();
}

function submitApprovalForm() {
    const checkedBoxes = document.querySelectorAll('.transaction-checkbox:checked');
    if (checkedBoxes.length === 0) {
        alert('Please select at least one transaction to approve.');
        return false;
    }
    
    if (confirm(`Are you sure you want to approve ${checkedBoxes.length} transaction(s)?`)) {
        document.getElementById('approvalForm').submit();
    }
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    updateApproveButton();
});
</script>
@endpush
@endsection