{{-- resources/views/ledger/detail.blade.php --}}
@extends('layouts.main')

@section('title', 'Partner Ledger - ' . $partner->full_name)

@section('content')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">

<style>
    .balance-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
    }
    .balance-card h3 {
        margin: 0;
        font-size: 28px;
        font-weight: bold;
    }
    .balance-card p {
        margin: 5px 0 0;
        opacity: 0.9;
    }
    .filter-card {
        background: #f8f9fa;
        border-radius: 10px;
        padding: 15px;
        margin-bottom: 20px;
    }
    .table-ledger th {
        background-color: #f8f9fa;
    }
    .credit-row {
        background-color: #d4edda !important;
    }
    .debit-row {
        background-color: #f8d7da !important;
    }
    .running-balance {
        font-weight: bold;
    }
    .print-btn {
        margin-bottom: 15px;
    }
    @media print {
        .no-print {
            display: none;
        }
        .balance-card {
            background: #f0f0f0;
            color: black;
            border: 1px solid #ddd;
        }
    }
</style>

<div class="main-content app-content">
    <div class="container-fluid">
        <!-- Page Header -->
        <div class="d-md-flex d-block align-items-center justify-content-between page-header-breadcrumb">
            <h1 class="page-title mb-0 text-primary">
                Ledger Details: {{ $partner->full_name }}
            </h1>
            <!--<div class="ms-auto no-print">-->
            <!--    <a href="{{ url()->previous() }}" class="btn btn-secondary">-->
            <!--        <i class="fas fa-arrow-left"></i> Back-->
            <!--    </a>-->
            <!--    <button onclick="window.print()" class="btn btn-info">-->
            <!--        <i class="fas fa-print"></i> Print-->
            <!--    </button>-->
            <!--</div>-->
        </div>

        <!-- Partner Balance Cards -->
        <!-- Partner Balance Cards -->
        <div class="row">
            <div class="col-md-3">
                <div class="balance-card" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                    <p>Opening Balance</p>
                    <h3>{{ $transactions->isNotEmpty() ? number_format($openingBalance, 2) : number_format(0, 2) }}</h3>
                </div>
            </div>
            <div class="col-md-3">
                <div class="balance-card" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);">
                    <p>Total Allocated (Credit)</p>
                    <h3>{{ number_format($transactions->sum('credit_amount'), 2) }}</h3>
                </div>
            </div>
            <div class="col-md-3">
                <div class="balance-card" style="background: linear-gradient(135deg, #ee5a24 0%, #f0932b 100%);">
                    <p>Total Withdrawn (Debit)</p>
                    <h3>{{ number_format($transactions->sum('debit_amount'), 2) }}</h3>
                </div>
            </div>
            <div class="col-md-3">
                <div class="balance-card" style="background: linear-gradient(135deg, #4a00e0 0%, #8e2de2 100%);">
                    <p>Closing Balance</p>
                    <h3>{{ $transactions->isNotEmpty() ? number_format($transactions->last()->running_balance ?? 0, 2) : number_format(0, 2) }}</h3>
                </div>
            </div>
        </div>

        <!-- Date Filter -->
        <!-- <div class="filter-card no-print">
            <form method="GET" action="{{ route('ledger.detail', $partner->id) }}" class="row">
                <div class="col-md-4">
                    <label for="start_date" class="form-label">Start Date</label>
                    <input type="date" class="form-control" id="start_date" name="start_date" 
                           value="{{ $startDate }}" required>
                </div>
                <div class="col-md-4">
                    <label for="end_date" class="form-label">End Date</label>
                    <input type="date" class="form-control" id="end_date" name="end_date" 
                           value="{{ $endDate }}" required>
                </div>
                <div class="col-md-4">
                    <label class="form-label">&nbsp;</label>
                    <button type="submit" class="btn btn-primary d-block w-100">
                        <i class="fas fa-filter"></i> Apply Filter
                    </button>
                </div>
            </form>
        </div> -->

        <!-- Transactions Table -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Transaction Details</h3>
                <div class="card-actions">
                    <span class="badge bg-info">Period: {{ date('d-m-Y', strtotime($startDate)) }} to {{ date('d-m-Y', strtotime($endDate)) }}</span>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered table-hover" id="ledgerTable">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>Date</th>
                                <th>Transaction Type</th>
                                <th>Description</th>
                                <th class="text-end">Debit (Withdrawal)</th>
                                <th class="text-end">Credit (Allocation)</th>
                                <th class="text-end">Running Balance</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $runningBalance = 0;
                                $counter = 1;
                            @endphp
                            
                            @forelse($transactions as $transaction)
                                @php
                                    // Calculate running balance properly
                                    if ($loop->first) {
                                        // For first transaction, opening balance is running_balance - (credit - debit)
                                        $openingBalance = $transaction->running_balance - ($transaction->credit_amount - $transaction->debit_amount);
                                        $runningBalance = $openingBalance;
                                    }
                                    // Add current transaction effect
                                    $runningBalance = $runningBalance + $transaction->credit_amount - $transaction->debit_amount;
                                @endphp
                                <tr class="{{ $transaction->debit_amount > 0 ? 'debit-row' : ($transaction->credit_amount > 0 ? 'credit-row' : '') }}">
                                    <td>{{ $counter++ }}</td>
                                    <td>{{ date('d-m-Y', strtotime($transaction->transaction_date)) }}</td>
                                    <td>
                                        @if($transaction->transaction_type == 'Allocation')
                                            <span class="badge bg-success">Allocation</span>
                                        @elseif($transaction->transaction_type == 'Withdrawal')
                                            <span class="badge bg-danger">Withdrawal</span>
                                        @elseif($transaction->transaction_type == 'Adjustment')
                                            <span class="badge bg-warning text-dark">Adjustment</span>
                                        @else
                                            <span class="badge bg-secondary">{{ $transaction->transaction_type }}</span>
                                        @endif
                                    </td>
                                    <td>{{ $transaction->description ?? '-' }}</td>
                                    <td class="text-end text-danger">
                                        @if($transaction->debit_amount > 0)
                                            {{ number_format($transaction->debit_amount, 2) }}
                                        @else
                                            -
                                        @endif
                                    </td>
                                    <td class="text-end text-success">
                                        @if($transaction->credit_amount > 0)
                                            {{ number_format($transaction->credit_amount, 2) }}
                                        @else
                                            -
                                        @endif
                                    </td>
                                    <td class="text-end running-balance">
                                        {{ number_format($runningBalance, 2) }}
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-center">No transactions found for the selected period.</td>
                                </tr>
                            @endforelse
                        </tbody>
                        <tfoot>
                            <tr>
                                <th colspan="4" class="text-end">Totals:</th>
                                <th class="text-end text-danger">{{ number_format($transactions->sum('debit_amount'), 2) }}</th>
                                <th class="text-end text-success">{{ number_format($transactions->sum('credit_amount'), 2) }}</th>
                                <th class="text-end">{{ number_format($runningBalance, 2) }}</th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>

        <!-- Summary Statistics -->
        <div class="row mt-3">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Transaction Summary</h4>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="text-center">
                                    <h5>Total Transactions</h5>
                                    <h3>{{ $transactions->count() }}</h3>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="text-center">
                                    <h5>Allocations</h5>
                                    <h3 class="text-success">{{ $transactions->where('transaction_type', 'Allocation')->count() }}</h3>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="text-center">
                                    <h5>Withdrawals</h5>
                                    <h3 class="text-danger">{{ $transactions->where('transaction_type', 'Withdrawal')->count() }}</h3>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="text-center">
                                    <h5>Adjustments</h5>
                                    <h3 class="text-warning">{{ $transactions->where('transaction_type', 'Adjustment')->count() }}</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>

<script>
    $(document).ready(function() {
        // Initialize DataTable
        var hasData = $('#ledgerTable tbody tr').length > 0 && 
                  !$('#ledgerTable tbody tr td').hasClass('text-center');
    
        if (hasData) {
            // Initialize DataTable only if there are actual data rows
            $('#ledgerTable').DataTable({
                pageLength: 25,
                ordering: true,
                order: [[1, 'asc']],
                language: {
                    search: "Search:",
                    lengthMenu: "Show _MENU_ entries",
                    info: "Showing _START_ to _END_ of _TOTAL_ entries",
                    paginate: {
                        first: "First",
                        last: "Last",
                        next: "Next",
                        previous: "Previous"
                    }
                }
            });
        } else {
            // If no data, just style the table without DataTables features
            $('#ledgerTable').addClass('table');
        }

        toastr.options = {
            "closeButton": true,
            "progressBar": true,
            "positionClass": "toast-top-right",
            "timeOut": "4000"
        }

        @if(session('success'))
            toastr.success("{{ session('success') }}");
        @endif

        @if(session('error'))
            toastr.error("{{ session('error') }}");
        @endif
    });
</script>
@endsection