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

@section('title', 'Partner Ledger Overview')

@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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

<style>
    /* Stats Cards */
    .stats-card {
        background: white;
        border-radius: 15px;
        padding: 20px;
        margin-bottom: 25px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.08);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border-left: 4px solid;
    }
    .stats-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 20px rgba(0,0,0,0.12);
    }
    .stats-card .stats-icon {
        font-size: 2.5rem;
        opacity: 0.7;
        margin-bottom: 10px;
    }
    .stats-card .stats-label {
        font-size: 14px;
        color: #6c757d;
        margin-bottom: 5px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .stats-card .stats-value {
        font-size: 28px;
        font-weight: bold;
        margin-bottom: 0;
    }
    .stats-card .stats-sub {
        font-size: 12px;
        color: #6c757d;
        margin-top: 5px;
    }
    
    /* Table Styles */
    .partner-table {
        padding: 30px;
        background: white;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 2px 10px rgba(0,0,0,0.08);
        border: 1px solid #edf2f7;
    }
    .partner-table thead th {
        background: #f8fafc;
        color: #1e293b;
        font-weight: 600;
        border-bottom: 2px solid #e2e8f0;
        padding: 16px 15px;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }
    .partner-table tbody tr {
        transition: background-color 0.15s ease;
    }
    .partner-table tbody tr:hover {
        background-color: #f8fafc;
    }
    .partner-table tbody td {
        padding: 14px 15px;
        vertical-align: middle;
        border-bottom: 1px solid #f1f5f9;
        font-size: 14px;
    }
    
    /* Partner Name Link */
    .partner-link {
        color: #0f172a;
        font-weight: 600;
        text-decoration: none;
        transition: color 0.2s ease;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .partner-link:hover {
        color: #3b82f6;
    }
    .partner-link i {
        font-size: 13px;
        opacity: 0;
        transition: opacity 0.2s ease;
    }
    .partner-link:hover i {
        opacity: 1;
    }
    .partner-code {
        font-weight: 400;
        color: #94a3b8;
        font-size: 0.8rem;
    }
    
    /* Balance Amounts */
    .amount-positive {
        color: #16a34a;
        font-weight: 600;
    }
    .amount-negative {
        color: #dc2626;
        font-weight: 600;
    }
    .amount-neutral {
        color: #64748b;
        font-weight: 500;
    }
    .balance-badge {
        font-size: 11px;
        padding: 3px 8px;
        border-radius: 100px;
        margin-left: 6px;
        font-weight: 500;
    }
    .badge-credit {
        background: #dcfce7;
        color: #16a34a;
    }
    .badge-debit {
        background: #fee2e2;
        color: #dc2626;
    }
    .badge-zero {
        background: #f1f5f9;
        color: #64748b;
    }
    
    /* Progress Bar */
    .progress-wrapper {
        margin-top: 6px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .progress {
        flex: 1;
        height: 4px;
        border-radius: 4px;
        background: #f1f5f9;
    }
    .progress-bar {
        background: #3b82f6;
        border-radius: 4px;
    }
    .progress-label {
        font-size: 11px;
        color: #94a3b8;
        white-space: nowrap;
    }
    
    /* Search & Toolbar */
    .toolbar {
        padding: 16px 20px;
        background: #f8fafc;
        border-bottom: 1px solid #e9edf2;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 12px;
    }
    .search-box {
        position: relative;
        flex: 1;
        max-width: 320px;
    }
    .search-box i {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: #94a3b8;
        font-size: 14px;
    }
    .search-box input {
        padding-left: 38px;
        height: 40px;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        background: white;
        font-size: 14px;
        transition: border-color 0.2s, box-shadow 0.2s;
    }
    .search-box input:focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
        outline: none;
    }
    .toolbar-hint {
        color: #94a3b8;
        font-size: 13px;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .toolbar-hint i {
        font-size: 14px;
    }
    
    /* Total Row */
    .total-row {
        background: #f8fafc;
        font-weight: 600;
        border-top: 2px solid #e2e8f0;
    }
    .total-row td {
        padding: 14px 15px !important;
        font-size: 14px;
    }
    .total-row .total-label {
        color: #1e293b;
    }
    .total-row .total-value {
        font-weight: 700;
    }
    
    /* Action Button */
    .btn-view {
        border-radius: 100px;
        padding: 4px 16px;
        font-size: 13px;
        font-weight: 500;
        border: 1px solid #e2e8f0;
        color: #475569;
        background: white;
        transition: all 0.2s;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .btn-view:hover {
        background: #3b82f6;
        border-color: #3b82f6;
        color: white;
    }
    .btn-view i {
        font-size: 12px;
    }
    
    /* Empty State */
    .empty-state {
        text-align: center;
        padding: 60px 20px;
    }
    .empty-state i {
        font-size: 56px;
        color: #cbd5e1;
        margin-bottom: 16px;
    }
    .empty-state h4 {
        color: #1e293b;
        margin-bottom: 6px;
        font-weight: 600;
    }
    .empty-state p {
        color: #94a3b8;
        margin-bottom: 0;
    }
    
    /* Responsive */
    @media (max-width: 768px) {
        .stats-card .stats-value {
            font-size: 22px;
        }
        .partner-table thead th {
            font-size: 11px;
            padding: 10px 8px;
        }
        .partner-table tbody td {
            padding: 10px 8px;
            font-size: 13px;
        }
        .toolbar {
            flex-direction: column;
            align-items: stretch;
            gap: 10px;
        }
        .search-box {
            max-width: 100%;
        }
        .toolbar-hint {
            justify-content: center;
            font-size: 12px;
        }
    }
    
    /* Print */
    @media print {
        .no-print, .dataTables_filter, .dataTables_length, .dataTables_paginate {
            display: none !important;
        }
        .partner-table {
            box-shadow: none;
            border: 1px solid #ddd;
        }
        .stats-card {
            break-inside: avoid;
            page-break-inside: avoid;
        }
    }

    /* dataTables overrides */
    .dataTables_wrapper .dataTables_length select {
        border-radius: 6px;
        border: 1px solid #e2e8f0;
        padding: 4px 8px;
        font-size: 13px;
    }
    .dataTables_wrapper .dataTables_info {
        padding: 12px 0 12px 20px;
        font-size: 13px;
        color: #64748b;
    }
    .dataTables_wrapper .dataTables_paginate {
        padding: 12px 20px 12px 0;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        border-radius: 6px !important;
        border: 1px solid #e2e8f0 !important;
        background: white !important;
        color: #1e293b !important;
        padding: 4px 12px !important;
        margin: 0 2px !important;
        font-size: 13px !important;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button.current {
        background: #3b82f6 !important;
        border-color: #3b82f6 !important;
        color: white !important;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        background: #f1f5f9 !important;
        border-color: #cbd5e1 !important;
        color: #0f172a !important;
    }
    .dataTables_wrapper .dataTables_filter {
        display: none;
    }
    div#partnerTable_length {
        display: none;
    }
</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-1 text-primary" style="font-weight: 600;">Partner Ledger Overview</h1>
                <p class="text-muted mb-0" style="font-size: 14px;">Manage and track partner financial summaries</p>
            </div>
        </div>

        @php
            $balances = collect($partnerBalances);
    
            $totalPartners = $balances->count();
            $totalAllocated = $balances->sum('total_allocated');
            $totalWithdrawn = $balances->sum('total_withdrawn');
            $totalOutstanding = $balances->sum('closing_balance');
            
            $creditors = $balances->filter(function($balance) {
                return $balance->closing_balance > 0;
            })->count();
            
            $debtors = $balances->filter(function($balance) {
                return $balance->closing_balance < 0;
            })->count();
            
            $zeroBalance = $balances->filter(function($balance) {
                return $balance->closing_balance == 0;
            })->count();
            $totalPayable = $balances->where('closing_balance', '>', 0)->sum('closing_balance');
            $totalReceivable = $balances->where('closing_balance', '<', 0)->sum('closing_balance');
        @endphp

        <!-- Statistics Cards -->
        <div class="row mb-4">
            <div class="col-md-4 col-sm-6">
                <div class="stats-card" style="border-left-color: #3b82f6;">
                    <div class="stats-icon">
                        <i class="fas fa-users" style="color: #3b82f6;"></i>
                    </div>
                    <div class="stats-label">Total Partners</div>
                    <div class="stats-value" style="color: #0f172a;">{{ $totalPartners }}</div>
                </div>
            </div>
            <div class="col-md-4 col-sm-6">
                <div class="stats-card" style="border-left-color: #ef4444;">
                    <div class="stats-icon">
                        <i class="fas fa-money-bill-wave" style="color: #ef4444;"></i>
                    </div>
                    <div class="stats-label">Total Withdrawn</div>
                    <div class="stats-value" style="color: #ef4444;">${{ number_format($totalWithdrawn, 2) }}</div>
                </div>
            </div>
            <!-- <div class="col-md-4 col-sm-6">
                <div class="stats-card" style="border-left-color: #f59e0b;">
                    <div class="stats-icon">
                        <i class="fas fa-coins" style="color: #f59e0b;"></i>
                    </div>
                    <div class="stats-label">Total Outstanding</div>
                    <div class="stats-value {{ $totalOutstanding >= 0 ? 'text-success' : 'text-danger' }}">
                        ${{ number_format(abs($totalOutstanding), 2) }}
                    </div>
                </div>
            </div> -->
            <div class="col-md-4 col-sm-6">
                <div class="stats-card" style="border-left-color: #8b5cf6;">
                    <div class="stats-icon">
                        <i class="fas fa-balance-scale" style="color: #8b5cf6;"></i>
                    </div>
                    <div class="stats-label">Net Position</div>
                    <div class="stats-value" style="color: #8b5cf6;">
                        ${{ number_format(abs($totalAllocated - $totalWithdrawn), 2) }}
                    </div>
                </div>
            </div>
        </div>

        <!-- Second Row of Statistics -->
        <div class="row mb-4">
            <!-- <div class="col-md-4 col-sm-6">
                <div class="stats-card" style="border-left-color: #8b5cf6;">
                    <div class="stats-icon">
                        <i class="fas fa-balance-scale" style="color: #8b5cf6;"></i>
                    </div>
                    <div class="stats-label">Net Position</div>
                    <div class="stats-value" style="color: #8b5cf6;">
                        ${{ number_format(abs($totalAllocated - $totalWithdrawn), 2) }}
                    </div>
                </div>
            </div> -->
        </div>

        <!-- Partner Table -->
        <div class="partner-table">
            <div class="card-body p-0">
                <div class="toolbar">
                    <div class="search-box">
                        <i class="fas fa-search"></i>
                        <input type="text" id="searchInput" class="form-control" placeholder="Search partner by name or code...">
                    </div>
                    <div class="toolbar-hint">
                        <i class="fas fa-info-circle"></i> Click on partner name to view detailed ledger
                    </div>
                </div>
                
                <div class="table-responsive">
                    <table class="table mb-0" id="partnerTable">
                        <thead>
                            <tr>
                                <th width="5%">#</th>
                                <th width="28%">Partner Name</th>
                                <th width="17%" class="text-end">Opening Balance</th>
                                <th width="17%" class="text-end">Total Withdrawn</th>
                                <th width="10%" class="text-center">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($partnerBalances as $index => $balance)
                            @php
                                $percentageUsed = $balance->total_allocated > 0 
                                    ? ($balance->total_withdrawn / $balance->total_allocated) * 100 
                                    : 0;
                            @endphp
                            <tr>
                                <td>{{ $index + 1 }}</td>
                                <td>
                                    <a href="{{ route('ledger.detail', $balance->partner->id) }}" class="partner-link">
                                        <i class="fas fa-arrow-right"></i>
                                        {{ $balance->partner->full_name }}
                                        @if($balance->partner->partner_code)
                                            <span class="partner-code">({{ $balance->partner->partner_code }})</span>
                                        @endif
                                    </a>
                                    @if($percentageUsed > 0)
                                    <div class="progress-wrapper">
                                        <div class="progress">
                                            <div class="progress-bar" role="progressbar" 
                                                 style="width: {{ min($percentageUsed, 100) }}%; background: #3b82f6;" 
                                                 aria-valuenow="{{ $percentageUsed }}" 
                                                 aria-valuemin="0" 
                                                 aria-valuemax="100">
                                            </div>
                                        </div>
                                        <span class="progress-label">{{ number_format($percentageUsed, 1) }}% withdrawn</span>
                                    </div>
                                    @endif
                                </td>
                                <td class="text-end">
                                    <span class="{{ $balance->opening_balance >= 0 ? 'amount-positive' : 'amount-negative' }}">
                                        ${{ number_format(abs($balance->opening_balance), 2) }}
                                        @if($balance->opening_balance < 0)
                                            <span class="balance-badge badge-debit">Dr</span>
                                        @endif
                                    </span>
                                </td>
                                <td class="text-end">
                                    <span class="amount-negative">
                                        ${{ number_format($balance->total_withdrawn, 2) }}
                                    </span>
                                    @if($balance->total_withdrawn > 0)
                                        <i class="fas fa-arrow-down text-danger ms-1" style="font-size: 11px;"></i>
                                    @endif
                                </td>
                                <td class="text-center">
                                    <a href="{{ route('ledger.detail', $balance->partner->id) }}" class="btn-view">
                                        <i class="fas fa-eye"></i> View
                                    </a>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="6">
                                    <div class="empty-state">
                                        <i class="fas fa-folder-open"></i>
                                        <h4>No Partner Data Found</h4>
                                        <p>There are no partner balances to display at the moment.</p>
                                    </div>
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                        @if(count($partnerBalances) > 0)
                        <tfoot>
                            <tr class="total-row">
                                <td colspan="2" class="total-label text-end">Grand Totals:</td>
                                <td class="text-end total-value">
                                    ${{ number_format(collect($partnerBalances)->sum('opening_balance'), 2) }}
                                </td>
                                <td class="text-end total-value" style="color: #ef4444;">
                                    ${{ number_format($totalWithdrawn, 2) }}
                                </td>
                                <td></td>
                            </tr>
                        </tfoot>
                        @endif
                    </table>
                </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 table = $('#partnerTable').DataTable({
            pageLength: 10,
            lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
            order: [[2, 'asc']], 
            language: {
                search: "",
                searchPlaceholder: "Search partner...",
                lengthMenu: "Show _MENU_ entries",
                info: "Showing _START_ to _END_ of _TOTAL_ partners",
                infoEmpty: "No partners found",
                infoFiltered: "(filtered from _MAX_ total partners)",
                zeroRecords: "No matching partners found",
                paginate: {
                    first: '<i class="fas fa-angle-double-left"></i>',
                    last: '<i class="fas fa-angle-double-right"></i>',
                    previous: '<i class="fas fa-angle-left"></i>',
                    next: '<i class="fas fa-angle-right"></i>'
                }
            },
            dom: 'lfrtip',
            initComplete: function() {
                var searchInput = $('#partnerTable_filter input');
                searchInput.hide();
                $('#searchInput').on('keyup', function() {
                    table.search(this.value).draw();
                });
            }
        });

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

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

    function exportToExcel() {
        var table = document.getElementById('partnerTable');
        var html = table.outerHTML;
        var url = 'data:application/vnd.ms-excel,' + encodeURIComponent(html);
        var downloadLink = document.createElement('a');
        downloadLink.href = url;
        downloadLink.download = 'partner_ledger_overview.xls';
        document.body.appendChild(downloadLink);
        downloadLink.click();
        document.body.removeChild(downloadLink);
        
        toastr.info('Exporting to Excel...');
    }
</script>

@endsection