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

@section('content')

{{-- 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-exclamation-circle-fill text-danger fs-2 mb-1"></i>
            <div class="fs-2 fw-bold text-danger">৳{{ 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-dark text-center py-3">
            <i class="bi bi-clock-history text-dark fs-2 mb-1"></i>
            <div class="fs-2 fw-bold text-dark">৳{{ number_format($overdueAmt, 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-warning text-center py-3">
            <i class="bi bi-people text-warning fs-2 mb-1"></i>
            <div class="fs-2 fw-bold">{{ $invoices->total() }}</div>
            <div class="small text-muted">বকেয়া গ্রাহক (ইনভয়েস)</div>
        </div>
    </div>
</div>

{{-- Quick links --}}
<div class="d-flex gap-2 mb-4">
    <a href="{{ route('admin.invoices.index') }}" class="btn btn-outline-primary btn-sm">
        <i class="bi bi-list me-1"></i>সব ইনভয়েস
    </a>
    <a href="{{ route('admin.invoices.due-report') }}" class="btn btn-danger btn-sm">
        <i class="bi bi-exclamation-circle me-1"></i>বকেয়া রিপোর্ট
    </a>
</div>

{{-- Filter & Bulk SMS --}}
<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-4">
                <input type="text" name="search" value="{{ request('search') }}"
                    class="form-control form-control-sm" placeholder="গ্রাহকের নাম বা ফোন...">
            </div>
            <div class="col-md-3">
                <div class="form-check form-switch mt-1">
                    <input class="form-check-input" type="checkbox" name="overdue_only" id="overdueOnly"
                        value="1" {{ request('overdue_only') ? 'checked' : '' }}>
                    <label class="form-check-label small" for="overdueOnly">শুধু মেয়াদোত্তীর্ণ</label>
                </div>
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-primary btn-sm w-100"><i class="bi bi-search me-1"></i>ফিল্টার</button>
            </div>
            <div class="col-md-1">
                <a href="{{ route('admin.invoices.due-report') }}" class="btn btn-outline-secondary btn-sm w-100"><i class="bi bi-x"></i></a>
            </div>
        </form>
    </div>
</div>

{{-- Bulk SMS Form --}}
<form method="POST" action="{{ route('admin.invoices.bulk-reminder') }}" id="bulkForm">
    @csrf

    <div class="card stat-card">
        <div class="card-header bg-white border-0 pt-3 d-flex justify-content-between align-items-center">
            <h6 class="fw-semibold mb-0">বকেয়া তালিকা</h6>
            <div class="d-flex gap-2 align-items-center">
                <div class="form-check me-2">
                    <input class="form-check-input" type="checkbox" id="selectAll">
                    <label class="form-check-label small" for="selectAll">সব বেছে নিন</label>
                </div>
                <button type="submit" class="btn btn-warning btn-sm fw-semibold">
                    <i class="bi bi-phone me-1"></i>বাল্ক SMS রিমাইন্ডার
                </button>
            </div>
        </div>
        <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 width="40px"></th>
                            <th>গ্রাহক</th>
                            <th>ইনভয়েস</th>
                            <th>মোট বিল</th>
                            <th class="text-danger">বকেয়া</th>
                            <th>স্ট্যাটাস</th>
                            <th>শেষ তারিখ</th>
                            <th>একশন</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($invoices as $inv)
                        <tr class="{{ $inv->status === 'overdue' ? 'table-danger' : '' }}">
                            <td>
                                <input type="checkbox" name="invoice_ids[]" value="{{ $inv->id }}"
                                    class="form-check-input invoice-check">
                            </td>
                            <td>
                                <div class="fw-semibold">{{ $inv->customer->name }}</div>
                                <small class="text-muted">{{ $inv->customer->phone }}</small>
                            </td>
                            <td>
                                <a href="{{ route('admin.invoices.show', $inv) }}" class="text-decoration-none">
                                    {{ $inv->invoice_number }}
                                </a>
                            </td>
                            <td>৳{{ number_format($inv->total_amount, 0) }}</td>
                            <td class="fw-bold text-danger fs-6">৳{{ number_format($inv->due_amount, 0) }}</td>
                            <td>
                                <span class="badge bg-{{ $inv->status_color }}">{{ $inv->status_label }}</span>
                            </td>
                            <td>
                                @if($inv->due_date)
                                    <small class="{{ $inv->due_date->isPast() ? 'text-danger fw-bold' : 'text-muted' }}">
                                        {{ $inv->due_date->format('d M Y') }}
                                        @if($inv->due_date->isPast())
                                            <span class="badge bg-danger ms-1">মেয়াদ শেষ</span>
                                        @endif
                                    </small>
                                @else
                                    <span class="text-muted small">—</span>
                                @endif
                            </td>
                            <td>
                                <div class="d-flex gap-1">
                                    <a href="{{ route('admin.invoices.show', $inv) }}"
                                        class="btn btn-sm btn-outline-primary" title="বিস্তারিত">
                                        <i class="bi bi-eye"></i>
                                    </a>
                                    <form method="POST" action="{{ route('admin.invoices.send-reminder', $inv) }}">
                                        @csrf
                                        <button type="submit" class="btn btn-sm btn-outline-warning" title="SMS পাঠান">
                                            <i class="bi bi-phone"></i>
                                        </button>
                                    </form>
                                </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($invoices->hasPages())
            <div class="card-footer bg-white border-0">{{ $invoices->links() }}</div>
        @endif
    </div>
</form>

@push('scripts')
<script>
document.getElementById('selectAll').addEventListener('change', function() {
    document.querySelectorAll('.invoice-check').forEach(c => c.checked = this.checked);
});
</script>
@endpush
@endsection