@extends('layouts.app')
@section('title', 'বকেয়া গ্রাহক রিপোর্ট')
@section('page-title', 'বকেয়া গ্রাহক রিপোর্ট')

@section('content')

{{-- Report Nav --}}
<div class="d-flex gap-2 mb-4 flex-wrap">
    <a href="{{ route('admin.reports.sales') }}" class="btn btn-outline-primary btn-sm rounded-pill">
        <i class="bi bi-graph-up me-1"></i>বিক্রয়
    </a>
    <a href="{{ route('admin.reports.stock') }}" class="btn btn-outline-warning btn-sm rounded-pill">
        <i class="bi bi-fire me-1"></i>স্টক
    </a>
    <a href="{{ route('admin.reports.due-customers') }}" class="btn btn-danger btn-sm rounded-pill">
        <i class="bi bi-exclamation-circle me-1"></i>বকেয়া গ্রাহক
    </a>
    <a href="{{ route('admin.reports.delivery') }}" class="btn btn-outline-info btn-sm rounded-pill">
        <i class="bi bi-bicycle me-1"></i>ডেলিভারি
    </a>
</div>

{{-- Summary --}}
<div class="row g-3 mb-4">
    <div class="col-md-4">
        <div class="card stat-card border-start border-4 border-danger text-center py-3">
            <i class="bi bi-people-fill text-danger fs-2 mb-1"></i>
            <div class="fs-2 fw-bold text-danger">{{ $customers->total() }}</div>
            <div class="small text-muted">বকেয়া গ্রাহক</div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card stat-card border-start border-4 border-warning text-center py-3">
            <i class="bi bi-cash-stack text-warning fs-2 mb-1"></i>
            <div class="fs-2 fw-bold text-warning">৳{{ number_format($totalDue, 0) }}</div>
            <div class="small text-muted">মোট বকেয়া</div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card stat-card border-start border-4 border-primary text-center py-3">
            <i class="bi bi-person-exclamation text-primary fs-2 mb-1"></i>
            <div class="fs-2 fw-bold">
                ৳{{ $customers->total() > 0 ? number_format($totalDue / $customers->total(), 0) : 0 }}
            </div>
            <div class="small text-muted">গড় বকেয়া (প্রতি গ্রাহক)</div>
        </div>
    </div>
</div>

<div class="row g-4 mb-4">
    {{-- Top Due Customers Mini List --}}
    <div class="col-md-4">
        <div class="card stat-card h-100">
            <div class="card-header bg-white border-0 pt-3">
                <h6 class="fw-semibold mb-0"><i class="bi bi-trophy text-danger me-2"></i>সর্বোচ্চ বকেয়া</h6>
            </div>
            <div class="card-body pb-2">
                @foreach($topDue as $i => $c)
                <div class="d-flex justify-content-between align-items-center mb-3 pb-2 {{ $loop->last ? '' : 'border-bottom' }}">
                    <div class="d-flex align-items-center gap-2">
                        <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-white"
                             style="width:32px;height:32px;font-size:.8rem;background:{{ ['#dc3545','#fd7e14','#ffc107','#6c757d','#adb5bd'][$i] }}">
                            {{ $i + 1 }}
                        </div>
                        <div>
                            <div class="fw-semibold small">{{ $c->name }}</div>
                            <small class="text-muted">{{ $c->phone }}</small>
                        </div>
                    </div>
                    <div class="fw-bold text-danger">৳{{ number_format($c->due_balance, 0) }}</div>
                </div>
                @endforeach
            </div>
        </div>
    </div>

    {{-- Due Chart --}}
    <div class="col-md-8">
        <div class="card stat-card h-100">
            <div class="card-header bg-white border-0 pt-3">
                <h6 class="fw-semibold mb-0"><i class="bi bi-bar-chart text-danger me-2"></i>শীর্ষ বকেয়া গ্রাহক চার্ট</h6>
            </div>
            <div class="card-body">
                <canvas id="dueChart" height="140"></canvas>
            </div>
        </div>
    </div>
</div>

