@extends('layouts.app')

@section('title', 'Manager Dashboard')

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="card border-0 shadow-sm" style="border-radius: 15px;">
                <div class="card-header text-white" style="background-color: #2F4256; border-radius: 15px 15px 0 0;">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h2 class="mb-0">
                                <i class="fas fa-user-tie mr-2"></i>
                                Manager Dashboard
                            </h2>
                            <p class="mb-0 mt-2 opacity-75">Welcome back, {{ $manager->name }}!</p>
                        </div>
                        <div class="col-md-4 text-right">
                            <div class="text-white-50">
                                <small>
                                    <i class="fas fa-calendar-alt mr-1"></i>
                                    {{ now()->format('F d, Y') }}
                                </small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <!-- Team Size -->
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h6 class="card-title text-muted mb-1">Team Size</h6>
                            <h3 class="mb-0 text-primary">
                                <i class="fas fa-users mr-2"></i>
                                {{ $stats['team_size'] }}
                            </h3>
                            <small class="text-muted">{{ $stats['active_collectors'] }} collectors</small>
                        </div>
                        <div class="text-primary">
                            <i class="fas fa-users fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Total Clients -->
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h6 class="card-title text-muted mb-1">Total Clients</h6>
                            <h3 class="mb-0 text-success">
                                <i class="fas fa-user-friends mr-2"></i>
                                {{ $stats['total_clients'] }}
                            </h3>
                            <small class="text-muted">{{ $stats['active_clients'] }} active</small>
                        </div>
                        <div class="text-success">
                            <i class="fas fa-user-friends fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Pending Bills -->
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h6 class="card-title text-muted mb-1">Pending Bills</h6>
                            <h3 class="mb-0 text-warning">
                                <i class="fas fa-file-invoice mr-2"></i>
                                {{ $stats['pending_bills'] }}
                            </h3>
                            <small class="text-muted">Need attention</small>
                        </div>
                        <div class="text-warning">
                            <i class="fas fa-file-invoice fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Monthly Revenue -->
        <div class="col-lg-3 col-md-6 mb-3">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex align-items-center">
                        <div class="flex-grow-1">
                            <h6 class="card-title text-muted mb-1">Monthly Revenue</h6>
                            <h3 class="mb-0 text-info">
                                <i class="fas fa-chart-line mr-2"></i>
                                ৳{{ number_format($stats['monthly_revenue'], 2) }}
                            </h3>
                            <small class="text-muted">This month</small>
                        </div>
                        <div class="text-info">
                            <i class="fas fa-chart-line fa-2x"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Financial Summary -->
    <div class="row mb-4">
        <div class="col-lg-4 col-md-6 mb-3">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-light">
                    <h6 class="mb-0">
                        <i class="fas fa-money-bill-wave text-success mr-2"></i>
                        Monthly Collection
                    </h6>
                </div>
                <div class="card-body text-center">
                    <h4 class="text-success">৳{{ number_format($financialSummary['monthly_collection'], 2) }}</h4>
                    <small class="text-muted">Total collected this month</small>
                </div>
            </div>
        </div>

        <div class="col-lg-4 col-md-6 mb-3">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-light">
                    <h6 class="mb-0">
                        <i class="fas fa-piggy-bank text-primary mr-2"></i>
                        Monthly Deposits
                    </h6>
                </div>
                <div class="card-body text-center">
                    <h4 class="text-primary">৳{{ number_format($financialSummary['monthly_deposits'], 2) }}</h4>
                    <small class="text-muted">Approved deposits this month</small>
                </div>
            </div>
        </div>

        <div class="col-lg-4 col-md-6 mb-3">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-light">
                    <h6 class="mb-0">
                        <i class="fas fa-receipt text-warning mr-2"></i>
                        Monthly Expenses
                    </h6>
                </div>
                <div class="card-body text-center">
                    <h4 class="text-warning">৳{{ number_format($financialSummary['monthly_expenses'], 2) }}</h4>
                    <small class="text-muted">Approved expenses this month</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Main Content Row -->
    <div class="row">
        <!-- Team Performance -->
        <div class="col-lg-8 mb-4">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-bottom">
                    <h5 class="mb-0">
                        <i class="fas fa-chart-bar text-primary mr-2"></i>
                        All Branch Collectors Performance
                    </h5>
                    <small class="text-muted">Collection performance by collector across all branches</small>
                </div>
                <div class="card-body">
                    @if(count($teamPerformance) > 0)
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead class="bg-light">
                                    <tr>
                                        <th>Collector</th>
                                        <th>Branch</th>
                                        <th>Bills</th>
                                        <th>Collection Rate</th>
                                        <th>Collected Amount</th>
                                        <th>Pending Amount</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($teamPerformance as $perf)
                                        <tr>
                                            <td>
                                                <div>
                                                    <strong>{{ $perf['collector_name'] }}</strong>
                                                    <br>
                                                    <small class="text-muted">ID: {{ $perf['employee_id'] ?? 'N/A' }}</small>
                                                </div>
                                            </td>
                                            <td>
                                                <div>
                                                    <span class="badge badge-info">{{ $perf['branch_name'] }}</span>
                                                </div>
                                            </td>
                                            <td>
                                                <div>
                                                    <span class="text-success">{{ $perf['paid_bills'] }}</span> / 
                                                    <span class="text-muted">{{ $perf['total_bills'] }}</span>
                                                </div>
                                            </td>
                                            <td>
                                                <div class="d-flex align-items-center">
                                                    <div class="progress flex-grow-1 mr-2" style="height: 8px;">
                                                        <div class="progress-bar bg-{{ $perf['collection_rate'] >= 80 ? 'success' : ($perf['collection_rate'] >= 60 ? 'warning' : 'danger') }}" 
                                                             style="width: {{ $perf['collection_rate'] }}%"></div>
                                                    </div>
                                                    <small class="text-muted">{{ $perf['collection_rate'] }}%</small>
                                                </div>
                                            </td>
                                            <td>
                                                <strong class="text-success">৳{{ number_format($perf['collected_amount'], 2) }}</strong>
                                            </td>
                                            <td>
                                                <span class="text-warning">৳{{ number_format($perf['pending_amount'], 2) }}</span>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @else
                        <div class="text-center py-4">
                            <i class="fas fa-users fa-3x text-muted mb-3"></i>
                            <p class="text-muted">No team performance data available</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <!-- Pending Approvals -->
        <div class="col-lg-4 mb-4">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-bottom">
                    <h5 class="mb-0">
                        <i class="fas fa-clock text-warning mr-2"></i>
                        Pending Approvals
                    </h5>
                    <small class="text-muted">Requires your attention</small>
                </div>
                <div class="card-body">
                    <!-- Pending Deposits -->
                    <div class="mb-3">
                        <h6 class="text-primary">
                            <i class="fas fa-piggy-bank mr-1"></i>
                            Deposits ({{ $pendingApprovals['deposits']->count() }})
                        </h6>
                        @if($pendingApprovals['deposits']->count() > 0)
                            @foreach($pendingApprovals['deposits']->take(3) as $deposit)
                                <div class="d-flex justify-content-between align-items-center mb-2 p-2 bg-light rounded">
                                    <div>
                                        <small class="text-muted">{{ $deposit->collector->name ?? 'Unknown' }}</small>
                                        <br>
                                        <strong>৳{{ number_format($deposit->amount, 2) }}</strong>
                                    </div>
                                    <div>
                                        <button class="btn btn-sm btn-success" onclick="approveDeposit({{ $deposit->id }})">
                                            <i class="fas fa-check"></i>
                                        </button>
                                        <button class="btn btn-sm btn-danger" onclick="rejectDeposit({{ $deposit->id }})">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                </div>
                            @endforeach
                            @if($pendingApprovals['deposits']->count() > 3)
                                <small class="text-muted">And {{ $pendingApprovals['deposits']->count() - 3 }} more...</small>
                            @endif
                        @else
                            <p class="text-muted small">No pending deposits</p>
                        @endif
                    </div>

                    <!-- Pending Expenses -->
                    <div>
                        <h6 class="text-warning">
                            <i class="fas fa-receipt mr-1"></i>
                            Expenses ({{ $pendingApprovals['expenses']->count() }})
                        </h6>
                        @if($pendingApprovals['expenses']->count() > 0)
                            @foreach($pendingApprovals['expenses']->take(3) as $expense)
                                <div class="d-flex justify-content-between align-items-center mb-2 p-2 bg-light rounded">
                                    <div>
                                        <small class="text-muted">{{ $expense->collector->name ?? 'Unknown' }}</small>
                                        <br>
                                        <strong>৳{{ number_format($expense->amount, 2) }}</strong>
                                    </div>
                                    <div>
                                        <button class="btn btn-sm btn-success" onclick="approveExpense({{ $expense->id }})">
                                            <i class="fas fa-check"></i>
                                        </button>
                                        <button class="btn btn-sm btn-danger" onclick="rejectExpense({{ $expense->id }})">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                </div>
                            @endforeach
                            @if($pendingApprovals['expenses']->count() > 3)
                                <small class="text-muted">And {{ $pendingApprovals['expenses']->count() - 3 }} more...</small>
                            @endif
                        @else
                            <p class="text-muted small">No pending expenses</p>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Activities -->
    <div class="row">
        <div class="col-12">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-white border-bottom">
                    <h5 class="mb-0">
                        <i class="fas fa-history text-info mr-2"></i>
                        Recent Activities
                    </h5>
                    <small class="text-muted">Latest team activities</small>
                </div>
                <div class="card-body">
                    @if(count($recentActivities) > 0)
                        <div class="timeline">
                            @foreach($recentActivities as $activity)
                                <div class="timeline-item">
                                    <div class="timeline-marker">
                                        <i class="{{ $activity['icon'] }}"></i>
                                    </div>
                                    <div class="timeline-content">
                                        <h6 class="mb-1">{{ $activity['title'] }}</h6>
                                        <p class="mb-1 text-muted">{{ $activity['description'] }}</p>
                                        <small class="text-muted">
                                            <i class="fas fa-clock mr-1"></i>
                                            {{ \Carbon\Carbon::parse($activity['date'])->diffForHumans() }}
                                        </small>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-4">
                            <i class="fas fa-history fa-3x text-muted mb-3"></i>
                            <p class="text-muted">No recent activities</p>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.bg-gradient-primary {
    background: linear-gradient(135deg, #007bff, #0056b3) !important;
}

.card {
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}

.timeline {
    position: relative;
    padding-left: 30px;
}

.timeline-item {
    position: relative;
    margin-bottom: 20px;
}

.timeline-marker {
    position: absolute;
    left: -30px;
    top: 5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.timeline-content {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border-left: 3px solid #007bff;
}

.progress {
    background-color: #e9ecef;
}

.text-success { color: #28a745 !important; }
.text-warning { color: #ffc107 !important; }
.text-danger { color: #dc3545 !important; }
.text-info { color: #17a2b8 !important; }
.text-primary { color: #007bff !important; }

@media (max-width: 768px) {
    .card-header h2 {
        font-size: 1.5rem;
    }
    
    .timeline {
        padding-left: 20px;
    }
    
    .timeline-marker {
        left: -20px;
        width: 15px;
        height: 15px;
    }
}
</style>

<script>
function approveDeposit(depositId) {
    if (confirm('Are you sure you want to approve this deposit?')) {
        $.ajax({
            url: `/manager-dashboard/approve-deposit/${depositId}`,
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.success) {
                    location.reload();
                } else {
                    alert('Error: ' + response.error);
                }
            },
            error: function() {
                alert('An error occurred while approving the deposit.');
            }
        });
    }
}

function rejectDeposit(depositId) {
    const reason = prompt('Please provide a reason for rejection:');
    if (reason !== null) {
        $.ajax({
            url: `/manager-dashboard/reject-deposit/${depositId}`,
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: { reason: reason },
            success: function(response) {
                if (response.success) {
                    location.reload();
                } else {
                    alert('Error: ' + response.error);
                }
            },
            error: function() {
                alert('An error occurred while rejecting the deposit.');
            }
        });
    }
}

function approveExpense(expenseId) {
    if (confirm('Are you sure you want to approve this expense?')) {
        $.ajax({
            url: `/manager-dashboard/approve-expense/${expenseId}`,
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.success) {
                    location.reload();
                } else {
                    alert('Error: ' + response.error);
                }
            },
            error: function() {
                alert('An error occurred while approving the expense.');
            }
        });
    }
}

function rejectExpense(expenseId) {
    const reason = prompt('Please provide a reason for rejection:');
    if (reason !== null) {
        $.ajax({
            url: `/manager-dashboard/reject-expense/${expenseId}`,
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            data: { reason: reason },
            success: function(response) {
                if (response.success) {
                    location.reload();
                } else {
                    alert('Error: ' + response.error);
                }
            },
            error: function() {
                alert('An error occurred while rejecting the expense.');
            }
        });
    }
}
</script>
@endsection