{{-- 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 {
        color: #fff;
        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;
    }
    /*.allocation-row {*/
    /*    background-color: #d4edda !important;*/
    /*}*/
    .withdrawal-row {
        background-color: #f8d7da !important;
    }
    .running-balance {
        font-weight: bold;
    }
    .branch-card {
        border-left: 4px solid;
        margin-bottom: 15px;
        transition: transform 0.2s;
    }
    .branch-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    .branch-card.branch-positive {
        border-left-color: #28a745;
    }
    .branch-card.branch-negative {
        border-left-color: #dc3545;
    }
    .branch-card.branch-zero {
        border-left-color: #6c757d;
    }
    .badge-management {
        background: #6f42c1;
        color: white;
    }
    @media print {
        .no-print {
            display: none;
        }
        .balance-card {
            background: #f0f0f0 !important;
            color: black !important;
            border: 1px solid #ddd;
        }
        .balance-card h3 {
            color: black !important;
        }
    }
</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">
            <div>
                <h1 class="page-title mb-0 text-primary">
                    Ledger Details: {{ $partner->full_name }}
                </h1>
                <small class="text-muted">
                    <i class="fas fa-id-card"></i> {{ $partner->partner_code ?? 'No Code' }}
                    @if(isset($partner->status))
                        | Status: <span class="badge {{ $partner->status == 'active' ? 'bg-success' : 'bg-danger' }}">{{ ucfirst($partner->status) }}</span>
                    @endif
                </small>
            </div>
            <div class="ms-auto no-print">
                <a href="{{ route('ledger.overview') }}" 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>

        <!-- Date Filter -->
        <div class="filter-card no-print">
            <form method="GET" action="{{ route('ledger.detail', $partner->id) }}" class="row g-3 align-items-end">
                <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">
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary flex-grow-1">
                            <i class="fas fa-filter"></i> Apply Filter
                        </button>
                        <a href="{{ route('ledger.detail', $partner->id) }}" class="btn btn-secondary">
                            <i class="fas fa-undo"></i> Reset
                        </a>
                    </div>
                </div>
            </form>
        </div>

        <!-- Summary Balance Cards -->
        <div class="row mb-3">
            <div class="col-md-4">
                <div class="balance-card" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);">
                    <p><i class="fas fa-hand-holding-usd"></i> Total Allocated</p>
                    <h3>KWD {{ number_format($totalAllocated, 2) }}</h3>
                    <small>{{ $transactions->where('transaction_type', 'Allocation')->count() }} allocations</small>
                </div>
            </div>
            <div class="col-md-4">
                <div class="balance-card" style="background: linear-gradient(135deg, #ee5a24 0%, #f0932b 100%);">
                    <p><i class="fas fa-money-bill-wave"></i> Total Withdrawn</p>
                    <h3>KWD {{ number_format($totalWithdrawn, 2) }}</h3>
                    <small>{{ $transactions->where('transaction_type', 'Withdrawal')->count() }} withdrawals</small>
                </div>
            </div>
            <div class="col-md-4">
                <div class="balance-card" style="background: linear-gradient(135deg, {{ $closingBalance >= 0 ? '#4a00e0' : '#dc3545' }} 0%, {{ $closingBalance >= 0 ? '#8e2de2' : '#ff6b6b' }} 100%);">
                    <p><i class="fas fa-balance-scale"></i> Closing Balance</p>
                    <h3>KWD {{ number_format($closingBalance, 2) }}</h3>
                    @if($closingBalance < 0)
                        <small style="color: #ffcccc;">Overdrawn by KWD {{ number_format(abs($closingBalance), 2) }}</small>
                    @elseif($closingBalance > 0)
                        <small style="color: #ccffcc;">Available: KWD {{ number_format($closingBalance, 2) }}</small>
                    @else
                        <small>Zero Balance</small>
                    @endif
                </div>
            </div>
        </div>

        <!-- Branch-wise Summary -->
        @if(!empty($branchDetails))
        <div class="card mb-3">
            <div class="card-header">
                <h4 class="card-title"><i class="fas fa-store"></i> Branch-wise Summary</h4>
            </div>
            <div class="card-body">
                <div class="row">
                    @foreach($branchDetails as $branchId => $branch)
                    <div class="col-md-6 col-lg-4 mb-3">
                        <div class="card branch-card branch-{{ $branch['balance'] > 0 ? 'positive' : ($branch['balance'] < 0 ? 'negative' : 'zero') }}">
                            <div class="card-body">
                                <h5 class="card-title">
                                    <i class="fas fa-store text-primary"></i>
                                    {{ $branch['branch_name'] }}
                                </h5>
                                <div class="row mt-2">
                                    <div class="col-6">
                                        <small class="text-muted">Allocations</small>
                                        <p class="text-success font-weight-bold mb-0">KWD {{ number_format($branch['allocations'], 2) }}</p>
                                        <small>({{ $branch['allocation_count'] ?? 0 }} transactions)</small>
                                    </div>
                                    <div class="col-6">
                                        <small class="text-muted">Withdrawals</small>
                                        <p class="text-danger font-weight-bold mb-0">KWD {{ number_format($branch['withdrawals'], 2) }}</p>
                                        <small>({{ $branch['withdrawal_count'] ?? 0 }} transactions)</small>
                                    </div>
                                </div>
                                <hr class="my-2">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="text-muted">Balance:</span>
                                    <span class="font-weight-bold {{ $branch['balance'] >= 0 ? 'text-success' : 'text-danger' }}">
                                        KWD {{ number_format($branch['balance'], 2) }}
                                        @if($branch['balance'] > 0)
                                            <i class="fas fa-arrow-up text-success ms-1"></i>
                                        @elseif($branch['balance'] < 0)
                                            <i class="fas fa-arrow-down text-danger ms-1"></i>
                                        @endif
                                    </span>
                                    <span class="badge {{ $branch['balance'] > 0 ? 'bg-success' : ($branch['balance'] < 0 ? 'bg-danger' : 'bg-secondary') }}">
                                        {{ $branch['balance'] > 0 ? 'Available' : ($branch['balance'] < 0 ? 'Overdrawn' : 'Zero') }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
        @endif

        <!-- Transactions Table -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-list-ul"></i> 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>Branch</th>
                                <th>Transaction Type</th>
                                <!--<th>Description</th>-->
                                <!--<th class="text-end">Allocation (Credit)</th>-->
                                <!--<th class="text-end">Withdrawal (Debit)</th>-->
                                <th class="text-end">Allocation</th>
                                <th class="text-end">Withdrawal</th>
                                <!--<th class="text-end">Balance</th>-->
                            </tr>
                        </thead>
                        <tbody>
                            @php
                                $runningBalance = 0;
                                $counter = 1;
                            @endphp
                            
                            @forelse($transactions as $transaction)
                                @php
                                    $isAllocation = $transaction->transaction_type == 'Allocation';
                                    $isWithdrawal = $transaction->transaction_type == 'Withdrawal';
                                    
                                    // Calculate running balance
                                    if ($isAllocation) {
                                        $runningBalance += $transaction->credit_amount;
                                    } elseif ($isWithdrawal) {
                                        $runningBalance -= $transaction->debit_amount;
                                    }
                                    
                                    $rowClass = $isAllocation ? 'allocation-row' : ($isWithdrawal ? 'withdrawal-row' : '');
                                @endphp
                                <tr class="{{ $rowClass }}">
                                    <td>{{ $counter++ }}</td>
                                    <td>{{ date('d-m-Y', strtotime($transaction->transaction_date)) }}</td>
                                    <td>
                                        <span class="badge bg-secondary">
                                            <i class="fas fa-store"></i> {{ $transaction->branch_name ?? 'N/A' }}
                                        </span>
                                    </td>
                                    <td>
                                        @if($isAllocation)
                                            <span class="badge bg-success"><i class="fas fa-plus-circle"></i> Allocation</span>
                                            @if(isset($transaction->is_management) && $transaction->is_management == 1)
                                                <!--<span class="badge badge-management"><i class="fas fa-user-tie"></i> Management</span>-->
                                            @endif
                                        @elseif($isWithdrawal)
                                            <span class="badge bg-danger"><i class="fas fa-minus-circle"></i> Withdrawal</span>
                                        @else
                                            <span class="badge bg-warning text-dark">{{ $transaction->transaction_type }}</span>
                                        @endif
                                    </td>
                                    <!--<td>-->
                                    <!--    @if($isAllocation)-->
                                    <!--        <div>-->
                                    <!--            <strong>Profit Allocation</strong>-->
                                    <!--            <div class="small text-muted">-->
                                    <!--                Month: {{ $transaction->financial_month ?? '' }}-->
                                    <!--                @if(isset($transaction->equity_percentage))-->
                                    <!--                    | Equity: {{ $transaction->equity_percentage }}%-->
                                    <!--                @endif-->
                                    <!--                @if(isset($transaction->net_profit))-->
                                    <!--                    | Net Profit: KWD {{ number_format($transaction->net_profit, 2) }}-->
                                    <!--                @endif-->
                                    <!--                @if(isset($transaction->management_fee) && $transaction->management_fee > 0)-->
                                    <!--                    | Fee: KWD {{ number_format($transaction->management_fee, 2) }}-->
                                    <!--                @endif-->
                                    <!--            </div>-->
                                    <!--        </div>-->
                                    <!--    @elseif($isWithdrawal)-->
                                    <!--        <div>-->
                                    <!--            {{ $transaction->description ?? 'Withdrawal' }}-->
                                    <!--            <div class="small text-muted">-->
                                    <!--                @if($transaction->payment_method)-->
                                    <!--                    <i class="fas fa-credit-card"></i> {{ $transaction->payment_method }}-->
                                    <!--                @endif-->
                                    <!--                @if($transaction->reference_number)-->
                                    <!--                    | Ref: <strong>{{ $transaction->reference_number }}</strong>-->
                                    <!--                @endif-->
                                    <!--            </div>-->
                                    <!--        </div>-->
                                    <!--    @else-->
                                    <!--        {{ $transaction->description ?? '-' }}-->
                                    <!--    @endif-->
                                    <!--</td>-->
                                    <td class="text-end text-success">
                                        @if($isAllocation)
                                            <strong style="font-size: 13px;">KWD {{ number_format($transaction->credit_amount, 2) }}</strong>
                                        @else
                                            -
                                        @endif
                                    </td>
                                    <td class="text-end text-danger">
                                        @if($isWithdrawal)
                                            <strong style="font-size: 13px;">KWD {{ number_format($transaction->debit_amount, 2) }}</strong>
                                        @else
                                            -
                                        @endif
                                    </td>
                                    <!--<td class="text-end running-balance">-->
                                    <!--    <span class="{{ $runningBalance >= 0 ? 'text-success' : 'text-danger' }}">-->
                                    <!--        <strong>KWD {{ number_format($runningBalance, 2) }}</strong>-->
                                    <!--        @if($runningBalance > 0)-->
                                    <!--            <i class="fas fa-arrow-up text-success ms-1"></i>-->
                                    <!--        @elseif($runningBalance < 0)-->
                                    <!--            <i class="fas fa-arrow-down text-danger ms-1"></i>-->
                                    <!--        @endif-->
                                    <!--    </span>-->
                                    <!--</td>-->
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="7" class="text-center py-4">
                                        <i class="fas fa-info-circle text-muted" style="font-size: 24px;"></i>
                                        <p class="mt-2">No transactions found for the selected period.</p>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                        @if($transactions->count() > 0)
                        <tfoot>
                            <tr class="table-active">
                                <th colspan="4" class="text-end">Total:</th>
                                <th class="text-end text-success">
                                    <strong style="font-size: 14px;">
                                        KWD {{ number_format($totalAllocated, 2) }}
                                    </strong>
                                </th>
                                <th class="text-end text-danger">
                                    <strong style="font-size: 14px;">
                                        KWD {{ number_format($totalWithdrawn, 2) }}
                                    </strong>
                                </th>
                            </tr>
                            <tr>
                                <th colspan="4" class="text-end">Closing Balance:</th>
                                <th colspan="2" class="text-center" style="background-color:#808390; color: #fff;">
                                    <strong style="font-size: 14px;">
                                        KWD {{ number_format($closingBalance, 2) }}
                                    </strong>
                                    <div class="small text-white" style="font-weight: normal;">(Allocation − Withdrawal)</div>
                                </th>
                            </tr>
                        </tfoot>
                        @endif
                    </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"><i class="fas fa-chart-pie"></i> Transaction Summary</h4>
                    </div>
                    <div class="card-body">
                        <div class="row text-center">
                            <div class="col-md-3">
                                <h5>Total Transactions</h5>
                                <h3 class="text-primary">{{ $transactions->count() }}</h3>
                            </div>
                            <div class="col-md-3">
                                <h5>Allocations</h5>
                                <h3 class="text-success">{{ $transactions->where('transaction_type', 'Allocation')->count() }}</h3>
                            </div>
                            <div class="col-md-3">
                                <h5>Withdrawals</h5>
                                <h3 class="text-danger">{{ $transactions->where('transaction_type', 'Withdrawal')->count() }}</h3>
                            </div>
                            <div class="col-md-3">
                                <h5>Branches</h5>
                                <h3 class="text-info">{{ count($branchDetails) }}</h3>
                            </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() {
        var hasData = $('#ledgerTable tbody tr').length > 0 && 
                  !$('#ledgerTable tbody tr td').hasClass('text-center');
    
        if (hasData) {
            $('#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"
                    }
                }
            });
        }

        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