{{-- Filter --}}
<div class="card stat-card mb-4">
    <div class="card-body py-3">
        <form method="GET" class="row g-2 align-items-end">
            <div class="col-md-3">
                <input type="text" name="search" value="{{ request('search') }}"
                    class="form-control form-control-sm" placeholder="নাম বা ফোন নম্বর...">
            </div>
            <div class="col-md-2">
                <select name="area" class="form-select form-select-sm">
                    <option value="">সব এলাকা</option>
                    @foreach($areas as $area)
                        <option value="{{ $area }}" {{ request('area') === $area ? 'selected' : '' }}>{{ $area }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2">
                <input type="number" name="min_due" value="{{ request('min_due') }}"
                    class="form-control form-control-sm" placeholder="ন্যূনতম বকেয়া (৳)">
            </div>
            <div class="col-md-2">
                <select name="sort" class="form-select form-select-sm">
                    <option value="due_desc" {{ request('sort','due_desc') === 'due_desc' ? 'selected' : '' }}>বেশি বকেয়া আগে</option>
                    <option value="due_asc"  {{ request('sort') === 'due_asc'  ? 'selected' : '' }}>কম বকেয়া আগে</option>
                    <option value="name_asc" {{ request('sort') === 'name_asc' ? 'selected' : '' }}>নাম অনুযায়ী</option>
                </select>
            </div>
            <div class="col-md-1">
                <button type="submit" class="btn btn-danger btn-sm w-100"><i class="bi bi-search"></i></button>
            </div>
            <div class="col-md-1">
                <a href="{{ route('admin.reports.due-customers') }}" class="btn btn-outline-secondary btn-sm w-100"><i class="bi bi-x"></i></a>
            </div>
        </form>
    </div>
</div>

{{-- Due Customers Table --}}
<div class="card stat-card">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0 align-middle">
                <thead class="table-light">
                    <tr>
                        <th>#</th>
                        <th>গ্রাহক</th>
                        <th>এলাকা</th>
                        <th>ধরন</th>
                        <th>ডিপোজিট</th>
                        <th class="text-danger">বকেয়া</th>
                        <th>সাম্প্রতিক ইনভয়েস</th>
                        <th>একশন</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($customers as $c)
                    <tr>
                        <td class="text-muted small">{{ $customers->firstItem() + $loop->index }}</td>
                        <td>
                            <div class="fw-semibold">{{ $c->name }}</div>
                            <small class="text-muted">{{ $c->phone }}</small>
                        </td>
                        <td>{{ $c->area ?? '—' }}</td>
                        <td>
                            <span class="badge {{ $c->type === 'corporate' ? 'bg-info' : 'bg-secondary' }}">
                                {{ $c->type_label }}
                            </span>
                        </td>
                        <td class="text-success fw-semibold">৳{{ number_format($c->deposit_amount, 0) }}</td>
                        <td>
                            <span class="fw-bold text-danger fs-6">৳{{ number_format($c->due_balance, 0) }}</span>
                        </td>
                        <td>
                            @foreach($c->invoices->take(2) as $inv)
                                <span class="badge bg-{{ $inv->status_color }} me-1">
                                    {{ $inv->invoice_number }} (৳{{ number_format($inv->due_amount, 0) }})
                                </span>
                            @endforeach
                        </td>
                        <td>
                            <div class="d-flex gap-1">
                                <a href="{{ route('admin.customers.show', $c) }}" class="btn btn-sm btn-outline-primary">
                                    <i class="bi bi-eye"></i>
                                </a>
                                <a href="{{ route('admin.invoices.due-report', ['search' => $c->phone]) }}"
                                   class="btn btn-sm btn-outline-danger" title="ইনভয়েস দেখুন">
                                    <i class="bi bi-receipt"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" class="text-center text-success py-5">
                            <i class="bi bi-check-circle-fill fs-1 d-block mb-2 opacity-50"></i>
                            কোনো বকেয়া গ্রাহক নেই!
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    @if($customers->hasPages())
        <div class="card-footer bg-white border-0">{{ $customers->links() }}</div>
    @endif
</div>

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
new Chart(document.getElementById('dueChart'), {
    type: 'bar',
    data: {
        labels: @json($topDue->pluck('name')->toArray()),
        datasets: [{
            label: 'বকেয়া (৳)',
            data: @json($topDue->pluck('due_balance')->map(fn($v) => round($v, 2))->toArray()),
            backgroundColor: ['#dc3545','#fd7e14','#ffc107','#6c757d','#adb5bd'],
            borderRadius: 6,
        }]
    },
    options: {
        indexAxis: 'y',
        responsive: true,
        plugins: { legend: { display: false } },
        scales: { x: { beginAtZero: true } }
    }
});
</script>
@endpush